molstar 3.0.0-dev.5 → 3.0.0-dev.9

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

@@ -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/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

@@ -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/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

@@ -194,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();
@@ -222,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);
@@ -231,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) {
@@ -247,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();
@@ -261,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

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

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;
 }());

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

@@ -5,7 +5,7 @@
  */
 import { Vec3 } from '../../mol-math/linear-algebra';
 import { spiral2d } from '../../mol-math/misc';
-import { decodeFloatRGB, unpackRGBAToDepth } from '../../mol-util/float-packing';
+import { unpackRGBToInt, unpackRGBAToDepth } from '../../mol-util/number-packing';
 import { StereoCamera } from '../camera/stereo';
 import { cameraUnproject } from '../camera/util';
 import { Viewport } from '../camera/util';
@@ -43,29 +43,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;
 }());
@@ -128,7 +128,7 @@ var PickHelper = /** @class */ (function () {
     };
     PickHelper.prototype.getId = function (x, y, buffer) {
         var idx = this.getBufferIdx(x, y);
-        return decodeFloatRGB(buffer[idx], buffer[idx + 1], buffer[idx + 2]);
+        return 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/mol-canvas3d/passes/postprocessing.js

@@ -31,7 +31,7 @@ function getOutlinesRenderable(ctx, depthTexture) {
 }
 var SsaoSchema = __assign(__assign({}, QuadSchema), { tDepth: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'), uSamples: UniformSpec('v3[]'), dNSamples: DefineSpec('number'), uProjection: UniformSpec('m4'), uInvProjection: UniformSpec('m4'), uBounds: UniformSpec('v4'), uTexSize: UniformSpec('v2'), uRadius: UniformSpec('f'), uBias: UniformSpec('f') });
 function getSsaoRenderable(ctx, depthTexture) {
-    var values = __assign(__assign({}, QuadValues), { tDepth: ValueCell.create(depthTexture), uSamples: ValueCell.create([0.0, 0.0, 1.0]), dNSamples: ValueCell.create(1), uProjection: ValueCell.create(Mat4.identity()), uInvProjection: ValueCell.create(Mat4.identity()), uBounds: ValueCell.create(Vec4()), uTexSize: ValueCell.create(Vec2.create(ctx.gl.drawingBufferWidth, ctx.gl.drawingBufferHeight)), uRadius: ValueCell.create(8.0), uBias: ValueCell.create(0.025) });
+    var values = __assign(__assign({}, QuadValues), { tDepth: ValueCell.create(depthTexture), uSamples: ValueCell.create([0.0, 0.0, 1.0]), dNSamples: ValueCell.create(32), uProjection: ValueCell.create(Mat4.identity()), uInvProjection: ValueCell.create(Mat4.identity()), uBounds: ValueCell.create(Vec4()), uTexSize: ValueCell.create(Vec2.create(ctx.gl.drawingBufferWidth, ctx.gl.drawingBufferHeight)), uRadius: ValueCell.create(8.0), uBias: ValueCell.create(0.025) });
     var schema = __assign({}, SsaoSchema);
     var shaderCode = ShaderCode('ssao', quad_vert, ssao_frag);
     var renderItem = createComputeRenderItem(ctx, 'triangles', shaderCode, schema, values);
@@ -39,7 +39,7 @@ function getSsaoRenderable(ctx, depthTexture) {
 }
 var SsaoBlurSchema = __assign(__assign({}, QuadSchema), { tSsaoDepth: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'), uTexSize: UniformSpec('v2'), uKernel: UniformSpec('f[]'), dOcclusionKernelSize: DefineSpec('number'), uBlurDirectionX: UniformSpec('f'), uBlurDirectionY: UniformSpec('f'), uMaxPossibleViewZDiff: UniformSpec('f'), uNear: UniformSpec('f'), uFar: UniformSpec('f'), uBounds: UniformSpec('v4'), dOrthographic: DefineSpec('number') });
 function getSsaoBlurRenderable(ctx, ssaoDepthTexture, direction) {
-    var values = __assign(__assign({}, QuadValues), { tSsaoDepth: ValueCell.create(ssaoDepthTexture), uTexSize: ValueCell.create(Vec2.create(ssaoDepthTexture.getWidth(), ssaoDepthTexture.getHeight())), uKernel: ValueCell.create([0.0]), dOcclusionKernelSize: ValueCell.create(1), uBlurDirectionX: ValueCell.create(direction === 'horizontal' ? 1 : 0), uBlurDirectionY: ValueCell.create(direction === 'vertical' ? 1 : 0), uMaxPossibleViewZDiff: ValueCell.create(0.5), uNear: ValueCell.create(0.0), uFar: ValueCell.create(10000.0), uBounds: ValueCell.create(Vec4()), dOrthographic: ValueCell.create(0) });
+    var values = __assign(__assign({}, QuadValues), { tSsaoDepth: ValueCell.create(ssaoDepthTexture), uTexSize: ValueCell.create(Vec2.create(ssaoDepthTexture.getWidth(), ssaoDepthTexture.getHeight())), uKernel: ValueCell.create([0.0]), dOcclusionKernelSize: ValueCell.create(15), uBlurDirectionX: ValueCell.create(direction === 'horizontal' ? 1 : 0), uBlurDirectionY: ValueCell.create(direction === 'vertical' ? 1 : 0), uMaxPossibleViewZDiff: ValueCell.create(0.5), uNear: ValueCell.create(0.0), uFar: ValueCell.create(10000.0), uBounds: ValueCell.create(Vec4()), dOrthographic: ValueCell.create(0) });
     var schema = __assign({}, SsaoBlurSchema);
     var shaderCode = ShaderCode('ssao_blur', quad_vert, ssaoBlur_frag);
     var renderItem = createComputeRenderItem(ctx, 'triangles', shaderCode, schema, values);
@@ -67,7 +67,7 @@ function getSamples(vectorSamples, nSamples) {
 }
 var PostprocessingSchema = __assign(__assign({}, QuadSchema), { tSsaoDepth: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'), tColor: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'), tDepth: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'), tOutlines: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'), uTexSize: UniformSpec('v2'), dOrthographic: DefineSpec('number'), uNear: UniformSpec('f'), uFar: UniformSpec('f'), uFogNear: UniformSpec('f'), uFogFar: UniformSpec('f'), uFogColor: UniformSpec('v3'), uOutlineColor: UniformSpec('v3'), uTransparentBackground: UniformSpec('b'), uMaxPossibleViewZDiff: UniformSpec('f'), dOcclusionEnable: DefineSpec('boolean'), dOutlineEnable: DefineSpec('boolean'), dOutlineScale: DefineSpec('number'), uOutlineThreshold: UniformSpec('f') });
 function getPostprocessingRenderable(ctx, colorTexture, depthTexture, outlinesTexture, ssaoDepthTexture) {
-    var values = __assign(__assign({}, QuadValues), { tSsaoDepth: ValueCell.create(ssaoDepthTexture), tColor: ValueCell.create(colorTexture), tDepth: ValueCell.create(depthTexture), tOutlines: ValueCell.create(outlinesTexture), uTexSize: ValueCell.create(Vec2.create(colorTexture.getWidth(), colorTexture.getHeight())), dOrthographic: ValueCell.create(0), uNear: ValueCell.create(1), uFar: ValueCell.create(10000), uFogNear: ValueCell.create(10000), uFogFar: ValueCell.create(10000), uFogColor: ValueCell.create(Vec3.create(1, 1, 1)), uOutlineColor: ValueCell.create(Vec3.create(0, 0, 0)), uTransparentBackground: ValueCell.create(false), uMaxPossibleViewZDiff: ValueCell.create(0.5), dOcclusionEnable: ValueCell.create(false), dOutlineEnable: ValueCell.create(false), dOutlineScale: ValueCell.create(1), uOutlineThreshold: ValueCell.create(0.33) });
+    var values = __assign(__assign({}, QuadValues), { tSsaoDepth: ValueCell.create(ssaoDepthTexture), tColor: ValueCell.create(colorTexture), tDepth: ValueCell.create(depthTexture), tOutlines: ValueCell.create(outlinesTexture), uTexSize: ValueCell.create(Vec2.create(colorTexture.getWidth(), colorTexture.getHeight())), dOrthographic: ValueCell.create(0), uNear: ValueCell.create(1), uFar: ValueCell.create(10000), uFogNear: ValueCell.create(10000), uFogFar: ValueCell.create(10000), uFogColor: ValueCell.create(Vec3.create(1, 1, 1)), uOutlineColor: ValueCell.create(Vec3.create(0, 0, 0)), uTransparentBackground: ValueCell.create(false), uMaxPossibleViewZDiff: ValueCell.create(0.5), dOcclusionEnable: ValueCell.create(true), dOutlineEnable: ValueCell.create(false), dOutlineScale: ValueCell.create(1), uOutlineThreshold: ValueCell.create(0.33) });
     var schema = __assign({}, PostprocessingSchema);
     var shaderCode = ShaderCode('postprocessing', quad_vert, postprocessing_frag);
     var renderItem = createComputeRenderItem(ctx, 'triangles', shaderCode, schema, values);

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

@@ -135,7 +135,7 @@ function getWeightsRenderable(ctx, edgesTexture) {
     var height = edgesTexture.getHeight();
     var areaTexture = createTexture(ctx.gl, ctx.extensions, 'image-uint8', 'rgb', 'ubyte', 'linear');
     var searchTexture = createTexture(ctx.gl, ctx.extensions, 'image-uint8', 'rgba', 'ubyte', 'nearest');
-    var values = __assign(__assign({}, QuadValues), { tEdges: ValueCell.create(edgesTexture), tArea: ValueCell.create(areaTexture), tSearch: ValueCell.create(searchTexture), uTexSizeInv: ValueCell.create(Vec2.create(1 / width, 1 / height)), uViewport: ValueCell.create(Vec4()), dMaxSearchSteps: ValueCell.create(8) });
+    var values = __assign(__assign({}, QuadValues), { tEdges: ValueCell.create(edgesTexture), tArea: ValueCell.create(areaTexture), tSearch: ValueCell.create(searchTexture), uTexSizeInv: ValueCell.create(Vec2.create(1 / width, 1 / height)), uViewport: ValueCell.create(Vec4()), dMaxSearchSteps: ValueCell.create(16) });
     // Note: loading image textures requires `HTMLImageElement` to be available
     loadImageTexture(getAreaTexture(), values.tArea, areaTexture);
     loadImageTexture(getSearchTexture(), values.tSearch, searchTexture);

package/lib/mol-geo/geometry/base.d.ts

@@ -10,6 +10,7 @@ import { LocationIterator } from '../util/location-iterator';
 import { ParamDefinition as PD } from '../../mol-util/param-definition';
 import { TransformData } from './transform-data';
 import { Theme } from '../../mol-theme/theme';
+import { Clip } from '../../mol-util/clip';
 export declare const VisualQualityInfo: {
     custom: {};
     auto: {};
@@ -48,6 +49,16 @@ export declare namespace BaseGeometry {
             roughness: number;
             bumpiness: number;
         }>>;
+        clip: PD.Group<PD.Normalize<{
+            variant: Clip.Variant;
+            objects: PD.Normalize<{
+                type: any;
+                invert: any;
+                position: any;
+                rotation: any;
+                scale: any;
+            }>[];
+        }>>;
     };
     type Params = typeof Params;
     type Counts = {
@@ -71,6 +82,13 @@ export declare namespace BaseGeometry {
         uRoughness: ValueCell<number, never>;
         uBumpiness: ValueCell<number, never>;
         dLightCount: ValueCell<number, never>;
+        dClipObjectCount: ValueCell<number, never>;
+        dClipVariant: ValueCell<Clip.Variant, never>;
+        uClipObjectType: ValueCell<number[], never>;
+        uClipObjectInvert: ValueCell<boolean[], never>;
+        uClipObjectPosition: ValueCell<number[], never>;
+        uClipObjectRotation: ValueCell<number[], never>;
+        uClipObjectScale: ValueCell<number[], never>;
     };
     function updateValues(values: BaseValues, props: PD.Values<Params>): void;
     function createRenderableState(props?: Partial<PD.Values<Params>>): RenderableState;

package/lib/mol-geo/geometry/base.js

@@ -13,6 +13,7 @@ import { UniformColorTheme } from '../../mol-theme/color/uniform';
 import { UniformSizeTheme } from '../../mol-theme/size/uniform';
 import { smoothstep } from '../../mol-math/interpolate';
 import { Material } from '../../mol-util/material';
+import { Clip } from '../../mol-util/clip';
 export var VisualQualityInfo = {
     'custom': {},
     'auto': {},
@@ -71,6 +72,7 @@ export var BaseGeometry;
         alpha: PD.Numeric(1, { min: 0, max: 1, step: 0.01 }, { label: 'Opacity', isEssential: true, description: 'How opaque/transparent the representation is rendered.' }),
         quality: PD.Select('auto', VisualQualityOptions, { isEssential: true, description: 'Visual/rendering quality of the representation.' }),
         material: Material.getParam(),
+        clip: PD.Group(Clip.Params),
     };
     function createSimple(colorValue, sizeValue, transform) {
         if (colorValue === void 0) { colorValue = ColorNames.grey; }
@@ -86,6 +88,7 @@ export var BaseGeometry;
     }
     BaseGeometry.createSimple = createSimple;
     function createValues(props, counts) {
+        var clip = Clip.getClip(props.clip);
         return {
             alpha: ValueCell.create(props.alpha),
             uAlpha: ValueCell.create(props.alpha),
@@ -96,6 +99,13 @@ export var BaseGeometry;
             uRoughness: ValueCell.create(props.material.roughness),
             uBumpiness: ValueCell.create(props.material.bumpiness),
             dLightCount: ValueCell.create(1),
+            dClipObjectCount: ValueCell.create(clip.objects.count),
+            dClipVariant: ValueCell.create(clip.variant),
+            uClipObjectType: ValueCell.create(clip.objects.type),
+            uClipObjectInvert: ValueCell.create(clip.objects.invert),
+            uClipObjectPosition: ValueCell.create(clip.objects.position),
+            uClipObjectRotation: ValueCell.create(clip.objects.rotation),
+            uClipObjectScale: ValueCell.create(clip.objects.scale),
         };
     }
     BaseGeometry.createValues = createValues;
@@ -104,6 +114,14 @@ export var BaseGeometry;
         ValueCell.updateIfChanged(values.uMetalness, props.material.metalness);
         ValueCell.updateIfChanged(values.uRoughness, props.material.roughness);
         ValueCell.updateIfChanged(values.uBumpiness, props.material.bumpiness);
+        var clip = Clip.getClip(props.clip);
+        ValueCell.update(values.dClipObjectCount, clip.objects.count);
+        ValueCell.update(values.dClipVariant, clip.variant);
+        ValueCell.update(values.uClipObjectType, clip.objects.type);
+        ValueCell.update(values.uClipObjectInvert, clip.objects.invert);
+        ValueCell.update(values.uClipObjectPosition, clip.objects.position);
+        ValueCell.update(values.uClipObjectRotation, clip.objects.rotation);
+        ValueCell.update(values.uClipObjectScale, clip.objects.scale);
     }
     BaseGeometry.updateValues = updateValues;
     function createRenderableState(props) {
@@ -117,7 +135,6 @@ export var BaseGeometry;
             colorOnly: false,
             opaque: opaque,
             writeDepth: opaque,
-            noClip: false,
         };
     }
     BaseGeometry.createRenderableState = createRenderableState;

package/lib/mol-geo/geometry/clipping-data.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2020-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
@@ -8,8 +8,6 @@ import { Vec2 } from '../../mol-math/linear-algebra';
 import { TextureImage } from '../../mol-gl/renderable/util';
 import { Clipping } from '../../mol-theme/clipping';
 export declare type ClippingData = {
-    dClipObjectCount: ValueCell<number>;
-    dClipVariant: ValueCell<string>;
     tClipping: ValueCell<TextureImage<Uint8Array>>;
     uClippingTexDim: ValueCell<Vec2>;
     dClipping: ValueCell<boolean>;

package/lib/mol-geo/geometry/clipping-data.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2020-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
@@ -7,9 +7,7 @@ import { ValueCell } from '../../mol-util/value-cell';
 import { Vec2 } from '../../mol-math/linear-algebra';
 import { createTextureImage } from '../../mol-gl/renderable/util';
 export function applyClippingGroups(array, start, end, groups) {
-    for (var i = start; i < end; ++i) {
-        array[i] = groups;
-    }
+    array.fill(groups, start, end);
     return true;
 }
 export function clearClipping(array, start, end) {
@@ -25,8 +23,6 @@ export function createClipping(count, clippingData) {
     }
     else {
         return {
-            dClipObjectCount: ValueCell.create(0),
-            dClipVariant: ValueCell.create('instance'),
             tClipping: ValueCell.create(clipping),
             uClippingTexDim: ValueCell.create(Vec2.create(clipping.width, clipping.height)),
             dClipping: ValueCell.create(count > 0),
@@ -38,12 +34,11 @@ export function createEmptyClipping(clippingData) {
     if (clippingData) {
         ValueCell.update(clippingData.tClipping, emptyClippingTexture);
         ValueCell.update(clippingData.uClippingTexDim, Vec2.create(1, 1));
+        ValueCell.updateIfChanged(clippingData.dClipping, false);
         return clippingData;
     }
     else {
         return {
-            dClipObjectCount: ValueCell.create(0),
-            dClipVariant: ValueCell.create('instance'),
             tClipping: ValueCell.create(emptyClippingTexture),
             uClippingTexDim: ValueCell.create(Vec2.create(1, 1)),
             dClipping: ValueCell.create(false),

package/lib/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>>;