From b90ac49f2414e8f2dad26c8efd510fa251920d49 Mon Sep 17 00:00:00 2001 From: Tom Date: Tue, 6 May 2025 10:50:44 +0100 Subject: [PATCH] tweaks to outline viewer --- assets/js/outline-model-viewer/CustomOutlinePass.js | 13 ------------- assets/js/outline-model-viewer/OutlineViewer.js | 10 ++++++---- assets/js/projects_viewer_animation.js | 3 --- 3 files changed, 6 insertions(+), 20 deletions(-) diff --git a/assets/js/outline-model-viewer/CustomOutlinePass.js b/assets/js/outline-model-viewer/CustomOutlinePass.js index dbf7133..4f4e1f2 100644 --- a/assets/js/outline-model-viewer/CustomOutlinePass.js +++ b/assets/js/outline-model-viewer/CustomOutlinePass.js @@ -172,12 +172,6 @@ class CustomOutlinePass extends Pass { surfaceIdDiff += any(notEqual(surfaceValue, getSurfaceValue(0, e))) ? 1.0 : 0.0; surfaceIdDiff += any(notEqual(surfaceValue, getSurfaceValue(-e, 0))) ? 1.0 : 0.0; surfaceIdDiff += any(notEqual(surfaceValue, getSurfaceValue(0, -e))) ? 1.0 : 0.0; - - surfaceIdDiff += any(notEqual(surfaceValue, getSurfaceValue(e, e))) ? 1.0 : 0.0; - surfaceIdDiff += any(notEqual(surfaceValue, getSurfaceValue(e, -e))) ? 1.0 : 0.0; - surfaceIdDiff += any(notEqual(surfaceValue, getSurfaceValue(-e, e))) ? 1.0 : 0.0; - surfaceIdDiff += any(notEqual(surfaceValue, getSurfaceValue(-e, -e))) ? 1.0 : 0.0; - return surfaceIdDiff; } @@ -187,11 +181,6 @@ class CustomOutlinePass extends Pass { depthDiff += abs(depth - getPixelDepth(-1, 0)); depthDiff += abs(depth - getPixelDepth(0, 1)); depthDiff += abs(depth - getPixelDepth(0, -1)); - - depthDiff += abs(depth - getPixelDepth(1, 1)); - depthDiff += abs(depth - getPixelDepth(1, -1)); - depthDiff += abs(depth - getPixelDepth(-1, 1)); - depthDiff += abs(depth - getPixelDepth(-1, -1)); return depthDiff; } @@ -231,8 +220,6 @@ class CustomOutlinePass extends Pass { // Surface ID difference gl_FragColor = vec4(vec3(surfaceValueDiff), 1.0); } - - if (surfaceValueDiff != 0.0) surfaceValueDiff = 1.0; float outline; vec4 outlineColor = vec4(outlineColor, 1.0);; diff --git a/assets/js/outline-model-viewer/OutlineViewer.js b/assets/js/outline-model-viewer/OutlineViewer.js index a730655..5dc9c37 100644 --- a/assets/js/outline-model-viewer/OutlineViewer.js +++ b/assets/js/outline-model-viewer/OutlineViewer.js @@ -128,7 +128,7 @@ export class OutlineModelViewer extends HTMLElement { composer.addPass(effectFXAA); // Set over sampling ratio - this.updateEdgeThickness(1); + this.updateEdgeThickness(1 / window.devicePixelRatio); this.updatePixelRatio(window.devicePixelRatio); renderer.setSize(width, height, false); @@ -294,9 +294,11 @@ export class OutlineModelViewer extends HTMLElement { uniforms.debugVisualize.value = value; }); - gui.add(params, "edgeThickness", 1, 10).onChange(function (value) { - element.updateEdgeThickness(value); - }); + gui + .add(params, "edgeThickness", 1 / window.devicePixelRatio, 10) + .onChange(function (value) { + element.updateEdgeThickness(value); + }); gui.add(params, "pixelRatio", 1, 8, 1).onChange(function (value) { element.updatePixelRatio(value); diff --git a/assets/js/projects_viewer_animation.js b/assets/js/projects_viewer_animation.js index db42e83..cc3e36c 100644 --- a/assets/js/projects_viewer_animation.js +++ b/assets/js/projects_viewer_animation.js @@ -24,7 +24,6 @@ if (inline_viewer) { original.autoRotate = controls.autoRotate; controls.autoRotate = true; - inline_viewer.updateEdgeThickness(0.5); } if (mode === "icon" && delta > 2 * margin) { @@ -42,8 +41,6 @@ if (inline_viewer) { ); controls.autoRotate = original.autoRotate; mode = "inline"; - // inline_viewer.onWindowResize(); - inline_viewer.updateEdgeThickness(1); canvas.classList.remove("revealed"); }