Merge branch 'graphics'

src/mol-canvas3d/canvas3d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
@@ -7,7 +7,7 @@
 import { BehaviorSubject, Subscription } from 'rxjs';
 import { now } from 'mol-util/now';
 
-import { Vec3 } from 'mol-math/linear-algebra'
+import { Vec3, Vec2 } from 'mol-math/linear-algebra'
 import InputObserver, { ModifiersKeys, ButtonsType } from 'mol-util/input/input-observer'
 import Renderer, { RendererStats, RendererParams } from 'mol-gl/renderer'
 import { GraphicsRenderObject } from 'mol-gl/render-object'
@@ -29,6 +29,9 @@ import { BoundingSphereHelper, DebugHelperParams } from './helper/bounding-spher
 import { decodeFloatRGB } from 'mol-util/float-packing';
 import { SetUtils } from 'mol-util/set';
 import { Canvas3dInteractionHelper } from './helper/interaction-events';
+import { createTexture } from 'mol-gl/webgl/texture';
+import { ValueCell } from 'mol-util';
+import { getSSAOPassRenderable, SSAOPassParams } from './passes/ssao-pass';
 
 export const Canvas3DParams = {
     // TODO: FPS cap?
@@ -37,6 +40,8 @@ export const Canvas3DParams = {
     cameraClipDistance: PD.Numeric(0, { min: 0.0, max: 50.0, step: 0.1 }, { description: 'The distance between camera and scene at which to clip regardless of near clipping plane.' }),
     clip: PD.Interval([1, 100], { min: 1, max: 100, step: 1 }),
     fog: PD.Interval([50, 100], { min: 1, max: 100, step: 1 }),
+
+    ambientOcclusion: PD.Group(SSAOPassParams),
     renderer: PD.Group(RendererParams),
     trackball: PD.Group(TrackballControlsParams),
     debug: PD.Group(DebugHelperParams)
@@ -57,7 +62,7 @@ interface Canvas3D {
     requestDraw: (force?: boolean) => void
     animate: () => void
     pick: () => void
-    identify: (x: number, y: number) => Promise<PickingId | undefined>
+    identify: (x: number, y: number) => PickingId | undefined
     mark: (loci: Representation.Loci, action: MarkerAction) => void
     getLoci: (pickingId: PickingId) => Representation.Loci
 
@@ -117,6 +122,12 @@ namespace Canvas3D {
         const controls = TrackballControls.create(input, camera, p.trackball)
         const renderer = Renderer.create(webgl, camera, p.renderer)
 
+        const drawTarget = createRenderTarget(webgl, canvas.width, canvas.height)
+        const depthTexture = createTexture(webgl, 'image-depth', 'depth', 'ushort', 'nearest')
+        depthTexture.define(canvas.width, canvas.height)
+        depthTexture.attachFramebuffer(drawTarget.framebuffer, 'depth')
+        const ssaoPass = getSSAOPassRenderable(webgl, drawTarget.texture, depthTexture, p.ambientOcclusion)
+
         let pickScale = 0.25 / webgl.pixelRatio
         let pickWidth = Math.round(canvas.width * pickScale)
         let pickHeight = Math.round(canvas.height * pickScale)
@@ -215,13 +226,18 @@ namespace Canvas3D {
                         renderer.render(scene, 'pickGroup');
                         break;
                     case 'draw':
-                        webgl.unbindFramebuffer();
                         renderer.setViewport(0, 0, canvas.width, canvas.height);
-                        renderer.render(scene, variant);
+                        drawTarget.bind()
+                        renderer.render(scene, 'draw');
                         if (debugHelper.isEnabled) {
                             debugHelper.syncVisibility()
                             renderer.render(debugHelper.scene, 'draw')
                         }
+                        webgl.unbindFramebuffer();
+                        webgl.state.disable(webgl.gl.SCISSOR_TEST)
+                        webgl.state.disable(webgl.gl.BLEND)
+                        webgl.state.disable(webgl.gl.DEPTH_TEST)
+                        ssaoPass.render()
                         pickDirty = true
                         break;
                 }
@@ -263,7 +279,8 @@ namespace Canvas3D {
             }
         }
 
-        async function identify(x: number, y: number): Promise<PickingId | undefined> {
+        const readBuffer = new Uint8Array(4)
+        function identify(x: number, y: number): PickingId | undefined {
             if (isIdentifying) return
 
             pick() // must be called before setting `isIdentifying = true`
@@ -273,27 +290,22 @@ namespace Canvas3D {
             y *= webgl.pixelRatio
             y = canvas.height - y // flip y
 
-            const buffer = new Uint8Array(4)
             const xp = Math.round(x * pickScale)
             const yp = Math.round(y * pickScale)
 
             objectPickTarget.bind()
-            // TODO slow in Chrome, ok in FF; doesn't play well with gpu surface calc
-            // await webgl.readPixelsAsync(xp, yp, 1, 1, buffer)
-            webgl.readPixels(xp, yp, 1, 1, buffer)
-            const objectId = decodeFloatRGB(buffer[0], buffer[1], buffer[2])
+            webgl.readPixels(xp, yp, 1, 1, readBuffer)
+            const objectId = decodeFloatRGB(readBuffer[0], readBuffer[1], readBuffer[2])
             if (objectId === -1) { isIdentifying = false; return; }
 
             instancePickTarget.bind()
-            // await webgl.readPixelsAsync(xp, yp, 1, 1, buffer)
-            webgl.readPixels(xp, yp, 1, 1, buffer)
-            const instanceId = decodeFloatRGB(buffer[0], buffer[1], buffer[2])
+            webgl.readPixels(xp, yp, 1, 1, readBuffer)
+            const instanceId = decodeFloatRGB(readBuffer[0], readBuffer[1], readBuffer[2])
             if (instanceId === -1) { isIdentifying = false; return; }
 
             groupPickTarget.bind()
-            // await webgl.readPixelsAsync(xp, yp, 1, 1, buffer)
-            webgl.readPixels(xp, yp, 1, 1, buffer)
-            const groupId = decodeFloatRGB(buffer[0], buffer[1], buffer[2])
+            webgl.readPixels(xp, yp, 1, 1, readBuffer)
+            const groupId = decodeFloatRGB(readBuffer[0], readBuffer[1], readBuffer[2])
             if (groupId === -1) { isIdentifying = false; return; }
 
             isIdentifying = false
@@ -399,6 +411,34 @@ namespace Canvas3D {
                 if (props.clip !== undefined) p.clip = [props.clip[0], props.clip[1]]
                 if (props.fog !== undefined) p.fog = [props.fog[0], props.fog[1]]
 
+                if (props.ambientOcclusion) {
+                    if (props.ambientOcclusion.enable !== undefined) {
+                        p.ambientOcclusion.enable = props.ambientOcclusion.enable
+                        ValueCell.update(ssaoPass.values.uEnable, props.ambientOcclusion.enable ? 1 : 0)
+                    }
+                    if (props.ambientOcclusion.kernelSize !== undefined) {
+                        p.ambientOcclusion.kernelSize = props.ambientOcclusion.kernelSize
+                        ValueCell.update(ssaoPass.values.uKernelSize, props.ambientOcclusion.kernelSize)
+                    }
+                    if (props.ambientOcclusion.bias !== undefined) {
+                        p.ambientOcclusion.bias = props.ambientOcclusion.bias
+                        ValueCell.update(ssaoPass.values.uBias, props.ambientOcclusion.bias)
+                    }
+                    if (props.ambientOcclusion.radius !== undefined) {
+                        p.ambientOcclusion.radius = props.ambientOcclusion.radius
+                        ValueCell.update(ssaoPass.values.uRadius, props.ambientOcclusion.radius)
+                    }
+
+                    if (props.ambientOcclusion.edgeScale !== undefined) {
+                        p.ambientOcclusion.edgeScale = props.ambientOcclusion.edgeScale
+                        ValueCell.update(ssaoPass.values.uEdgeScale, props.ambientOcclusion.edgeScale * webgl.pixelRatio)
+                    }
+                    if (props.ambientOcclusion.edgeThreshold !== undefined) {
+                        p.ambientOcclusion.edgeThreshold = props.ambientOcclusion.edgeThreshold
+                        ValueCell.update(ssaoPass.values.uEdgeThreshold, props.ambientOcclusion.edgeThreshold)
+                    }
+                }
+                
                 if (props.renderer) renderer.setProps(props.renderer)
                 if (props.trackball) controls.setProps(props.trackball)
                 if (props.debug) debugHelper.setProps(props.debug)
@@ -411,6 +451,8 @@ namespace Canvas3D {
                     cameraClipDistance: p.cameraClipDistance,
                     clip: p.clip,
                     fog: p.fog,
+
+                    ambientOcclusion: { ...p.ambientOcclusion },
                     renderer: { ...renderer.props },
                     trackball: { ...controls.props },
                     debug: { ...debugHelper.props }
@@ -442,6 +484,10 @@ namespace Canvas3D {
             Viewport.set(camera.viewport, 0, 0, canvas.width, canvas.height)
             Viewport.set(controls.viewport, 0, 0, canvas.width, canvas.height)
 
+            drawTarget.setSize(canvas.width, canvas.height)
+            depthTexture.define(canvas.width, canvas.height)
+            ValueCell.update(ssaoPass.values.uTexSize, Vec2.set(ssaoPass.values.uTexSize.ref.value, canvas.width, canvas.height))
+
             pickScale = 0.25 / webgl.pixelRatio
             pickWidth = Math.round(canvas.width * pickScale)
             pickHeight = Math.round(canvas.height * pickScale)

src/mol-canvas3d/helper/interaction-events.ts

@@ -38,9 +38,9 @@ export class Canvas3dInteractionHelper {
     private buttons: ButtonsType = ButtonsType.create(0);
     private modifiers: ModifiersKeys = ModifiersKeys.None;
 
-    private async identify(isClick: boolean, t: number) {
+    private identify(isClick: boolean, t: number) {
         if (this.lastX !== this.cX && this.lastY !== this.cY) {
-            this.id = await this.canvasIdentify(this.cX, this.cY);
+            this.id = this.canvasIdentify(this.cX, this.cY);
             this.lastX = this.cX;
             this.lastY = this.cY;
         }

src/mol-canvas3d/passes/ssao-pass.ts

@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) 2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { QuadSchema, QuadValues } from 'mol-gl/compute/util';
+import { TextureSpec, Values, UniformSpec } from 'mol-gl/renderable/schema';
+import { ShaderCode } from 'mol-gl/shader-code';
+import { WebGLContext } from 'mol-gl/webgl/context';
+import { Texture } from 'mol-gl/webgl/texture';
+import { ValueCell } from 'mol-util';
+import { createComputeRenderItem } from 'mol-gl/webgl/render-item';
+import { createComputeRenderable } from 'mol-gl/renderable';
+import { Vec2 } from 'mol-math/linear-algebra';
+import { ParamDefinition as PD } from 'mol-util/param-definition';
+
+const SSAOPassSchema = {
+    ...QuadSchema,
+    tColor: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'),
+    tDepth: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'),
+    uTexSize: UniformSpec('v2'),
+
+    uEnable: UniformSpec('i'),
+    uKernelSize: UniformSpec('i'),
+    uBias: UniformSpec('f'),
+    uRadius: UniformSpec('f'),
+
+    uEdgeScale: UniformSpec('f'),
+    uEdgeThreshold: UniformSpec('f'),
+}
+
+export const SSAOPassParams = {
+    enable: PD.Boolean(true),
+    kernelSize: PD.Numeric(4, { min: 1, max: 100, step: 1 }),
+    bias: PD.Numeric(0.5, { min: 0, max: 1, step: 0.01 }),
+    radius: PD.Numeric(128, { min: 0, max: 256, step: 1 }),
+
+    edgeScale: PD.Numeric(1, { min: 0, max: 10, step: 1 }),
+    edgeThreshold: PD.Numeric(0.8, { min: 0, max: 1, step: 0.01 }),
+}
+export type SSAOPassProps = PD.Values<typeof SSAOPassParams>
+
+export function getSSAOPassRenderable(ctx: WebGLContext, colorTexture: Texture, depthTexture: Texture, props: Partial<SSAOPassProps>) {
+    const p = { ...PD.getDefaultValues(SSAOPassParams), props }
+    const values: Values<typeof SSAOPassSchema> = {
+        ...QuadValues,
+        tColor: ValueCell.create(colorTexture),
+        tDepth: ValueCell.create(depthTexture),
+        uTexSize: ValueCell.create(Vec2.create(colorTexture.width, colorTexture.height)),
+
+        uEnable: ValueCell.create(p.enable ? 1 : 0),
+        uKernelSize: ValueCell.create(p.kernelSize),
+        uBias: ValueCell.create(p.bias),
+        uRadius: ValueCell.create(p.radius),
+
+        uEdgeScale: ValueCell.create(p.edgeScale * ctx.pixelRatio),
+        uEdgeThreshold: ValueCell.create(p.edgeThreshold),
+    }
+
+    const schema = { ...SSAOPassSchema }
+    const shaderCode = ShaderCode(
+        require('mol-gl/shader/quad.vert').default,
+        require('mol-gl/shader/passes/ssao.frag').default
+    )
+    const renderItem = createComputeRenderItem(ctx, 'triangles', shaderCode, schema, values)
+
+    return createComputeRenderable(renderItem, values)
+}

src/mol-gl/compute/util.ts

@@ -10,6 +10,7 @@ import { printTextureImage } from 'mol-gl/renderable/util';
 import { defaults, ValueCell } from 'mol-util';
 import { ValueSpec, AttributeSpec, UniformSpec, Values } from 'mol-gl/renderable/schema';
 import { Vec2 } from 'mol-math/linear-algebra';
+import { GLRenderingContext } from 'mol-gl/webgl/compat';
 
 export const QuadPositions = new Float32Array([
      1.0,  1.0,  -1.0,  1.0,  -1.0, -1.0, // First triangle
@@ -32,12 +33,21 @@ export const QuadValues: Values<typeof QuadSchema> = {
 
 //
 
+function getArrayForTexture(gl:GLRenderingContext, texture: Texture, size: number) {
+    switch (texture.type) {
+        case gl.UNSIGNED_BYTE: return new Uint8Array(size)
+        case gl.FLOAT: return new Float32Array(size)
+    }
+    throw new Error('unknown/unsupported texture type')
+}
+
 export function readTexture(ctx: WebGLContext, texture: Texture, width?: number, height?: number) {
     const { gl, framebufferCache } = ctx
     width = defaults(width, texture.width)
     height = defaults(height, texture.height)
+    const size = width * height * 4
     const framebuffer = framebufferCache.get('read-texture').value
-    const array = texture.type === gl.UNSIGNED_BYTE ? new Uint8Array(width * height * 4) : new Float32Array(width * height * 4)
+    const array = getArrayForTexture(gl, texture, size)
     framebuffer.bind()
     texture.attachFramebuffer(framebuffer, 0)
     ctx.readPixels(0, 0, width, height, array)

src/mol-gl/renderable/schema.ts

@@ -47,6 +47,7 @@ export type KindValue = {
 
     'image-uint8': TextureImage<Uint8Array>
     'image-float32': TextureImage<Float32Array>
+    'image-depth': TextureImage<Uint8Array> // TODO should be Uint32Array
     'volume-uint8': TextureVolume<Uint8Array>
     'volume-float32': TextureVolume<Float32Array>
     'texture': Texture

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

@@ -0,0 +1,79 @@
+precision highp float;
+precision highp int;
+precision highp sampler2D;
+
+uniform sampler2D tColor;
+uniform sampler2D tDepth;
+uniform vec2 uTexSize;
+
+uniform int uEnable;
+uniform int uKernelSize;
+uniform float uBias;
+uniform float uRadius;
+
+uniform float uEdgeScale;
+uniform float uEdgeThreshold;
+
+const float noiseAmount = 0.0002;
+
+float noise(vec2 coords) {
+	float a = 12.9898;
+	float b = 78.233;
+	float c = 43758.5453;
+	float dt = dot(coords, vec2(a,b));
+	float sn = mod(dt, 3.14159);
+	
+	return fract(sin(sn) * c);
+}
+
+float calcSSAO(in vec2 coords, in float depth) {
+	float occlusionFactor = 0.0;
+	
+	for (int i = -uKernelSize; i <= uKernelSize; i++) {
+		for (int j = -uKernelSize; j <= uKernelSize; j++) {
+			vec2 coordsDelta = coords + uRadius / float(uKernelSize) * vec2(float(i) / uTexSize.x, float(j) / uTexSize.y);
+            coordsDelta += noiseAmount * (noise(coordsDelta) - 0.5) / uTexSize;
+            coordsDelta = clamp(coordsDelta, 0.5 / uTexSize, 1.0 - 1.0 / uTexSize);
+			if (texture2D(tDepth, coordsDelta).r < depth) occlusionFactor += 1.0;
+		}
+	}
+
+	return occlusionFactor / float((2 * uKernelSize + 1) * (2 * uKernelSize + 1));
+}
+
+float calcEdgeDepth(in vec2 coords) {
+    vec2 invTexSize = 1.0 / uTexSize;
+    float halfScaleFloor = floor(uEdgeScale * 0.5);
+    float halfScaleCeil = ceil(uEdgeScale * 0.5);
+
+    vec2 bottomLeftUV = coords - invTexSize * halfScaleFloor;
+    vec2 topRightUV = coords + invTexSize * halfScaleCeil;  
+    vec2 bottomRightUV = coords + vec2(invTexSize.x * halfScaleCeil, -invTexSize.y * halfScaleFloor);
+    vec2 topLeftUV = coords + vec2(-invTexSize.x * halfScaleFloor, invTexSize.y * halfScaleCeil);
+
+    float depth0 = texture2D(tDepth, bottomLeftUV).r;
+    float depth1 = texture2D(tDepth, topRightUV).r;
+    float depth2 = texture2D(tDepth, bottomRightUV).r;
+    float depth3 = texture2D(tDepth, topLeftUV).r;
+
+    float depthFiniteDifference0 = depth1 - depth0;
+    float depthFiniteDifference1 = depth3 - depth2;
+
+    return sqrt(pow(depthFiniteDifference0, 2.0) + pow(depthFiniteDifference1, 2.0)) * 100.0;
+}
+
+void main(void) {
+	vec2 coords = gl_FragCoord.xy / uTexSize;
+	vec4 color = texture(tColor, coords);
+    float depth = texture(tDepth, coords).r;
+	
+	// calculate screen-space ambient occlusion
+	if ((uEnable != 0) && (depth != 1.0)) {
+		float occlusionFactor = calcSSAO(coords, depth);
+		color = mix(color, vec4(0.0, 0.0, 0.0, 1.0), uBias * occlusionFactor);
+	}
+
+    color.rgb *= (step(calcEdgeDepth(coords), uEdgeThreshold));
+	
+	gl_FragColor = color;
+}

src/mol-gl/webgl/compat.ts

@@ -220,4 +220,22 @@ export interface COMPAT_shader_texture_lod {
 
 export function getShaderTextureLod(gl: GLRenderingContext): COMPAT_shader_texture_lod | null {
     return isWebGL2(gl) ? {} : gl.getExtension('EXT_shader_texture_lod')
+}
+
+export interface COMPAT_depth_texture {
+    readonly UNSIGNED_INT_24_8: number;
+}
+
+export function getDepthTexture(gl: GLRenderingContext): COMPAT_depth_texture | null {
+    if(isWebGL2(gl)) {
+        return {
+            UNSIGNED_INT_24_8: gl.UNSIGNED_INT_24_8
+        }
+    } else {
+        const ext = gl.getExtension('WEBGL_depth_texture')
+        if (ext === null) return null
+        return {
+            UNSIGNED_INT_24_8: ext.UNSIGNED_INT_24_8_WEBGL
+        }
+    }
 }

src/mol-gl/webgl/context.ts

@@ -6,7 +6,7 @@
 
 import { createProgramCache, ProgramCache } from './program'
 import { createShaderCache, ShaderCache } from './shader'
-import { GLRenderingContext, COMPAT_instanced_arrays, COMPAT_standard_derivatives, COMPAT_vertex_array_object, getInstancedArrays, getStandardDerivatives, getVertexArrayObject, isWebGL2, COMPAT_element_index_uint, getElementIndexUint, COMPAT_texture_float, getTextureFloat, COMPAT_texture_float_linear, getTextureFloatLinear, COMPAT_blend_minmax, getBlendMinMax, getFragDepth, COMPAT_frag_depth, COMPAT_color_buffer_float, getColorBufferFloat, COMPAT_draw_buffers, getDrawBuffers, getShaderTextureLod, COMPAT_shader_texture_lod } from './compat';
+import { GLRenderingContext, COMPAT_instanced_arrays, COMPAT_standard_derivatives, COMPAT_vertex_array_object, getInstancedArrays, getStandardDerivatives, getVertexArrayObject, isWebGL2, COMPAT_element_index_uint, getElementIndexUint, COMPAT_texture_float, getTextureFloat, COMPAT_texture_float_linear, getTextureFloatLinear, COMPAT_blend_minmax, getBlendMinMax, getFragDepth, COMPAT_frag_depth, COMPAT_color_buffer_float, getColorBufferFloat, COMPAT_draw_buffers, getDrawBuffers, getShaderTextureLod, COMPAT_shader_texture_lod, getDepthTexture, COMPAT_depth_texture } from './compat';
 import { createFramebufferCache, FramebufferCache, checkFramebufferStatus } from './framebuffer';
 import { Scheduler } from 'mol-task';
 import { isDebugMode } from 'mol-util/debug';
@@ -124,8 +124,10 @@ function readPixels(gl: GLRenderingContext, x: number, y: number, width: number,
     if (isDebugMode) checkFramebufferStatus(gl)
     if (buffer instanceof Uint8Array) {
         gl.readPixels(x, y, width, height, gl.RGBA, gl.UNSIGNED_BYTE, buffer)
-    } else {
+    } else if (buffer instanceof Float32Array) {
         gl.readPixels(x, y, width, height, gl.RGBA, gl.FLOAT, buffer)
+    } else {
+        throw new Error('unsupported readPixels buffer type')
     }
     if (isDebugMode) checkError(gl)
 }
@@ -153,7 +155,9 @@ export type WebGLExtensions = {
     blendMinMax: COMPAT_blend_minmax
     textureFloat: COMPAT_texture_float
     textureFloatLinear: COMPAT_texture_float_linear
-    elementIndexUint: COMPAT_element_index_uint | null
+    elementIndexUint: COMPAT_element_index_uint
+    depthTexture: COMPAT_depth_texture
+
     vertexArrayObject: COMPAT_vertex_array_object | null
     fragDepth: COMPAT_frag_depth | null
     colorBufferFloat: COMPAT_color_buffer_float | null
@@ -184,8 +188,13 @@ function createExtensions(gl: GLRenderingContext): WebGLExtensions {
     }
     const elementIndexUint = getElementIndexUint(gl)
     if (elementIndexUint === null) {
-        console.warn('Could not find support for "element_index_uint"')
+        throw new Error('Could not find support for "element_index_uint"')
+    }
+    const depthTexture = getDepthTexture(gl)
+    if (depthTexture === null) {
+        throw new Error('Could not find support for "depth_texture"')
     }
+
     const vertexArrayObject = getVertexArrayObject(gl)
     if (vertexArrayObject === null) {
         console.log('Could not find support for "vertex_array_object"')
@@ -207,7 +216,6 @@ function createExtensions(gl: GLRenderingContext): WebGLExtensions {
         console.log('Could not find support for "shader_texture_lod"')
     }
     
-
     return {
         instancedArrays,
         standardDerivatives,
@@ -215,11 +223,13 @@ function createExtensions(gl: GLRenderingContext): WebGLExtensions {
         textureFloat,
         textureFloatLinear,
         elementIndexUint,
+        depthTexture,
+
         vertexArrayObject,
         fragDepth,
         colorBufferFloat,
         drawBuffers,
-        shaderTextureLod
+        shaderTextureLod,
     }
 }
 

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

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
@@ -7,7 +7,7 @@
 import { WebGLContext, createImageData } from './context'
 import { idFactory } from 'mol-util/id-factory';
 import { createTexture, Texture } from './texture';
-import { createFramebuffer } from './framebuffer';
+import { createFramebuffer, Framebuffer } from './framebuffer';
 import { createRenderbuffer } from './renderbuffer';
 import { TextureImage } from '../renderable/util';
 import { Mutable } from 'mol-util/type-helpers';
@@ -20,6 +20,7 @@ export interface RenderTarget {
     readonly height: number
     readonly image: TextureImage<any>
     readonly texture: Texture
+    readonly framebuffer: Framebuffer
 
     /** binds framebuffer and sets viewport to rendertarget's width and height */
     bind: () => void
@@ -30,7 +31,7 @@ export interface RenderTarget {
     destroy: () => void
 }
 
-export function createRenderTarget (ctx: WebGLContext, _width: number, _height: number): RenderTarget {
+export function createRenderTarget (ctx: WebGLContext, _width: number, _height: number, enableDepthTexture: boolean = false): RenderTarget {
     const { gl, stats } = ctx
 
     const image: Mutable<TextureImage<Uint8Array>> = {
@@ -68,6 +69,7 @@ export function createRenderTarget (ctx: WebGLContext, _width: number, _height:
         get height () { return _height },
         image,
         texture: targetTexture,
+        framebuffer,
 
         bind: () => {
             framebuffer.bind()
@@ -80,7 +82,6 @@ export function createRenderTarget (ctx: WebGLContext, _width: number, _height:
             image.width = _width
             image.height = _height
             targetTexture.load(image)
-
             depthRenderbuffer.setSize(_width, _height)
         },
         readBuffer,

src/mol-gl/webgl/texture.ts

@@ -18,14 +18,15 @@ const getNextTextureId = idFactory()
 export type TextureKindValue = {
     'image-uint8': TextureImage<Uint8Array>
     'image-float32': TextureImage<Float32Array>
+    'image-depth': TextureImage<Uint8Array> // TODO should be Uint32Array
     'volume-uint8': TextureVolume<Uint8Array>
     'volume-float32': TextureVolume<Float32Array>
     'texture': Texture
 }
 export type TextureValueType = ValueOf<TextureKindValue>
 export type TextureKind = keyof TextureKindValue
-export type TextureType = 'ubyte' | 'float'
-export type TextureFormat = 'alpha' | 'rgb' | 'rgba'
+export type TextureType = 'ubyte' | 'ushort' | 'float'
+export type TextureFormat = 'alpha' | 'rgb' | 'rgba' | 'depth'
 /** Numbers are shortcuts for color attachment */
 export type TextureAttachment = 'depth' | 'stencil' | 'color0' | 'color1' | 'color2' | 'color3' | 'color4' | 'color5' | 'color6' | 'color7' | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7
 export type TextureFilter = 'nearest' | 'linear'
@@ -35,6 +36,7 @@ export function getTarget(ctx: WebGLContext, kind: TextureKind): number {
     switch (kind) {
         case 'image-uint8': return gl.TEXTURE_2D
         case 'image-float32': return gl.TEXTURE_2D
+        case 'image-depth': return gl.TEXTURE_2D
     }
     if (isWebGL2(gl)) {
         switch (kind) {
@@ -49,10 +51,11 @@ export function getFormat(ctx: WebGLContext, format: TextureFormat, type: Textur
     const { gl } = ctx
     switch (format) {
         case 'alpha':
-            if (isWebGL2 && type === 'float') return (gl as WebGL2RenderingContext).RED
+            if (isWebGL2(gl) && type === 'float') return gl.RED
             else return gl.ALPHA
         case 'rgb': return gl.RGB
         case 'rgba': return gl.RGBA
+        case 'depth': return gl.DEPTH_COMPONENT
     }
 }
 
@@ -75,6 +78,8 @@ export function getInternalFormat(ctx: WebGLContext, format: TextureFormat, type
                     case 'ubyte': return gl.RGBA
                     case 'float': return gl.RGBA32F
                 }
+            case 'depth':
+                return gl.DEPTH_COMPONENT16
         }
     }
     return getFormat(ctx, format, type)
@@ -84,6 +89,7 @@ export function getType(ctx: WebGLContext, type: TextureType): number {
     const { gl } = ctx
     switch (type) {
         case 'ubyte': return gl.UNSIGNED_BYTE
+        case 'ushort': return gl.UNSIGNED_SHORT
         case 'float': return gl.FLOAT
     }
 }
@@ -152,7 +158,11 @@ export function createTexture(ctx: WebGLContext, kind: TextureKind, _format: Tex
     }
 
     // check texture kind and type compatability
-    if ((kind.endsWith('float32') && _type !== 'float') || kind.endsWith('uint8') && _type !== 'ubyte') {
+    if (
+        (kind.endsWith('float32') && _type !== 'float') || 
+        (kind.endsWith('uint8') && _type !== 'ubyte') || 
+        (kind.endsWith('depth') && _type !== 'ushort')
+    ) {
         throw new Error(`texture kind '${kind}' and type '${_type}' are incompatible`)
     }
 
@@ -226,19 +236,23 @@ export function createTexture(ctx: WebGLContext, kind: TextureKind, _format: Tex
         },
         attachFramebuffer: (framebuffer: Framebuffer, attachment: TextureAttachment, layer?: number) => {
             framebuffer.bind()
-            if (target === (gl as WebGL2RenderingContext).TEXTURE_3D) {
-                if (layer === undefined) throw new Error('need `layer` to attach 3D texture');
-                (gl as WebGL2RenderingContext).framebufferTextureLayer(gl.FRAMEBUFFER, getAttachment(ctx, attachment), texture, 0, layer)
-            } else {
+            if (target === gl.TEXTURE_2D) {
                 gl.framebufferTexture2D(gl.FRAMEBUFFER, getAttachment(ctx, attachment), gl.TEXTURE_2D, texture, 0)
+            } else if (isWebGL2(gl) && target === gl.TEXTURE_3D) {
+                if (layer === undefined) throw new Error('need `layer` to attach 3D texture')
+                gl.framebufferTextureLayer(gl.FRAMEBUFFER, getAttachment(ctx, attachment), texture, 0, layer)
+            } else {
+                throw new Error('unknown texture target')
             }
         },
         detachFramebuffer: (framebuffer: Framebuffer, attachment: TextureAttachment) => {
             framebuffer.bind()
-            if (target === (gl as WebGL2RenderingContext).TEXTURE_3D) {
-                (gl as WebGL2RenderingContext).framebufferTextureLayer(gl.FRAMEBUFFER, getAttachment(ctx, attachment), null, 0, 0)
-            } else {
+            if (target === gl.TEXTURE_2D) {
                 gl.framebufferTexture2D(gl.FRAMEBUFFER, getAttachment(ctx, attachment), gl.TEXTURE_2D, null, 0)
+            } else if (isWebGL2(gl) && target === gl.TEXTURE_3D) {
+                gl.framebufferTextureLayer(gl.FRAMEBUFFER, getAttachment(ctx, attachment), null, 0, 0)
+            } else {
+                throw new Error('unknown texture target')
             }
         },
         destroy: () => {

src/tests/browser/render-shape.ts

@@ -40,8 +40,8 @@ parent.appendChild(info)
 let prevReprLoci = Representation.Loci.Empty
 const canvas3d = Canvas3D.create(canvas, parent)
 canvas3d.animate()
-canvas3d.input.move.subscribe(async ({x, y}) => {
-    const pickingId = await canvas3d.identify(x, y)
+canvas3d.input.move.subscribe(({x, y}) => {
+    const pickingId = canvas3d.identify(x, y)
     let label = ''
     if (pickingId) {
         const reprLoci = canvas3d.getLoci(pickingId)