in src/nodes/shared/depth-estimation-viewer.ts [142:217]
async runWithInputs(inputs: Inputs, services: Services) {
const { depthData, image, displacement } = inputs;
this.dispatchEvent(
new CustomEvent("outputs", {
detail: {
error: {
title: "Error",
message: "No segments found",
},
},
})
);
this.services = services;
if (depthData === undefined || depthData?.length === 0) {
this.dispatchEvent(
new CustomEvent("outputs", {
detail: {
error: {
title: "Error",
message: "No segments found",
},
},
})
);
}
if (
this.cachedDepthData &&
this.cachedOutputImage &&
this.cachedInputImage === image.canvasId
) {
if (this.material && this.cachedDisplacement !== displacement) {
// Only update displacement
this.material.displacementScale = displacement;
this.material.needsUpdate = true;
}
this.updateOutputImage();
return;
}
if (image?.canvasId !== undefined) {
const imgCanvas = services.resourceService.get(
image.canvasId
) as HTMLCanvasElement;
this.inputImage = imgCanvas;
// Create plane and rescale it so that max(w, h) = 1
const [w, h] = [imgCanvas.width, imgCanvas.height];
const [pw, ph] = w > h ? [1, h / w] : [w / h, 1];
const geometry = new THREE.PlaneGeometry(pw, ph, w, h);
const map = new THREE.CanvasTexture(this.inputImage);
map.colorSpace = THREE.SRGBColorSpace;
this.material = new THREE.MeshStandardMaterial({
map,
side: THREE.DoubleSide,
});
this.plane.geometry = geometry;
this.plane.material = this.material;
this.material.displacementScale = displacement;
if (depthData?.[0]) {
this.material.displacementMap = new THREE.CanvasTexture(
depthData[0].depth.toCanvas()
);
}
this.material.needsUpdate = true;
}
this.cachedDepthData = depthData;
this.cachedInputImage = image?.canvasId;
this.updateOutputImage();
}