render passes refactoring

- simpler viewport handling
- shared render targets
- stereo camera fixes & improvements

src/apps/viewer/index.ts

@@ -254,6 +254,10 @@ export class Viewer {
             await repr.commit();
         });
     }
+
+    handleResize() {
+        this.plugin.layout.events.updated.next();
+    }
 }
 
 export interface VolumeIsovalueInfo {

src/mol-canvas3d/camera.ts

@@ -16,6 +16,8 @@ interface ICamera {
     readonly viewport: Viewport,
     readonly view: Mat4,
     readonly projection: Mat4,
+    readonly projectionView: Mat4,
+    readonly inverseProjectionView: Mat4,
     readonly state: Readonly<Camera.Snapshot>,
     readonly viewOffset: Camera.ViewOffset,
     readonly far: number,

src/mol-canvas3d/camera/stereo.ts

@@ -2,21 +2,56 @@
  * Copyright (c) 2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author David Sehnal <david.sehnal@gmail.com>
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
  *
  * Adapted from three.js, The MIT License, Copyright © 2010-2020 three.js authors
  */
 
 import { Mat4 } from '../../mol-math/linear-algebra';
-import { ParamDefinition } from '../../mol-util/param-definition';
+import { ParamDefinition as PD } from '../../mol-util/param-definition';
 import { Camera, ICamera } from '../camera';
 import { Viewport } from './util';
 
-export class StereoCamera {
+export const StereoCameraParams = {
+    eyeSeparation: PD.Numeric(0.064, { min: 0.01, max: 0.5, step: 0.001 }),
+    focus: PD.Numeric(10, { min: 1, max: 100, step: 0.01 }),
+};
+export const DefaultStereoCameraProps = PD.getDefaultValues(StereoCameraParams);
+export type StereoCameraProps = PD.Values<typeof StereoCameraParams>
+
+export { StereoCamera };
+
+class StereoCamera {
     readonly left: ICamera = new EyeCamera();
     readonly right: ICamera = new EyeCamera();
 
-    update(camera: Camera, params: StereoCameraParams) {
-        update(camera, params, this.left as EyeCamera, this.right as EyeCamera);
+    get viewport() {
+        return this.parent.viewport;
+    }
+
+    get viewOffset() {
+        return this.parent.viewOffset;
+    }
+
+    private props: StereoCameraProps
+
+    constructor(private parent: Camera, props: Partial<StereoCameraProps> = {}) {
+        this.props = { ...DefaultStereoCameraProps, ...props };
+    }
+
+    setProps(props: Partial<StereoCameraProps>) {
+        Object.assign(this.props, props);
+    }
+
+    update() {
+        this.parent.update();
+        update(this.parent, this.props, this.left as EyeCamera, this.right as EyeCamera);
+    }
+}
+
+namespace StereoCamera {
+    export function is(camera: Camera | StereoCamera): camera is StereoCamera {
+        return 'left' in camera && 'right' in camera;
     }
 }
 
@@ -24,6 +59,8 @@ class EyeCamera implements ICamera {
     viewport = Viewport.create(0, 0, 0, 0);
     view = Mat4();
     projection = Mat4();
+    projectionView = Mat4();
+    inverseProjectionView = Mat4();
     state: Readonly<Camera.Snapshot> = Camera.createDefaultSnapshot();
     viewOffset: Readonly<Camera.ViewOffset> = Camera.ViewOffset();
     far: number = 0;
@@ -32,16 +69,9 @@ class EyeCamera implements ICamera {
     fogNear: number = 0;
 }
 
-export const StereoCameraParams = {
-    aspect: ParamDefinition.Numeric(1, { min: 0.1, max: 3, step: 0.01 }),
-    eyeSeparation: ParamDefinition.Numeric(0.064, { min: 0.01, max: 0.5, step: 0.001 }),
-    focus: ParamDefinition.Numeric(10, { min: 1, max: 100, step: 0.01 }),
-};
-export type StereoCameraParams = ParamDefinition.Values<typeof StereoCameraParams>
-
 const eyeLeft = Mat4.identity(), eyeRight = Mat4.identity();
 
-function update(camera: ICamera, params: StereoCameraParams, left: EyeCamera, right: EyeCamera) {
+function update(camera: Camera, props: StereoCameraProps, left: EyeCamera, right: EyeCamera) {
     // Copy the states
 
     Viewport.copy(left.viewport, camera.viewport);
@@ -65,41 +95,47 @@ function update(camera: ICamera, params: StereoCameraParams, left: EyeCamera, ri
     right.fogNear = camera.fogNear;
 
     // update the view offsets
-    let w = (camera.viewport.width / 2) | 0;
+
+    const w = Math.floor(camera.viewport.width / 2);
+    const aspect = w / camera.viewport.height;
 
     left.viewport.width = w;
-    right.viewport.x = w;
+    right.viewport.x += w;
     right.viewport.width -= w;
 
     // update the projection and view matrices
 
-    const eyeSepHalf = params.eyeSeparation / 2;
-    const eyeSepOnProjection = eyeSepHalf * camera.near / params.focus;
-    const ymax = (camera.near * Math.tan(camera.state.fov * 0.5)) / /* cache.zoom */ 1;
+    const eyeSepHalf = props.eyeSeparation / 2;
+    const eyeSepOnProjection = eyeSepHalf * camera.near / props.focus;
+    const ymax = camera.near * Math.tan(camera.state.fov * 0.5);
     let xmin, xmax;
 
     // translate xOffset
 
-    eyeLeft[12] = - eyeSepHalf;
+    eyeLeft[12] = -eyeSepHalf;
     eyeRight[12] = eyeSepHalf;
 
     // for left eye
 
-    xmin = - ymax * params.aspect + eyeSepOnProjection;
-    xmax = ymax * params.aspect + eyeSepOnProjection;
+    xmin = -ymax * aspect + eyeSepOnProjection;
+    xmax = ymax * aspect + eyeSepOnProjection;
 
     left.projection[0] = 2 * camera.near / (xmax - xmin);
     left.projection[8] = (xmax + xmin) / (xmax - xmin);
 
     Mat4.mul(left.view, left.view, eyeLeft);
+    Mat4.mul(left.projectionView, left.projection, left.view);
+    Mat4.invert(left.inverseProjectionView, left.projectionView);
 
     // for right eye
 
-    xmin = - ymax * params.aspect - eyeSepOnProjection;
-    xmax = ymax * params.aspect - eyeSepOnProjection;
+    xmin = -ymax * aspect - eyeSepOnProjection;
+    xmax = ymax * aspect - eyeSepOnProjection;
 
     right.projection[0] = 2 * camera.near / (xmax - xmin);
     right.projection[8] = (xmax + xmin) / (xmax - xmin);
 
     Mat4.mul(right.view, right.view, eyeRight);
+    Mat4.mul(right.projectionView, right.projection, right.view);
+    Mat4.invert(right.inverseProjectionView, right.projectionView);
 }

src/mol-canvas3d/canvas3d.ts

@@ -21,25 +21,31 @@ import { MarkerAction } from '../mol-util/marker-action';
 import { Loci, EmptyLoci, isEmptyLoci } from '../mol-model/loci';
 import { Camera } from './camera';
 import { ParamDefinition as PD } from '../mol-util/param-definition';
-import { BoundingSphereHelper, DebugHelperParams } from './helper/bounding-sphere-helper';
+import { DebugHelperParams } from './helper/bounding-sphere-helper';
 import { SetUtils } from '../mol-util/set';
 import { Canvas3dInteractionHelper } from './helper/interaction-events';
 import { PostprocessingParams, PostprocessingPass } from './passes/postprocessing';
 import { MultiSampleParams, MultiSamplePass } from './passes/multi-sample';
-import { DrawPass } from './passes/draw';
-import { PickData, PickPass } from './passes/pick';
+import { PickData } from './passes/pick';
+import { PickHelper } from './passes/pick';
 import { ImagePass, ImageProps } from './passes/image';
 import { Sphere3D } from '../mol-math/geometry';
 import { isDebugMode } from '../mol-util/debug';
 import { CameraHelperParams } from './helper/camera-helper';
 import { produce } from 'immer';
-import { HandleHelper, HandleHelperParams } from './helper/handle-helper';
+import { HandleHelperParams } from './helper/handle-helper';
 import { StereoCamera, StereoCameraParams } from './camera/stereo';
+import { Helper } from './helper/helper';
+import { Passes } from './passes/passes';
 
 export const Canvas3DParams = {
     camera: PD.Group({
-        mode: PD.Select('perspective', [['perspective', 'Perspective'], ['orthographic', 'Orthographic']] as const, { label: 'Camera' }),
+        mode: PD.Select('perspective', PD.arrayToOptions(['perspective', 'orthographic'] as const), { label: 'Camera' }),
         helper: PD.Group(CameraHelperParams, { isFlat: true }),
+        stereo: PD.MappedStatic('off', {
+            on: PD.Group(StereoCameraParams),
+            off: PD.Group({})
+        }, { cycle: true, hideIf: p => p?.mode !== 'perspective' }),
         manualReset: PD.Boolean(false, { isHidden: true })
     }, { pivot: 'mode' }),
     cameraFog: PD.MappedStatic('on', {
@@ -61,10 +67,6 @@ export const Canvas3DParams = {
             height: PD.Numeric(128)
         })
     }),
-    stereo: PD.MappedStatic('off', {
-        on: PD.Group(StereoCameraParams),
-        off: PD.Group({})
-    }, { cycle: true }),
 
     cameraResetDurationMs: PD.Numeric(250, { min: 0, max: 1000, step: 1 }, { description: 'The time it takes to reset the camera.' }),
     transparentBackground: PD.Boolean(false),
@@ -136,7 +138,7 @@ namespace Canvas3D {
     export interface DragEvent { current: Representation.Loci, buttons: ButtonsType, button: ButtonsType.Flag, modifiers: ModifiersKeys, pageStart: Vec2, pageEnd: Vec2 }
     export interface ClickEvent { current: Representation.Loci, buttons: ButtonsType, button: ButtonsType.Flag, modifiers: ModifiersKeys, position?: Vec3 }
 
-    export function fromCanvas(canvas: HTMLCanvasElement, props: PartialCanvas3DProps = {}, attribs: Partial<{ antialias: boolean, pixelScale: number }> = {}) {
+    export function fromCanvas(canvas: HTMLCanvasElement, props: Partial<Canvas3DProps> = {}, attribs: Partial<{ antialias: boolean, pixelScale: number, pickScale: number }> = {}) {
         const gl = getGLContext(canvas, {
             alpha: true,
             antialias: attribs.antialias ?? true,
@@ -149,6 +151,7 @@ namespace Canvas3D {
         const { pixelScale } = attribs;
         const input = InputObserver.fromElement(canvas, { pixelScale });
         const webgl = createContext(gl, { pixelScale });
+        const passes = new Passes(webgl, attribs);
 
         if (isDebugMode) {
             const loseContextExt = gl.getExtension('WEBGL_lose_context');
@@ -183,11 +186,11 @@ namespace Canvas3D {
             if (isDebugMode) console.log('context restored');
         }, false);
 
-        return create(webgl, input, props, { pixelScale });
+        return create(webgl, input, passes, props, { pixelScale });
     }
 
-    export function create(webgl: WebGLContext, input: InputObserver, props: PartialCanvas3DProps = {}, attribs: Partial<{ pickScale: number, pixelScale: number }> = {}): Canvas3D {
-        const p = { ...DefaultCanvas3DParams, ...props };
+    export function create(webgl: WebGLContext, input: InputObserver, passes: Passes, props: Partial<Canvas3DProps> = {}, attribs: Partial<{ pixelScale: number }>): Canvas3D {
+        const p: Canvas3DProps = { ...DefaultCanvas3DParams, ...props };
 
         const reprRenderObjects = new Map<Representation.Any, Set<GraphicsRenderObject>>();
         const reprUpdatedSubscriptions = new Map<Representation.Any, Subscription>();
@@ -212,23 +215,14 @@ namespace Canvas3D {
             fog: p.cameraFog.name === 'on' ? p.cameraFog.params.intensity : 0,
             clipFar: p.cameraClipping.far
         }, { x, y, width, height }, { pixelScale: attribs.pixelScale });
-        const stereoCamera = new StereoCamera();
+        const stereoCamera = new StereoCamera(camera, p.camera.stereo.params);
 
         const controls = TrackballControls.create(input, camera, p.trackball);
         const renderer = Renderer.create(webgl, p.renderer);
-        const debugHelper = new BoundingSphereHelper(webgl, scene, p.debug);
-        const handleHelper = new HandleHelper(webgl, p.handle);
-        const interactionHelper = new Canvas3dInteractionHelper(identify, getLoci, input, camera);
+        const helper = new Helper(webgl, scene, p);
 
-        const drawPass = new DrawPass(webgl, renderer, scene, { standard: camera, stereo: stereoCamera }, debugHelper, handleHelper, {
-            cameraHelper: p.camera.helper
-        });
-        drawPass.isStereo = p.stereo.name === 'on';
-        const pickPass = new PickPass(webgl, renderer, scene, camera, stereoCamera, handleHelper, attribs.pickScale || 0.25, drawPass);
-        pickPass.isStereo = p.stereo.name === 'on';
-
-        const postprocessing = new PostprocessingPass(webgl, camera, drawPass, p.postprocessing);
-        const multiSample = new MultiSamplePass(webgl, camera, drawPass, postprocessing, p.multiSample);
+        const pickHelper = new PickHelper(webgl, renderer, scene, helper, passes.pick, { x, y, width, height });
+        const interactionHelper = new Canvas3dInteractionHelper(identify, getLoci, input, camera);
 
         let drawPending = false;
         let cameraResetRequested = false;
@@ -239,7 +233,7 @@ namespace Canvas3D {
             let loci: Loci = EmptyLoci;
             let repr: Representation.Any = Representation.Empty;
             if (pickingId) {
-                loci = handleHelper.getLoci(pickingId);
+                loci = helper.handle.getLoci(pickingId);
                 reprRenderObjects.forEach((_, _repr) => {
                     const _loci = _repr.getLoci(pickingId);
                     if (!isEmptyLoci(_loci)) {
@@ -260,15 +254,15 @@ namespace Canvas3D {
             if (repr) {
                 changed = repr.mark(loci, action);
             } else {
-                changed = handleHelper.mark(loci, action);
+                changed = helper.handle.mark(loci, action);
                 reprRenderObjects.forEach((_, _repr) => { changed = _repr.mark(loci, action) || changed; });
             }
             if (changed) {
                 scene.update(void 0, true);
-                handleHelper.scene.update(void 0, true);
-                const prevPickDirty = pickPass.pickDirty;
+                helper.handle.scene.update(void 0, true);
+                const prevPickDirty = pickHelper.dirty;
                 draw(true);
-                pickPass.pickDirty = prevPickDirty; // marking does not change picking buffers
+                pickHelper.dirty = prevPickDirty; // marking does not change picking buffers
             }
         }
 
@@ -280,25 +274,24 @@ namespace Canvas3D {
 
             let didRender = false;
             controls.update(currentTime);
-            Viewport.set(camera.viewport, x, y, width, height);
             const cameraChanged = camera.update();
-            const multiSampleChanged = multiSample.update(force || cameraChanged);
-
-            const isStereo = p.stereo.name === 'on';
+            const multiSampleChanged = passes.multiSample.update(force || cameraChanged, p.multiSample);
 
             if (force || cameraChanged || multiSampleChanged) {
-                if ((force || cameraChanged) && p.stereo.name === 'on') stereoCamera.update(camera, p.stereo.params);
+                let cam: Camera | StereoCamera = camera;
+                if (p.camera.stereo.name === 'on') {
+                    stereoCamera.update();
+                    cam = stereoCamera;
+                }
 
-                renderer.setViewport(x, y, width, height);
-                // TODO: support stereo rendering in multisampling
-                if (!isStereo && multiSample.enabled) {
-                    multiSample.render(true, p.transparentBackground);
+                if (MultiSamplePass.isEnabled(p.multiSample)) {
+                    passes.multiSample.render(renderer, cam, scene, helper, true, p.transparentBackground, p);
                 } else {
-                    const toDrawingBuffer = !postprocessing.enabled && scene.volumes.renderables.length === 0;
-                    drawPass.render(toDrawingBuffer, p.transparentBackground);
-                    if (!toDrawingBuffer) postprocessing.render(true);
+                    const toDrawingBuffer = !PostprocessingPass.isEnabled(p.postprocessing) && scene.volumes.renderables.length === 0;
+                    passes.draw.render(renderer, cam, scene, helper, toDrawingBuffer, p.transparentBackground);
+                    if (!toDrawingBuffer) passes.postprocessing.render(cam, true, p.postprocessing);
                 }
-                pickPass.pickDirty = true;
+                pickHelper.dirty = true;
                 didRender = true;
             }
 
@@ -347,7 +340,8 @@ namespace Canvas3D {
         }
 
         function identify(x: number, y: number): PickData | undefined {
-            return webgl.isContextLost ? undefined : pickPass.identify(x, y);
+            const cam = p.camera.stereo.name === 'on' ? stereoCamera : camera;
+            return webgl.isContextLost ? undefined : pickHelper.identify(x, y, cam);
         }
 
         function commit(isSynchronous: boolean = false) {
@@ -356,7 +350,7 @@ namespace Canvas3D {
             if (allCommited) {
                 resolveCameraReset();
                 if (forceDrawAfterAllCommited) {
-                    if (debugHelper.isEnabled) debugHelper.update();
+                    if (helper.debug.isEnabled) helper.debug.update();
                     draw(true);
                     forceDrawAfterAllCommited = false;
                 }
@@ -414,7 +408,7 @@ namespace Canvas3D {
 
             if (!scene.commit(isSynchronous ? void 0 : sceneCommitTimeoutMs)) return false;
 
-            if (debugHelper.isEnabled) debugHelper.update();
+            if (helper.debug.isEnabled) helper.debug.update();
             if (!p.camera.manualReset && (reprCount.value === 0 || shouldResetCamera())) {
                 cameraResetRequested = true;
             }
@@ -494,7 +488,8 @@ namespace Canvas3D {
             return {
                 camera: {
                     mode: camera.state.mode,
-                    helper: { ...drawPass.props.cameraHelper },
+                    helper: { ...helper.camera.props },
+                    stereo: { ...p.camera.stereo },
                     manualReset: !!p.camera.manualReset
                 },
                 cameraFog: camera.state.fog > 0
@@ -504,21 +499,18 @@ namespace Canvas3D {
                 cameraResetDurationMs: p.cameraResetDurationMs,
                 transparentBackground: p.transparentBackground,
                 viewport: p.viewport,
-                stereo: p.stereo,
 
-                postprocessing: { ...postprocessing.props },
-                multiSample: { ...multiSample.props },
+                postprocessing: { ...p.postprocessing },
+                multiSample: { ...p.multiSample },
                 renderer: { ...renderer.props },
                 trackball: { ...controls.props },
-                debug: { ...debugHelper.props },
-                handle: { ...handleHelper.props },
+                debug: { ...helper.debug.props },
+                handle: { ...helper.handle.props },
             };
         }
 
-        handleResize();
-
         const contextRestoredSub = contextRestored.subscribe(() => {
-            pickPass.pickDirty = true;
+            pickHelper.dirty = true;
             draw(true);
         });
 
@@ -542,7 +534,7 @@ namespace Canvas3D {
                 reprUpdatedSubscriptions.clear();
                 reprRenderObjects.clear();
                 scene.clear();
-                debugHelper.clear();
+                helper.debug.clear();
                 requestDraw(true);
                 reprCount.next(reprRenderObjects.size);
             },
@@ -553,7 +545,7 @@ namespace Canvas3D {
                 }
 
                 if (scene.syncVisibility()) {
-                    if (debugHelper.isEnabled) debugHelper.update();
+                    if (helper.debug.isEnabled) helper.debug.update();
                 }
                 requestDraw(true);
             },
@@ -565,7 +557,12 @@ namespace Canvas3D {
             mark,
             getLoci,
 
-            handleResize,
+            handleResize: () => {
+                passes.updateSize();
+                updateViewport();
+                syncViewport();
+                requestDraw(true);
+            },
             requestCameraReset: options => {
                 nextCameraResetDuration = options?.durationMs;
                 nextCameraResetSnapshot = options?.snapshot;
@@ -602,31 +599,35 @@ namespace Canvas3D {
                 }
                 if (Object.keys(cameraState).length > 0) camera.setState(cameraState);
 
-                if (props.camera?.helper) drawPass.setProps({ cameraHelper: props.camera.helper });
+                if (props.camera?.helper) helper.camera.setProps(props.camera.helper);
                 if (props.camera?.manualReset !== undefined) p.camera.manualReset = props.camera.manualReset;
+                if (props.camera?.stereo !== undefined) Object.assign(p.camera.stereo, props.camera.stereo);
                 if (props.cameraResetDurationMs !== undefined) p.cameraResetDurationMs = props.cameraResetDurationMs;
                 if (props.transparentBackground !== undefined) p.transparentBackground = props.transparentBackground;
                 if (props.viewport !== undefined) {
+                    // clear old viewport
+                    renderer.setViewport(x, y, width, height);
+                    renderer.clear(p.transparentBackground);
                     p.viewport = props.viewport;
-                    handleResize();
-                }
-                if (props.stereo !== undefined) {
-                    p.stereo = props.stereo;
-                    pickPass.isStereo = p.stereo.name === 'on';
-                    drawPass.isStereo = p.stereo.name === 'on';
+                    updateViewport();
+                    syncViewport();
                 }
 
-                if (props.postprocessing) postprocessing.setProps(props.postprocessing);
-                if (props.multiSample) multiSample.setProps(props.multiSample);
+                if (props.postprocessing) Object.assign(p.postprocessing, props.postprocessing);
+                if (props.multiSample) Object.assign(p.multiSample, props.multiSample);
                 if (props.renderer) renderer.setProps(props.renderer);
                 if (props.trackball) controls.setProps(props.trackball);
-                if (props.debug) debugHelper.setProps(props.debug);
-                if (props.handle) handleHelper.setProps(props.handle);
+                if (props.debug) helper.debug.setProps(props.debug);
+                if (props.handle) helper.handle.setProps(props.handle);
+
+                if (cameraState.mode === 'orthographic') {
+                    p.camera.stereo.name = 'off';
+                }
 
                 requestDraw(true);
             },
             getImagePass: (props: Partial<ImageProps> = {}) => {
-                return new ImagePass(webgl, renderer, scene, camera, debugHelper, handleHelper, props);
+                return new ImagePass(webgl, renderer, scene, camera, helper, props);
             },
 
             get props() {
@@ -645,7 +646,7 @@ namespace Canvas3D {
                 contextRestoredSub.unsubscribe();
 
                 scene.clear();
-                debugHelper.clear();
+                helper.debug.clear();
                 input.dispose();
                 controls.dispose();
                 renderer.dispose();
@@ -667,19 +668,11 @@ namespace Canvas3D {
             }
         }
 
-        function handleResize() {
-            updateViewport();
-
+        function syncViewport() {
+            pickHelper.setViewport(x, y, width, height);
             renderer.setViewport(x, y, width, height);
             Viewport.set(camera.viewport, x, y, width, height);
             Viewport.set(controls.viewport, x, y, width, height);
-
-            drawPass.setSize(width, height);
-            pickPass.setSize(width, height);
-            postprocessing.setSize(width, height);
-            multiSample.setSize(width, height);
-
-            requestDraw(true);
         }
     }
 }

src/mol-canvas3d/helper/helper.ts

@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import Scene from '../../mol-gl/scene';
+import { WebGLContext } from '../../mol-gl/webgl/context';
+import { ParamDefinition as PD } from '../../mol-util/param-definition';
+import { BoundingSphereHelper, DebugHelperParams } from './bounding-sphere-helper';
+import { CameraHelper, CameraHelperParams } from './camera-helper';
+import { HandleHelper, HandleHelperParams } from './handle-helper';
+
+export const HelperParams = {
+    debug: PD.Group(DebugHelperParams),
+    camera: PD.Group({
+        helper: PD.Group(CameraHelperParams)
+    }),
+    handle: PD.Group(HandleHelperParams),
+};
+export const DefaultHelperProps = PD.getDefaultValues(HelperParams);
+export type HelperProps = PD.Values<typeof HelperParams>
+
+
+export class Helper {
+    readonly debug: BoundingSphereHelper
+    readonly camera: CameraHelper
+    readonly handle: HandleHelper
+
+    constructor(webgl: WebGLContext, scene: Scene, props: Partial<HelperProps> = {}) {
+        const p = { ...DefaultHelperProps, ...props };
+
+        this.debug = new BoundingSphereHelper(webgl, scene, p.debug);
+        this.camera = new CameraHelper(webgl, p.camera.helper);
+        this.handle = new HandleHelper(webgl, p.handle);
+    }
+}

src/mol-canvas3d/passes/draw.ts

@@ -8,12 +8,8 @@ import { WebGLContext } from '../../mol-gl/webgl/context';
 import { RenderTarget } from '../../mol-gl/webgl/render-target';
 import Renderer from '../../mol-gl/renderer';
 import Scene from '../../mol-gl/scene';
-import { BoundingSphereHelper } from '../helper/bounding-sphere-helper';
 import { Texture } from '../../mol-gl/webgl/texture';
-import { ICamera } from '../camera';
-import { CameraHelper, CameraHelperParams } from '../helper/camera-helper';
-import { ParamDefinition as PD } from '../../mol-util/param-definition';
-import { HandleHelper } from '../helper/handle-helper';
+import { Camera, ICamera } from '../camera';
 import { QuadSchema, QuadValues } from '../../mol-gl/compute/util';
 import { DefineSpec, TextureSpec, UniformSpec, Values } from '../../mol-gl/renderable/schema';
 import { ComputeRenderable, createComputeRenderable } from '../../mol-gl/renderable';
@@ -21,10 +17,11 @@ import { ShaderCode } from '../../mol-gl/shader-code';
 import { createComputeRenderItem } from '../../mol-gl/webgl/render-item';
 import { ValueCell } from '../../mol-util';
 import { Vec2 } from '../../mol-math/linear-algebra';
-import { StereoCamera } from '../camera/stereo';
+import { Helper } from '../helper/helper';
 
 import quad_vert from '../../mol-gl/shader/quad.vert';
 import depthMerge_frag from '../../mol-gl/shader/depth-merge.frag';
+import { StereoCamera } from '../camera/stereo';
 
 const DepthMergeSchema = {
     ...QuadSchema,
@@ -51,31 +48,20 @@ function getDepthMergeRenderable(ctx: WebGLContext, depthTexturePrimitives: Text
     return createComputeRenderable(renderItem, values);
 }
 
-export const DrawPassParams = {
-    cameraHelper: PD.Group(CameraHelperParams)
-};
-export const DefaultDrawPassProps = PD.getDefaultValues(DrawPassParams);
-export type DrawPassProps = PD.Values<typeof DrawPassParams>
-
 export class DrawPass {
     readonly colorTarget: RenderTarget
     readonly depthTexture: Texture
     readonly depthTexturePrimitives: Texture
-    readonly packedDepth: boolean
-
-    readonly cameraHelper: CameraHelper
 
+    private readonly packedDepth: boolean
     private depthTarget: RenderTarget
     private depthTargetPrimitives: RenderTarget | null
     private depthTargetVolumes: RenderTarget | null
     private depthTextureVolumes: Texture
     private depthMerge: DepthMergeRenderable
 
-    isStereo = false
-
-    constructor(private webgl: WebGLContext, private renderer: Renderer, private scene: Scene, private camera: { standard: ICamera, stereo?: StereoCamera }, private debugHelper: BoundingSphereHelper, private handleHelper: HandleHelper, props: Partial<DrawPassProps> = {}) {
+    constructor(private webgl: WebGLContext, width: number, height: number) {
         const { extensions, resources } = webgl;
-        const { width, height } = camera.standard.viewport;
 
         this.colorTarget = webgl.createRenderTarget(width, height);
         this.packedDepth = !extensions.depthTexture;
@@ -93,70 +79,52 @@ export class DrawPass {
             this.depthTextureVolumes.define(width, height);
         }
         this.depthMerge = getDepthMergeRenderable(webgl, this.depthTexturePrimitives, this.depthTextureVolumes, this.packedDepth);
-
-        const p = { ...DefaultDrawPassProps, ...props };
-        this.cameraHelper = new CameraHelper(webgl, p.cameraHelper);
     }
 
     setSize(width: number, height: number) {
-        this.colorTarget.setSize(width, height);
-        this.depthTarget.setSize(width, height);
+        const w = this.colorTarget.getWidth();
+        const h = this.colorTarget.getHeight();
 
-        if (this.depthTargetPrimitives) {
-            this.depthTargetPrimitives.setSize(width, height);
-        } else {
-            this.depthTexturePrimitives.define(width, height);
-        }
-
-        if (this.depthTargetVolumes) {
-            this.depthTargetVolumes.setSize(width, height);
-        } else {
-            this.depthTextureVolumes.define(width, height);
-        }
+        if (width !== w || height !== h) {
+            this.colorTarget.setSize(width, height);
+            this.depthTarget.setSize(width, height);
 
-        ValueCell.update(this.depthMerge.values.uTexSize, Vec2.set(this.depthMerge.values.uTexSize.ref.value, width, height));
-    }
-
-    setProps(props: Partial<DrawPassProps>) {
-        if (props.cameraHelper) this.cameraHelper.setProps(props.cameraHelper);
-    }
+            if (this.depthTargetPrimitives) {
+                this.depthTargetPrimitives.setSize(width, height);
+            } else {
+                this.depthTexturePrimitives.define(width, height);
+            }
 
-    get props(): DrawPassProps {
-        return {
-            cameraHelper: { ...this.cameraHelper.props }
-        };
-    }
+            if (this.depthTargetVolumes) {
+                this.depthTargetVolumes.setSize(width, height);
+            } else {
+                this.depthTextureVolumes.define(width, height);
+            }
 
-    render(toDrawingBuffer: boolean, transparentBackground: boolean) {
-        if (this.isStereo && this.camera.stereo) {
-            this._render(this.camera.stereo.left, toDrawingBuffer, transparentBackground);
-            this._render(this.camera.stereo.right, toDrawingBuffer, transparentBackground);
-        } else {
-            this._render(this.camera.standard, toDrawingBuffer, transparentBackground);
+            ValueCell.update(this.depthMerge.values.uTexSize, Vec2.set(this.depthMerge.values.uTexSize.ref.value, width, height));
         }
     }
 
-    private _render(camera: ICamera, toDrawingBuffer: boolean, transparentBackground: boolean) {
+    _render(renderer: Renderer, camera: ICamera, scene: Scene, helper: Helper, toDrawingBuffer: boolean, transparentBackground: boolean) {
         const { x, y, width, height } = camera.viewport;
+        renderer.setViewport(x, y, width, height);
+
         if (toDrawingBuffer) {
             this.webgl.unbindFramebuffer();
-            this.renderer.setViewport(x, y, width, height);
         } else {
             this.colorTarget.bind();
-            this.renderer.setViewport(x, y, width, height);
             if (!this.packedDepth) {
                 this.depthTexturePrimitives.attachFramebuffer(this.colorTarget.framebuffer, 'depth');
             }
         }
 
-        this.renderer.render(this.scene.primitives, camera, 'color', true, transparentBackground, null);
+        renderer.render(scene.primitives, camera, 'color', true, transparentBackground, 1, null);
 
         // do a depth pass if not rendering to drawing buffer and
         // extensions.depthTexture is unsupported (i.e. depthTarget is set)
         if (!toDrawingBuffer && this.depthTargetPrimitives) {
             this.depthTargetPrimitives.bind();
-            this.renderer.setViewport(x, y, width, height);
-            this.renderer.render(this.scene.primitives, camera, 'depth', true, transparentBackground, null);
+            renderer.render(scene.primitives, camera, 'depth', true, transparentBackground, 1, null);
             this.colorTarget.bind();
         }
 
@@ -165,14 +133,16 @@ export class DrawPass {
             if (!this.packedDepth) {
                 this.depthTextureVolumes.attachFramebuffer(this.colorTarget.framebuffer, 'depth');
                 this.webgl.state.depthMask(true);
+                this.webgl.gl.viewport(x, y, width, height);
+                this.webgl.gl.scissor(x, y, width, height);
                 this.webgl.gl.clear(this.webgl.gl.DEPTH_BUFFER_BIT);
             }
-            this.renderer.render(this.scene.volumes, camera, 'color', false, transparentBackground, this.depthTexturePrimitives);
+            renderer.render(scene.volumes, camera, 'color', false, transparentBackground, 1, this.depthTexturePrimitives);
 
             // do volume depth pass if extensions.depthTexture is unsupported (i.e. depthTarget is set)
             if (this.depthTargetVolumes) {
                 this.depthTargetVolumes.bind();
-                this.renderer.render(this.scene.volumes, camera, 'depth', true, transparentBackground, this.depthTexturePrimitives);
+                renderer.render(scene.volumes, camera, 'depth', true, transparentBackground, 1, this.depthTexturePrimitives);
                 this.colorTarget.bind();
             }
         }
@@ -181,28 +151,37 @@ export class DrawPass {
         if (!toDrawingBuffer) {
             this.depthMerge.update();
             this.depthTarget.bind();
-            this.renderer.setViewport(x, y, width, height);
-            this.webgl.state.disable(this.webgl.gl.SCISSOR_TEST);
+            // this.webgl.state.disable(this.webgl.gl.SCISSOR_TEST);
             this.webgl.state.disable(this.webgl.gl.BLEND);
             this.webgl.state.disable(this.webgl.gl.DEPTH_TEST);
             this.webgl.state.depthMask(false);
             this.webgl.state.clearColor(1, 1, 1, 1);
+            this.webgl.gl.viewport(x, y, width, height);
+            this.webgl.gl.scissor(x, y, width, height);
             this.webgl.gl.clear(this.webgl.gl.COLOR_BUFFER_BIT);
             this.depthMerge.render();
             this.colorTarget.bind();
-            this.renderer.setViewport(x, y, width, height);
         }
 
-        if (this.debugHelper.isEnabled) {
-            this.debugHelper.syncVisibility();
-            this.renderer.render(this.debugHelper.scene, camera, 'color', false, transparentBackground, null);
+        if (helper.debug.isEnabled) {
+            helper.debug.syncVisibility();
+            renderer.render(helper.debug.scene, camera, 'color', false, transparentBackground, 1, null);
+        }
+        if (helper.handle.isEnabled) {
+            renderer.render(helper.handle.scene, camera, 'color', false, transparentBackground, 1, null);
         }
-        if (this.handleHelper.isEnabled) {
-            this.renderer.render(this.handleHelper.scene, camera, 'color', false, transparentBackground, null);
+        if (helper.camera.isEnabled) {
+            helper.camera.update(camera);
+            renderer.render(helper.camera.scene, helper.camera.camera, 'color', false, transparentBackground, 1, null);
         }
-        if (this.cameraHelper.isEnabled) {
-            this.cameraHelper.update(camera);
-            this.renderer.render(this.cameraHelper.scene, this.cameraHelper.camera, 'color', false, transparentBackground, null);
+    }
+
+    render(renderer: Renderer, camera: Camera | StereoCamera, scene: Scene, helper: Helper, toDrawingBuffer: boolean, transparentBackground: boolean) {
+        if (StereoCamera.is(camera)) {
+            this._render(renderer, camera.left, scene, helper, toDrawingBuffer, transparentBackground);
+            this._render(renderer, camera.right, scene, helper, toDrawingBuffer, transparentBackground);
+        } else {
+            this._render(renderer, camera, scene, helper, toDrawingBuffer, transparentBackground);
         }
     }
 }

src/mol-canvas3d/passes/image.ts

@@ -8,21 +8,22 @@ import { WebGLContext } from '../../mol-gl/webgl/context';
 import { RenderTarget } from '../../mol-gl/webgl/render-target';
 import Renderer from '../../mol-gl/renderer';
 import Scene from '../../mol-gl/scene';
-import { BoundingSphereHelper } from '../helper/bounding-sphere-helper';
 import { ParamDefinition as PD } from '../../mol-util/param-definition';
-import { DrawPass, DrawPassParams } from './draw';
+import { DrawPass } from './draw';
 import { PostprocessingPass, PostprocessingParams } from './postprocessing';
 import { MultiSamplePass, MultiSampleParams } from './multi-sample';
 import { Camera } from '../camera';
 import { Viewport } from '../camera/util';
-import { HandleHelper } from '../helper/handle-helper';
 import { PixelData } from '../../mol-util/image';
+import { Helper } from '../helper/helper';
+import { CameraHelper, CameraHelperParams } from '../helper/camera-helper';
 
 export const ImageParams = {
     transparentBackground: PD.Boolean(false),
     multiSample: PD.Group(MultiSampleParams),
     postprocessing: PD.Group(PostprocessingParams),
-    drawPass: PD.Group(DrawPassParams),
+
+    cameraHelper: PD.Group(CameraHelperParams),
 };
 export type ImageProps = PD.Values<typeof ImageParams>
 
@@ -30,26 +31,33 @@ export class ImagePass {
     private _width = 1024
     private _height = 768
     private _camera = new Camera()
-    private _transparentBackground = false
+
+    readonly props: ImageProps
 
     private _colorTarget: RenderTarget
     get colorTarget() { return this._colorTarget; }
 
     readonly drawPass: DrawPass
+
     private readonly postprocessing: PostprocessingPass
     private readonly multiSample: MultiSamplePass
+    private readonly helper: Helper
 
     get width() { return this._width; }
     get height() { return this._height; }
 
-    constructor(private webgl: WebGLContext, private renderer: Renderer, scene: Scene, private camera: Camera, debugHelper: BoundingSphereHelper, handleHelper: HandleHelper, props: Partial<ImageProps>) {
-        const p = { ...PD.getDefaultValues(ImageParams), ...props };
+    constructor(private webgl: WebGLContext, private renderer: Renderer, private scene: Scene, private camera: Camera, helper: Helper, props: Partial<ImageProps>) {
+        this.props = { ...PD.getDefaultValues(ImageParams), ...props };
 
-        this._transparentBackground = p.transparentBackground;
+        this.drawPass = new DrawPass(webgl, 128, 128);
+        this.postprocessing = new PostprocessingPass(webgl, this.drawPass);
+        this.multiSample = new MultiSamplePass(webgl, this.drawPass, this.postprocessing);
 
-        this.drawPass = new DrawPass(webgl, renderer, scene, { standard: this._camera }, debugHelper, handleHelper, p.drawPass);
-        this.postprocessing = new PostprocessingPass(webgl, this._camera, this.drawPass, p.postprocessing);
-        this.multiSample = new MultiSamplePass(webgl, this._camera, this.drawPass, this.postprocessing, p.multiSample);
+        this.helper = {
+            camera: new CameraHelper(webgl, this.props.cameraHelper),
+            debug: helper.debug,
+            handle: helper.handle,
+        };
 
         this.setSize(this._width, this._height);
     }
@@ -61,24 +69,13 @@ export class ImagePass {
         this._height = height;
 
         this.drawPass.setSize(width, height);
-        this.postprocessing.setSize(width, height);
-        this.multiSample.setSize(width, height);
+        this.postprocessing.syncSize();
+        this.multiSample.syncSize();
     }
 
     setProps(props: Partial<ImageProps> = {}) {
-        if (props.transparentBackground !== undefined) this._transparentBackground = props.transparentBackground;
-        if (props.postprocessing) this.postprocessing.setProps(props.postprocessing);
-        if (props.multiSample) this.multiSample.setProps(props.multiSample);
-        if (props.drawPass) this.drawPass.setProps(props.drawPass);
-    }
-
-    get props(): ImageProps {
-        return {
-            transparentBackground: this._transparentBackground,
-            postprocessing: this.postprocessing.props,
-            multiSample: this.multiSample.props,
-            drawPass: this.drawPass.props
-        };
+        Object.assign(this.props, props);
+        if (props.cameraHelper) this.helper.camera.setProps(props.cameraHelper);
     }
 
     render() {
@@ -88,13 +85,13 @@ export class ImagePass {
 
         this.renderer.setViewport(0, 0, this._width, this._height);
 
-        if (this.multiSample.enabled) {
-            this.multiSample.render(false, this._transparentBackground);
+        if (MultiSamplePass.isEnabled(this.props.multiSample)) {
+            this.multiSample.render(this.renderer, this._camera, this.scene, this.helper, false, this.props.transparentBackground, this.props);
             this._colorTarget = this.multiSample.colorTarget;
         } else {
-            this.drawPass.render(false, this._transparentBackground);
-            if (this.postprocessing.enabled) {
-                this.postprocessing.render(false);
+            this.drawPass.render(this.renderer, this._camera, this.scene, this.helper, false, this.props.transparentBackground);
+            if (PostprocessingPass.isEnabled(this.props.postprocessing)) {
+                this.postprocessing.render(this._camera, false, this.props.postprocessing);
                 this._colorTarget = this.postprocessing.target;
             } else {
                 this._colorTarget = this.drawPass.colorTarget;

src/mol-canvas3d/passes/multi-sample.ts

@@ -16,8 +16,12 @@ import { createComputeRenderable, ComputeRenderable } from '../../mol-gl/rendera
 import { ParamDefinition as PD } from '../../mol-util/param-definition';
 import { RenderTarget } from '../../mol-gl/webgl/render-target';
 import { Camera } from '../../mol-canvas3d/camera';
-import { PostprocessingPass } from './postprocessing';
+import { PostprocessingPass, PostprocessingProps } from './postprocessing';
 import { DrawPass } from './draw';
+import Renderer from '../../mol-gl/renderer';
+import Scene from '../../mol-gl/scene';
+import { Helper } from '../helper/helper';
+import { StereoCamera } from '../camera/stereo';
 
 import quad_vert from '../../mol-gl/shader/quad.vert';
 import compose_frag from '../../mol-gl/shader/compose.frag';
@@ -51,8 +55,13 @@ export const MultiSampleParams = {
 };
 export type MultiSampleProps = PD.Values<typeof MultiSampleParams>
 
+type Props = { multiSample: MultiSampleProps, postprocessing: PostprocessingProps }
+
 export class MultiSamplePass {
-    props: MultiSampleProps
+    static isEnabled(props: MultiSampleProps) {
+        return props.mode !== 'off';
+    }
+
     colorTarget: RenderTarget
 
     private composeTarget: RenderTarget
@@ -61,25 +70,25 @@ export class MultiSamplePass {
 
     private sampleIndex = -2
 
-    constructor(private webgl: WebGLContext, private camera: Camera, private drawPass: DrawPass, private postprocessing: PostprocessingPass, props: Partial<MultiSampleProps>) {
-        const { gl, extensions } = webgl;
-        this.colorTarget = webgl.createRenderTarget(gl.drawingBufferWidth, gl.drawingBufferHeight, false);
-        this.composeTarget = webgl.createRenderTarget(gl.drawingBufferWidth, gl.drawingBufferHeight, false, extensions.colorBufferFloat ? 'float32' : 'uint8');
-        this.holdTarget = webgl.createRenderTarget(gl.drawingBufferWidth, gl.drawingBufferHeight, false);
+    constructor(private webgl: WebGLContext, private drawPass: DrawPass, private postprocessing: PostprocessingPass) {
+        const { extensions } = webgl;
+        const width = drawPass.colorTarget.getWidth();
+        const height = drawPass.colorTarget.getHeight();
+        this.colorTarget = webgl.createRenderTarget(width, height, false);
+        this.composeTarget = webgl.createRenderTarget(width, height, false, extensions.colorBufferFloat ? 'float32' : 'uint8');
+        this.holdTarget = webgl.createRenderTarget(width, height, false);
         this.compose = getComposeRenderable(webgl, drawPass.colorTarget.texture);
-        this.props = { ...PD.getDefaultValues(MultiSampleParams), ...props };
     }
 
-    get enabled() {
-        return this.props.mode !== 'off';
-    }
-
-    update(changed: boolean) {
+    update(changed: boolean, props: MultiSampleProps) {
         if (changed) this.sampleIndex = -1;
-        return this.props.mode === 'temporal' ? this.sampleIndex !== -2 : false;
+        return props.mode === 'temporal' ? this.sampleIndex !== -2 : false;
     }
 
-    setSize(width: number, height: number) {
+    syncSize() {
+        const width = this.drawPass.colorTarget.getWidth();
+        const height = this.drawPass.colorTarget.getHeight();
+
         const [w, h] = this.compose.values.uTexSize.ref.value;
         if (width !== w || height !== h) {
             this.colorTarget.setSize(width, height);
@@ -89,27 +98,16 @@ export class MultiSamplePass {
         }
     }
 
-    setProps(props: Partial<MultiSampleProps>) {
-        if (props.mode !== undefined) this.props.mode = props.mode;
-        if (props.sampleLevel !== undefined) this.props.sampleLevel = props.sampleLevel;
-    }
-
-    render(toDrawingBuffer: boolean, transparentBackground: boolean) {
-        if (this.props.mode === 'temporal') {
-            this.renderTemporalMultiSample(toDrawingBuffer, transparentBackground);
+    render(renderer: Renderer, camera: Camera | StereoCamera, scene: Scene, helper: Helper, toDrawingBuffer: boolean, transparentBackground: boolean, props: Props) {
+        if (props.multiSample.mode === 'temporal') {
+            this.renderTemporalMultiSample(renderer, camera, scene, helper, toDrawingBuffer, transparentBackground, props);
         } else {
-            this.renderMultiSample(toDrawingBuffer, transparentBackground);
+            this.renderMultiSample(renderer, camera, scene, helper, toDrawingBuffer, transparentBackground, props);
         }
     }
 
-    private setQuadShift(x: number, y: number) {
-        ValueCell.update(this.compose.values.uQuadShift, Vec2.set(
-            this.compose.values.uQuadShift.ref.value, x, y)
-        );
-    }
-
-    private renderMultiSample(toDrawingBuffer: boolean, transparentBackground: boolean) {
-        const { camera, compose, composeTarget, drawPass, postprocessing, webgl } = this;
+    private renderMultiSample(renderer: Renderer, camera: Camera | StereoCamera, scene: Scene, helper: Helper, toDrawingBuffer: boolean, transparentBackground: boolean, props: Props) {
+        const { compose, composeTarget, drawPass, postprocessing, webgl } = this;
         const { gl, state } = webgl;
 
         // based on the Multisample Anti-Aliasing Render Pass
@@ -117,24 +115,24 @@ export class MultiSamplePass {
         //
         // This manual approach to MSAA re-renders the scene once for
         // each sample with camera jitter and accumulates the results.
-        const offsetList = JitterVectors[ Math.max(0, Math.min(this.props.sampleLevel, 5)) ];
+        const offsetList = JitterVectors[ Math.max(0, Math.min(props.multiSample.sampleLevel, 5)) ];
 
+        const { x, y, width, height } = camera.viewport;
         const baseSampleWeight = 1.0 / offsetList.length;
         const roundingRange = 1 / 32;
 
+        const postprocessingEnabled = PostprocessingPass.isEnabled(props.postprocessing);
+
         camera.viewOffset.enabled = true;
-        ValueCell.update(compose.values.tColor, postprocessing.enabled ? postprocessing.target.texture : drawPass.colorTarget.texture);
+        ValueCell.update(compose.values.tColor, postprocessingEnabled ? postprocessing.target.texture : drawPass.colorTarget.texture);
         compose.update();
 
-        const { x, y, width, height } = camera.viewport;
-
         // render the scene multiple times, each slightly jitter offset
         // from the last and accumulate the results.
         for (let i = 0; i < offsetList.length; ++i) {
             const offset = offsetList[i];
             Camera.setViewOffset(camera.viewOffset, width, height, offset[0], offset[1], width, height);
             camera.update();
-            this.drawPass.cameraHelper.update(camera);
 
             // the theory is that equal weights for each sample lead to an accumulation of rounding
             // errors. The following equation varies the sampleWeight per sample so that it is uniformly
@@ -144,8 +142,8 @@ export class MultiSamplePass {
             ValueCell.update(compose.values.uWeight, sampleWeight);
 
             // render scene and optionally postprocess
-            drawPass.render(false, transparentBackground);
-            if (postprocessing.enabled) postprocessing.render(false);
+            drawPass.render(renderer, camera, scene, helper, false, transparentBackground);
+            if (postprocessingEnabled) postprocessing.render(camera, false, props.postprocessing);
 
             // compose rendered scene with compose target
             composeTarget.bind();
@@ -153,15 +151,13 @@ export class MultiSamplePass {
             state.blendEquationSeparate(gl.FUNC_ADD, gl.FUNC_ADD);
             state.blendFuncSeparate(gl.ONE, gl.ONE, gl.ONE, gl.ONE);
             state.disable(gl.DEPTH_TEST);
-            state.disable(gl.SCISSOR_TEST);
             state.depthMask(false);
+            gl.viewport(x, y, width, height);
+            gl.scissor(x, y, width, height);
             if (i === 0) {
                 state.clearColor(0, 0, 0, 0);
                 gl.clear(gl.COLOR_BUFFER_BIT);
             }
-            this.setQuadShift(0, 0);
-            gl.viewport(0, 0, width, height);
-            gl.scissor(0, 0, width, height);
             compose.render();
         }
 
@@ -174,9 +170,10 @@ export class MultiSamplePass {
         } else {
             this.colorTarget.bind();
         }
-        this.setQuadShift(x / width, y / height);
+
         gl.viewport(x, y, width, height);
         gl.scissor(x, y, width, height);
+
         state.disable(gl.BLEND);
         compose.render();
 
@@ -184,8 +181,8 @@ export class MultiSamplePass {
         camera.update();
     }
 
-    private renderTemporalMultiSample(toDrawingBuffer: boolean, transparentBackground: boolean) {
-        const { camera, compose, composeTarget, holdTarget, postprocessing, drawPass, webgl } = this;
+    private renderTemporalMultiSample(renderer: Renderer, camera: Camera | StereoCamera, scene: Scene, helper: Helper, toDrawingBuffer: boolean, transparentBackground: boolean, props: Props) {
+        const { compose, composeTarget, holdTarget, postprocessing, drawPass, webgl } = this;
         const { gl, state } = webgl;
 
         // based on the Multisample Anti-Aliasing Render Pass
@@ -193,7 +190,7 @@ export class MultiSamplePass {
         //
         // This manual approach to MSAA re-renders the scene once for
         // each sample with camera jitter and accumulates the results.
-        const offsetList = JitterVectors[ Math.max(0, Math.min(this.props.sampleLevel, 5)) ];
+        const offsetList = JitterVectors[ Math.max(0, Math.min(props.multiSample.sampleLevel, 5)) ];
 
         if (this.sampleIndex === -2) return;
         if (this.sampleIndex >= offsetList.length) {
@@ -203,42 +200,40 @@ export class MultiSamplePass {
 
         const { x, y, width, height } = camera.viewport;
         const sampleWeight = 1.0 / offsetList.length;
+        const postprocessingEnabled = PostprocessingPass.isEnabled(props.postprocessing);
 
         if (this.sampleIndex === -1) {
-            drawPass.render(false, transparentBackground);
-            if (postprocessing.enabled) postprocessing.render(false);
+            drawPass.render(renderer, camera, scene, helper, false, transparentBackground);
+            if (postprocessingEnabled) postprocessing.render(camera, false, props.postprocessing);
             ValueCell.update(compose.values.uWeight, 1.0);
-            ValueCell.update(compose.values.tColor, postprocessing.enabled ? postprocessing.target.texture : drawPass.colorTarget.texture);
+            ValueCell.update(compose.values.tColor, postprocessingEnabled ? postprocessing.target.texture : drawPass.colorTarget.texture);
             compose.update();
 
             holdTarget.bind();
             state.disable(gl.BLEND);
             state.disable(gl.DEPTH_TEST);
-            state.disable(gl.SCISSOR_TEST);
             state.depthMask(false);
-            this.setQuadShift(0, 0);
-            gl.viewport(0, 0, width, height);
-            gl.scissor(0, 0, width, height);
+            gl.viewport(x, y, width, height);
+            gl.scissor(x, y, width, height);
             compose.render();
             this.sampleIndex += 1;
         } else {
             camera.viewOffset.enabled = true;
-            ValueCell.update(compose.values.tColor, postprocessing.enabled ? postprocessing.target.texture : drawPass.colorTarget.texture);
+            ValueCell.update(compose.values.tColor, postprocessingEnabled ? postprocessing.target.texture : drawPass.colorTarget.texture);
             ValueCell.update(compose.values.uWeight, sampleWeight);
             compose.update();
 
             // render the scene multiple times, each slightly jitter offset
             // from the last and accumulate the results.
-            const numSamplesPerFrame = Math.pow(2, Math.max(0, this.props.sampleLevel - 2));
+            const numSamplesPerFrame = Math.pow(2, Math.max(0, props.multiSample.sampleLevel - 2));
             for (let i = 0; i < numSamplesPerFrame; ++i) {
                 const offset = offsetList[this.sampleIndex];
                 Camera.setViewOffset(camera.viewOffset, width, height, offset[0], offset[1], width, height);
                 camera.update();
-                this.drawPass.cameraHelper.update(camera);
 
                 // render scene and optionally postprocess
-                drawPass.render(false, transparentBackground);
-                if (postprocessing.enabled) postprocessing.render(false);
+                drawPass.render(renderer, camera, scene, helper, false, transparentBackground);
+                if (postprocessingEnabled) postprocessing.render(camera, false, props.postprocessing);
 
                 // compose rendered scene with compose target
                 composeTarget.bind();
@@ -246,15 +241,13 @@ export class MultiSamplePass {
                 state.blendEquationSeparate(gl.FUNC_ADD, gl.FUNC_ADD);
                 state.blendFuncSeparate(gl.ONE, gl.ONE, gl.ONE, gl.ONE);
                 state.disable(gl.DEPTH_TEST);
-                state.disable(gl.SCISSOR_TEST);
                 state.depthMask(false);
+                gl.viewport(x, y, width, height);
+                gl.scissor(x, y, width, height);
                 if (this.sampleIndex === 0) {
                     state.clearColor(0, 0, 0, 0);
                     gl.clear(gl.COLOR_BUFFER_BIT);
                 }
-                this.setQuadShift(0, 0);
-                gl.viewport(0, 0, width, height);
-                gl.scissor(0, 0, width, height);
                 compose.render();
 
                 this.sampleIndex += 1;
@@ -264,16 +257,13 @@ export class MultiSamplePass {
 
         if (toDrawingBuffer) {
             webgl.unbindFramebuffer();
-            this.setQuadShift(x / width, y / height);
-            gl.viewport(x, y, width, height);
-            gl.scissor(x, y, width, height);
         } else {
             this.colorTarget.bind();
-            this.setQuadShift(0, 0);
-            gl.viewport(0, 0, width, height);
-            gl.scissor(0, 0, width, height);
         }
 
+        gl.viewport(x, y, width, height);
+        gl.scissor(x, y, width, height);
+
         const accumulationWeight = this.sampleIndex * sampleWeight;
         if (accumulationWeight > 0) {
             ValueCell.update(compose.values.uWeight, 1.0);

src/mol-canvas3d/passes/passes.ts

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { DrawPass } from './draw';
+import { PickPass } from './pick';
+import { PostprocessingPass } from './postprocessing';
+import { MultiSamplePass } from './multi-sample';
+import { WebGLContext } from '../../mol-gl/webgl/context';
+
+export class Passes {
+    readonly draw: DrawPass
+    readonly pick: PickPass
+    readonly postprocessing: PostprocessingPass
+    readonly multiSample: MultiSamplePass
+
+    constructor(private webgl: WebGLContext, attribs: Partial<{ pickScale: number }> = {}) {
+        const { gl } = webgl;
+        this.draw = new DrawPass(webgl, gl.drawingBufferWidth, gl.drawingBufferHeight);
+        this.pick = new PickPass(webgl, this.draw, attribs.pickScale || 0.25);
+        this.postprocessing = new PostprocessingPass(webgl, this.draw);
+        this.multiSample = new MultiSamplePass(webgl, this.draw, this.postprocessing);
+    }
+
+    updateSize() {
+        const { gl } = this.webgl;
+        this.draw.setSize(gl.drawingBufferWidth, gl.drawingBufferHeight);
+        this.pick.syncSize();
+        this.postprocessing.syncSize();
+        this.multiSample.syncSize();
+    }
+}

src/mol-canvas3d/passes/pick.ts

@@ -15,7 +15,8 @@ import { decodeFloatRGB, unpackRGBAToDepth } from '../../mol-util/float-packing'
 import { Camera, ICamera } from '../camera';
 import { StereoCamera } from '../camera/stereo';
 import { cameraUnproject } from '../camera/util';
-import { HandleHelper } from '../helper/handle-helper';
+import { Viewport } from '../camera/util';
+import { Helper } from '../helper/helper';
 import { DrawPass } from './draw';
 
 const NullId = Math.pow(2, 24) - 2;
@@ -23,51 +24,33 @@ const NullId = Math.pow(2, 24) - 2;
 export type PickData = { id: PickingId, position: Vec3 }
 
 export class PickPass {
-    pickDirty = true
+    readonly objectPickTarget: RenderTarget
+    readonly instancePickTarget: RenderTarget
+    readonly groupPickTarget: RenderTarget
+    readonly depthPickTarget: RenderTarget
 
-    objectPickTarget: RenderTarget
-    instancePickTarget: RenderTarget
-    groupPickTarget: RenderTarget
-    depthPickTarget: RenderTarget
-
-    isStereo = false
-
-    private objectBuffer: Uint8Array
-    private instanceBuffer: Uint8Array
-    private groupBuffer: Uint8Array
-    private depthBuffer: Uint8Array
-
-    private pickScale: number
     private pickWidth: number
     private pickHeight: number
 
-    constructor(private webgl: WebGLContext, private renderer: Renderer, private scene: Scene, private camera: Camera, private stereoCamera: StereoCamera, private handleHelper: HandleHelper, private pickBaseScale: number, private drawPass: DrawPass) {
-        this.pickScale = pickBaseScale / webgl.pixelRatio;
-        this.pickWidth = Math.ceil(camera.viewport.width * this.pickScale);
-        this.pickHeight = Math.ceil(camera.viewport.height * this.pickScale);
+    constructor(private webgl: WebGLContext, private drawPass: DrawPass, readonly pickBaseScale: number) {
+        const pickScale = pickBaseScale / webgl.pixelRatio;
+        this.pickWidth = Math.ceil(drawPass.colorTarget.getWidth() * pickScale);
+        this.pickHeight = Math.ceil(drawPass.colorTarget.getHeight() * pickScale);
 
         this.objectPickTarget = webgl.createRenderTarget(this.pickWidth, this.pickHeight);
         this.instancePickTarget = webgl.createRenderTarget(this.pickWidth, this.pickHeight);
         this.groupPickTarget = webgl.createRenderTarget(this.pickWidth, this.pickHeight);
         this.depthPickTarget = webgl.createRenderTarget(this.pickWidth, this.pickHeight);
-
-        this.setupBuffers();
     }
 
-    private setupBuffers() {
-        const bufferSize = this.pickWidth * this.pickHeight * 4;
-        if (!this.objectBuffer || this.objectBuffer.length !== bufferSize) {
-            this.objectBuffer = new Uint8Array(bufferSize);
-            this.instanceBuffer = new Uint8Array(bufferSize);
-            this.groupBuffer = new Uint8Array(bufferSize);
-            this.depthBuffer = new Uint8Array(bufferSize);
-        }
+    get drawingBufferHeight() {
+        return this.drawPass.colorTarget.getHeight();
     }
 
-    setSize(width: number, height: number) {
-        this.pickScale = this.pickBaseScale / this.webgl.pixelRatio;
-        const pickWidth = Math.ceil(width * this.pickScale);
-        const pickHeight = Math.ceil(height * this.pickScale);
+    syncSize() {
+        const pickScale = this.pickBaseScale / this.webgl.pixelRatio;
+        const pickWidth = Math.ceil(this.drawPass.colorTarget.getWidth() * pickScale);
+        const pickHeight = Math.ceil(this.drawPass.colorTarget.getHeight() * pickScale);
 
         if (pickWidth !== this.pickWidth || pickHeight !== this.pickHeight) {
             this.pickWidth = pickWidth;
@@ -77,65 +60,92 @@ export class PickPass {
             this.instancePickTarget.setSize(this.pickWidth, this.pickHeight);
             this.groupPickTarget.setSize(this.pickWidth, this.pickHeight);
             this.depthPickTarget.setSize(this.pickWidth, this.pickHeight);
-
-            this.setupBuffers();
-        }
-    }
-
-    private renderVariant(variant: GraphicsRenderVariant) {
-        if (this.isStereo) {
-            const w = (this.pickWidth / 2) | 0;
-
-            this.renderer.setViewport(0, 0, w, this.pickHeight);
-            this._renderVariant(this.stereoCamera.left, variant);
-
-            this.renderer.setViewport(w, 0, this.pickWidth - w, this.pickHeight);
-            this._renderVariant(this.stereoCamera.right, variant);
-        } else {
-            this.renderer.setViewport(0, 0, this.pickWidth, this.pickHeight);
-            this._renderVariant(this.camera, variant);
         }
     }
 
-    private _renderVariant(camera: ICamera, variant: GraphicsRenderVariant) {
-        const { renderer, scene, handleHelper: { scene: handleScene } } = this;
+    private renderVariant(renderer: Renderer, camera: ICamera, scene: Scene, helper: Helper, variant: GraphicsRenderVariant) {
+        const pickScale = this.pickBaseScale / this.webgl.pixelRatio;
         const depth = this.drawPass.depthTexturePrimitives;
-
-        renderer.render(scene.primitives, camera, variant, true, false, null);
-        renderer.render(scene.volumes, camera, variant, false, false, depth);
-        renderer.render(handleScene, camera, variant, false, false, null);
+        renderer.render(scene.primitives, camera, variant, true, false, pickScale, null);
+        renderer.render(scene.volumes, camera, variant, false, false, pickScale, depth);
+        renderer.render(helper.handle.scene, camera, variant, false, false, pickScale, null);
     }
 
-    render() {
+    render(renderer: Renderer, camera: ICamera, scene: Scene, helper: Helper) {
         this.objectPickTarget.bind();
-        this.renderVariant('pickObject');
+        this.renderVariant(renderer, camera, scene, helper, 'pickObject');
 
         this.instancePickTarget.bind();
-        this.renderVariant('pickInstance');
+        this.renderVariant(renderer, camera, scene, helper, 'pickInstance');
 
         this.groupPickTarget.bind();
-        this.renderVariant('pickGroup');
+        this.renderVariant(renderer, camera, scene, helper, 'pickGroup');
 
         this.depthPickTarget.bind();
-        this.renderVariant('depth');
+        this.renderVariant(renderer, camera, scene, helper, 'depth');
+    }
+}
+
+export class PickHelper {
+    dirty = true
+
+    private objectBuffer: Uint8Array
+    private instanceBuffer: Uint8Array
+    private groupBuffer: Uint8Array
+    private depthBuffer: Uint8Array
+
+    private viewport = Viewport()
+
+    private pickScale: number
+    private pickX: number
+    private pickY: number
+    private pickWidth: number
+    private pickHeight: number
+    private halfPickWidth: number
 
-        this.pickDirty = false;
+    private setupBuffers() {
+        const bufferSize = this.pickWidth * this.pickHeight * 4;
+        if (!this.objectBuffer || this.objectBuffer.length !== bufferSize) {
+            this.objectBuffer = new Uint8Array(bufferSize);
+            this.instanceBuffer = new Uint8Array(bufferSize);
+            this.groupBuffer = new Uint8Array(bufferSize);
+            this.depthBuffer = new Uint8Array(bufferSize);
+        }
+    }
+
+    setViewport(x: number, y: number, width: number, height: number) {
+        Viewport.set(this.viewport, x, y, width, height);
+
+        this.pickScale = this.pickPass.pickBaseScale / this.webgl.pixelRatio;
+        this.pickX = Math.ceil(x * this.pickScale);
+        this.pickY = Math.ceil(y * this.pickScale);
+
+        const pickWidth = Math.ceil(width * this.pickScale);
+        const pickHeight = Math.ceil(height * this.pickScale);
+
+        if (pickWidth !== this.pickWidth || pickHeight !== this.pickHeight) {
+            this.pickWidth = pickWidth;
+            this.pickHeight = pickHeight;
+            this.halfPickWidth = Math.floor(this.pickWidth / 2);
+
+            this.setupBuffers();
+        }
     }
 
     private syncBuffers() {
-        const { webgl } = this;
+        const { pickX, pickY, pickWidth, pickHeight } = this;
 
-        this.objectPickTarget.bind();
-        webgl.readPixels(0, 0, this.pickWidth, this.pickHeight, this.objectBuffer);
+        this.pickPass.objectPickTarget.bind();
+        this.webgl.readPixels(pickX, pickY, pickWidth, pickHeight, this.objectBuffer);
 
-        this.instancePickTarget.bind();
-        webgl.readPixels(0, 0, this.pickWidth, this.pickHeight, this.instanceBuffer);
+        this.pickPass.instancePickTarget.bind();
+        this.webgl.readPixels(pickX, pickY, pickWidth, pickHeight, this.instanceBuffer);
 
-        this.groupPickTarget.bind();
-        webgl.readPixels(0, 0, this.pickWidth, this.pickHeight, this.groupBuffer);
+        this.pickPass.groupPickTarget.bind();
+        this.webgl.readPixels(pickX, pickY, pickWidth, pickHeight, this.groupBuffer);
 
-        this.depthPickTarget.bind();
-        webgl.readPixels(0, 0, this.pickWidth, this.pickHeight, this.depthBuffer);
+        this.pickPass.depthPickTarget.bind();
+        this.webgl.readPixels(pickX, pickY, pickWidth, pickHeight, this.depthBuffer);
     }
 
     private getBufferIdx(x: number, y: number): number {
@@ -153,34 +163,52 @@ export class PickPass {
         return decodeFloatRGB(buffer[idx], buffer[idx + 1], buffer[idx + 2]);
     }
 
-    identify(x: number, y: number): PickData | undefined {
-        const { webgl, pickScale, camera: { viewport } } = this;
+    private render(camera: Camera | StereoCamera) {
+        const { pickX, pickY, pickWidth, pickHeight, halfPickWidth } = this;
+
+        const { renderer, scene, helper } = this;
+
+        if (StereoCamera.is(camera)) {
+            this.renderer.setViewport(pickX, pickY, halfPickWidth, pickHeight);
+            this.pickPass.render(renderer, camera.left, scene, helper);
+
+            this.renderer.setViewport(pickX + halfPickWidth, pickY, pickWidth - halfPickWidth, pickHeight);
+            this.pickPass.render(renderer, camera.right, scene, helper);
+        } else {
+            this.renderer.setViewport(pickX, pickY, pickWidth, pickHeight);
+            this.pickPass.render(renderer, camera, scene, helper);
+        }
+
+        this.dirty = false;
+    }
+
+    identify(x: number, y: number, camera: Camera | StereoCamera): PickData | undefined {
+        const { webgl, pickScale } = this;
         if (webgl.isContextLost) return;
 
-        const { gl, pixelRatio } = webgl;
-        x *= pixelRatio;
-        y *= pixelRatio;
+        x *= webgl.pixelRatio;
+        y *= webgl.pixelRatio;
+        y = this.pickPass.drawingBufferHeight - y; // flip y
+
+        const { viewport } = this;
 
         // check if within viewport
         if (x < viewport.x ||
-            gl.drawingBufferHeight - y < viewport.y ||
+            y < viewport.y ||
             x > viewport.x + viewport.width ||
-            gl.drawingBufferHeight - y > viewport.y + viewport.height
-        ) {
-            return;
-        }
+            y > viewport.y + viewport.height
+        ) return;
 
-        if (this.pickDirty) {
-            this.render();
+        if (this.dirty) {
+            this.render(camera);
             this.syncBuffers();
         }
 
-        x -= viewport.x;
-        y += viewport.y; // plus because of flipped y
-        y = gl.drawingBufferHeight - y; // flip y
+        const xv = x - viewport.x;
+        const yv = y - viewport.y;
 
-        const xp = Math.floor(x * pickScale);
-        const yp = Math.floor(y * pickScale);
+        const xp = Math.floor(xv * pickScale);
+        const yp = Math.floor(yv * pickScale);
 
         const objectId = this.getId(xp, yp, this.objectBuffer);
         // console.log('objectId', objectId);
@@ -195,10 +223,25 @@ export class PickPass {
         if (groupId === -1 || groupId === NullId) return;
 
         const z = this.getDepth(xp, yp);
-        const position = Vec3.create(x, gl.drawingBufferHeight - y, z);
-        cameraUnproject(position, position, viewport, this.camera.inverseProjectionView);
+        const position = Vec3.create(x, viewport.height - y, z);
+        if (StereoCamera.is(camera)) {
+            const halfWidth = Math.floor(viewport.width / 2);
+            if (x > viewport.x + halfWidth) {
+                position[0] = viewport.x + (xv - halfWidth) * 2;
+                cameraUnproject(position, position, viewport, camera.right.inverseProjectionView);
+            } else {
+                position[0] = viewport.x + xv * 2;
+                cameraUnproject(position, position, viewport, camera.left.inverseProjectionView);
+            }
+        } else {
+            cameraUnproject(position, position, viewport, camera.inverseProjectionView);
+        }
 
         // console.log({ { objectId, instanceId, groupId }, position} );
         return { id: { objectId, instanceId, groupId }, position };
     }
+
+    constructor(private webgl: WebGLContext, private renderer: Renderer, private scene: Scene, private helper: Helper, private pickPass: PickPass, viewport: Viewport) {
+        this.setViewport(viewport.x, viewport.y, viewport.width, viewport.height);
+    }
 }

src/mol-canvas3d/passes/postprocessing.ts

@@ -16,11 +16,11 @@ import { Vec2, Vec3 } from '../../mol-math/linear-algebra';
 import { ParamDefinition as PD } from '../../mol-util/param-definition';
 import { RenderTarget } from '../../mol-gl/webgl/render-target';
 import { DrawPass } from './draw';
-import { Camera } from '../../mol-canvas3d/camera';
-import { produce } from 'immer';
+import { Camera, ICamera } from '../../mol-canvas3d/camera';
 
 import quad_vert from '../../mol-gl/shader/quad.vert';
 import postprocessing_frag from '../../mol-gl/shader/postprocessing.frag';
+import { StereoCamera } from '../camera/stereo';
 
 const PostprocessingSchema = {
     ...QuadSchema,
@@ -47,8 +47,7 @@ const PostprocessingSchema = {
 const PostprocessingShaderCode = ShaderCode('postprocessing', quad_vert, postprocessing_frag);
 type PostprocessingRenderable = ComputeRenderable<Values<typeof PostprocessingSchema>>
 
-function getPostprocessingRenderable(ctx: WebGLContext, colorTexture: Texture, depthTexture: Texture, packedDepth: boolean, props: Partial<PostprocessingProps>): PostprocessingRenderable {
-    const p = { ...PD.getDefaultValues(PostprocessingParams), ...props };
+function getPostprocessingRenderable(ctx: WebGLContext, colorTexture: Texture, depthTexture: Texture): PostprocessingRenderable {
     const values: Values<typeof PostprocessingSchema> = {
         ...QuadValues,
         tColor: ValueCell.create(colorTexture),
@@ -62,14 +61,14 @@ function getPostprocessingRenderable(ctx: WebGLContext, colorTexture: Texture, d
         uFogFar: ValueCell.create(10000),
         uFogColor: ValueCell.create(Vec3.create(1, 1, 1)),
 
-        dOcclusionEnable: ValueCell.create(p.occlusion.name === 'on'),
-        dOcclusionKernelSize: ValueCell.create(p.occlusion.name === 'on' ? p.occlusion.params.kernelSize : 4),
-        uOcclusionBias: ValueCell.create(p.occlusion.name === 'on' ? p.occlusion.params.bias : 0.5),
-        uOcclusionRadius: ValueCell.create(p.occlusion.name === 'on' ? p.occlusion.params.radius : 64),
+        dOcclusionEnable: ValueCell.create(false),
+        dOcclusionKernelSize: ValueCell.create(4),
+        uOcclusionBias: ValueCell.create(0.5),
+        uOcclusionRadius: ValueCell.create(64),
 
-        dOutlineEnable: ValueCell.create(p.outline.name === 'on'),
-        uOutlineScale: ValueCell.create((p.outline.name === 'on' ? p.outline.params.scale : 1) * ctx.pixelRatio),
-        uOutlineThreshold: ValueCell.create(p.outline.name === 'on' ? p.outline.params.threshold : 0.8),
+        dOutlineEnable: ValueCell.create(false),
+        uOutlineScale: ValueCell.create(1 * ctx.pixelRatio),
+        uOutlineThreshold: ValueCell.create(0.8),
     };
 
     const schema = { ...PostprocessingSchema };
@@ -98,22 +97,23 @@ export const PostprocessingParams = {
 export type PostprocessingProps = PD.Values<typeof PostprocessingParams>
 
 export class PostprocessingPass {
+    static isEnabled(props: PostprocessingProps) {
+        return props.occlusion.name === 'on' || props.outline.name === 'on';
+    }
+
     target: RenderTarget
-    props: PostprocessingProps
     renderable: PostprocessingRenderable
 
-    constructor(private webgl: WebGLContext, private camera: Camera, drawPass: DrawPass, props: Partial<PostprocessingProps>) {
-        this.target = webgl.createRenderTarget(camera.viewport.width, camera.viewport.height, false);
-        this.props = { ...PD.getDefaultValues(PostprocessingParams), ...props };
-        const { colorTarget, depthTexture, packedDepth } = drawPass;
-        this.renderable = getPostprocessingRenderable(webgl, colorTarget.texture, depthTexture, packedDepth, this.props);
+    constructor(private webgl: WebGLContext, private drawPass: DrawPass) {
+        this.target = webgl.createRenderTarget(drawPass.colorTarget.getWidth(), drawPass.colorTarget.getHeight(), false);
+        const { colorTarget, depthTexture } = drawPass;
+        this.renderable = getPostprocessingRenderable(webgl, colorTarget.texture, depthTexture);
     }
 
-    get enabled() {
-        return this.props.occlusion.name === 'on' || this.props.outline.name === 'on';
-    }
+    syncSize() {
+        const width = this.drawPass.colorTarget.getWidth();
+        const height = this.drawPass.colorTarget.getHeight();
 
-    setSize(width: number, height: number) {
         const [w, h] = this.renderable.values.uTexSize.ref.value;
         if (width !== w || height !== h) {
             this.target.setSize(width, height);
@@ -121,69 +121,67 @@ export class PostprocessingPass {
         }
     }
 
-    setProps(props: Partial<PostprocessingProps>) {
-        this.props = produce(this.props, p => {
-            if (props.occlusion !== undefined) {
-                p.occlusion.name = props.occlusion.name;
-                ValueCell.updateIfChanged(this.renderable.values.dOcclusionEnable, props.occlusion.name === 'on');
-                if (props.occlusion.name === 'on') {
-                    p.occlusion.params = { ...props.occlusion.params };
-                    ValueCell.updateIfChanged(this.renderable.values.dOcclusionKernelSize, props.occlusion.params.kernelSize);
-                    ValueCell.updateIfChanged(this.renderable.values.uOcclusionBias, props.occlusion.params.bias);
-                    ValueCell.updateIfChanged(this.renderable.values.uOcclusionRadius, props.occlusion.params.radius);
-                }
-            }
-
-            if (props.outline !== undefined) {
-                p.outline.name = props.outline.name;
-                ValueCell.updateIfChanged(this.renderable.values.dOutlineEnable, props.outline.name === 'on');
-                if (props.outline.name === 'on') {
-                    p.outline.params = { ...props.outline.params };
-                    ValueCell.updateIfChanged(this.renderable.values.uOutlineScale, props.outline.params.scale);
-                    ValueCell.updateIfChanged(this.renderable.values.uOutlineThreshold, props.outline.params.threshold);
-                }
-            }
-        });
-
-        this.renderable.update();
-    }
-
-    private setQuadShift(x: number, y: number) {
-        ValueCell.update(this.renderable.values.uQuadShift, Vec2.set(
-            this.renderable.values.uQuadShift.ref.value, x, y)
-        );
-    }
+    _render(camera: ICamera, toDrawingBuffer: boolean, props: PostprocessingProps) {
+        const { values } = this.renderable;
+
+        ValueCell.updateIfChanged(values.uFar, camera.far);
+        ValueCell.updateIfChanged(values.uNear, camera.near);
+        ValueCell.updateIfChanged(values.uFogFar, camera.fogFar);
+        ValueCell.updateIfChanged(values.uFogNear, camera.fogNear);
+
+        let needsUpdate = false;
+
+        const orthographic = camera.state.mode === 'orthographic' ? 1 : 0;
+        if (values.dOrthographic.ref.value !== orthographic) needsUpdate = true;
+        ValueCell.updateIfChanged(values.dOrthographic, orthographic);
+
+        const occlusion = props.occlusion.name === 'on';
+        if (values.dOcclusionEnable.ref.value !== occlusion) needsUpdate = true;
+        ValueCell.updateIfChanged(this.renderable.values.dOcclusionEnable, occlusion);
+        if (props.occlusion.name === 'on') {
+            const { kernelSize } = props.occlusion.params;
+            if (values.dOcclusionKernelSize.ref.value !== kernelSize) needsUpdate = true;
+            ValueCell.updateIfChanged(values.dOcclusionKernelSize, kernelSize);
+            ValueCell.updateIfChanged(values.uOcclusionBias, props.occlusion.params.bias);
+            ValueCell.updateIfChanged(values.uOcclusionRadius, props.occlusion.params.radius);
+        }
 
-    render(toDrawingBuffer: boolean) {
-        ValueCell.updateIfChanged(this.renderable.values.uFar, this.camera.far);
-        ValueCell.updateIfChanged(this.renderable.values.uNear, this.camera.near);
-        ValueCell.updateIfChanged(this.renderable.values.uFogFar, this.camera.fogFar);
-        ValueCell.updateIfChanged(this.renderable.values.uFogNear, this.camera.fogNear);
+        const outline = props.outline.name === 'on';
+        if (values.dOutlineEnable.ref.value !== outline) needsUpdate = true;
+        ValueCell.updateIfChanged(values.dOutlineEnable, outline);
+        if (props.outline.name === 'on') {
+            ValueCell.updateIfChanged(values.uOutlineScale, props.outline.params.scale * this.webgl.pixelRatio);
+            ValueCell.updateIfChanged(values.uOutlineThreshold, props.outline.params.threshold);
+        }
 
-        const orthographic = this.camera.state.mode === 'orthographic' ? 1 : 0;
-        if (this.renderable.values.dOrthographic.ref.value !==  orthographic) {
-            ValueCell.updateIfChanged(this.renderable.values.dOrthographic, orthographic);
+        if (needsUpdate) {
             this.renderable.update();
         }
 
-        const { x, y, width, height } = this.camera.viewport;
-
         const { gl, state } = this.webgl;
         if (toDrawingBuffer) {
             this.webgl.unbindFramebuffer();
-            this.setQuadShift(x / width, y / height);
-            gl.viewport(x, y, width, height);
-            gl.scissor(x, y, width, height);
         } else {
             this.target.bind();
-            this.setQuadShift(0, 0);
-            gl.viewport(0, 0, width, height);
-            gl.scissor(0, 0, width, height);
         }
         state.disable(gl.SCISSOR_TEST);
         state.disable(gl.BLEND);
         state.disable(gl.DEPTH_TEST);
         state.depthMask(false);
+
+        const { x, y, width, height } = camera.viewport;
+        gl.viewport(x, y, width, height);
+        gl.scissor(x, y, width, height);
+
         this.renderable.render();
     }
+
+    render(camera: Camera | StereoCamera, toDrawingBuffer: boolean, props: PostprocessingProps) {
+        if (StereoCamera.is(camera)) {
+            this._render(camera.left, toDrawingBuffer, props);
+            this._render(camera.right, toDrawingBuffer, props);
+        } else {
+            this._render(camera, toDrawingBuffer, props);
+        }
+    }
 }

src/mol-gl/compute/util.ts

@@ -22,7 +22,6 @@ export const QuadSchema = {
     instanceCount: ValueSpec('number'),
     aPosition: AttributeSpec('float32', 2, 0),
     uQuadScale: UniformSpec('v2'),
-    uQuadShift: UniformSpec('v2'),
 };
 
 export const QuadValues: Values<typeof QuadSchema> = {
@@ -30,7 +29,6 @@ export const QuadValues: Values<typeof QuadSchema> = {
     instanceCount: ValueCell.create(1),
     aPosition: ValueCell.create(QuadPositions),
     uQuadScale: ValueCell.create(Vec2.create(1, 1)),
-    uQuadShift: ValueCell.create(Vec2.create(0, 0)),
 };
 
 //

src/mol-gl/renderable/schema.ts

@@ -120,6 +120,7 @@ export const GlobalUniformSchema = {
     uViewportHeight: UniformSpec('f'),
     uViewport: UniformSpec('v4'),
     uViewOffset: UniformSpec('v2'),
+    uDrawingBufferSize: UniformSpec('v2'),
 
     uCameraPosition: UniformSpec('v3'),
     uCameraDir: UniformSpec('v3'),

src/mol-gl/renderer.ts

@@ -6,7 +6,6 @@
 
 import { Viewport } from '../mol-canvas3d/camera/util';
 import { ICamera } from '../mol-canvas3d/camera';
-
 import Scene from './scene';
 import { WebGLContext } from './webgl/context';
 import { Mat4, Vec3, Vec4, Vec2, Quat } from '../mol-math/linear-algebra';
@@ -43,7 +42,7 @@ interface Renderer {
     readonly props: Readonly<RendererProps>
 
     clear: (transparentBackground: boolean) => void
-    render: (group: Scene.Group, camera: ICamera, variant: GraphicsRenderVariant, clear: boolean, transparentBackground: boolean, depthTexture: Texture | null) => void
+    render: (group: Scene.Group, camera: ICamera, variant: GraphicsRenderVariant, clear: boolean, transparentBackground: boolean, drawingBufferScale: number, depthTexture: Texture | null) => void
     setProps: (props: Partial<RendererProps>) => void
     setViewport: (x: number, y: number, width: number, height: number) => void
     dispose: () => void
@@ -165,6 +164,7 @@ namespace Renderer {
         const clip = getClip(p.clip);
 
         const viewport = Viewport();
+        const drawingBufferSize = Vec2.create(gl.drawingBufferWidth, gl.drawingBufferHeight);
         const bgColor = Color.toVec3Normalized(Vec3(), p.backgroundColor);
 
         const view = Mat4();
@@ -195,6 +195,7 @@ namespace Renderer {
             uPixelRatio: ValueCell.create(ctx.pixelRatio),
             uViewportHeight: ValueCell.create(viewport.height),
             uViewport: ValueCell.create(Viewport.toVec4(Vec4(), viewport)),
+            uDrawingBufferSize: ValueCell.create(drawingBufferSize),
 
             uCameraPosition: ValueCell.create(Vec3()),
             uCameraDir: ValueCell.create(cameraDir),
@@ -300,7 +301,7 @@ namespace Renderer {
             r.render(variant);
         };
 
-        const render = (group: Scene.Group, camera: ICamera, variant: GraphicsRenderVariant, clear: boolean, transparentBackground: boolean, depthTexture: Texture | null) => {
+        const render = (group: Scene.Group, camera: ICamera, variant: GraphicsRenderVariant, clear: boolean, transparentBackground: boolean, drawingBufferScale: number, depthTexture: Texture | null) => {
             ValueCell.update(globalUniforms.uModel, group.view);
             ValueCell.update(globalUniforms.uView, camera.view);
             ValueCell.update(globalUniforms.uInvView, Mat4.invert(invView, camera.view));
@@ -311,18 +312,26 @@ namespace Renderer {
             ValueCell.update(globalUniforms.uModelViewProjection, Mat4.mul(modelViewProjection, modelView, camera.projection));
             ValueCell.update(globalUniforms.uInvModelViewProjection, Mat4.invert(invModelViewProjection, modelViewProjection));
 
-            ValueCell.update(globalUniforms.uIsOrtho, camera.state.mode === 'orthographic' ? 1 : 0);
+            ValueCell.updateIfChanged(globalUniforms.uIsOrtho, camera.state.mode === 'orthographic' ? 1 : 0);
             ValueCell.update(globalUniforms.uViewOffset, camera.viewOffset.enabled ? Vec2.set(viewOffset, camera.viewOffset.offsetX * 16, camera.viewOffset.offsetY * 16) : Vec2.set(viewOffset, 0, 0));
 
             ValueCell.update(globalUniforms.uCameraPosition, camera.state.position);
             ValueCell.update(globalUniforms.uCameraDir, Vec3.normalize(cameraDir, Vec3.sub(cameraDir, camera.state.target, camera.state.position)));
 
-            ValueCell.update(globalUniforms.uFar, camera.far);
-            ValueCell.update(globalUniforms.uNear, camera.near);
-            ValueCell.update(globalUniforms.uFogFar, camera.fogFar);
-            ValueCell.update(globalUniforms.uFogNear, camera.fogNear);
-
-            ValueCell.update(globalUniforms.uTransparentBackground, transparentBackground);
+            ValueCell.updateIfChanged(globalUniforms.uFar, camera.far);
+            ValueCell.updateIfChanged(globalUniforms.uNear, camera.near);
+            ValueCell.updateIfChanged(globalUniforms.uFogFar, camera.fogFar);
+            ValueCell.updateIfChanged(globalUniforms.uFogNear, camera.fogNear);
+            ValueCell.updateIfChanged(globalUniforms.uTransparentBackground, transparentBackground);
+
+            if (gl.drawingBufferWidth * drawingBufferScale !== drawingBufferSize[0] ||
+                gl.drawingBufferHeight * drawingBufferScale !== drawingBufferSize[1]
+            ) {
+                ValueCell.update(globalUniforms.uDrawingBufferSize, Vec2.set(drawingBufferSize,
+                    gl.drawingBufferWidth * drawingBufferScale,
+                    gl.drawingBufferHeight * drawingBufferScale
+                ));
+            }
 
             globalUniformsNeedUpdate = true;
             state.currentRenderItemId = -1;
@@ -334,6 +343,10 @@ namespace Renderer {
             state.colorMask(true, true, true, true);
             state.enable(gl.DEPTH_TEST);
 
+            const { x, y, width, height } = viewport;
+            gl.viewport(x, y, width, height);
+            gl.scissor(x, y, width, height);
+
             if (clear) {
                 state.depthMask(true);
                 if (variant === 'color') {

src/mol-gl/shader/compose.frag.ts

@@ -2,14 +2,12 @@ export default `
 precision highp float;
 precision highp sampler2D;
 
-uniform vec2 uQuadShift;
-
 uniform sampler2D tColor;
 uniform vec2 uTexSize;
 uniform float uWeight;
 
 void main() {
-    vec2 coords = gl_FragCoord.xy / uTexSize - uQuadShift;
+    vec2 coords = gl_FragCoord.xy / uTexSize;
     gl_FragColor = texture2D(tColor, coords) * uWeight;
 }
 `;

src/mol-gl/shader/direct-volume.frag.ts

@@ -21,7 +21,7 @@ uniform mat4 uProjection, uTransform, uModelView, uView;
 uniform vec3 uCameraDir;
 
 uniform sampler2D tDepth;
-uniform vec4 uViewport;
+uniform vec2 uDrawingBufferSize;
 uniform float uNear;
 uniform float uFar;
 
@@ -179,7 +179,7 @@ vec4 raymarch(vec3 startLoc, vec3 step) {
 
                 vec4 mvPosition = uModelView * uTransform * vec4(isoPos * uGridDim, 1.0);
                 float depth = calcDepth(mvPosition.xyz);
-                if (depth > getDepth(gl_FragCoord.xy / uViewport.zw))
+                if (depth > getDepth(gl_FragCoord.xy / uDrawingBufferSize))
                     break;
 
                 #ifdef enabledFragDepth
@@ -287,7 +287,7 @@ vec4 raymarch(vec3 startLoc, vec3 step) {
         #elif defined(dRenderMode_volume)
             isoPos = toUnit(pos);
             vec4 mvPosition = uModelView * uTransform * vec4(isoPos * uGridDim, 1.0);
-            if (calcDepth(mvPosition.xyz) > getDepth(gl_FragCoord.xy / uViewport.zw))
+            if (calcDepth(mvPosition.xyz) > getDepth(gl_FragCoord.xy / uDrawingBufferSize))
                 break;
 
             vec3 vViewPosition = mvPosition.xyz;

src/mol-gl/shader/postprocessing.frag.ts

@@ -3,8 +3,6 @@ precision highp float;
 precision highp int;
 precision highp sampler2D;
 
-uniform vec2 uQuadShift;
-
 uniform sampler2D tColor;
 uniform sampler2D tPackedDepth;
 uniform vec2 uTexSize;
@@ -96,7 +94,7 @@ vec2 calcEdgeDepth(const in vec2 coords) {
 }
 
 void main(void) {
-    vec2 coords = gl_FragCoord.xy / uTexSize - uQuadShift;
+    vec2 coords = gl_FragCoord.xy / uTexSize;
     vec4 color = texture2D(tColor, coords);
 
     #ifdef dOutlineEnable

src/mol-gl/webgl/context.ts

@@ -331,9 +331,9 @@ export function createContext(gl: GLRenderingContext, props: Partial<{ pixelScal
             state.enable(gl.SCISSOR_TEST);
             state.depthMask(true);
             state.colorMask(true, true, true, true);
+            state.clearColor(red, green, blue, alpha);
             gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
             gl.scissor(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
-            state.clearColor(red, green, blue, alpha);
             gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
         },
 

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

@@ -55,7 +55,6 @@ export function createRenderTarget(gl: GLRenderingContext, resources: WebGLResou
         getHeight: () => _height,
         bind: () => {
             framebuffer.bind();
-            gl.viewport(0, 0, _width, _height);
         },
         setSize: (width: number, height: number) => {
             if (_width === width && _height === height) {

src/mol-plugin-ui/viewport/simple-settings.tsx

@@ -62,7 +62,6 @@ const SimpleSettingsParams = {
         outline: Canvas3DParams.postprocessing.params.outline,
         fog: Canvas3DParams.cameraFog,
     }, { pivot: 'renderStyle' }),
-    stereo: Canvas3DParams.stereo,
     clipping: PD.Group<any>({
         ...Canvas3DParams.cameraClipping.params,
         ...(Canvas3DParams.renderer.params.clip as any).params as any
@@ -112,7 +111,6 @@ const SimpleSettingsMapping = ParamMapping({
                 outline: canvas.postprocessing.outline,
                 fog: canvas.cameraFog
             },
-            stereo: canvas.stereo,
             clipping: {
                 ...canvas.cameraClipping,
                 ...canvas.renderer.clip
@@ -138,7 +136,6 @@ const SimpleSettingsMapping = ParamMapping({
             variant: s.clipping.variant,
             objects: s.clipping.objects,
         };
-        canvas.stereo = s.stereo;
 
         props.layout = s.layout;
     },

src/mol-plugin/util/viewport-screenshot.ts

@@ -92,7 +92,7 @@ class ViewportScreenshotHelper {
 
         this._imagePass = this.plugin.canvas3d!.getImagePass({
             transparentBackground: this.transparent,
-            drawPass: { cameraHelper: { axes: this.axes } },
+            cameraHelper: { axes: this.axes },
             multiSample: { mode: 'on', sampleLevel: 2 },
             postprocessing: this.plugin.canvas3d!.props.postprocessing
         });
@@ -140,7 +140,7 @@ class ViewportScreenshotHelper {
 
         await ctx.update('Rendering image...');
         this.imagePass.setProps({
-            drawPass: { cameraHelper: { axes: this.axes } },
+            cameraHelper: { axes: this.axes },
             transparentBackground: this.transparent,
             postprocessing: this.plugin.canvas3d!.props.postprocessing // TODO this line should not be required, updating should work by listening to this.plugin.events.canvas3d.settingsUpdated
         });