ClearView curvature based importance.

src/main.js

@@ -103,8 +103,10 @@ class Settings {
     controlPointVisible = false;
     controlPointLocation = new THREE.Vector3(-0.144, -0.278, 0.482);
     focusArea = 0.5;
-    focusAreaSharpness = 5.0;
-    importanceMethod = 0;
+    focusAreaSharpness = 2.6;
+    importanceMethod = 3;
+    curvatureMultiplier = 1.0;
+    distanceMultiplier = 4.0;
     worldSpaceLighting = false;
 
     isovalue1 = 0.22;

src/renderer/Clearview.js

@@ -40,6 +40,7 @@ export default class Clearview {
                 u_focusArea: { value: settings.focusArea },
                 u_focusAreaSharpness: { value: settings.focusAreaSharpness },
                 u_importanceMethod: { value: settings.importanceMethod },
+                u_importanceStrength: { value: 1.0 },
                 u_worldSpaceLight: { value: false },
                 u_iso1PosTex: { value: this.isosurface1Target.textures[0] },
                 u_iso1NormalTex: { value: this.isosurface1Target.textures[1] },
@@ -55,6 +56,8 @@ export default class Clearview {
         // this.addRaymarcherUniforms(this.isosurfaceShader.uniforms, resolution);
 
         this.cube = new THREE.Mesh(box, this.clearviewShader);
+
+        this.update(settings);
     }
 
     /**
@@ -77,6 +80,11 @@ export default class Clearview {
         this.clearviewShader.uniforms.u_focusArea.value = settings.focusArea;
         this.clearviewShader.uniforms.u_focusAreaSharpness.value = settings.focusAreaSharpness;
         this.clearviewShader.uniforms.u_importanceMethod.value = settings.importanceMethod;
+        if (settings.importanceMethod == 0) {
+            this.clearviewShader.uniforms.u_importanceStrength.value = settings.distanceMultiplier;
+        } else if (settings.importanceMethod == 3) {
+            this.clearviewShader.uniforms.u_importanceStrength.value = settings.curvatureMultiplier;
+        }
         this.clearviewShader.uniforms.u_worldSpaceLight.value = settings.worldSpaceLighting;
         // this.updateRaymarcherUniforms(this.raymarcherShader, settings);
         // this.updateRaymarcherUniforms(this.isosurfaceShader, settings);

src/renderer/shaders/clearview.frag

@@ -8,6 +8,7 @@ uniform vec3 u_focusPoint;
 uniform float u_focusArea;
 uniform float u_focusAreaSharpness;
 uniform int u_importanceMethod;
+uniform float u_importanceStrength;
 uniform bool u_worldSpaceLight;
 
 uniform sampler2D u_iso1PosTex;
@@ -63,6 +64,20 @@ vec4 isosurface(vec4 position, vec4 normal, vec3 lightDir, Material material) {
     return vec4(color, 1.0);
 }
 
+float calculateCurvature(ivec2 fragCoord, vec4 fragNormal, in sampler2D normalSampler) {
+    const ivec2 xStep = ivec2(1, 0);
+    const ivec2 yStep = ivec2(0, 1);
+
+    vec4 p = fragNormal;
+    vec4 pt = texelFetch(normalSampler, ivec2(fragCoord + yStep), 0);
+    vec4 pb = texelFetch(normalSampler, ivec2(fragCoord - yStep), 0);
+    vec4 pl = texelFetch(normalSampler, ivec2(fragCoord - xStep), 0);
+    vec4 pr = texelFetch(normalSampler, ivec2(fragCoord + xStep), 0);
+
+    float curvature = length(p - pt) + length(p - pb) + length(p - pl) + length(p - pr);
+    return curvature;
+}
+
 void main() {
     vec3 color1 = vec3(0.56, 0.72, 0.91);
     vec3 color2 = vec3(0.9, 0.87, 0.87);
@@ -94,35 +109,34 @@ void main() {
     vec4 iso1Color = isosurface(iso1Position, iso1Normal, lightDir, material1);
     vec4 iso2Color = isosurface(iso2Position, iso2Normal, lightDir, material2);
 
-    // View distance based importance
-
     vec3 contextPos = iso1Position.xyz;
     vec3 focusPos = iso2Position.xyz;
 
     float trans;
+
+    float fade = length(u_focusPoint - contextPos) / u_focusArea;
+
     switch (u_importanceMethod) {
+        // View distance based importance
         case 0: {
-            float fadeHeuristic = length(contextPos - focusPos);
-            float fade = length(u_focusPoint - contextPos) / u_focusArea;
-
+            float fadeHeuristic = length(contextPos - focusPos) * u_importanceStrength;
             trans = 1. - pow(clamp(max(fade, fadeHeuristic), 0., 1.), u_focusAreaSharpness);
             break;
         }
-        case 1:
+        // Distance based importance
+        case 1: {
             float fade = length(u_focusPoint - contextPos) / u_focusArea;
-
-            trans = 1. - pow(clamp(max(fade, 0.0), 0., 1.), u_focusAreaSharpness);
+            trans = 1. - pow(clamp(fade, 0., 1.), u_focusAreaSharpness);
+            break;
+        }
+        // Curvature based importance
+        case 3: {
+            float curvature = calculateCurvature(ivec2(gl_FragCoord.xy), iso1Normal, u_iso1NormalTex);
+            curvature *= u_importanceStrength;
+            trans = 1. - pow(clamp(max(fade, curvature), 0., 1.), u_focusAreaSharpness);
             break;
+        }
     }
 
     gl_FragColor = iso1Color * (1. - trans) + iso2Color * trans;
-
-    // gl_FragColor = vec4(vec3(trans), 1.0);
-    // gl_FragColor = vec4(vec3(trans), 1.0);
-
-    // if (coords.x > 0.5) {
-    //     gl_FragColor = iso1Color;
-    // } else {
-    //     gl_FragColor = iso2Color;
-    // }
 }

src/ui/UI.js

@@ -34,11 +34,19 @@ export default class UI {
                 clearview.expanded = true;
                 contextPreserve.expanded = false;
                 importanceAware.expanded = false;
+
+                clearview.hidden = false;
+                contextPreserve.hidden = true;
+                importanceAware.hidden = true;
                 break;
             default:
                 clearview.expanded = false;
                 contextPreserve.expanded = true;
                 importanceAware.expanded = true;   
+
+                clearview.hidden = true;
+                contextPreserve.hidden = false;
+                importanceAware.hidden = false;
             }
         });
 
@@ -90,18 +98,50 @@ export default class UI {
             min: 1.0,
             max: 10.0,
         });
+        clearview.addBlade({
+            view: "separator",
+        });
         clearview.addBlade({
             view: "list",
             label: "importance method",
             options: [
                 {text: "view distance", value: 0},
                 {text: "distance", value: 1},
+                {text: "curvature", value: 3},
             ],
             value: settings.importanceMethod,
         }).on("change", (e) => {
             settings.importanceMethod = e.value;
+            switch(settings.importanceMethod) {
+            case 0:
+                curvatureMultiplier.hidden = true;
+                distanceMultiplier.hidden = false;
+                break;
+            case 3:
+                curvatureMultiplier.hidden = false;
+                distanceMultiplier.hidden = true;
+                break;
+            default:
+                curvatureMultiplier.hidden = true;
+                distanceMultiplier.hidden = true;
+            }
         });
+        let curvatureMultiplier = clearview.addBinding(settings, "curvatureMultiplier", {
+            label: "curvature multiplier",
+            min: 0.0,
+            max: 4.0,
+        });
+        let distanceMultiplier = clearview.addBinding(settings, "distanceMultiplier", {
+            label: "distance strength",
+            min: 0.0,
+            max: 20.0,
+        });
+        curvatureMultiplier.hidden = false;
+        distanceMultiplier.hidden = true;
 
+        clearview.addBlade({
+            view: "separator",
+        });
         let isovalueSettings = {
             view: "cameraring",
             series: 1,
@@ -136,6 +176,7 @@ export default class UI {
             title: "Importance-Aware Parameters",
             expanded: false,
         });
+
         importanceAware.addBinding(settings, "wgrad", {
             view: "slider",
             min: 0.0,
@@ -188,5 +229,9 @@ export default class UI {
         this.loadingButton = this.loadingPane.addButton({
             title: "0 %",
         });
+
+        clearview.hidden = false;
+        importanceAware.hidden = true;
+        contextPreserve.hidden = true;
     }
 }