Skip to content

Commit

Permalink
abstraction works
Browse files Browse the repository at this point in the history
  • Loading branch information
@YertleTurtleGit
YertleTurtleGit committed Sep 11, 2021
1 parent a6ee814 commit 2d03ba8
Show file tree
Hide file tree
Showing 2 changed files with 111 additions and 95 deletions.
22 changes: 12 additions & 10 deletions main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,7 @@ async function loadInputImages() {
if (inputImageId > thisInputImageId) return;

if (DOM.getCalculationType() === CALCULATION_TYPE.PHOTOMETRIC_STEREO) {
DOM_ELEMENT.PHOTOMETRIC_STEREO_IMAGE_AREA.style.display = "inherit";
DOM_ELEMENT.PHOTOMETRIC_STEREO_IMAGE_AREA.style.display = "initial";
DOM_ELEMENT.SPHERICAL_GRADIENT_IMAGE_AREA.style.display = "none";

imagePromises = [
Expand All @@ -194,7 +194,7 @@ async function loadInputImages() {
DOM.getCalculationType() === CALCULATION_TYPE.SPHERICAL_GRADIENT
) {
DOM_ELEMENT.PHOTOMETRIC_STEREO_IMAGE_AREA.style.display = "none";
DOM_ELEMENT.SPHERICAL_GRADIENT_IMAGE_AREA.style.display = "inherit";
DOM_ELEMENT.SPHERICAL_GRADIENT_IMAGE_AREA.style.display = "initial";

imagePromises = [
DOM.loadHTMLImage(DOM_ELEMENT.SPHERICAL_GRADIENT_IMAGE_000),
Expand Down Expand Up @@ -252,7 +252,7 @@ async function inputOrCalculationTypeChange() {
DOM_ELEMENT.DEPTH_MAP_GROUND_TRUTH_IMAGE.style.display = "none";
DOM_ELEMENT.NORMAL_MAP_ACCURACY_AREA.style.display = "none";
DOM_ELEMENT.DEPTH_MAP_ACCURACY_AREA.style.display = "none";
DOM_ELEMENT.CALCULATION_TYPE_SELECT.style.display = "inherit";
DOM_ELEMENT.CALCULATION_TYPE_SELECT.style.display = "initial";

DOM_ELEMENT.NORMAL_MAP_RESOLUTION_INPUT.disabled = false;
DOM_ELEMENT.CALCULATION_TYPE_SELECT.disabled = false;
Expand All @@ -266,9 +266,9 @@ async function inputOrCalculationTypeChange() {
DOM.setImagesToRapidGradientTest();
}
} else if (DOM.getInputType() === INPUT_TYPE.FILE) {
DOM_ELEMENT.FILE_BROWSE_INPUT.style.display = "inherit";
DOM_ELEMENT.FILE_BROWSE_INPUT.style.display = "initial";
} else if (DOM.getInputType() === INPUT_TYPE.WEBCAM) {
DOM_ELEMENT.WEBCAM_AREA.style.display = "inherit";
DOM_ELEMENT.WEBCAM_AREA.style.display = "initial";

if (DOM.getCalculationType() === CALCULATION_TYPE.PHOTOMETRIC_STEREO) {
DOM.setPhotometricStereoInputImages(
Expand All @@ -291,11 +291,11 @@ async function inputOrCalculationTypeChange() {
} else if (DOM.getInputType() === INPUT_TYPE.RENDER) {
DOM_ELEMENT.CALCULATION_TYPE_SELECT.selectedIndex = 0; // photometric stereo
DOM_ELEMENT.CALCULATION_TYPE_SELECT.style.display = "none";
DOM_ELEMENT.INPUT_RENDER_AREA.style.display = "inherit";
DOM_ELEMENT.NORMAL_MAP_GROUND_TRUTH_IMAGE.style.display = "inherit";
DOM_ELEMENT.DEPTH_MAP_GROUND_TRUTH_IMAGE.style.display = "inherit";
DOM_ELEMENT.NORMAL_MAP_ACCURACY_AREA.style.display = "inherit";
DOM_ELEMENT.DEPTH_MAP_ACCURACY_AREA.style.display = "inherit";
DOM_ELEMENT.INPUT_RENDER_AREA.style.display = "initial";
DOM_ELEMENT.NORMAL_MAP_GROUND_TRUTH_IMAGE.style.display = "initial";
DOM_ELEMENT.DEPTH_MAP_GROUND_TRUTH_IMAGE.style.display = "initial";
DOM_ELEMENT.NORMAL_MAP_ACCURACY_AREA.style.display = "initial";
DOM_ELEMENT.DEPTH_MAP_ACCURACY_AREA.style.display = "initial";

DOM_ELEMENT.RENDER_LIGHT_POLAR_DEG_INPUT.value =
DOM_ELEMENT.POLAR_ANGLE_DEG_INPUT.value;
Expand Down Expand Up @@ -604,6 +604,8 @@ Array.from(document.getElementsByClassName("chartButton")).forEach(
);

inputOrCalculationTypeChange();
// TODO Fix initial update and thus, remove second call.
setTimeout(inputOrCalculationTypeChange, 1000);

Array.from(
DOM_ELEMENT.PIPELINE_AREA.getElementsByClassName("userInput")
Expand Down
184 changes: 99 additions & 85 deletions virtual-input-renderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,16 @@ class VirtualInputRenderer {
throw new Error("Cannot call an abstract method.");
}

/**
* @abstract
* @public
* @throws {Error} Cannot call an abstract method.
* @returns {Promise<HTMLImageElement[]>}
*/
async render() {
throw new Error("Cannot call an abstract method.");
}

/**
* @public
* @param {number} cameraDistance
Expand All @@ -58,7 +68,7 @@ class VirtualInputRenderer {
}

/**
* @private
* @protected
* @param {number} renderId
* @returns {boolean}
*/
Expand Down Expand Up @@ -189,7 +199,7 @@ class VirtualInputRenderer {
}

/**
* @private
* @protected
*/
async updateCameraPlanes() {
if (this.object) {
Expand All @@ -200,11 +210,9 @@ class VirtualInputRenderer {
let min = boundingBox.min.z;
let max = boundingBox.max.z;

const minPlaneDistance = 0.5;

if (min + minPlaneDistance >= max) {
min = -minPlaneDistance;
max = minPlaneDistance;
if (min + VirtualInputRenderer.MIN_CAMERA_PLANES_DISTANCE >= max) {
min = -VirtualInputRenderer.MIN_CAMERA_PLANES_DISTANCE;
max = VirtualInputRenderer.MIN_CAMERA_PLANES_DISTANCE;
}

this.camera.near = min + this.cameraDistance;
Expand All @@ -217,64 +225,6 @@ class VirtualInputRenderer {
}
}

/**
* @public
* @returns {Promise<HTMLImageElement[]>}
*/
async render() {
this.renderId++;
const renderId = this.renderId;

await this.initialize();

if (this.isRenderObsolete(renderId)) return;

const lightCount = this.lights.length;
const renderPromises = [];

for (let i = 0; i < lightCount; i++) {
this.lightHelpers[i].visible = false;
}
this.cameraHelper.visible = false;

for (let i = 0; i < lightCount; i++) {
for (let i = 0; i < lightCount; i++) {
this.lights[i].visible = false;
}
this.lights[i].visible = true;
this.lights[i].intensity = 25 * (this.cameraDistance / 8);

if (this.isRenderObsolete(renderId)) return;

this.renderer.render(this.scene, this.camera);
const renderImageDataUrl = this.renderer.domElement.toDataURL();

renderPromises.push(
new Promise((resolve) => {
setTimeout(() => {
const image = new Image();
image.addEventListener("load", () => {
resolve(image);
});
image.src = renderImageDataUrl;
});
})
);
}

for (let i = 0; i < lightCount; i++) {
this.lights[i].visible = true;
this.lightHelpers[i].visible = true;
this.lights[i].intensity = 0.25;
}
this.cameraHelper.visible = true;

this.updateCameraPlanes();
this.uiRenderer.render(this.scene, this.uiCamera);

return Promise.all(renderPromises);
}

/**
* @protected
*/
Expand All @@ -290,14 +240,15 @@ class VirtualInputRenderer {
75,
this.uiCanvas.clientWidth / this.uiCanvas.clientHeight
);
// TODO Remove hard code.
this.uiCamera.position.set(10, 2, 10 / 2);
this.uiCamera.lookAt(new THREE.Vector3(0, 0, this.cameraDistance / 3));
this.uiCamera.rotateZ(180 * (Math.PI / 180));

this.cameraHelper = new THREE.CameraHelper(this.camera);
this.scene.add(this.cameraHelper);

// TODO: remove preserve to enable swapping for better performance
// TODO Disable preserved drawing buffers to enable swapping for better performance.
this.renderer = new THREE.WebGLRenderer({
preserveDrawingBuffer: true,
});
Expand Down Expand Up @@ -374,6 +325,8 @@ class VirtualInputRenderer {
this.updateCameraPlanes();
}
}
/** @constant */
VirtualInputRenderer.MIN_CAMERA_PLANES_DISTANCE = 0.5;
/** @type {VirtualInputRenderer[]} */
VirtualInputRenderer.instances = [];

Expand All @@ -393,8 +346,8 @@ class PhotometricStereoRenderer extends VirtualInputRenderer {
}

/**
* @protected
* @override
* @protected
*/
async initialize() {
if (this.initialized || (!this.initialized && this.initializing)) {
Expand All @@ -404,30 +357,88 @@ class PhotometricStereoRenderer extends VirtualInputRenderer {

super.initialize();

super.lights = new Array(8);
super.lightHelpers = new Array(8);

const initLightDistance = 8; // TODO Remove hard coding.
this.lights = new Array(8);
this.lightHelpers = new Array(8);

for (let i = 0; i < 8; i++) {
super.lights[i] = new THREE.PointLight("white", 0.25);
super.lights[i].position.set(0, 0, initLightDistance);
super.lights[i].castShadow = true;
super.lights[i].distance = initLightDistance * 2;
super.lights[i].shadow.mapSize.width = 512 * 2;
super.lights[i].shadow.mapSize.height = 512 * 2;
super.lightHelpers[i] = new THREE.PointLightHelper(
super.lights[i],
0.2
);
super.scene.add(this.lights[i]);
super.scene.add(this.lightHelpers[i]);
// TODO Remove hard code.
this.lights[i] = new THREE.PointLight("white", 0.25);
this.lights[i].castShadow = true;
// TODO Remove hard code.
this.lights[i].shadow.mapSize.width = 512 * 2;
// TODO Remove hard code.
this.lights[i].shadow.mapSize.height = 512 * 2;
// TODO Remove hard code.
this.lightHelpers[i] = new THREE.PointLightHelper(this.lights[i], 0.2);
this.scene.add(this.lights[i]);
this.scene.add(this.lightHelpers[i]);
}

this.initialized = true;
this.initializing = false;
}

/**
* @override
* @public
* @returns {Promise<HTMLImageElement[]>}
*/
async render() {
this.renderId++;
const renderId = this.renderId;

await this.initialize();

if (this.isRenderObsolete(renderId)) return;

const lightCount = this.lights.length;
const renderPromises = [];

for (let i = 0; i < lightCount; i++) {
this.lightHelpers[i].visible = false;
}
this.cameraHelper.visible = false;

for (let i = 0; i < lightCount; i++) {
for (let i = 0; i < lightCount; i++) {
this.lights[i].visible = false;
}
this.lights[i].visible = true;
// TODO Remove hard code.
this.lights[i].intensity = 25 * (this.cameraDistance / 8);

if (this.isRenderObsolete(renderId)) return;

this.renderer.render(this.scene, this.camera);
const renderImageDataUrl = this.renderer.domElement.toDataURL();

renderPromises.push(
new Promise((resolve) => {
setTimeout(() => {
const image = new Image();
image.addEventListener("load", () => {
resolve(image);
});
image.src = renderImageDataUrl;
});
})
);
}

for (let i = 0; i < lightCount; i++) {
this.lights[i].visible = true;
this.lightHelpers[i].visible = true;
// TODO Remove hard code.
this.lights[i].intensity = 0.25;
}
this.cameraHelper.visible = true;

this.updateCameraPlanes();
this.uiRenderer.render(this.scene, this.uiCamera);

return Promise.all(renderPromises);
}

/**
* @public
* @param {number} lightPolarAngleDeg
Expand All @@ -445,6 +456,7 @@ class PhotometricStereoRenderer extends VirtualInputRenderer {
*/
async setLightDistance(lightDistance) {
await this.initialize();

this.lightDistance = lightDistance;
for (let i = 0; i < this.lights.length; i++) {
this.lights[i].distance = this.lightDistance * 2;
Expand All @@ -453,6 +465,8 @@ class PhotometricStereoRenderer extends VirtualInputRenderer {
}

async updateLightPositions() {
await this.initialize();

const correctedLightPolarDegree = 360 - this.lightPolarAngleDeg;

/**
Expand All @@ -475,9 +489,9 @@ class PhotometricStereoRenderer extends VirtualInputRenderer {
light.position.set(lightVector.x, lightVector.y, lightVector.z);
};

const lightCount = super.lights.length;
const lightCount = this.lights.length;
for (let i = 0; i < lightCount; i++) {
setSingleLightAzimuthalAngle(super.lights[i], i * (360 / lightCount));
setSingleLightAzimuthalAngle(this.lights[i], i * (360 / lightCount));
}
}
}
Expand Down

0 comments on commit 2d03ba8

Please sign in to comment.