refactored postprocessing

src/mol-canvas3d/canvas3d.ts

@@ -30,7 +30,7 @@ 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 { getPostprocessingRenderable, PostprocessingParams, setPostprocessingProps } from './helper/postprocessing';
+import { PostprocessingParams, PostprocessingPass } from './helper/postprocessing';
 import { JitterVectors, getComposeRenderable } from './helper/multi-sample';
 import { GLRenderingContext } from 'mol-gl/webgl/compat';
 import { PixelData } from 'mol-util/image';
@@ -144,8 +144,7 @@ namespace Canvas3D {
             depthTexture.attachFramebuffer(drawTarget.framebuffer, 'depth')
         }
 
-        const postprocessingTarget = createRenderTarget(webgl, width, height)
-        const postprocessing = getPostprocessingRenderable(webgl, drawTarget.texture, depthTexture, !!depthTarget, p.postprocessing)
+        const postprocessing = new PostprocessingPass(webgl, drawTarget.texture, depthTexture, !!depthTarget, p.postprocessing)
 
         const composeTarget = createRenderTarget(webgl, width, height)
         const holdTarget = createRenderTarget(webgl, width, height)
@@ -232,7 +231,7 @@ namespace Canvas3D {
             }
         }
 
-        function renderDraw(postprocessingEnabled: boolean) {
+        function renderDraw() {
             renderer.setViewport(0, 0, width, height)
             renderer.render(scene, 'draw', true)
             if (debugHelper.isEnabled) {
@@ -240,7 +239,7 @@ namespace Canvas3D {
                 renderer.render(debugHelper.scene, 'draw', false)
             }
 
-            if (postprocessingEnabled && depthTarget) {
+            if (postprocessing.enabled && depthTarget) {
                 depthTarget.bind()
                 renderer.render(scene, 'depth', true)
                 if (debugHelper.isEnabled) {
@@ -250,16 +249,7 @@ namespace Canvas3D {
             }
         }
 
-        function renderPostprocessing() {
-            gl.viewport(0, 0, width, height)
-            state.disable(gl.SCISSOR_TEST)
-            state.disable(gl.BLEND)
-            state.disable(gl.DEPTH_TEST)
-            state.depthMask(false)
-            postprocessing.render()
-        }
-
-        function renderTemporalMultiSample(postprocessingEnabled: boolean) {
+        function renderTemporalMultiSample() {
             // based on the Multisample Anti-Aliasing Render Pass
             // contributed to three.js by bhouston / http://clara.io/
             //
@@ -277,13 +267,10 @@ namespace Canvas3D {
 
             if (i === 0) {
                 drawTarget.bind()
-                renderDraw(postprocessingEnabled)
-                if (postprocessingEnabled) {
-                    postprocessingTarget.bind()
-                    renderPostprocessing()
-                }
+                renderDraw()
+                if (postprocessing.enabled) postprocessing.render(false)
                 ValueCell.update(compose.values.uWeight, 1.0)
-                ValueCell.update(compose.values.tColor, postprocessingEnabled ? postprocessingTarget.texture : drawTarget.texture)
+                ValueCell.update(compose.values.tColor, postprocessing.enabled ? postprocessing.target.texture : drawTarget.texture)
                 compose.update()
 
                 holdTarget.bind()
@@ -294,7 +281,7 @@ namespace Canvas3D {
             const sampleWeight = 1.0 / offsetList.length
 
             camera.viewOffset.enabled = true
-            ValueCell.update(compose.values.tColor, postprocessingEnabled ? postprocessingTarget.texture : drawTarget.texture)
+            ValueCell.update(compose.values.tColor, postprocessing.enabled ? postprocessing.target.texture : drawTarget.texture)
             ValueCell.update(compose.values.uWeight, sampleWeight)
             compose.update()
 
@@ -310,11 +297,8 @@ namespace Canvas3D {
 
                 // render scene and optionally postprocess
                 drawTarget.bind()
-                renderDraw(postprocessingEnabled)
-                if (postprocessingEnabled) {
-                    postprocessingTarget.bind()
-                    renderPostprocessing()
-                }
+                renderDraw()
+                if (postprocessing.enabled) postprocessing.render(false)
 
                 // compose rendered scene with compose target
                 composeTarget.bind()
@@ -360,7 +344,7 @@ namespace Canvas3D {
             if (multiSampleIndex >= offsetList.length) multiSampleIndex = -1
         }
 
-        function renderMultiSample(postprocessingEnabled: boolean) {
+        function renderMultiSample() {
             // based on the Multisample Anti-Aliasing Render Pass
             // contributed to three.js by bhouston / http://clara.io/
             //
@@ -372,7 +356,7 @@ namespace Canvas3D {
             const roundingRange = 1 / 32
 
             camera.viewOffset.enabled = true
-            ValueCell.update(compose.values.tColor, postprocessingEnabled ? postprocessingTarget.texture : drawTarget.texture)
+            ValueCell.update(compose.values.tColor, postprocessing.enabled ? postprocessing.target.texture : drawTarget.texture)
             compose.update()
 
             const { width, height } = drawTarget
@@ -393,11 +377,8 @@ namespace Canvas3D {
 
                 // render scene and optionally postprocess
                 drawTarget.bind()
-                renderDraw(postprocessingEnabled)
-                if (postprocessingEnabled) {
-                    postprocessingTarget.bind()
-                    renderPostprocessing()
-                }
+                renderDraw()
+                if (postprocessing.enabled) postprocessing.render(false)
 
                 // compose rendered scene with compose target
                 composeTarget.bind()
@@ -449,7 +430,6 @@ namespace Canvas3D {
             } else {
                 multiSample = false
             }
-            const postprocessingEnabled = p.postprocessing.occlusionEnable || p.postprocessing.outlineEnable
 
             if (force || cameraChanged || multiSample) {
                 switch (variant) {
@@ -466,18 +446,15 @@ namespace Canvas3D {
                         renderer.setViewport(0, 0, width, height);
                         if (multiSample) {
                             if (p.multiSample === 'temporal') {
-                                renderTemporalMultiSample(postprocessingEnabled)
+                                renderTemporalMultiSample()
                             } else {
-                                renderMultiSample(postprocessingEnabled)
+                                renderMultiSample()
                             }
                         } else {
-                            if (postprocessingEnabled) drawTarget.bind()
+                            if (postprocessing.enabled) drawTarget.bind()
                             else webgl.unbindFramebuffer()
-                            renderDraw(postprocessingEnabled)
-                            if (postprocessingEnabled) {
-                                webgl.unbindFramebuffer()
-                                renderPostprocessing()
-                            }
+                            renderDraw()
+                            if (postprocessing.enabled) postprocessing.render(true)
                         }
                         pickDirty = true
                         break;
@@ -662,9 +639,7 @@ namespace Canvas3D {
                 if (props.multiSample !== undefined) p.multiSample = props.multiSample
                 if (props.sampleLevel !== undefined) p.sampleLevel = props.sampleLevel
 
-                if (props.postprocessing) {
-                    setPostprocessingProps(props.postprocessing, postprocessing, p.postprocessing, webgl)
-                }
+                if (props.postprocessing) postprocessing.setProps(props.postprocessing)
 
                 if (props.renderer) renderer.setProps(props.renderer)
                 if (props.trackball) controls.setProps(props.trackball)
@@ -682,7 +657,7 @@ namespace Canvas3D {
                     multiSample: p.multiSample,
                     sampleLevel: p.sampleLevel,
 
-                    postprocessing: { ...p.postprocessing },
+                    postprocessing: { ...postprocessing.props },
                     renderer: { ...renderer.props },
                     trackball: { ...controls.props },
                     debug: { ...debugHelper.props }
@@ -717,7 +692,7 @@ namespace Canvas3D {
             Viewport.set(controls.viewport, 0, 0, width, height)
 
             drawTarget.setSize(width, height)
-            postprocessingTarget.setSize(width, height)
+            postprocessing.setSize(width, height)
             composeTarget.setSize(width, height)
             holdTarget.setSize(width, height)
             if (depthTarget) {
@@ -725,7 +700,6 @@ namespace Canvas3D {
             } else {
                 depthTexture.define(width, height)
             }
-            ValueCell.update(postprocessing.values.uTexSize, Vec2.set(postprocessing.values.uTexSize.ref.value, width, height))
             ValueCell.update(compose.values.uTexSize, Vec2.set(compose.values.uTexSize.ref.value, width, height))
 
             pickScale = pickBaseScale / webgl.pixelRatio

src/mol-canvas3d/helper/postprocessing.ts

@@ -14,6 +14,7 @@ import { createComputeRenderItem } from 'mol-gl/webgl/render-item';
 import { createComputeRenderable, ComputeRenderable } from 'mol-gl/renderable';
 import { Vec2 } from 'mol-math/linear-algebra';
 import { ParamDefinition as PD } from 'mol-util/param-definition';
+import { createRenderTarget, RenderTarget } from 'mol-gl/webgl/render-target';
 
 const PostprocessingSchema = {
     ...QuadSchema,
@@ -77,36 +78,73 @@ export function getPostprocessingRenderable(ctx: WebGLContext, colorTexture: Tex
     return createComputeRenderable(renderItem, values)
 }
 
-export function setPostprocessingProps(props: Partial<PostprocessingProps>, postprocessing: PostprocessingRenderable, currentProps: PostprocessingProps, webgl: WebGLContext) {
-    if (props.occlusionEnable !== undefined) {
-        currentProps.occlusionEnable = props.occlusionEnable
-        ValueCell.update(postprocessing.values.dOcclusionEnable, props.occlusionEnable)
-    }
-    if (props.occlusionKernelSize !== undefined) {
-        currentProps.occlusionKernelSize = props.occlusionKernelSize
-        ValueCell.update(postprocessing.values.dOcclusionKernelSize, props.occlusionKernelSize)
-    }
-    if (props.occlusionBias !== undefined) {
-        currentProps.occlusionBias = props.occlusionBias
-        ValueCell.update(postprocessing.values.uOcclusionBias, props.occlusionBias)
-    }
-    if (props.occlusionRadius !== undefined) {
-        currentProps.occlusionRadius = props.occlusionRadius
-        ValueCell.update(postprocessing.values.uOcclusionRadius, props.occlusionRadius)
+export class PostprocessingPass {
+    target: RenderTarget
+    props: PostprocessingProps
+    renderable: PostprocessingRenderable
+
+    constructor(private webgl: WebGLContext, colorTexture: Texture, depthTexture: Texture, packedDepth: boolean, props: Partial<PostprocessingProps>) {
+        const { gl } = webgl
+        this.target = createRenderTarget(webgl, gl.drawingBufferWidth, gl.drawingBufferHeight)
+        this.props = { ...PD.getDefaultValues(PostprocessingParams), ...props }
+        this.renderable = getPostprocessingRenderable(webgl, colorTexture, depthTexture, packedDepth, this.props)
     }
 
-    if (props.outlineEnable !== undefined) {
-        currentProps.outlineEnable = props.outlineEnable
-        ValueCell.update(postprocessing.values.dOutlineEnable, props.outlineEnable)
+    get enabled() {
+        return this.props.occlusionEnable || this.props.outlineEnable
     }
-    if (props.outlineScale !== undefined) {
-        currentProps.outlineScale = props.outlineScale
-        ValueCell.update(postprocessing.values.uOutlineScale, props.outlineScale * webgl.pixelRatio)
+
+    setSize(width: number, height: number) {
+        this.target.setSize(width, height)
+        ValueCell.update(this.renderable.values.uTexSize, Vec2.set(this.renderable.values.uTexSize.ref.value, width, height))
     }
-    if (props.outlineThreshold !== undefined) {
-        currentProps.outlineThreshold = props.outlineThreshold
-        ValueCell.update(postprocessing.values.uOutlineThreshold, props.outlineThreshold)
+
+    setProps(props: Partial<PostprocessingProps>) {
+        if (props.occlusionEnable !== undefined) {
+            this.props.occlusionEnable = props.occlusionEnable
+            ValueCell.update(this.renderable.values.dOcclusionEnable, props.occlusionEnable)
+        }
+        if (props.occlusionKernelSize !== undefined) {
+            this.props.occlusionKernelSize = props.occlusionKernelSize
+            ValueCell.update(this.renderable.values.dOcclusionKernelSize, props.occlusionKernelSize)
+        }
+        if (props.occlusionBias !== undefined) {
+            this.props.occlusionBias = props.occlusionBias
+            ValueCell.update(this.renderable.values.uOcclusionBias, props.occlusionBias)
+        }
+        if (props.occlusionRadius !== undefined) {
+            this.props.occlusionRadius = props.occlusionRadius
+            ValueCell.update(this.renderable.values.uOcclusionRadius, props.occlusionRadius)
+        }
+
+        if (props.outlineEnable !== undefined) {
+            this.props.outlineEnable = props.outlineEnable
+            ValueCell.update(this.renderable.values.dOutlineEnable, props.outlineEnable)
+        }
+        if (props.outlineScale !== undefined) {
+            this.props.outlineScale = props.outlineScale
+            ValueCell.update(this.renderable.values.uOutlineScale, props.outlineScale * this.webgl.pixelRatio)
+        }
+        if (props.outlineThreshold !== undefined) {
+            this.props.outlineThreshold = props.outlineThreshold
+            ValueCell.update(this.renderable.values.uOutlineThreshold, props.outlineThreshold)
+        }
+
+        this.renderable.update()
     }
 
-    postprocessing.update()
+    render(toDrawingBuffer: boolean) {
+        const { gl, state } = this.webgl
+        if (toDrawingBuffer) {
+            this.webgl.unbindFramebuffer()
+            gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight)
+        } else {
+            this.target.bind()
+        }
+        state.disable(gl.SCISSOR_TEST)
+        state.disable(gl.BLEND)
+        state.disable(gl.DEPTH_TEST)
+        state.depthMask(false)
+        this.renderable.render()
+    }
 }