use 32bit depth texture in webgl2

src/mol-canvas3d/passes/draw.ts

 /**
- * Copyright (c) 2019-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  * @author Áron Samuel Kovács <aron.kovacs@mail.muni.cz>
@@ -100,7 +100,7 @@ export class DrawPass {
     }
 
     constructor(private webgl: WebGLContext, width: number, height: number, enableWboit: boolean) {
-        const { extensions, resources } = webgl;
+        const { extensions, resources, isWebGL2 } = webgl;
 
         this.drawTarget = createNullRenderTarget(webgl.gl);
 
@@ -113,8 +113,8 @@ export class DrawPass {
         this.depthTargetPrimitives = this.packedDepth ? webgl.createRenderTarget(width, height) : null;
         this.depthTargetVolumes = this.packedDepth ? webgl.createRenderTarget(width, height) : null;
 
-        this.depthTexturePrimitives = this.depthTargetPrimitives ? this.depthTargetPrimitives.texture : resources.texture('image-depth', 'depth', 'ushort', 'nearest');
-        this.depthTextureVolumes = this.depthTargetVolumes ? this.depthTargetVolumes.texture : resources.texture('image-depth', 'depth', 'ushort', 'nearest');
+        this.depthTexturePrimitives = this.depthTargetPrimitives ? this.depthTargetPrimitives.texture : resources.texture('image-depth', 'depth', isWebGL2 ? 'float' : 'ushort', 'nearest');
+        this.depthTextureVolumes = this.depthTargetVolumes ? this.depthTargetVolumes.texture : resources.texture('image-depth', 'depth', isWebGL2 ? 'float' : 'ushort', 'nearest');
         if (!this.packedDepth) {
             this.depthTexturePrimitives.define(width, height);
             this.depthTextureVolumes.define(width, height);

src/mol-gl/webgl/render-target.ts

@@ -8,7 +8,7 @@ import { idFactory } from '../../mol-util/id-factory';
 import { createNullTexture, Texture, TextureFilter } from './texture';
 import { createNullFramebuffer, Framebuffer } from './framebuffer';
 import { WebGLResources } from './resources';
-import { GLRenderingContext } from './compat';
+import { GLRenderingContext, isWebGL2 } from './compat';
 
 const getNextRenderTargetId = idFactory();
 
@@ -35,9 +35,11 @@ export function createRenderTarget(gl: GLRenderingContext, resources: WebGLResou
             ? resources.texture('image-float32', 'rgba', 'float', filter)
             : resources.texture('image-uint8', 'rgba', 'ubyte', filter);
     // make a depth renderbuffer of the same size as the targetTexture
-    const depthRenderbuffer = depth
-        ? resources.renderbuffer('depth16', 'depth', _width, _height)
-        : null;
+    const depthRenderbuffer = !depth
+        ? null
+        : isWebGL2(gl)
+            ? resources.renderbuffer('depth32f', 'depth', _width, _height)
+            : resources.renderbuffer('depth16', 'depth', _width, _height);
 
     function init() {
         targetTexture.define(_width, _height);

src/mol-gl/webgl/renderbuffer.ts

 /**
- * Copyright (c) 2018-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
 import { idFactory } from '../../mol-util/id-factory';
-import { GLRenderingContext } from './compat';
+import { GLRenderingContext, isWebGL2 } from './compat';
 import { Framebuffer, checkFramebufferStatus } from './framebuffer';
 import { isDebugMode } from '../../mol-util/debug';
 
 const getNextRenderbufferId = idFactory();
 
-export type RenderbufferFormat = 'depth16' | 'stencil8' | 'rgba4' | 'depth-stencil'
+export type RenderbufferFormat = 'depth16' | 'stencil8' | 'rgba4' | 'depth-stencil' | 'depth32f'
 export type RenderbufferAttachment = 'depth' | 'stencil' | 'depth-stencil' | 'color0'
 
 export function getFormat(gl: GLRenderingContext, format: RenderbufferFormat) {
@@ -20,6 +20,9 @@ export function getFormat(gl: GLRenderingContext, format: RenderbufferFormat) {
         case 'stencil8': return gl.STENCIL_INDEX8;
         case 'rgba4': return gl.RGBA4;
         case 'depth-stencil': return gl.DEPTH_STENCIL;
+        case 'depth32f':
+            if (isWebGL2(gl)) return gl.DEPTH_COMPONENT32F;
+            else throw new Error('WebGL2 needed for `depth32f` renderbuffer format');
     }
 }
 

src/mol-gl/webgl/texture.ts

@@ -94,7 +94,10 @@ export function getInternalFormat(gl: GLRenderingContext, format: TextureFormat,
                     case 'int': return gl.RGBA32I;
                 }
             case 'depth':
-                return gl.DEPTH_COMPONENT16;
+                switch (type) {
+                    case 'ushort': return gl.DEPTH_COMPONENT16;
+                    case 'float': return gl.DEPTH_COMPONENT32F;
+                }
         }
     }
     return getFormat(gl, format, type);
@@ -229,7 +232,7 @@ export function createTexture(gl: GLRenderingContext, extensions: WebGLExtension
         (kind.endsWith('float16') && _type !== 'fp16') ||
         (kind.endsWith('uint8') && _type !== 'ubyte') ||
         (kind.endsWith('int32') && _type !== 'int') ||
-        (kind.endsWith('depth') && _type !== 'ushort')
+        (kind.endsWith('depth') && _type !== 'ushort' && _type !== 'float')
     ) {
         throw new Error(`texture kind '${kind}' and type '${_type}' are incompatible`);
     }