diff --git a/src/mol-canvas3d/canvas3d.ts b/src/mol-canvas3d/canvas3d.ts
index 358c5d3908dbd662aebdd9c4b1379d1d4d86aca6..9cb5fa513bebca3ea4d65335db9fb29f7752b4d0 100644
--- a/src/mol-canvas3d/canvas3d.ts
+++ b/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)
diff --git a/src/mol-canvas3d/helper/interaction-events.ts b/src/mol-canvas3d/helper/interaction-events.ts
index 4267ecf0a02bea0050eb6b4a1fe1644033abdeb4..394b6b9f770ece9e6d941e89a49bc18a46f2076c 100644
--- a/src/mol-canvas3d/helper/interaction-events.ts
+++ b/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;
}
diff --git a/src/mol-canvas3d/passes/ssao-pass.ts b/src/mol-canvas3d/passes/ssao-pass.ts
new file mode 100644
index 0000000000000000000000000000000000000000..23dd4ee451df33d9587d0f6439c3ee7701cf39e2
--- /dev/null
+++ b/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)
+}
\ No newline at end of file
diff --git a/src/mol-gl/compute/util.ts b/src/mol-gl/compute/util.ts
index fb7f9947e7f493b1d268c72fd9af38605c333135..0508154cf2a6e5900bcdcd5202d372d5b92ca5ef 100644
--- a/src/mol-gl/compute/util.ts
+++ b/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)
diff --git a/src/mol-gl/renderable/schema.ts b/src/mol-gl/renderable/schema.ts
index 4c9a9e453dcd536a60efccbc3c7ac8a06be8411c..cdc083cdb4b2c78687f49e096411ed3b19935519 100644
--- a/src/mol-gl/renderable/schema.ts
+++ b/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
diff --git a/src/mol-gl/shader/passes/ssao.frag b/src/mol-gl/shader/passes/ssao.frag
new file mode 100644
index 0000000000000000000000000000000000000000..0c46b26e3e4ee1003b536fe86bb55642cb64674d
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/mol-gl/webgl/compat.ts b/src/mol-gl/webgl/compat.ts
index 9021af77e7f829228e8755fbc84d73463651c949..ed2da5c59020e868963163349595c8ef5e22098c 100644
--- a/src/mol-gl/webgl/compat.ts
+++ b/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
+ }
+ }
}
\ No newline at end of file
diff --git a/src/mol-gl/webgl/context.ts b/src/mol-gl/webgl/context.ts
index aca8e579dcc80a93d21a5edc09af0362c5c6b3c6..d03a511bf62bc797f854d401c77d417143737552 100644
--- a/src/mol-gl/webgl/context.ts
+++ b/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,
}
}
diff --git a/src/mol-gl/webgl/render-target.ts b/src/mol-gl/webgl/render-target.ts
index 01f623ecc8658f02fbf14b913a23a8332197929a..6dea8717017d85454f22cc4512bc9e4d289a3bd2 100644
--- a/src/mol-gl/webgl/render-target.ts
+++ b/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,
diff --git a/src/mol-gl/webgl/texture.ts b/src/mol-gl/webgl/texture.ts
index 20cc12853ad6a7475e1359899da9d6757d7ad9a3..f5b7dec523ae81dfcef1ca12861228a964407d21 100644
--- a/src/mol-gl/webgl/texture.ts
+++ b/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: () => {
diff --git a/src/tests/browser/render-shape.ts b/src/tests/browser/render-shape.ts
index adc6c9eae42b7c5b3c54ff6a68db6007d7ca8871..124831af933b93214d6e7ac48647b5eee8ce06e2 100644
--- a/src/tests/browser/render-shape.ts
+++ b/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)