postprocesing tweaks

- better distingush objects close to far plane from background
- draw outlines last to be cleaner
- allow larger AO radius

src/mol-canvas3d/camera.ts

@@ -337,7 +337,7 @@ function updateClip(camera: Camera) {
     }
 
     camera.near = near;
-    camera.far = far;
+    camera.far = 2 * far; // avoid precision issues distingushing far objects from background
     camera.fogNear = fogNear;
     camera.fogFar = fogFar;
 }

src/mol-canvas3d/passes/postprocessing.ts

@@ -238,8 +238,8 @@ export const PostprocessingParams = {
     occlusion: PD.MappedStatic('off', {
         on: PD.Group({
             samples: PD.Numeric(64, {min: 1, max: 256, step: 1}),
-            radius: PD.Numeric(24.0, { min: 1, max: 64, step: 1 }),
-            bias: PD.Numeric(1.2, { min: 0, max: 2, step: 0.1 }),
+            radius: PD.Numeric(5, { min: 0, max: 10, step: 0.1 }, { description: 'Final radius is 2^x.' }),
+            bias: PD.Numeric(1.2, { min: 0, max: 5, step: 0.1 }),
             blurKernelSize: PD.Numeric(20, { min: 1, max: 25, step: 2 }),
         }),
         off: PD.Group({})
@@ -378,7 +378,7 @@ export class PostprocessingPass {
                 ValueCell.updateIfChanged(this.ssaoRenderable.values.uSamples, getSamples(this.randomHemisphereVector, this.nSamples));
                 ValueCell.updateIfChanged(this.ssaoRenderable.values.dNSamples, this.nSamples);
             }
-            ValueCell.updateIfChanged(this.ssaoRenderable.values.uRadius, props.occlusion.params.radius);
+            ValueCell.updateIfChanged(this.ssaoRenderable.values.uRadius, Math.pow(2, props.occlusion.params.radius));
             ValueCell.updateIfChanged(this.ssaoRenderable.values.uBias, props.occlusion.params.bias);
 
             if (this.blurKernelSize !== props.occlusion.params.blurKernelSize) {

src/mol-gl/shader/outlines.frag.ts

@@ -32,7 +32,7 @@ float getDepth(const in vec2 coords) {
 }
 
 bool isBackground(const in float depth) {
-    return depth >= 0.99;
+    return depth == 1.0;
 }
 
 void main(void) {

src/mol-gl/shader/postprocessing.frag.ts

@@ -48,7 +48,7 @@ float getDepth(const in vec2 coords) {
 }
 
 bool isBackground(const in float depth) {
-    return depth >= 0.99;
+    return depth == 1.0;
 }
 
 float getOutline(const in vec2 coords, out float closestTexel) {
@@ -98,6 +98,21 @@ void main(void) {
     float viewDist;
     float fogFactor;
 
+    #ifdef dOcclusionEnable
+        float depth = getDepth(coords);
+        if (!isBackground(depth)) {
+            viewDist = abs(getViewZ(depth));
+            fogFactor = smoothstep(uFogNear, uFogFar, viewDist);
+            float occlusionFactor = getSsao(coords);
+            if (!uTransparentBackground) {
+                color.rgb = mix(mix(occlusionColor, uFogColor, fogFactor), color.rgb, occlusionFactor);
+            } else {
+                color.rgb = mix(occlusionColor * (1.0 - fogFactor), color.rgb, occlusionFactor);
+            }
+        }
+    #endif
+
+    // outline needs to be handled after occlusion to keep them clean
     #ifdef dOutlineEnable
         float closestTexel;
         float outline = getOutline(coords, closestTexel);
@@ -114,20 +129,7 @@ void main(void) {
         }
     #endif
 
-    // occlusion needs to be handled after outline to darken them properly
-    #ifdef dOcclusionEnable
-        float depth = getDepth(coords);
-        if (!isBackground(depth)) {
-            viewDist = abs(getViewZ(depth));
-            fogFactor = smoothstep(uFogNear, uFogFar, viewDist);
-            float occlusionFactor = getSsao(coords);
-            if (!uTransparentBackground) {
-                color.rgb = mix(mix(occlusionColor, uFogColor, fogFactor), color.rgb, occlusionFactor);
-            } else {
-                color.rgb = mix(occlusionColor * (1.0 - fogFactor), color.rgb, occlusionFactor);
-            }
-        }
-    #endif
+
 
     gl_FragColor = color;
 }

src/mol-gl/shader/ssao-blur.frag.ts

@@ -33,7 +33,7 @@ float getViewZ(const in float depth) {
 }
 
 bool isBackground(const in float depth) {
-    return depth >= 0.99;
+    return depth == 1.0;
 }
 
 void main(void) {

src/mol-gl/shader/ssao.frag.ts

@@ -43,7 +43,7 @@ vec2 getNoiseVec2(const in vec2 coords) {
 }
 
 bool isBackground(const in float depth) {
-    return depth >= 0.99;
+    return depth == 1.0;
 }
 
 float getDepth(const in vec2 coords) {
@@ -53,10 +53,10 @@ float getDepth(const in vec2 coords) {
 vec3 normalFromDepth(const in float depth, const in float depth1, const in float depth2, vec2 offset1, vec2 offset2) {
     vec3 p1 = vec3(offset1, depth1 - depth);
     vec3 p2 = vec3(offset2, depth2 - depth);
-    
+
     vec3 normal = cross(p1, p2);
     normal.z = -normal.z;
-    
+
     return normalize(normal);
 }
 
@@ -72,7 +72,7 @@ void main(void) {
         gl_FragColor = vec4(packUnitIntervalToRG(0.0), selfPackedDepth);
         return;
     }
-    
+
     vec2 offset1 = vec2(0.0, invTexSize.y);
     vec2 offset2 = vec2(invTexSize.x, 0.0);
 
@@ -91,7 +91,7 @@ void main(void) {
     float occlusion = 0.0;
     for(int i = 0; i < dNSamples; i++){
         vec3 sampleViewPos = TBN * uSamples[i];
-        sampleViewPos = selfViewPos + sampleViewPos * uRadius; 
+        sampleViewPos = selfViewPos + sampleViewPos * uRadius;
 
         vec4 offset = vec4(sampleViewPos, 1.0);
         offset = uProjection * offset;
@@ -99,12 +99,12 @@ void main(void) {
 
         float sampleViewZ = screenSpaceToViewSpace(vec3(offset.xy, getDepth(offset.xy)), uInvProjection).z;
 
-        occlusion += step(sampleViewPos.z + 0.025, sampleViewZ) * smootherstep(0.0, 1.0, uRadius / abs(selfViewPos.z - sampleViewZ));         
+        occlusion += step(sampleViewPos.z + 0.025, sampleViewZ) * smootherstep(0.0, 1.0, uRadius / abs(selfViewPos.z - sampleViewZ));
     }
     occlusion = 1.0 - (uBias * occlusion / float(dNSamples));
 
     vec2 packedOcclusion = packUnitIntervalToRG(occlusion);
-    
+
     gl_FragColor = vec4(packedOcclusion, selfPackedDepth);
 }
 `;