molstar 3.0.0-dev.7 → 3.0.0-dev.8

package/lib/apps/viewer/index.d.ts

@@ -39,6 +39,7 @@ declare const DefaultViewerOptions: {
     pickScale: number | undefined;
     pickPadding: number | undefined;
     enableWboit: boolean | undefined;
+    preferWebgl1: boolean | undefined;
     viewportShowExpand: boolean | undefined;
     viewportShowControls: boolean | undefined;
     viewportShowSettings: boolean | undefined;

package/lib/apps/viewer/index.html

@@ -56,6 +56,8 @@
             var pixelScale = getParam('pixel-scale', '[^&]+').trim();
             var pickScale = getParam('pick-scale', '[^&]+').trim();
             var pickPadding = getParam('pick-padding', '[^&]+').trim();
+            var disableWboit = getParam('disable-wboit', '[^&]+').trim() === '1';
+            var preferWebgl1 = getParam('prefer-webgl1', '[^&]+').trim() === '1';
 
             molstar.Viewer.create('app', {
                 layoutShowControls: !hideControls,
@@ -69,6 +71,8 @@
                 pixelScale: parseFloat(pixelScale) || 1,
                 pickScale: parseFloat(pickScale) || 0.25,
                 pickPadding: isNaN(parseFloat(pickPadding)) ? 1 : parseFloat(pickPadding),
+                enableWboit: !disableWboit,
+                preferWebgl1: preferWebgl1,
             }).then(viewer => {
                 var snapshotId = getParam('snapshot-id', '[^&]+').trim();
                 if (snapshotId) viewer.setRemoteSnapshot(snapshotId);

package/lib/apps/viewer/index.js

@@ -69,6 +69,7 @@ var DefaultViewerOptions = {
     pickScale: PluginConfig.General.PickScale.defaultValue,
     pickPadding: PluginConfig.General.PickPadding.defaultValue,
     enableWboit: PluginConfig.General.EnableWboit.defaultValue,
+    preferWebgl1: PluginConfig.General.PreferWebGl1.defaultValue,
     viewportShowExpand: PluginConfig.Viewport.ShowExpand.defaultValue,
     viewportShowControls: PluginConfig.Viewport.ShowControls.defaultValue,
     viewportShowSettings: PluginConfig.Viewport.ShowSettings.defaultValue,
@@ -120,6 +121,7 @@ var Viewer = /** @class */ (function () {
                                 [PluginConfig.General.PickScale, o.pickScale],
                                 [PluginConfig.General.PickPadding, o.pickPadding],
                                 [PluginConfig.General.EnableWboit, o.enableWboit],
+                                [PluginConfig.General.PreferWebGl1, o.preferWebgl1],
                                 [PluginConfig.Viewport.ShowExpand, o.viewportShowExpand],
                                 [PluginConfig.Viewport.ShowControls, o.viewportShowControls],
                                 [PluginConfig.Viewport.ShowSettings, o.viewportShowSettings],

package/lib/commonjs/apps/viewer/index.d.ts

@@ -39,6 +39,7 @@ declare const DefaultViewerOptions: {
     pickScale: number | undefined;
     pickPadding: number | undefined;
     enableWboit: boolean | undefined;
+    preferWebgl1: boolean | undefined;
     viewportShowExpand: boolean | undefined;
     viewportShowControls: boolean | undefined;
     viewportShowSettings: boolean | undefined;

package/lib/commonjs/apps/viewer/index.js

@@ -75,6 +75,7 @@ var DefaultViewerOptions = {
     pickScale: config_1.PluginConfig.General.PickScale.defaultValue,
     pickPadding: config_1.PluginConfig.General.PickPadding.defaultValue,
     enableWboit: config_1.PluginConfig.General.EnableWboit.defaultValue,
+    preferWebgl1: config_1.PluginConfig.General.PreferWebGl1.defaultValue,
     viewportShowExpand: config_1.PluginConfig.Viewport.ShowExpand.defaultValue,
     viewportShowControls: config_1.PluginConfig.Viewport.ShowControls.defaultValue,
     viewportShowSettings: config_1.PluginConfig.Viewport.ShowSettings.defaultValue,
@@ -126,6 +127,7 @@ var Viewer = /** @class */ (function () {
                                 [config_1.PluginConfig.General.PickScale, o.pickScale],
                                 [config_1.PluginConfig.General.PickPadding, o.pickPadding],
                                 [config_1.PluginConfig.General.EnableWboit, o.enableWboit],
+                                [config_1.PluginConfig.General.PreferWebGl1, o.preferWebgl1],
                                 [config_1.PluginConfig.Viewport.ShowExpand, o.viewportShowExpand],
                                 [config_1.PluginConfig.Viewport.ShowControls, o.viewportShowControls],
                                 [config_1.PluginConfig.Viewport.ShowSettings, o.viewportShowSettings],

package/lib/commonjs/examples/alpha-orbitals/index.js

@@ -24,7 +24,7 @@ require('mol-plugin-ui/skin/light.scss');
 var AlphaOrbitalsExample = /** @class */ (function () {
     function AlphaOrbitalsExample() {
         this.params = new rxjs_1.BehaviorSubject({});
-        this.state = new rxjs_1.BehaviorSubject({ show: { name: 'orbital', params: { index: 32 } }, isoValue: 1, gpuSurface: false });
+        this.state = new rxjs_1.BehaviorSubject({ show: { name: 'orbital', params: { index: 32 } }, isoValue: 1, gpuSurface: true });
         this.selectors = void 0;
         this.basis = void 0;
         this.currentParams = (0, tslib_1.__assign)({}, this.state.value);

package/lib/commonjs/extensions/geo-export/mesh-exporter.js

@@ -17,7 +17,7 @@ var cylinder_1 = require("../../mol-geo/geometry/mesh/builder/cylinder");
 var size_data_1 = require("../../mol-geo/geometry/size-data");
 var linear_algebra_1 = require("../../mol-math/linear-algebra");
 var color_1 = require("../../mol-util/color/color");
-var float_packing_1 = require("../../mol-util/float-packing");
+var number_packing_1 = require("../../mol-util/number-packing");
 var util_2 = require("../../mol-gl/compute/util");
 var GeoExportName = 'geo-export';
 // avoiding namespace lookup improved performance in Chrome (Aug 2020)
@@ -29,7 +29,7 @@ var MeshExporter = /** @class */ (function () {
         var r = tSize.array[i * 3];
         var g = tSize.array[i * 3 + 1];
         var b = tSize.array[i * 3 + 2];
-        return (0, float_packing_1.decodeFloatRGB)(r, g, b) / size_data_1.sizeDataFactor;
+        return (0, number_packing_1.unpackRGBToInt)(r, g, b) / size_data_1.sizeDataFactor;
     };
     MeshExporter.getSize = function (values, instanceIndex, group) {
         var tSize = values.tSize.ref.value;
@@ -57,9 +57,9 @@ var MeshExporter = /** @class */ (function () {
         var g = groups[i4 + 1];
         var b = groups[i4 + 2];
         if (groups instanceof Float32Array) {
-            return (0, float_packing_1.decodeFloatRGB)(r * 255 + 0.5, g * 255 + 0.5, b * 255 + 0.5);
+            return (0, number_packing_1.unpackRGBToInt)(r * 255 + 0.5, g * 255 + 0.5, b * 255 + 0.5);
         }
-        return (0, float_packing_1.decodeFloatRGB)(r, g, b);
+        return (0, number_packing_1.unpackRGBToInt)(r, g, b);
     };
     MeshExporter.getInterpolatedColors = function (webgl, input) {
         var values = input.values, vertexCount = input.vertexCount, vertices = input.vertices, colorType = input.colorType, stride = input.stride;

package/lib/commonjs/extensions/rcsb/assembly-symmetry/behavior.d.ts

@@ -45,9 +45,9 @@ export declare const AssemblySymmetryPresetParams: {
     ignoreHydrogens: PD.Base<boolean | undefined>;
     quality: PD.Base<"auto" | "medium" | "high" | "low" | "custom" | "highest" | "higher" | "lower" | "lowest" | undefined>;
     theme: PD.Base<PD.Normalize<{
-        globalName: "uniform" | "occupancy" | "element-index" | "element-symbol" | "shape-group" | "uncertainty" | "carbohydrate-symbol" | "chain-id" | "operator-name" | "molecule-type" | "polymer-id" | "polymer-index" | "residue-name" | "secondary-structure" | "sequence-id" | "unit-index" | "entity-source" | "illustrative" | "hydrophobicity" | "model-index" | "operator-hkl" | "partial-charge" | "atom-id" | "entity-id" | undefined;
+        globalName: "uniform" | "occupancy" | "element-index" | "element-symbol" | "shape-group" | "uncertainty" | "carbohydrate-symbol" | "chain-id" | "operator-name" | "molecule-type" | "polymer-id" | "polymer-index" | "residue-name" | "secondary-structure" | "sequence-id" | "unit-index" | "entity-source" | "illustrative" | "hydrophobicity" | "model-index" | "operator-hkl" | "partial-charge" | "atom-id" | "entity-id" | "volume-value" | undefined;
         carbonColor: "element-symbol" | "chain-id" | "operator-name" | undefined;
-        symmetryColor: "uniform" | "occupancy" | "element-index" | "element-symbol" | "shape-group" | "uncertainty" | "carbohydrate-symbol" | "chain-id" | "operator-name" | "molecule-type" | "polymer-id" | "polymer-index" | "residue-name" | "secondary-structure" | "sequence-id" | "unit-index" | "entity-source" | "illustrative" | "hydrophobicity" | "model-index" | "operator-hkl" | "partial-charge" | "atom-id" | "entity-id" | undefined;
+        symmetryColor: "uniform" | "occupancy" | "element-index" | "element-symbol" | "shape-group" | "uncertainty" | "carbohydrate-symbol" | "chain-id" | "operator-name" | "molecule-type" | "polymer-id" | "polymer-index" | "residue-name" | "secondary-structure" | "sequence-id" | "unit-index" | "entity-source" | "illustrative" | "hydrophobicity" | "model-index" | "operator-hkl" | "partial-charge" | "atom-id" | "entity-id" | "volume-value" | undefined;
         focus: PD.Normalize<{
             name: any;
             params: any;

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

@@ -374,7 +374,7 @@ interface Canvas3D {
     update(repr?: Representation.Any, keepBoundingSphere?: boolean): void;
     clear(): void;
     syncVisibility(): void;
-    requestDraw(force?: boolean): void;
+    requestDraw(): void;
     /** Reset the timers, used by "animate" */
     resetTime(t: number): void;
     animate(): void;

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

@@ -255,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;
@@ -288,17 +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)) {
-                    if (!cameraChanged) {
-                        while (!multiSampleHelper.render(renderer, cam, scene, helper, true, p.transparentBackground, p))
-                            ;
-                    }
-                    else {
-                        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;
@@ -309,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) {
@@ -327,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);
             }
         }
@@ -365,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)());
@@ -534,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) {
@@ -547,7 +551,7 @@ var Canvas3D;
             updateViewport();
             syncViewport();
             if (draw)
-                requestDraw(true);
+                requestDraw();
             resized.next(+new Date());
         }
         return {
@@ -572,7 +576,7 @@ var Canvas3D;
                 reprRenderObjects.clear();
                 scene.clear();
                 helper.debug.clear();
-                requestDraw(true);
+                requestDraw();
                 reprCount.next(reprRenderObjects.size);
             },
             syncVisibility: function () {
@@ -584,7 +588,7 @@ var Canvas3D;
                     if (helper.debug.isEnabled)
                         helper.debug.update();
                 }
-                requestDraw(true);
+                requestDraw();
             },
             requestDraw: requestDraw,
             tick: tick,
@@ -681,7 +685,7 @@ var Canvas3D;
                     p.camera.stereo.name = 'off';
                 }
                 if (!doNotRequestDraw) {
-                    requestDraw(true);
+                    requestDraw();
                 }
             },
             getImagePass: function (props) {

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.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;
@@ -44,7 +51,7 @@ export declare class MultiSampleHelper {
     private sampleIndex;
     update(changed: boolean, props: MultiSampleProps): boolean;
     /** Return `true` while more samples are needed */
-    render(renderer: Renderer, camera: Camera | StereoCamera, scene: Scene, helper: Helper, toDrawingBuffer: boolean, transparentBackground: boolean, props: Props): boolean;
+    render(ctx: RenderContext, props: Props, toDrawingBuffer: boolean, forceOn?: boolean): boolean;
     constructor(multiSamplePass: MultiSamplePass);
 }
 export {};

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

@@ -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);
@@ -267,8 +269,8 @@ var MultiSampleHelper = /** @class */ (function () {
         return props.mode === 'temporal' ? this.sampleIndex !== -2 : false;
     };
     /** Return `true` while more samples are needed */
-    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);
+    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");
@@ -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;

package/lib/commonjs/mol-geo/geometry/color-data.d.ts

@@ -11,7 +11,7 @@ import { Vec2, Vec3, Vec4 } from '../../mol-math/linear-algebra';
 import { LocationIterator } from '../util/location-iterator';
 import { ColorTheme } from '../../mol-theme/color';
 import { Texture } from '../../mol-gl/webgl/texture';
-export declare type ColorType = 'uniform' | 'instance' | 'group' | 'groupInstance' | 'vertex' | 'vertexInstance' | 'volume' | 'volumeInstance';
+export declare type ColorType = 'uniform' | 'instance' | 'group' | 'groupInstance' | 'vertex' | 'vertexInstance' | 'volume' | 'volumeInstance' | 'direct';
 export declare type ColorData = {
     uColor: ValueCell<Vec3>;
     tColor: ValueCell<TextureImage<Uint8Array>>;

package/lib/commonjs/mol-geo/geometry/color-data.js

@@ -36,6 +36,7 @@ function _createColors(locationIt, positionIt, colorTheme, colorData) {
         case 'vertexInstance': return createVertexInstanceColor(positionIt, colorTheme.color, colorData);
         case 'volume': return createGridColor(colorTheme.grid, 'volume', colorData);
         case 'volumeInstance': return createGridColor(colorTheme.grid, 'volumeInstance', colorData);
+        case 'direct': return createDirectColor(colorData);
     }
 }
 function updatePaletteTexture(palette, cell) {
@@ -210,4 +211,25 @@ function createGridColor(grid, type, colorData) {
     }
 }
 exports.createGridColor = createGridColor;
+//
+/** Creates direct color */
+function createDirectColor(colorData) {
+    if (colorData) {
+        mol_util_1.ValueCell.updateIfChanged(colorData.dColorType, 'direct');
+        return colorData;
+    }
+    else {
+        return {
+            uColor: mol_util_1.ValueCell.create((0, linear_algebra_1.Vec3)()),
+            tColor: mol_util_1.ValueCell.create({ array: new Uint8Array(3), width: 1, height: 1 }),
+            tColorGrid: mol_util_1.ValueCell.create((0, texture_1.createNullTexture)()),
+            tPalette: mol_util_1.ValueCell.create({ array: new Uint8Array(3), width: 1, height: 1 }),
+            uColorTexDim: mol_util_1.ValueCell.create(linear_algebra_1.Vec2.create(1, 1)),
+            uColorGridDim: mol_util_1.ValueCell.create(linear_algebra_1.Vec3.create(1, 1, 1)),
+            uColorGridTransform: mol_util_1.ValueCell.create(linear_algebra_1.Vec4.create(0, 0, 0, 1)),
+            dColorType: mol_util_1.ValueCell.create('direct'),
+            dUsePalette: mol_util_1.ValueCell.create(false),
+        };
+    }
+}
 //# sourceMappingURL=color-data.js.map

package/lib/commonjs/mol-geo/geometry/cylinders/cylinders.js

@@ -156,7 +156,7 @@ var Cylinders;
         var padding = (0, size_data_1.getMaxSize)(size) * props.sizeFactor;
         var invariantBoundingSphere = geometry_1.Sphere3D.clone(cylinders.boundingSphere);
         var boundingSphere = (0, util_2.calculateTransformBoundingSphere)(invariantBoundingSphere, transform.aTransform.ref.value, instanceCount);
-        return (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({ aMapping: cylinders.mappingBuffer, aGroup: cylinders.groupBuffer, aStart: cylinders.startBuffer, aEnd: cylinders.endBuffer, aScale: cylinders.scaleBuffer, aCap: cylinders.capBuffer, elements: cylinders.indexBuffer, boundingSphere: mol_util_1.ValueCell.create(boundingSphere), invariantBoundingSphere: mol_util_1.ValueCell.create(invariantBoundingSphere), uInvariantBoundingSphere: mol_util_1.ValueCell.create(linear_algebra_1.Vec4.ofSphere(invariantBoundingSphere)) }, color), size), marker), overpaint), transparency), material), clipping), transform), { padding: mol_util_1.ValueCell.create(padding) }), base_1.BaseGeometry.createValues(props, counts)), { uSizeFactor: mol_util_1.ValueCell.create(props.sizeFactor * props.sizeAspectRatio), uDoubleSided: mol_util_1.ValueCell.create(props.doubleSided), dIgnoreLight: mol_util_1.ValueCell.create(props.ignoreLight), dXrayShaded: mol_util_1.ValueCell.create(props.xrayShaded), uBumpFrequency: mol_util_1.ValueCell.create(props.bumpFrequency), uBumpAmplitude: mol_util_1.ValueCell.create(props.bumpAmplitude) });
+        return (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({ dGeometryType: mol_util_1.ValueCell.create('cylinders'), aMapping: cylinders.mappingBuffer, aGroup: cylinders.groupBuffer, aStart: cylinders.startBuffer, aEnd: cylinders.endBuffer, aScale: cylinders.scaleBuffer, aCap: cylinders.capBuffer, elements: cylinders.indexBuffer, boundingSphere: mol_util_1.ValueCell.create(boundingSphere), invariantBoundingSphere: mol_util_1.ValueCell.create(invariantBoundingSphere), uInvariantBoundingSphere: mol_util_1.ValueCell.create(linear_algebra_1.Vec4.ofSphere(invariantBoundingSphere)) }, color), size), marker), overpaint), transparency), material), clipping), transform), { padding: mol_util_1.ValueCell.create(padding) }), base_1.BaseGeometry.createValues(props, counts)), { uSizeFactor: mol_util_1.ValueCell.create(props.sizeFactor * props.sizeAspectRatio), uDoubleSided: mol_util_1.ValueCell.create(props.doubleSided), dIgnoreLight: mol_util_1.ValueCell.create(props.ignoreLight), dXrayShaded: mol_util_1.ValueCell.create(props.xrayShaded), uBumpFrequency: mol_util_1.ValueCell.create(props.bumpFrequency), uBumpAmplitude: mol_util_1.ValueCell.create(props.bumpAmplitude) });
     }
     function createValuesSimple(cylinders, props, colorValue, sizeValue, transform) {
         var s = base_1.BaseGeometry.createSimple(colorValue, sizeValue, transform);