molstar 3.0.0-dev.4 → 3.0.0-dev.8

package/lib/commonjs/mol-canvas3d/canvas3d.js

@@ -38,6 +38,7 @@ var helper_1 = require("./helper/helper");
 var passes_1 = require("./passes/passes");
 var mol_util_1 = require("../mol-util");
 var marking_1 = require("./passes/marking");
+var render_item_1 = require("../mol-gl/webgl/render-item");
 exports.Canvas3DParams = {
     camera: param_definition_1.ParamDefinition.Group({
         mode: param_definition_1.ParamDefinition.Select('perspective', param_definition_1.ParamDefinition.arrayToOptions(['perspective', 'orthographic']), { label: 'Camera' }),
@@ -202,7 +203,7 @@ var Canvas3D;
         var width = 128;
         var height = 128;
         updateViewport();
-        var scene = scene_1.Scene.create(webgl);
+        var scene = scene_1.Scene.create(webgl, passes.draw.wboitEnabled ? render_item_1.GraphicsRenderVariantsWboit : render_item_1.GraphicsRenderVariantsBlended);
         var camera = new camera_1.Camera({
             position: linear_algebra_1.Vec3.create(0, 0, 100),
             mode: p.camera.mode,
@@ -254,16 +255,24 @@ var Canvas3D;
                 changed = helper.camera.mark(loci, action) || changed;
                 reprRenderObjects.forEach(function (_, _repr) { changed = _repr.mark(loci, action) || changed; });
             }
-            if (changed && !noDraw) {
-                scene.update(void 0, true);
-                helper.handle.scene.update(void 0, true);
-                helper.camera.scene.update(void 0, true);
-                var prevPickDirty = pickHelper.dirty;
-                draw(true);
-                pickHelper.dirty = prevPickDirty; // marking does not change picking buffers
+            if (changed) {
+                if (noDraw) {
+                    // Even with `noDraw` make sure changes will be rendered.
+                    // Note that with this calling mark (with or without `noDraw`) multiple times
+                    // during a JS event loop iteration will only result in a single render call.
+                    forceNextRender = true;
+                }
+                else {
+                    scene.update(void 0, true);
+                    helper.handle.scene.update(void 0, true);
+                    helper.camera.scene.update(void 0, true);
+                    var prevPickDirty = pickHelper.dirty;
+                    draw({ force: true, allowMulti: true });
+                    pickHelper.dirty = prevPickDirty; // marking does not change picking buffers
+                }
             }
         }
-        function render(force) {
+        function render(force, allowMulti) {
             if (webgl.isContextLost)
                 return false;
             var resized = false;
@@ -287,11 +296,13 @@ var Canvas3D;
                     stereoCamera.update();
                     cam = stereoCamera;
                 }
+                var ctx = { renderer: renderer, camera: cam, scene: scene, helper: helper };
                 if (multi_sample_1.MultiSamplePass.isEnabled(p.multiSample)) {
-                    multiSampleHelper.render(renderer, cam, scene, helper, true, p.transparentBackground, p);
+                    var forceOn = !cameraChanged && allowMulti && !controls.props.spin;
+                    multiSampleHelper.render(ctx, p, true, forceOn);
                 }
                 else {
-                    passes.draw.render(renderer, cam, scene, helper, true, p.transparentBackground, p.postprocessing, p.marking);
+                    passes.draw.render(ctx, p, true);
                 }
                 pickHelper.dirty = true;
                 didRender = true;
@@ -302,15 +313,15 @@ var Canvas3D;
         var forceDrawAfterAllCommited = false;
         var currentTime = 0;
         var drawPaused = false;
-        function draw(force) {
+        function draw(options) {
             if (drawPaused)
                 return;
-            if (render(!!force) && notifyDidDraw) {
+            if (render(!!(options === null || options === void 0 ? void 0 : options.force), !!(options === null || options === void 0 ? void 0 : options.allowMulti)) && notifyDidDraw) {
                 didDraw.next((0, now_1.now)() - startTime);
             }
         }
-        function requestDraw(force) {
-            forceNextRender = forceNextRender || !!force;
+        function requestDraw() {
+            forceNextRender = true;
         }
         var animationFrameHandle = 0;
         function tick(t, options) {
@@ -320,8 +331,8 @@ var Canvas3D;
             if (options === null || options === void 0 ? void 0 : options.manualDraw) {
                 return;
             }
-            draw(false);
-            if (!camera.transition.inTransition && !webgl.isContextLost) {
+            draw();
+            if (!camera.transition.inTransition && !controls.props.spin && !webgl.isContextLost) {
                 interactionHelper.tick(currentTime);
             }
         }
@@ -358,7 +369,7 @@ var Canvas3D;
                 if (forceDrawAfterAllCommited) {
                     if (helper.debug.isEnabled)
                         helper.debug.update();
-                    draw(true);
+                    draw({ force: true });
                     forceDrawAfterAllCommited = false;
                 }
                 commited.next((0, now_1.now)());
@@ -393,7 +404,7 @@ var Canvas3D;
                 return true;
             if (camera.transition.inTransition || nextCameraResetSnapshot)
                 return false;
-            var cameraSphereOverlapsNone = true;
+            var cameraSphereOverlapsNone = true, isEmpty = true;
             geometry_1.Sphere3D.set(cameraSphere, camera.state.target, camera.state.radius);
             // check if any renderable has moved outside of the old bounding sphere
             // and if no renderable is overlapping with the camera sphere
@@ -404,13 +415,14 @@ var Canvas3D;
                 var b = r.values.boundingSphere.ref.value;
                 if (!b.radius)
                     continue;
+                isEmpty = false;
                 var cameraDist = linear_algebra_1.Vec3.distance(cameraSphere.center, b.center);
                 if ((cameraDist > cameraSphere.radius || cameraDist > b.radius || b.radius > camera.state.radiusMax) && !geometry_1.Sphere3D.includes(oldBoundingSphereVisible, b))
                     return true;
                 if (geometry_1.Sphere3D.overlaps(cameraSphere, b))
                     cameraSphereOverlapsNone = false;
             }
-            return cameraSphereOverlapsNone;
+            return cameraSphereOverlapsNone || (!isEmpty && cameraSphere.radius <= 0.1);
         }
         var sceneCommitTimeoutMs = 250;
         function commitScene(isSynchronous) {
@@ -526,11 +538,11 @@ var Canvas3D;
         }
         var contextRestoredSub = contextRestored.subscribe(function () {
             pickHelper.dirty = true;
-            draw(true);
+            draw({ force: true });
             // Unclear why, but in Chrome with wboit enabled the first `draw` only clears
             // the drawingBuffer. Note that in Firefox the drawingBuffer is preserved after
             // context loss so it is unclear if it behaves the same.
-            draw(true);
+            draw({ force: true });
         });
         var resized = new rxjs_1.BehaviorSubject(0);
         function handleResize(draw) {
@@ -539,7 +551,7 @@ var Canvas3D;
             updateViewport();
             syncViewport();
             if (draw)
-                requestDraw(true);
+                requestDraw();
             resized.next(+new Date());
         }
         return {
@@ -564,7 +576,7 @@ var Canvas3D;
                 reprRenderObjects.clear();
                 scene.clear();
                 helper.debug.clear();
-                requestDraw(true);
+                requestDraw();
                 reprCount.next(reprRenderObjects.size);
             },
             syncVisibility: function () {
@@ -576,7 +588,7 @@ var Canvas3D;
                     if (helper.debug.isEnabled)
                         helper.debug.update();
                 }
-                requestDraw(true);
+                requestDraw();
             },
             requestDraw: requestDraw,
             tick: tick,
@@ -673,7 +685,7 @@ var Canvas3D;
                     p.camera.stereo.name = 'off';
                 }
                 if (!doNotRequestDraw) {
-                    requestDraw(true);
+                    requestDraw();
                 }
             },
             getImagePass: function (props) {

package/lib/commonjs/mol-canvas3d/helper/bounding-sphere-helper.js

@@ -18,6 +18,7 @@ var names_1 = require("../../mol-util/color/names");
 var sphere_2 = require("../../mol-geo/primitive/sphere");
 var mol_util_1 = require("../../mol-util");
 var geometry_2 = require("../../mol-geo/geometry/geometry");
+var render_item_1 = require("../../mol-gl/webgl/render-item");
 exports.DebugHelperParams = {
     sceneBoundingSpheres: param_definition_1.ParamDefinition.Boolean(false, { description: 'Show full scene bounding spheres.' }),
     visibleSceneBoundingSpheres: param_definition_1.ParamDefinition.Boolean(false, { description: 'Show visible scene bounding spheres.' }),
@@ -28,7 +29,7 @@ var BoundingSphereHelper = /** @class */ (function () {
     function BoundingSphereHelper(ctx, parent, props) {
         this.objectsData = new Map();
         this.instancesData = new Map();
-        this.scene = scene_1.Scene.create(ctx);
+        this.scene = scene_1.Scene.create(ctx, render_item_1.GraphicsRenderVariantsBlended);
         this.parent = parent;
         this._props = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, param_definition_1.ParamDefinition.getDefaultValues(exports.DebugHelperParams)), props);
     }
@@ -151,6 +152,6 @@ var objectMaterialId = (0, render_object_1.getNextMaterialId)();
 var instanceMaterialId = (0, render_object_1.getNextMaterialId)();
 function createBoundingSphereRenderObject(mesh, color, materialId, transform) {
     var values = mesh_1.Mesh.Utils.createValuesSimple(mesh, { alpha: 0.1, doubleSided: false }, color, 1, transform);
-    return (0, render_object_1.createRenderObject)('mesh', values, { disposed: false, visible: true, alphaFactor: 1, pickable: false, colorOnly: false, opaque: false, writeDepth: false, noClip: false }, materialId);
+    return (0, render_object_1.createRenderObject)('mesh', values, { disposed: false, visible: true, alphaFactor: 1, pickable: false, colorOnly: false, opaque: false, writeDepth: false }, materialId);
 }
 //# sourceMappingURL=bounding-sphere-helper.js.map

package/lib/commonjs/mol-canvas3d/helper/camera-helper.d.ts

@@ -30,6 +30,10 @@ export declare const CameraHelperParams: {
             roughness: number;
             bumpiness: number;
         }>;
+        clip: PD.Normalize<{
+            variant: any;
+            objects: any;
+        }>;
     }>, "on">>;
 };
 export declare type CameraHelperParams = typeof CameraHelperParams;

package/lib/commonjs/mol-canvas3d/helper/camera-helper.js

@@ -14,6 +14,7 @@ var sphere_1 = require("../../mol-geo/geometry/mesh/builder/sphere");
 var mesh_1 = require("../../mol-geo/geometry/mesh/mesh");
 var mesh_builder_1 = require("../../mol-geo/geometry/mesh/mesh-builder");
 var scene_1 = require("../../mol-gl/scene");
+var render_item_1 = require("../../mol-gl/webgl/render-item");
 var geometry_1 = require("../../mol-math/geometry");
 var linear_algebra_1 = require("../../mol-math/linear-algebra");
 var loci_1 = require("../../mol-model/loci");
@@ -55,7 +56,7 @@ var CameraHelper = /** @class */ (function () {
             }
             return changed;
         };
-        this.scene = scene_1.Scene.create(webgl);
+        this.scene = scene_1.Scene.create(webgl, render_item_1.GraphicsRenderVariantsBlended);
         this.camera = new camera_1.Camera();
         linear_algebra_1.Vec3.set(this.camera.up, 0, 1, 0);
         linear_algebra_1.Vec3.set(this.camera.target, 0, 0, 0);
@@ -70,7 +71,6 @@ var CameraHelper = /** @class */ (function () {
                     _this.scene.clear();
                     var params = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, props.axes.params), { scale: props.axes.params.scale * _this.webgl.pixelRatio });
                     _this.renderObject = createAxesRenderObject(params);
-                    _this.renderObject.state.noClip = true;
                     _this.scene.add(_this.renderObject);
                     _this.scene.commit();
                     linear_algebra_1.Vec3.set(_this.camera.position, 0, 0, params.scale * 200);

package/lib/commonjs/mol-canvas3d/helper/handle-helper.d.ts

@@ -32,6 +32,10 @@ export declare const HandleHelperParams: {
             roughness: number;
             bumpiness: number;
         }>;
+        clip: PD.Normalize<{
+            variant: any;
+            objects: any;
+        }>;
     }>, "on">>;
 };
 export declare type HandleHelperParams = typeof HandleHelperParams;

package/lib/commonjs/mol-canvas3d/helper/handle-helper.js

@@ -23,6 +23,7 @@ var loci_1 = require("../../mol-model/loci");
 var marker_action_1 = require("../../mol-util/marker-action");
 var visual_1 = require("../../mol-repr/visual");
 var int_1 = require("../../mol-data/int");
+var render_item_1 = require("../../mol-gl/webgl/render-item");
 var HandleParams = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, mesh_1.Mesh.Params), { alpha: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, mesh_1.Mesh.Params.alpha), { defaultValue: 1 }), ignoreLight: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, mesh_1.Mesh.Params.ignoreLight), { defaultValue: true }), colorX: param_definition_1.ParamDefinition.Color(names_1.ColorNames.red, { isEssential: true }), colorY: param_definition_1.ParamDefinition.Color(names_1.ColorNames.green, { isEssential: true }), colorZ: param_definition_1.ParamDefinition.Color(names_1.ColorNames.blue, { isEssential: true }), scale: param_definition_1.ParamDefinition.Numeric(0.33, { min: 0.1, max: 2, step: 0.1 }, { isEssential: true }) });
 exports.HandleHelperParams = {
     handle: param_definition_1.ParamDefinition.MappedStatic('off', {
@@ -55,7 +56,7 @@ var HandleHelper = /** @class */ (function () {
             }
             return changed;
         };
-        this.scene = scene_1.Scene.create(webgl);
+        this.scene = scene_1.Scene.create(webgl, render_item_1.GraphicsRenderVariantsBlended);
         this.setProps(props);
     }
     HandleHelper.prototype.getBoundingSphere = function (out, instanceId) {
@@ -75,7 +76,6 @@ var HandleHelper = /** @class */ (function () {
                     _this.scene.clear();
                     var params = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, props.handle.params), { scale: props.handle.params.scale * _this.webgl.pixelRatio });
                     _this.renderObject = createHandleRenderObject(params);
-                    _this.renderObject.state.noClip = true;
                     _this.scene.add(_this.renderObject);
                     _this.scene.commit();
                     p.handle.params = (0, tslib_1.__assign)({}, props.handle.params);

package/lib/commonjs/mol-canvas3d/helper/helper.d.ts

@@ -37,6 +37,7 @@ export declare const HelperParams: {
             bumpAmplitude: any;
             quality: any;
             material: any;
+            clip: any;
         }>, "on">;
     }>>;
 };
@@ -68,6 +69,7 @@ export declare const DefaultHelperProps: PD.Values<{
             bumpAmplitude: any;
             quality: any;
             material: any;
+            clip: any;
         }>, "on">;
     }>>;
 }>;

package/lib/commonjs/mol-canvas3d/passes/draw.d.ts

@@ -14,6 +14,17 @@ import { Helper } from '../helper/helper';
 import { StereoCamera } from '../camera/stereo';
 import { PostprocessingPass, PostprocessingProps } from './postprocessing';
 import { MarkingProps } from './marking';
+declare type Props = {
+    postprocessing: PostprocessingProps;
+    marking: MarkingProps;
+    transparentBackground: boolean;
+};
+declare type RenderContext = {
+    renderer: Renderer;
+    camera: Camera | StereoCamera;
+    scene: Scene;
+    helper: Helper;
+};
 export declare class DrawPass {
     private webgl;
     private readonly drawTarget;
@@ -40,6 +51,7 @@ export declare class DrawPass {
     private _renderWboit;
     private _renderBlended;
     private _render;
-    render(renderer: Renderer, camera: Camera | StereoCamera, scene: Scene, helper: Helper, toDrawingBuffer: boolean, transparentBackground: boolean, postprocessingProps: PostprocessingProps, markingProps: MarkingProps): void;
+    render(ctx: RenderContext, props: Props, toDrawingBuffer: boolean): void;
     getColorTarget(postprocessingProps: PostprocessingProps): RenderTarget;
 }
+export {};

package/lib/commonjs/mol-canvas3d/passes/draw.js

@@ -197,23 +197,23 @@ var DrawPass = /** @class */ (function () {
         }
         renderer.renderBlendedTransparent(scene.primitives, camera, null);
     };
-    DrawPass.prototype._render = function (renderer, camera, scene, helper, toDrawingBuffer, transparentBackground, postprocessingProps, markingProps) {
+    DrawPass.prototype._render = function (renderer, camera, scene, helper, toDrawingBuffer, props) {
         var volumeRendering = scene.volumes.renderables.length > 0;
-        var postprocessingEnabled = postprocessing_1.PostprocessingPass.isEnabled(postprocessingProps);
-        var antialiasingEnabled = postprocessing_1.AntialiasingPass.isEnabled(postprocessingProps);
-        var markingEnabled = marking_1.MarkingPass.isEnabled(markingProps);
+        var postprocessingEnabled = postprocessing_1.PostprocessingPass.isEnabled(props.postprocessing);
+        var antialiasingEnabled = postprocessing_1.AntialiasingPass.isEnabled(props.postprocessing);
+        var markingEnabled = marking_1.MarkingPass.isEnabled(props.marking);
         var _a = camera.viewport, x = _a.x, y = _a.y, width = _a.width, height = _a.height;
         renderer.setViewport(x, y, width, height);
         renderer.update(camera);
-        if (transparentBackground && !antialiasingEnabled && toDrawingBuffer) {
+        if (props.transparentBackground && !antialiasingEnabled && toDrawingBuffer) {
             this.drawTarget.bind();
             renderer.clear(false);
         }
         if (this.wboitEnabled) {
-            this._renderWboit(renderer, camera, scene, transparentBackground, postprocessingProps);
+            this._renderWboit(renderer, camera, scene, props.transparentBackground, props.postprocessing);
         }
         else {
-            this._renderBlended(renderer, camera, scene, !volumeRendering && !postprocessingEnabled && !antialiasingEnabled && toDrawingBuffer, transparentBackground, postprocessingProps);
+            this._renderBlended(renderer, camera, scene, !volumeRendering && !postprocessingEnabled && !antialiasingEnabled && toDrawingBuffer, props.transparentBackground, props.postprocessing);
         }
         if (postprocessingEnabled) {
             this.postprocessing.target.bind();
@@ -225,7 +225,7 @@ var DrawPass = /** @class */ (function () {
             this.drawTarget.bind();
         }
         if (markingEnabled) {
-            var markingDepthTest = markingProps.ghostEdgeStrength < 1;
+            var markingDepthTest = props.marking.ghostEdgeStrength < 1;
             if (markingDepthTest) {
                 this.marking.depthTarget.bind();
                 renderer.clear(false);
@@ -234,7 +234,7 @@ var DrawPass = /** @class */ (function () {
             this.marking.maskTarget.bind();
             renderer.clear(false);
             renderer.renderMarkingMask(scene.primitives, camera, markingDepthTest ? this.marking.depthTarget.texture : null);
-            this.marking.update(markingProps);
+            this.marking.update(props.marking);
             this.marking.render(camera.viewport, postprocessingEnabled ? this.postprocessing.target : this.colorTarget);
         }
         if (helper.debug.isEnabled) {
@@ -250,7 +250,7 @@ var DrawPass = /** @class */ (function () {
             renderer.renderBlended(helper.camera.scene, helper.camera.camera, null);
         }
         if (antialiasingEnabled) {
-            this.antialiasing.render(camera, toDrawingBuffer, postprocessingProps);
+            this.antialiasing.render(camera, toDrawingBuffer, props.postprocessing);
         }
         else if (toDrawingBuffer) {
             this.drawTarget.bind();
@@ -264,16 +264,17 @@ var DrawPass = /** @class */ (function () {
         }
         this.webgl.gl.flush();
     };
-    DrawPass.prototype.render = function (renderer, camera, scene, helper, toDrawingBuffer, transparentBackground, postprocessingProps, markingProps) {
-        renderer.setTransparentBackground(transparentBackground);
+    DrawPass.prototype.render = function (ctx, props, toDrawingBuffer) {
+        var renderer = ctx.renderer, camera = ctx.camera, scene = ctx.scene, helper = ctx.helper;
+        renderer.setTransparentBackground(props.transparentBackground);
         renderer.setDrawingBufferSize(this.colorTarget.getWidth(), this.colorTarget.getHeight());
         renderer.setPixelRatio(this.webgl.pixelRatio);
         if (stereo_1.StereoCamera.is(camera)) {
-            this._render(renderer, camera.left, scene, helper, toDrawingBuffer, transparentBackground, postprocessingProps, markingProps);
-            this._render(renderer, camera.right, scene, helper, toDrawingBuffer, transparentBackground, postprocessingProps, markingProps);
+            this._render(renderer, camera.left, scene, helper, toDrawingBuffer, props);
+            this._render(renderer, camera.right, scene, helper, toDrawingBuffer, props);
         }
         else {
-            this._render(renderer, camera, scene, helper, toDrawingBuffer, transparentBackground, postprocessingProps, markingProps);
+            this._render(renderer, camera, scene, helper, toDrawingBuffer, props);
         }
     };
     DrawPass.prototype.getColorTarget = function (postprocessingProps) {

package/lib/commonjs/mol-canvas3d/passes/image.d.ts

@@ -63,6 +63,7 @@ export declare const ImageParams: {
             bumpAmplitude: any;
             quality: any;
             material: any;
+            clip: any;
         }>, "on">;
     }>>;
 };

package/lib/commonjs/mol-canvas3d/passes/image.js

@@ -76,12 +76,13 @@ var ImagePass = /** @class */ (function () {
         camera_1.Camera.copySnapshot(this._camera.state, this.camera.state);
         util_1.Viewport.set(this._camera.viewport, 0, 0, this._width, this._height);
         this._camera.update();
+        var ctx = { renderer: this.renderer, camera: this._camera, scene: this.scene, helper: this.helper };
         if (multi_sample_1.MultiSamplePass.isEnabled(this.props.multiSample)) {
-            this.multiSampleHelper.render(this.renderer, this._camera, this.scene, this.helper, false, this.props.transparentBackground, this.props);
+            this.multiSampleHelper.render(ctx, this.props, false);
             this._colorTarget = this.multiSamplePass.colorTarget;
         }
         else {
-            this.drawPass.render(this.renderer, this._camera, this.scene, this.helper, false, this.props.transparentBackground, this.props.postprocessing, this.props.marking);
+            this.drawPass.render(ctx, this.props, false);
             this._colorTarget = this.drawPass.getColorTarget(this.props.postprocessing);
         }
     };

package/lib/commonjs/mol-canvas3d/passes/marking.js

@@ -20,7 +20,7 @@ var overlay_frag_1 = require("../../mol-gl/shader/marking/overlay.frag");
 var color_1 = require("../../mol-util/color");
 var edge_frag_1 = require("../../mol-gl/shader/marking/edge.frag");
 exports.MarkingParams = {
-    enabled: param_definition_1.ParamDefinition.Boolean(false),
+    enabled: param_definition_1.ParamDefinition.Boolean(true),
     highlightEdgeColor: param_definition_1.ParamDefinition.Color(color_1.Color.darken(color_1.Color.fromNormalizedRgb(1.0, 0.4, 0.6), 1.0)),
     selectEdgeColor: param_definition_1.ParamDefinition.Color(color_1.Color.darken(color_1.Color.fromNormalizedRgb(0.2, 1.0, 0.1), 1.0)),
     edgeScale: param_definition_1.ParamDefinition.Numeric(1, { min: 1, max: 3, step: 1 }, { description: 'Thickness of the edge.' }),

package/lib/commonjs/mol-canvas3d/passes/multi-sample.d.ts

@@ -23,6 +23,13 @@ declare type Props = {
     multiSample: MultiSampleProps;
     postprocessing: PostprocessingProps;
     marking: MarkingProps;
+    transparentBackground: boolean;
+};
+declare type RenderContext = {
+    renderer: Renderer;
+    camera: Camera | StereoCamera;
+    scene: Scene;
+    helper: Helper;
 };
 export declare class MultiSamplePass {
     private webgl;
@@ -34,7 +41,7 @@ export declare class MultiSamplePass {
     private compose;
     constructor(webgl: WebGLContext, drawPass: DrawPass);
     syncSize(): void;
-    render(sampleIndex: number, renderer: Renderer, camera: Camera | StereoCamera, scene: Scene, helper: Helper, toDrawingBuffer: boolean, transparentBackground: boolean, props: Props): number;
+    render(sampleIndex: number, ctx: RenderContext, props: Props, toDrawingBuffer: boolean, forceOn: boolean): number;
     private bindOutputTarget;
     private renderMultiSample;
     private renderTemporalMultiSample;
@@ -43,7 +50,8 @@ export declare class MultiSampleHelper {
     private multiSamplePass;
     private sampleIndex;
     update(changed: boolean, props: MultiSampleProps): boolean;
-    render(renderer: Renderer, camera: Camera | StereoCamera, scene: Scene, helper: Helper, toDrawingBuffer: boolean, transparentBackground: boolean, props: Props): void;
+    /** Return `true` while more samples are needed */
+    render(ctx: RenderContext, props: Props, toDrawingBuffer: boolean, forceOn?: boolean): boolean;
     constructor(multiSamplePass: MultiSamplePass);
 }
 export {};

package/lib/commonjs/mol-canvas3d/passes/multi-sample.js

@@ -27,8 +27,8 @@ function getComposeRenderable(ctx, colorTexture) {
     return (0, renderable_1.createComputeRenderable)(renderItem, values);
 }
 exports.MultiSampleParams = {
-    mode: param_definition_1.ParamDefinition.Select('off', [['off', 'Off'], ['on', 'On'], ['temporal', 'Temporal']]),
-    sampleLevel: param_definition_1.ParamDefinition.Numeric(2, { min: 0, max: 5, step: 1 }),
+    mode: param_definition_1.ParamDefinition.Select('temporal', [['off', 'Off'], ['on', 'On'], ['temporal', 'Temporal']]),
+    sampleLevel: param_definition_1.ParamDefinition.Numeric(2, { min: 0, max: 5, step: 1 }, { description: 'Take level^2 samples.' }),
 };
 var MultiSamplePass = /** @class */ (function () {
     function MultiSamplePass(webgl, drawPass) {
@@ -58,13 +58,13 @@ var MultiSamplePass = /** @class */ (function () {
             mol_util_1.ValueCell.update(this.compose.values.uTexSize, linear_algebra_1.Vec2.set(this.compose.values.uTexSize.ref.value, width, height));
         }
     };
-    MultiSamplePass.prototype.render = function (sampleIndex, renderer, camera, scene, helper, toDrawingBuffer, transparentBackground, props) {
-        if (props.multiSample.mode === 'temporal') {
-            return this.renderTemporalMultiSample(sampleIndex, renderer, camera, scene, helper, toDrawingBuffer, transparentBackground, props);
+    MultiSamplePass.prototype.render = function (sampleIndex, ctx, props, toDrawingBuffer, forceOn) {
+        if (props.multiSample.mode === 'temporal' && !forceOn) {
+            return this.renderTemporalMultiSample(sampleIndex, ctx, props, toDrawingBuffer);
         }
         else {
-            this.renderMultiSample(renderer, camera, scene, helper, toDrawingBuffer, transparentBackground, props);
-            return sampleIndex;
+            this.renderMultiSample(ctx, toDrawingBuffer, props);
+            return -2;
         }
     };
     MultiSamplePass.prototype.bindOutputTarget = function (toDrawingBuffer) {
@@ -75,7 +75,8 @@ var MultiSamplePass = /** @class */ (function () {
             this.colorTarget.bind();
         }
     };
-    MultiSamplePass.prototype.renderMultiSample = function (renderer, camera, scene, helper, toDrawingBuffer, transparentBackground, props) {
+    MultiSamplePass.prototype.renderMultiSample = function (ctx, toDrawingBuffer, props) {
+        var camera = ctx.camera;
         var _a = this, compose = _a.compose, composeTarget = _a.composeTarget, drawPass = _a.drawPass, webgl = _a.webgl;
         var gl = webgl.gl, state = webgl.state;
         // based on the Multisample Anti-Aliasing Render Pass
@@ -103,7 +104,7 @@ var MultiSamplePass = /** @class */ (function () {
             var sampleWeight = baseSampleWeight + roundingRange * uniformCenteredDistribution;
             mol_util_1.ValueCell.update(compose.values.uWeight, sampleWeight);
             // render scene
-            drawPass.render(renderer, camera, scene, helper, false, transparentBackground, props.postprocessing, props.marking);
+            drawPass.render(ctx, props, false);
             // compose rendered scene with compose target
             composeTarget.bind();
             state.enable(gl.BLEND);
@@ -130,7 +131,8 @@ var MultiSamplePass = /** @class */ (function () {
         camera.viewOffset.enabled = false;
         camera.update();
     };
-    MultiSamplePass.prototype.renderTemporalMultiSample = function (sampleIndex, renderer, camera, scene, helper, toDrawingBuffer, transparentBackground, props) {
+    MultiSamplePass.prototype.renderTemporalMultiSample = function (sampleIndex, ctx, props, toDrawingBuffer) {
+        var camera = ctx.camera;
         var _a = this, compose = _a.compose, composeTarget = _a.composeTarget, holdTarget = _a.holdTarget, drawPass = _a.drawPass, webgl = _a.webgl;
         var gl = webgl.gl, state = webgl.state;
         // based on the Multisample Anti-Aliasing Render Pass
@@ -144,7 +146,7 @@ var MultiSamplePass = /** @class */ (function () {
         var _b = camera.viewport, x = _b.x, y = _b.y, width = _b.width, height = _b.height;
         var sampleWeight = 1.0 / offsetList.length;
         if (sampleIndex === -1) {
-            drawPass.render(renderer, camera, scene, helper, false, transparentBackground, props.postprocessing, props.marking);
+            drawPass.render(ctx, props, false);
             mol_util_1.ValueCell.update(compose.values.uWeight, 1.0);
             mol_util_1.ValueCell.update(compose.values.tColor, drawPass.getColorTarget(props.postprocessing).texture);
             compose.update();
@@ -170,7 +172,7 @@ var MultiSamplePass = /** @class */ (function () {
                 camera_1.Camera.setViewOffset(camera.viewOffset, width, height, offset[0], offset[1], width, height);
                 camera.update();
                 // render scene
-                drawPass.render(renderer, camera, scene, helper, false, transparentBackground, props.postprocessing, props.marking);
+                drawPass.render(ctx, props, false);
                 // compose rendered scene with compose target
                 composeTarget.bind();
                 state.enable(gl.BLEND);
@@ -266,8 +268,10 @@ var MultiSampleHelper = /** @class */ (function () {
             this.sampleIndex = -1;
         return props.mode === 'temporal' ? this.sampleIndex !== -2 : false;
     };
-    MultiSampleHelper.prototype.render = function (renderer, camera, scene, helper, toDrawingBuffer, transparentBackground, props) {
-        this.sampleIndex = this.multiSamplePass.render(this.sampleIndex, renderer, camera, scene, helper, toDrawingBuffer, transparentBackground, props);
+    /** Return `true` while more samples are needed */
+    MultiSampleHelper.prototype.render = function (ctx, props, toDrawingBuffer, forceOn) {
+        this.sampleIndex = this.multiSamplePass.render(this.sampleIndex, ctx, props, toDrawingBuffer, !!forceOn);
+        return this.sampleIndex < 0;
     };
     return MultiSampleHelper;
 }());

package/lib/commonjs/mol-canvas3d/passes/pick.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PickHelper = exports.PickPass = void 0;
 var linear_algebra_1 = require("../../mol-math/linear-algebra");
 var misc_1 = require("../../mol-math/misc");
-var float_packing_1 = require("../../mol-util/float-packing");
+var number_packing_1 = require("../../mol-util/number-packing");
 var stereo_1 = require("../camera/stereo");
 var util_1 = require("../camera/util");
 var util_2 = require("../camera/util");
@@ -46,29 +46,29 @@ var PickPass = /** @class */ (function () {
             this.depthPickTarget.setSize(this.pickWidth, this.pickHeight);
         }
     };
-    PickPass.prototype.renderVariant = function (renderer, camera, scene, helper, variant) {
+    PickPass.prototype.renderVariant = function (renderer, camera, scene, helper, variant, pickType) {
         var depth = this.drawPass.depthTexturePrimitives;
         renderer.clear(false);
         renderer.update(camera);
-        renderer.renderPick(scene.primitives, camera, variant, null);
-        renderer.renderPick(scene.volumes, camera, variant, depth);
-        renderer.renderPick(helper.handle.scene, camera, variant, null);
+        renderer.renderPick(scene.primitives, camera, variant, null, pickType);
+        renderer.renderPick(scene.volumes, camera, variant, depth, pickType);
+        renderer.renderPick(helper.handle.scene, camera, variant, null, pickType);
         if (helper.camera.isEnabled) {
             helper.camera.update(camera);
             renderer.update(helper.camera.camera);
-            renderer.renderPick(helper.camera.scene, helper.camera.camera, variant, null);
+            renderer.renderPick(helper.camera.scene, helper.camera.camera, variant, null, pickType);
         }
     };
     PickPass.prototype.render = function (renderer, camera, scene, helper) {
         this.objectPickTarget.bind();
-        this.renderVariant(renderer, camera, scene, helper, 'pickObject');
+        this.renderVariant(renderer, camera, scene, helper, 'pick', 1 /* Object */);
         this.instancePickTarget.bind();
-        this.renderVariant(renderer, camera, scene, helper, 'pickInstance');
+        this.renderVariant(renderer, camera, scene, helper, 'pick', 2 /* Instance */);
         this.groupPickTarget.bind();
-        this.renderVariant(renderer, camera, scene, helper, 'pickGroup');
+        this.renderVariant(renderer, camera, scene, helper, 'pick', 3 /* Group */);
         // printTexture(this.webgl, this.groupPickTarget.texture, { id: 'group' })
         this.depthPickTarget.bind();
-        this.renderVariant(renderer, camera, scene, helper, 'depth');
+        this.renderVariant(renderer, camera, scene, helper, 'depth', 0 /* None */);
     };
     return PickPass;
 }());
@@ -127,11 +127,11 @@ var PickHelper = /** @class */ (function () {
     PickHelper.prototype.getDepth = function (x, y) {
         var idx = this.getBufferIdx(x, y);
         var b = this.depthBuffer;
-        return (0, float_packing_1.unpackRGBAToDepth)(b[idx], b[idx + 1], b[idx + 2], b[idx + 3]);
+        return (0, number_packing_1.unpackRGBAToDepth)(b[idx], b[idx + 1], b[idx + 2], b[idx + 3]);
     };
     PickHelper.prototype.getId = function (x, y, buffer) {
         var idx = this.getBufferIdx(x, y);
-        return (0, float_packing_1.decodeFloatRGB)(buffer[idx], buffer[idx + 1], buffer[idx + 2]);
+        return (0, number_packing_1.unpackRGBToInt)(buffer[idx], buffer[idx + 1], buffer[idx + 2]);
     };
     PickHelper.prototype.render = function (camera) {
         var _a = this, pickX = _a.pickX, pickY = _a.pickY, pickWidth = _a.pickWidth, pickHeight = _a.pickHeight, halfPickWidth = _a.halfPickWidth;