molstar 2.3.9 → 3.0.0-dev.10

package/lib/mol-canvas3d/controls/trackball.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  * @author David Sehnal <david.sehnal@gmail.com>
@@ -12,7 +12,7 @@ import { Quat, Vec2, Vec3, EPSILON } from '../../mol-math/linear-algebra';
 import { Viewport } from '../camera/util';
 import { ButtonsType, ModifiersKeys } from '../../mol-util/input/input-observer';
 import { ParamDefinition as PD } from '../../mol-util/param-definition';
-import { absMax } from '../../mol-math/misc';
+import { absMax, degToRad } from '../../mol-math/misc';
 import { Binding } from '../../mol-util/binding';
 var B = ButtonsType;
 var M = ModifiersKeys;
@@ -33,8 +33,16 @@ export var TrackballControlsParams = {
     rotateSpeed: PD.Numeric(5.0, { min: 1, max: 10, step: 1 }),
     zoomSpeed: PD.Numeric(7.0, { min: 1, max: 15, step: 1 }),
     panSpeed: PD.Numeric(1.0, { min: 0.1, max: 5, step: 0.1 }),
-    spin: PD.Boolean(false, { description: 'Spin the 3D scene around the x-axis in view space' }),
-    spinSpeed: PD.Numeric(1, { min: -20, max: 20, step: 1 }),
+    animate: PD.MappedStatic('off', {
+        off: PD.EmptyGroup(),
+        spin: PD.Group({
+            speed: PD.Numeric(1, { min: -20, max: 20, step: 1 }),
+        }, { description: 'Spin the 3D scene around the x-axis in view space' }),
+        rock: PD.Group({
+            speed: PD.Numeric(0.3, { min: -5, max: 5, step: 0.1 }),
+            angle: PD.Numeric(10, { min: 0, max: 90, step: 1 }, { description: 'How many degrees to rotate in each direction.' }),
+        }, { description: 'Rock the 3D scene around the x-axis in view space' })
+    }),
     staticMoving: PD.Boolean(true, { isHidden: true }),
     dynamicDampingFactor: PD.Numeric(0.2, {}, { isHidden: true }),
     minDistance: PD.Numeric(0.01, {}, { isHidden: true }),
@@ -99,6 +107,10 @@ var TrackballControls;
             return Vec2.set(mouseOnCircleVec2, (pageX - viewport.width * 0.5 - viewport.x) / (viewport.width * 0.5), (viewport.height + 2 * (viewport.y - pageY)) / viewport.width // screen.width intentional
             );
         }
+        function getRotateFactor() {
+            var aspectRatio = input.width / input.height;
+            return p.rotateSpeed * input.pixelRatio * aspectRatio;
+        }
         var rotAxis = Vec3();
         var rotQuat = Quat();
         var rotEyeDir = Vec3();
@@ -109,8 +121,7 @@ var TrackballControls;
             var dx = _rotCurr[0] - _rotPrev[0];
             var dy = _rotCurr[1] - _rotPrev[1];
             Vec3.set(rotMoveDir, dx, dy, 0);
-            var aspectRatio = input.width / input.height;
-            var angle = Vec3.magnitude(rotMoveDir) * p.rotateSpeed * input.pixelRatio * aspectRatio;
+            var angle = Vec3.magnitude(rotMoveDir) * getRotateFactor();
             if (angle) {
                 Vec3.sub(_eye, camera.position, camera.target);
                 Vec3.normalize(rotEyeDir, _eye);
@@ -236,8 +247,12 @@ var TrackballControls;
         function update(t) {
             if (lastUpdated === t)
                 return;
-            if (p.spin && lastUpdated > 0)
-                spin(t - lastUpdated);
+            if (lastUpdated > 0) {
+                if (p.animate.name === 'spin')
+                    spin(t - lastUpdated);
+                else if (p.animate.name === 'rock')
+                    rock(t - lastUpdated);
+            }
             Vec3.sub(_eye, camera.position, camera.target);
             rotateCamera();
             zRotateCamera();
@@ -268,6 +283,7 @@ var TrackballControls;
             if (!isStart && !_isInteracting)
                 return;
             _isInteracting = true;
+            resetRock(); // start rocking from the center after interactions
             var dragRotate = Binding.match(p.bindings.dragRotate, buttons, modifiers);
             var dragRotateZ = Binding.match(p.bindings.dragRotateZ, buttons, modifiers);
             var dragPan = Binding.match(p.bindings.dragPan, buttons, modifiers);
@@ -356,12 +372,30 @@ var TrackballControls;
         }
         var _spinSpeed = Vec2.create(0.005, 0);
         function spin(deltaT) {
-            if (p.spinSpeed === 0)
+            if (p.animate.name !== 'spin' || p.animate.params.speed === 0 || _isInteracting)
                 return;
-            var frameSpeed = (p.spinSpeed || 0) / 1000;
+            var frameSpeed = p.animate.params.speed / 1000;
             _spinSpeed[0] = 60 * Math.min(Math.abs(deltaT), 1000 / 8) / 1000 * frameSpeed;
-            if (!_isInteracting)
-                Vec2.add(_rotCurr, _rotPrev, _spinSpeed);
+            Vec2.add(_rotCurr, _rotPrev, _spinSpeed);
+        }
+        var _rockPhase = 0;
+        var _rockSpeed = Vec2.create(0.005, 0);
+        function rock(deltaT) {
+            if (p.animate.name !== 'rock' || p.animate.params.speed === 0 || _isInteracting)
+                return;
+            var dt = deltaT / 1000 * p.animate.params.speed;
+            var maxAngle = degToRad(p.animate.params.angle) / getRotateFactor();
+            var angleA = Math.sin(_rockPhase * Math.PI * 2) * maxAngle;
+            var angleB = Math.sin((_rockPhase + dt) * Math.PI * 2) * maxAngle;
+            _rockSpeed[0] = angleB - angleA;
+            Vec2.add(_rotCurr, _rotPrev, _rockSpeed);
+            _rockPhase += dt;
+            if (_rockPhase >= 1) {
+                _rockPhase = 0;
+            }
+        }
+        function resetRock() {
+            _rockPhase = 0;
         }
         function start(t) {
             lastUpdated = -1;
@@ -369,8 +403,13 @@ var TrackballControls;
         }
         return {
             viewport: viewport,
+            get isAnimating() { return p.animate.name !== 'off'; },
             get props() { return p; },
             setProps: function (props) {
+                var _a;
+                if (((_a = props.animate) === null || _a === void 0 ? void 0 : _a.name) === 'rock' && p.animate.name !== 'rock') {
+                    resetRock(); // start rocking from the center
+                }
                 Object.assign(p, props);
             },
             start: start,

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

@@ -15,6 +15,7 @@ import { ColorNames } from '../../mol-util/color/names';
 import { sphereVertexCount } from '../../mol-geo/primitive/sphere';
 import { ValueCell } from '../../mol-util';
 import { Geometry } from '../../mol-geo/geometry/geometry';
+import { GraphicsRenderVariantsBlended } from '../../mol-gl/webgl/render-item';
 export var DebugHelperParams = {
     sceneBoundingSpheres: PD.Boolean(false, { description: 'Show full scene bounding spheres.' }),
     visibleSceneBoundingSpheres: PD.Boolean(false, { description: 'Show visible scene bounding spheres.' }),
@@ -25,7 +26,7 @@ var BoundingSphereHelper = /** @class */ (function () {
     function BoundingSphereHelper(ctx, parent, props) {
         this.objectsData = new Map();
         this.instancesData = new Map();
-        this.scene = Scene.create(ctx);
+        this.scene = Scene.create(ctx, GraphicsRenderVariantsBlended);
         this.parent = parent;
         this._props = __assign(__assign({}, PD.getDefaultValues(DebugHelperParams)), props);
     }
@@ -148,6 +149,6 @@ var objectMaterialId = getNextMaterialId();
 var instanceMaterialId = getNextMaterialId();
 function createBoundingSphereRenderObject(mesh, color, materialId, transform) {
     var values = Mesh.Utils.createValuesSimple(mesh, { alpha: 0.1, doubleSided: false }, color, 1, transform);
-    return createRenderObject('mesh', values, { disposed: false, visible: true, alphaFactor: 1, pickable: false, colorOnly: false, opaque: false, writeDepth: false, noClip: false }, materialId);
+    return 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/mol-canvas3d/helper/camera-helper.d.ts

@@ -11,7 +11,7 @@ import { MarkerAction } from '../../mol-util/marker-action';
 import { ParamDefinition as PD } from '../../mol-util/param-definition';
 import { Camera, ICamera } from '../camera';
 export declare const CameraHelperParams: {
-    axes: PD.Mapped<PD.NamedParams<PD.Normalize<{
+    axes: PD.Mapped<PD.NamedParams<PD.Normalize<unknown>, "off"> | PD.NamedParams<PD.Normalize<{
         alpha: number;
         ignoreLight: boolean;
         colorX: import("../../mol-util/color").Color;
@@ -22,8 +22,19 @@ export declare const CameraHelperParams: {
         flipSided: boolean;
         flatShaded: boolean;
         xrayShaded: boolean;
-        quality: "custom" | "auto" | "highest" | "higher" | "high" | "medium" | "low" | "lower" | "lowest";
-    }>, "on"> | PD.NamedParams<PD.Normalize<unknown>, "off">>;
+        bumpFrequency: number;
+        bumpAmplitude: number;
+        quality: "auto" | "medium" | "high" | "low" | "custom" | "highest" | "higher" | "lower" | "lowest";
+        material: PD.Normalize<{
+            metalness: number;
+            roughness: number;
+            bumpiness: number;
+        }>;
+        clip: PD.Normalize<{
+            variant: any;
+            objects: any;
+        }>;
+    }>, "on">>;
 };
 export declare type CameraHelperParams = typeof CameraHelperParams;
 export declare type CameraHelperProps = PD.Values<CameraHelperParams>;

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

@@ -11,6 +11,7 @@ import { addSphere } from '../../mol-geo/geometry/mesh/builder/sphere';
 import { Mesh } from '../../mol-geo/geometry/mesh/mesh';
 import { MeshBuilder } from '../../mol-geo/geometry/mesh/mesh-builder';
 import { Scene } from '../../mol-gl/scene';
+import { GraphicsRenderVariantsBlended } from '../../mol-gl/webgl/render-item';
 import { Sphere3D } from '../../mol-math/geometry';
 import { Mat4, Vec3 } from '../../mol-math/linear-algebra';
 import { DataLoci, EmptyLoci } from '../../mol-model/loci';
@@ -52,7 +53,7 @@ var CameraHelper = /** @class */ (function () {
             }
             return changed;
         };
-        this.scene = Scene.create(webgl);
+        this.scene = Scene.create(webgl, GraphicsRenderVariantsBlended);
         this.camera = new Camera();
         Vec3.set(this.camera.up, 0, 1, 0);
         Vec3.set(this.camera.target, 0, 0, 0);
@@ -67,7 +68,6 @@ var CameraHelper = /** @class */ (function () {
                     _this.scene.clear();
                     var params = __assign(__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();
                     Vec3.set(_this.camera.position, 0, 0, params.scale * 200);

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

@@ -24,7 +24,18 @@ export declare const HandleHelperParams: {
         flipSided: boolean;
         flatShaded: boolean;
         xrayShaded: boolean;
-        quality: "custom" | "auto" | "highest" | "higher" | "high" | "medium" | "low" | "lower" | "lowest";
+        bumpFrequency: number;
+        bumpAmplitude: number;
+        quality: "auto" | "medium" | "high" | "low" | "custom" | "highest" | "higher" | "lower" | "lowest";
+        material: PD.Normalize<{
+            metalness: number;
+            roughness: number;
+            bumpiness: number;
+        }>;
+        clip: PD.Normalize<{
+            variant: any;
+            objects: any;
+        }>;
     }>, "on">>;
 };
 export declare type HandleHelperParams = typeof HandleHelperParams;

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

@@ -20,6 +20,7 @@ import { DataLoci, EmptyLoci } from '../../mol-model/loci';
 import { MarkerActions } from '../../mol-util/marker-action';
 import { Visual } from '../../mol-repr/visual';
 import { Interval } from '../../mol-data/int';
+import { GraphicsRenderVariantsBlended } from '../../mol-gl/webgl/render-item';
 var HandleParams = __assign(__assign({}, Mesh.Params), { alpha: __assign(__assign({}, Mesh.Params.alpha), { defaultValue: 1 }), ignoreLight: __assign(__assign({}, Mesh.Params.ignoreLight), { defaultValue: true }), colorX: PD.Color(ColorNames.red, { isEssential: true }), colorY: PD.Color(ColorNames.green, { isEssential: true }), colorZ: PD.Color(ColorNames.blue, { isEssential: true }), scale: PD.Numeric(0.33, { min: 0.1, max: 2, step: 0.1 }, { isEssential: true }) });
 export var HandleHelperParams = {
     handle: PD.MappedStatic('off', {
@@ -52,7 +53,7 @@ var HandleHelper = /** @class */ (function () {
             }
             return changed;
         };
-        this.scene = Scene.create(webgl);
+        this.scene = Scene.create(webgl, GraphicsRenderVariantsBlended);
         this.setProps(props);
     }
     HandleHelper.prototype.getBoundingSphere = function (out, instanceId) {
@@ -72,7 +73,6 @@ var HandleHelper = /** @class */ (function () {
                     _this.scene.clear();
                     var params = __assign(__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 = __assign({}, props.handle.params);

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

@@ -33,7 +33,11 @@ export declare const HelperParams: {
             flipSided: any;
             flatShaded: any;
             xrayShaded: any;
+            bumpFrequency: any;
+            bumpAmplitude: any;
             quality: any;
+            material: any;
+            clip: any;
         }>, "on">;
     }>>;
 };
@@ -61,7 +65,11 @@ export declare const DefaultHelperProps: PD.Values<{
             flipSided: any;
             flatShaded: any;
             xrayShaded: any;
+            bumpFrequency: any;
+            bumpAmplitude: any;
             quality: any;
+            material: any;
+            clip: any;
         }>, "on">;
     }>>;
 }>;

package/lib/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/mol-canvas3d/passes/draw.js

@@ -15,11 +15,11 @@ import { ValueCell } from '../../mol-util';
 import { Vec2 } from '../../mol-math/linear-algebra';
 import { quad_vert } from '../../mol-gl/shader/quad.vert';
 import { depthMerge_frag } from '../../mol-gl/shader/depth-merge.frag';
-import { copy_frag } from '../../mol-gl/shader/copy.frag';
 import { StereoCamera } from '../camera/stereo';
 import { WboitPass } from './wboit';
 import { AntialiasingPass, PostprocessingPass } from './postprocessing';
 import { MarkingPass } from './marking';
+import { createCopyRenderable } from '../../mol-gl/compute/util';
 var DepthMergeSchema = __assign(__assign({}, QuadSchema), { tDepthPrimitives: TextureSpec('texture', 'depth', 'ushort', 'nearest'), tDepthVolumes: TextureSpec('texture', 'depth', 'ushort', 'nearest'), uTexSize: UniformSpec('v2'), dPackedDepth: DefineSpec('boolean') });
 var DepthMergeShaderCode = ShaderCode('depth-merge', quad_vert, depthMerge_frag);
 function getDepthMergeRenderable(ctx, depthTexturePrimitives, depthTextureVolumes, packedDepth) {
@@ -28,14 +28,6 @@ function getDepthMergeRenderable(ctx, depthTexturePrimitives, depthTextureVolume
     var renderItem = createComputeRenderItem(ctx, 'triangles', DepthMergeShaderCode, schema, values);
     return createComputeRenderable(renderItem, values);
 }
-var CopySchema = __assign(__assign({}, QuadSchema), { tColor: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'), uTexSize: UniformSpec('v2') });
-var CopyShaderCode = ShaderCode('copy', quad_vert, copy_frag);
-function getCopyRenderable(ctx, colorTexture) {
-    var values = __assign(__assign({}, QuadValues), { tColor: ValueCell.create(colorTexture), uTexSize: ValueCell.create(Vec2.create(colorTexture.getWidth(), colorTexture.getHeight())) });
-    var schema = __assign({}, CopySchema);
-    var renderItem = createComputeRenderItem(ctx, 'triangles', CopyShaderCode, schema, values);
-    return createComputeRenderable(renderItem, values);
-}
 var DrawPass = /** @class */ (function () {
     function DrawPass(webgl, width, height, enableWboit) {
         this.webgl = webgl;
@@ -58,8 +50,8 @@ var DrawPass = /** @class */ (function () {
         this.marking = new MarkingPass(webgl, width, height);
         this.postprocessing = new PostprocessingPass(webgl, this);
         this.antialiasing = new AntialiasingPass(webgl, this);
-        this.copyFboTarget = getCopyRenderable(webgl, this.colorTarget.texture);
-        this.copyFboPostprocessing = getCopyRenderable(webgl, this.postprocessing.target.texture);
+        this.copyFboTarget = createCopyRenderable(webgl, this.colorTarget.texture);
+        this.copyFboPostprocessing = createCopyRenderable(webgl, this.postprocessing.target.texture);
     }
     Object.defineProperty(DrawPass.prototype, "wboitEnabled", {
         get: function () {
@@ -202,23 +194,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 = PostprocessingPass.isEnabled(postprocessingProps);
-        var antialiasingEnabled = AntialiasingPass.isEnabled(postprocessingProps);
-        var markingEnabled = MarkingPass.isEnabled(markingProps);
+        var postprocessingEnabled = PostprocessingPass.isEnabled(props.postprocessing);
+        var antialiasingEnabled = AntialiasingPass.isEnabled(props.postprocessing);
+        var markingEnabled = 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();
@@ -230,7 +222,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);
@@ -239,7 +231,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) {
@@ -255,7 +247,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();
@@ -269,16 +261,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 (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/mol-canvas3d/passes/image.d.ts

@@ -27,6 +27,7 @@ export declare const ImageParams: {
         outline: PD.NamedParams<PD.Normalize<unknown>, "off"> | PD.NamedParams<PD.Normalize<{
             scale: any;
             threshold: any;
+            color: any;
         }>, "on">;
         antialiasing: PD.NamedParams<PD.Normalize<unknown>, "off"> | PD.NamedParams<PD.Normalize<{
             edgeThreshold: any;
@@ -47,7 +48,7 @@ export declare const ImageParams: {
         innerEdgeFactor: number;
     }>>;
     cameraHelper: PD.Group<PD.Normalize<{
-        axes: PD.NamedParams<PD.Normalize<{
+        axes: PD.NamedParams<PD.Normalize<unknown>, "off"> | PD.NamedParams<PD.Normalize<{
             alpha: any;
             ignoreLight: any;
             colorX: any;
@@ -58,8 +59,12 @@ export declare const ImageParams: {
             flipSided: any;
             flatShaded: any;
             xrayShaded: any;
+            bumpFrequency: any;
+            bumpAmplitude: any;
             quality: any;
-        }>, "on"> | PD.NamedParams<PD.Normalize<unknown>, "off">;
+            material: any;
+            clip: any;
+        }>, "on">;
     }>>;
 };
 export declare type ImageProps = PD.Values<typeof ImageParams>;

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

@@ -73,12 +73,13 @@ var ImagePass = /** @class */ (function () {
         Camera.copySnapshot(this._camera.state, this.camera.state);
         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 (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/mol-canvas3d/passes/marking.js

@@ -17,7 +17,7 @@ import { overlay_frag } from '../../mol-gl/shader/marking/overlay.frag';
 import { Color } from '../../mol-util/color';
 import { edge_frag } from '../../mol-gl/shader/marking/edge.frag';
 export var MarkingParams = {
-    enabled: PD.Boolean(false),
+    enabled: PD.Boolean(true),
     highlightEdgeColor: PD.Color(Color.darken(Color.fromNormalizedRgb(1.0, 0.4, 0.6), 1.0)),
     selectEdgeColor: PD.Color(Color.darken(Color.fromNormalizedRgb(0.2, 1.0, 0.1), 1.0)),
     edgeScale: PD.Numeric(1, { min: 1, max: 3, step: 1 }, { description: 'Thickness of the edge.' }),

package/lib/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/mol-canvas3d/passes/multi-sample.js

@@ -24,8 +24,8 @@ function getComposeRenderable(ctx, colorTexture) {
     return createComputeRenderable(renderItem, values);
 }
 export var MultiSampleParams = {
-    mode: PD.Select('off', [['off', 'Off'], ['on', 'On'], ['temporal', 'Temporal']]),
-    sampleLevel: PD.Numeric(2, { min: 0, max: 5, step: 1 }),
+    mode: PD.Select('temporal', [['off', 'Off'], ['on', 'On'], ['temporal', 'Temporal']]),
+    sampleLevel: PD.Numeric(2, { min: 0, max: 5, step: 1 }, { description: 'Take level^2 samples.' }),
 };
 var MultiSamplePass = /** @class */ (function () {
     function MultiSamplePass(webgl, drawPass) {
@@ -55,13 +55,13 @@ var MultiSamplePass = /** @class */ (function () {
             ValueCell.update(this.compose.values.uTexSize, 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) {
@@ -72,7 +72,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
@@ -100,7 +101,7 @@ var MultiSamplePass = /** @class */ (function () {
             var sampleWeight = baseSampleWeight + roundingRange * uniformCenteredDistribution;
             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);
@@ -127,7 +128,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
@@ -141,7 +143,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);
             ValueCell.update(compose.values.uWeight, 1.0);
             ValueCell.update(compose.values.tColor, drawPass.getColorTarget(props.postprocessing).texture);
             compose.update();
@@ -167,7 +169,7 @@ var MultiSamplePass = /** @class */ (function () {
                 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);
@@ -263,8 +265,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;
 }());