bug fixes and reenable rendering of the helpers

src/apps/viewer/index.html

@@ -45,7 +45,7 @@
                 return decodeURIComponent(((window.location.search || '').match(r) || [])[1] || '');
             }
 
-            var debugMode = getParam('debug-mode', '[^&]+').trim() === '1';
+            var debugMode = true; // getParam('debug-mode', '[^&]+').trim() === '1';
             if (debugMode) molstar.setDebugMode(debugMode, debugMode);
 
             var disableAntialiasing = getParam('disable-antialiasing', '[^&]+').trim() === '1';

src/mol-canvas3d/passes/draw.ts

@@ -82,6 +82,7 @@ export class DrawPass {
         this.depthTextureVolumes = this.depthTargetVolumes ? this.depthTargetVolumes.texture : resources.texture('image-depth', 'depth', 'ushort', 'nearest');
         if (!this.packedDepth) {
             this.depthTexturePrimitives.define(width, height);
+            this.depthTexturePrimitivesTransparent.define(width, height);
             this.depthTextureVolumes.define(width, height);
         }
         this.depthMerge = getDepthMergeRenderable(webgl, this.depthTexturePrimitives, this.depthTextureVolumes, this.packedDepth);
@@ -143,20 +144,19 @@ export class DrawPass {
         }
 
         // render opaque color
-        // this.depthTexturePrimitives.attachFramebuffer(renderTarget!.framebuffer, 'depth');
         renderer.render(renderTarget, scene.primitives, camera, 'color', true, transparentBackground, 1, this.dummyDepthTexture, false);
 
-        // if (helper.debug.isEnabled) {
-        //     helper.debug.syncVisibility();
-        //     renderer.render(renderTarget, helper.debug.scene, camera, 'color', false, transparentBackground, 1, null, false);
-        // }
-        // if (helper.handle.isEnabled) {
-        //     renderer.render(renderTarget, helper.handle.scene, camera, 'color', false, transparentBackground, 1, null, false);
-        // }
-        // if (helper.camera.isEnabled) {
-        //     helper.camera.update(camera);
-        //     renderer.render(renderTarget, helper.camera.scene, helper.camera.camera, 'color', false, transparentBackground, 1, null, false);
-        // }
+        if (helper.debug.isEnabled) {
+            helper.debug.syncVisibility();
+            renderer.render(renderTarget, helper.debug.scene, camera, 'color', false, transparentBackground, 1, null, false);
+        }
+        if (helper.handle.isEnabled) {
+            renderer.render(renderTarget, helper.handle.scene, camera, 'color', false, transparentBackground, 1, null, false);
+        }
+        if (helper.camera.isEnabled) {
+            helper.camera.update(camera);
+            renderer.render(renderTarget, helper.camera.scene, helper.camera.camera, 'color', false, transparentBackground, 1, null, false);
+        }
 
         if (!toDrawingBuffer && this.depthTargetPrimitivesTransparent) {
             console.log('packed depth transparent primitives');
@@ -169,22 +169,24 @@ export class DrawPass {
             renderer.render(renderTarget, scene.primitives, camera, 'color', false, transparentBackground, 1, this.depthTexturePrimitives, true);
         }
 
-        // if (helper.debug.isEnabled) {
-        //     helper.debug.syncVisibility();
-        //     renderer.render(renderTarget, helper.debug.scene, camera, 'color', false, transparentBackground, 1, this.depthTexturePrimitives, true);
-        // }
-        // if (helper.handle.isEnabled) {
-        //     renderer.render(renderTarget, helper.handle.scene, camera, 'color', false, transparentBackground, 1, this.depthTexturePrimitives, true);
-        // }
-        // if (helper.camera.isEnabled) {
-        //     helper.camera.update(camera);
-        //     renderer.render(renderTarget, helper.camera.scene, helper.camera.camera, 'color', false, transparentBackground, 1, this.depthTexturePrimitives, true);
-        // }
+        if (helper.debug.isEnabled) {
+            helper.debug.syncVisibility();
+            renderer.render(renderTarget, helper.debug.scene, camera, 'color', false, transparentBackground, 1, this.depthTexturePrimitives, true);
+        }
+        if (helper.handle.isEnabled) {
+            renderer.render(renderTarget, helper.handle.scene, camera, 'color', false, transparentBackground, 1, this.depthTexturePrimitives, true);
+        }
+        if (helper.camera.isEnabled) {
+            helper.camera.update(camera);
+            renderer.render(renderTarget, helper.camera.scene, helper.camera.camera, 'color', false, transparentBackground, 1, this.depthTexturePrimitives, true);
+        }
 
         // do direct-volume rendering
         if (!toDrawingBuffer) {
             if (!this.packedDepth) {
                 this.depthTextureVolumes.attachFramebuffer(renderTarget!.framebuffer, 'depth');
+                renderTarget!.bind();
+                this.webgl.state.enable(this.webgl.gl.DEPTH_TEST);
                 this.webgl.state.depthMask(true);
                 this.webgl.gl.viewport(x, y, width, height);
                 this.webgl.gl.scissor(x, y, width, height);

src/mol-gl/renderer.ts

@@ -164,7 +164,7 @@ function getClip(props: RendererProps['clip'], clip?: Clip): Clip {
 
 namespace Renderer {
     export function create(ctx: WebGLContext, props: Partial<RendererProps> = {}): Renderer {
-        const { gl, state, resources, stats, extensions: { fragDepth } } = ctx;
+        const { gl, state, resources, stats } = ctx;
         const p = PD.merge(RendererParams, PD.getDefaultValues(RendererParams), props);
         const style = getStyle(p.style);
         const clip = getClip(p.clip);
@@ -309,31 +309,10 @@ namespace Renderer {
             }
 
             if (r.values.dRenderMode) { // indicates direct-volume
-                // always cull front
-                state.enable(gl.CULL_FACE);
-                state.frontFace(gl.CW);
-                state.cullFace(gl.BACK);
-
-                // depth test done manually in shader against `depthTexture`
-                // still need to enable when fragDepth can be used to write depth
-                // (unclear why depthMask is insufficient)
-                if (r.values.dRenderMode.ref.value === 'volume' || !fragDepth) {
-                    state.disable(gl.DEPTH_TEST);
-                    state.depthMask(false);
-                } else {
-                    state.enable(gl.DEPTH_TEST);
-                    state.depthMask(r.state.writeDepth);
-                }
-
-                // TODO: wboit needs the following state (but that is not acceptable for
-                // the volume rendering to work in all cases)
+                // culling done in fragment shader
+                state.disable(gl.CULL_FACE);
                 state.frontFace(gl.CCW);
-
-                // this is probably not needed
-                // state.enable(gl.DEPTH_TEST);
-                // state.depthMask(r.state.writeDepth);
             } else {
-                state.enable(gl.DEPTH_TEST);
                 if (r.values.dDoubleSided) {
                     if (r.values.dDoubleSided.ref.value || r.values.hasReflection.ref.value) {
                         state.disable(gl.CULL_FACE);
@@ -358,8 +337,6 @@ namespace Renderer {
                     state.frontFace(gl.CCW);
                     state.cullFace(gl.BACK);
                 }
-
-                state.depthMask(r.state.writeDepth);
             }
 
             r.render(variant, sharedTexturesList);
@@ -394,7 +371,7 @@ namespace Renderer {
             ValueCell.updateIfChanged(globalUniforms.uFogNear, camera.fogNear);
             ValueCell.updateIfChanged(globalUniforms.uTransparentBackground, transparentBackground);
 
-            ValueCell.update(globalUniforms.uRenderWboit, 0);
+            ValueCell.updateIfChanged(globalUniforms.uRenderWboit, 0);
 
             if (gl.drawingBufferWidth * drawingBufferScale !== drawingBufferSize[0] ||
                 gl.drawingBufferHeight * drawingBufferScale !== drawingBufferSize[1]
@@ -420,6 +397,7 @@ namespace Renderer {
             state.disable(gl.BLEND);
             state.colorMask(true, true, true, true);
             state.enable(gl.DEPTH_TEST);
+            state.depthMask(true);
 
             const { x, y, width, height } = viewport;
             gl.viewport(x, y, width, height);
@@ -438,23 +416,13 @@ namespace Renderer {
             if (variant === 'color') {
                 if (enableWboit) {
                     if (!renderTransparent) {
+                        state.enable(gl.DEPTH_TEST);
+                        state.depthMask(true);
+
                         for (let i = 0, il = renderables.length; i < il; ++i) {
+                            // TODO: when available in r.state check if fullyOpaque
                             const r = renderables[i];
-                            if (r.state.opaque) {
-                                renderObject(r, variant, localSharedTexturesList);
-                            }
-                        }
-                        for (let i = 0, il = renderables.length; i < il; ++i) {
-                            const r = renderables[i];
-                            if (!r.state.opaque && r.state.writeDepth) {
-                                renderObject(r, variant, localSharedTexturesList);
-                            }
-                        }
-                        for (let i = 0, il = renderables.length; i < il; ++i) {
-                            const r = renderables[i];
-                            if (!r.state.opaque && !r.state.writeDepth) {
-                                renderObject(r, variant, localSharedTexturesList);
-                            }
+                            renderObject(r, variant, localSharedTexturesList);
                         }
                     } else {
                         wboitFramebuffers[0].bind();
@@ -462,30 +430,18 @@ namespace Renderer {
                         state.clearColor(0, 0, 0, 1);
                         gl.clear(gl.COLOR_BUFFER_BIT);
 
-                        ValueCell.update(globalUniforms.uRenderWboit, 1);
+                        ValueCell.updateIfChanged(globalUniforms.uRenderWboit, 1);
                         globalUniformsNeedUpdate = true;
 
                         state.disable(gl.DEPTH_TEST);
-                        state.enable(gl.BLEND);
+
                         state.blendFuncSeparate(gl.ONE, gl.ONE, gl.ZERO, gl.ONE_MINUS_SRC_ALPHA);
+                        state.enable(gl.BLEND);
 
                         for (let i = 0, il = renderables.length; i < il; ++i) {
+                            // TODO: when available in r.state check if not fullyOpaque
                             const r = renderables[i];
-                            if (r.state.opaque) {
-                                renderObject(r, variant, localSharedTexturesList);
-                            }
-                        }
-                        for (let i = 0, il = renderables.length; i < il; ++i) {
-                            const r = renderables[i];
-                            if (!r.state.opaque && r.state.writeDepth) {
-                                renderObject(r, variant, localSharedTexturesList);
-                            }
-                        }
-                        for (let i = 0, il = renderables.length; i < il; ++i) {
-                            const r = renderables[i];
-                            if (!r.state.opaque && !r.state.writeDepth) {
-                                renderObject(r, variant, localSharedTexturesList);
-                            }
+                            renderObject(r, variant, localSharedTexturesList);
                         }
 
                         if (renderTarget) {
@@ -496,7 +452,6 @@ namespace Renderer {
 
                         state.blendFuncSeparate(gl.ONE_MINUS_SRC_ALPHA, gl.SRC_ALPHA, gl.ZERO, gl.ONE);
                         state.enable(gl.BLEND);
-                        state.disable(gl.DEPTH_TEST);
 
                         // unclear why needed but otherwise there is a
                         // "Draw framebuffer is incomplete" error for the very first render call

src/mol-gl/shader/chunks/assign-material-color.glsl.ts

@@ -28,27 +28,28 @@ export default `
         if (ta < uPickingAlphaThreshold)
             discard; // ignore so the element below can be picked
     #else
-        float at = 0.0;
+        // TODO: only needed when wboit is not available (or not selected?)
+        // float at = 0.0;
 
-        // shift by view-offset during multi-sample rendering to allow for blending
-        vec2 coord = gl_FragCoord.xy + uViewOffset * 0.25;
+        // // shift by view-offset during multi-sample rendering to allow for blending
+        // vec2 coord = gl_FragCoord.xy + uViewOffset * 0.25;
 
-        #if defined(dTransparencyVariant_single)
-            const mat4 thresholdMatrix = mat4(
-                1.0 / 17.0,  9.0 / 17.0,  3.0 / 17.0, 11.0 / 17.0,
-                13.0 / 17.0,  5.0 / 17.0, 15.0 / 17.0,  7.0 / 17.0,
-                4.0 / 17.0, 12.0 / 17.0,  2.0 / 17.0, 10.0 / 17.0,
-                16.0 / 17.0,  8.0 / 17.0, 14.0 / 17.0,  6.0 / 17.0
-            );
-            at = thresholdMatrix[int(intMod(coord.x, 4.0))][int(intMod(coord.y, 4.0))];
-        #elif defined(dTransparencyVariant_multi)
-            at = fract(dot(vec3(coord, vGroup + 0.5), vec3(2.0, 7.0, 23.0) / 17.0f));
-        #endif
+        // #if defined(dTransparencyVariant_single)
+        //     const mat4 thresholdMatrix = mat4(
+        //         1.0 / 17.0,  9.0 / 17.0,  3.0 / 17.0, 11.0 / 17.0,
+        //         13.0 / 17.0,  5.0 / 17.0, 15.0 / 17.0,  7.0 / 17.0,
+        //         4.0 / 17.0, 12.0 / 17.0,  2.0 / 17.0, 10.0 / 17.0,
+        //         16.0 / 17.0,  8.0 / 17.0, 14.0 / 17.0,  6.0 / 17.0
+        //     );
+        //     at = thresholdMatrix[int(intMod(coord.x, 4.0))][int(intMod(coord.y, 4.0))];
+        // #elif defined(dTransparencyVariant_multi)
+        //     at = fract(dot(vec3(coord, vGroup + 0.5), vec3(2.0, 7.0, 23.0) / 17.0f));
+        // #endif
 
-        if (ta < 0.99 && (ta < 0.01 || ta < at)) {
-            //discard;
-        }
-        material.a = ta;
+        // if (ta < 0.99 && (ta < 0.01 || ta < at)) {
+        //     discard;
+        // }
+        material.a *= ta;
     #endif
 #endif
 `;

src/mol-gl/shader/direct-volume.frag.ts

@@ -407,6 +407,9 @@ vec4 raymarch(vec3 startLoc, vec3 step, vec3 rayDir) {
 // TODO: support clipping exclusion texture support
 
 void main () {
+    if (gl_FrontFacing)
+        discard;
+
     #if defined(dRenderVariant_pick) || defined(dRenderVariant_depth)
         #if defined(dRenderMode_volume)
             // always ignore pick & depth for volume
@@ -431,7 +434,11 @@ void main () {
     #endif
 
     #if defined(dRenderVariant_color)
-        float absFragDepth = abs(calcDepth((uView * vec4(uCameraPosition + (d * rayDir), 1.0)).xyz));
+        #if defined(dRenderMode_isosurface) && defined(enabledFragDepth)
+            float absFragDepth = abs(gl_FragDepthEXT);
+        #else
+            float absFragDepth = abs(calcDepth((uView * vec4(uCameraPosition + (d * rayDir), 1.0)).xyz));
+        #endif
         #include wboit_write
     #endif
 }