factored out setPostprocessingProps

src/mol-canvas3d/canvas3d.ts

@@ -31,7 +31,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 } from './helper/postprocessing';
+import { getPostprocessingRenderable, PostprocessingParams, setPostprocessingProps } from './helper/postprocessing';
 import { JitterVectors, getComposeRenderable } from './helper/multi-sample';
 
 export const Canvas3DParams = {
@@ -636,37 +636,7 @@ namespace Canvas3D {
                 if (props.sampleLevel !== undefined) p.sampleLevel = props.sampleLevel
 
                 if (props.postprocessing) {
-                    if (props.postprocessing.occlusionEnable !== undefined) {
-                        p.postprocessing.occlusionEnable = props.postprocessing.occlusionEnable
-                        ValueCell.update(postprocessing.values.dOcclusionEnable, props.postprocessing.occlusionEnable)
-                    }
-                    if (props.postprocessing.occlusionKernelSize !== undefined) {
-                        p.postprocessing.occlusionKernelSize = props.postprocessing.occlusionKernelSize
-                        ValueCell.update(postprocessing.values.dOcclusionKernelSize, props.postprocessing.occlusionKernelSize)
-                    }
-                    if (props.postprocessing.occlusionBias !== undefined) {
-                        p.postprocessing.occlusionBias = props.postprocessing.occlusionBias
-                        ValueCell.update(postprocessing.values.uOcclusionBias, props.postprocessing.occlusionBias)
-                    }
-                    if (props.postprocessing.occlusionRadius !== undefined) {
-                        p.postprocessing.occlusionRadius = props.postprocessing.occlusionRadius
-                        ValueCell.update(postprocessing.values.uOcclusionRadius, props.postprocessing.occlusionRadius)
-                    }
-
-                    if (props.postprocessing.outlineEnable !== undefined) {
-                        p.postprocessing.outlineEnable = props.postprocessing.outlineEnable
-                        ValueCell.update(postprocessing.values.dOutlineEnable, props.postprocessing.outlineEnable)
-                    }
-                    if (props.postprocessing.outlineScale !== undefined) {
-                        p.postprocessing.outlineScale = props.postprocessing.outlineScale
-                        ValueCell.update(postprocessing.values.uOutlineScale, props.postprocessing.outlineScale * webgl.pixelRatio)
-                    }
-                    if (props.postprocessing.outlineThreshold !== undefined) {
-                        p.postprocessing.outlineThreshold = props.postprocessing.outlineThreshold
-                        ValueCell.update(postprocessing.values.uOutlineThreshold, props.postprocessing.outlineThreshold)
-                    }
-
-                    postprocessing.update()
+                    setPostprocessingProps(props.postprocessing, postprocessing, p.postprocessing, webgl)
                 }
 
                 if (props.renderer) renderer.setProps(props.renderer)

src/mol-canvas3d/helper/postprocessing.ts

@@ -11,7 +11,7 @@ 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 { createComputeRenderable, ComputeRenderable } from 'mol-gl/renderable';
 import { Vec2 } from 'mol-math/linear-algebra';
 import { ParamDefinition as PD } from 'mol-util/param-definition';
 
@@ -43,7 +43,9 @@ export const PostprocessingParams = {
 }
 export type PostprocessingProps = PD.Values<typeof PostprocessingParams>
 
-export function getPostprocessingRenderable(ctx: WebGLContext, colorTexture: Texture, depthTexture: Texture, props: Partial<PostprocessingProps>) {
+type PostprocessingRenderable = ComputeRenderable<Values<typeof PostprocessingSchema>>
+
+export function getPostprocessingRenderable(ctx: WebGLContext, colorTexture: Texture, depthTexture: Texture, props: Partial<PostprocessingProps>): PostprocessingRenderable {
     const p = { ...PD.getDefaultValues(PostprocessingParams), props }
     const values: Values<typeof PostprocessingSchema> = {
         ...QuadValues,
@@ -69,4 +71,38 @@ export function getPostprocessingRenderable(ctx: WebGLContext, colorTexture: Tex
     const renderItem = createComputeRenderItem(ctx, 'triangles', shaderCode, schema, values)
 
     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)
+    }
+
+    if (props.outlineEnable !== undefined) {
+        currentProps.outlineEnable = props.outlineEnable
+        ValueCell.update(postprocessing.values.dOutlineEnable, props.outlineEnable)
+    }
+    if (props.outlineScale !== undefined) {
+        currentProps.outlineScale = props.outlineScale
+        ValueCell.update(postprocessing.values.uOutlineScale, props.outlineScale * webgl.pixelRatio)
+    }
+    if (props.outlineThreshold !== undefined) {
+        currentProps.outlineThreshold = props.outlineThreshold
+        ValueCell.update(postprocessing.values.uOutlineThreshold, props.outlineThreshold)
+    }
+
+    postprocessing.update()
 }