wboit tweaks and fixes

- disable by default for now (until we settly on aa option)
- fix depth repcision issue in large scenes
- fix wrong depth tex bound
- undo pixelScale change as it was not doing anything

src/apps/viewer/index.ts

@@ -68,7 +68,7 @@ const DefaultViewerOptions = {
     layoutShowLog: true,
     layoutShowLeftPanel: true,
     disableAntialiasing: false,
-    pixelScale: void 0 as number | undefined,
+    pixelScale: 1,
     enableWboit: false,
 
     viewportShowExpand: PluginConfig.Viewport.ShowExpand.defaultValue,
@@ -115,16 +115,11 @@ export class Viewer {
             components: {
                 ...DefaultPluginSpec.components,
                 remoteState: o.layoutShowRemoteState ? 'default' : 'none',
-                viewport: {
-                    canvas3d: {
-                        multiSample: { mode: 'on', sampleLevel: 2  }
-                    }
-                }
             },
             config: [
                 [PluginConfig.General.DisableAntialiasing, o.disableAntialiasing],
                 [PluginConfig.General.PixelScale, o.pixelScale],
-                [PluginConfig.General.EnableWboit, true || o.enableWboit],
+                [PluginConfig.General.EnableWboit, o.enableWboit],
                 [PluginConfig.Viewport.ShowExpand, o.viewportShowExpand],
                 [PluginConfig.Viewport.ShowControls, o.viewportShowControls],
                 [PluginConfig.Viewport.ShowSettings, o.viewportShowSettings],

src/mol-canvas3d/canvas3d.ts

@@ -149,10 +149,10 @@ namespace Canvas3D {
     export interface DragEvent { current: Representation.Loci, buttons: ButtonsType, button: ButtonsType.Flag, modifiers: ModifiersKeys, pageStart: Vec2, pageEnd: Vec2 }
     export interface ClickEvent { current: Representation.Loci, buttons: ButtonsType, button: ButtonsType.Flag, modifiers: ModifiersKeys, page?: Vec2, position?: Vec3 }
 
-    export function fromCanvas(canvas: HTMLCanvasElement, props: Partial<Canvas3DProps> = {}, attribs: Partial<{ antialias: boolean, pixelScale?: number, pickScale: number, enableWboit: boolean }> = {}) {
+    export function fromCanvas(canvas: HTMLCanvasElement, props: Partial<Canvas3DProps> = {}, attribs: Partial<{ antialias: boolean, pixelScale: number, pickScale: number, enableWboit: boolean }> = {}) {
         const gl = getGLContext(canvas, {
             alpha: true,
-            antialias: attribs.antialias ?? true,
+            antialias: (attribs.antialias ?? true) && !attribs.enableWboit,
             depth: true,
             preserveDrawingBuffer: true,
             premultipliedAlpha: true,

src/mol-canvas3d/passes/draw.ts

@@ -192,10 +192,10 @@ export class DrawPass {
         }
 
         // do direct-volume rendering
-        if (!toDrawingBuffer) {
+        if (!toDrawingBuffer && scene.volumes.renderables.length > 0) {
             if (!this.packedDepth) {
                 this.depthTextureVolumes.attachFramebuffer(this.colorTarget.framebuffer, 'depth');
-                renderer.clearDepth();
+                renderer.clearDepth(); // from previous frame
             }
             renderer.renderBlendedVolume(scene.volumes, camera, this.depthTexturePrimitives);
 
@@ -206,6 +206,10 @@ export class DrawPass {
                 renderer.renderDepth(scene.volumes, camera, this.depthTexturePrimitives);
                 this.colorTarget.bind();
             }
+
+            if (!this.packedDepth) {
+                this.depthTexturePrimitives.attachFramebuffer(this.colorTarget.framebuffer, 'depth');
+            }
         }
 
         renderer.renderBlendedTransparent(scene.primitives, camera, null);

src/mol-gl/renderer.ts

@@ -422,7 +422,6 @@ namespace Renderer {
 
         const renderBlendedTransparent = (group: Scene.Group, camera: ICamera, depthTexture: Texture | null) => {
             state.enable(gl.DEPTH_TEST);
-            state.depthMask(true);
 
             updateInternal(group, camera, depthTexture, false);
 

src/mol-gl/shader/chunks/wboit-write.glsl.ts

@@ -5,7 +5,8 @@ export default `
             discard;
         }
     } else if (uRenderWboit) {
-        if (preFogAlpha != 1.0 && !interior && fragmentDepth < getDepth(gl_FragCoord.xy / uDrawingBufferSize)) {
+        // the 'fragmentDepth > 0.99' check is to handle precision issues with packed depth
+        if (preFogAlpha != 1.0 && !interior && (fragmentDepth < getDepth(gl_FragCoord.xy / uDrawingBufferSize) || fragmentDepth > 0.99)) {
             float alpha = gl_FragColor.a;
             float wboitWeight = alpha * clamp(pow(1.0 - fragmentDepth, 2.0), 0.01, 1.0);
             gl_FragColor = vec4(gl_FragColor.rgb * alpha * wboitWeight, alpha);

src/mol-plugin/config.ts

@@ -24,7 +24,7 @@ export const PluginConfig = {
     General: {
         IsBusyTimeoutMs: item('plugin-config.is-busy-timeout', 750),
         DisableAntialiasing: item('plugin-config.disable-antialiasing', false),
-        PixelScale: item<number | undefined>('plugin-config.pixel-scale', void 0),
+        PixelScale: item('plugin-config.pixel-scale', 1),
         EnableWboit: item('plugin-config.enable-wboit', false)
     },
     State: {