molstar 3.8.2 → 3.9.0

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

@@ -15,6 +15,7 @@ var wboit_1 = require("./wboit");
 var postprocessing_1 = require("./postprocessing");
 var marking_1 = require("./marking");
 var util_1 = require("../../mol-gl/compute/util");
+var debug_1 = require("../../mol-util/debug");
 var DrawPass = /** @class */ (function () {
     function DrawPass(webgl, width, height, enableWboit) {
         this.webgl = webgl;
@@ -95,8 +96,12 @@ var DrawPass = /** @class */ (function () {
         // render transparent primitives and volumes
         if (scene.opacityAverage < 1 || scene.volumes.renderables.length > 0) {
             this.wboit.bind();
-            renderer.renderWboitTransparent(scene.primitives, camera, this.depthTextureOpaque);
-            renderer.renderWboitTransparent(scene.volumes, camera, this.depthTextureOpaque);
+            if (scene.opacityAverage < 1) {
+                renderer.renderWboitTransparent(scene.primitives, camera, this.depthTextureOpaque);
+            }
+            if (scene.volumes.renderables.length > 0) {
+                renderer.renderWboitTransparent(scene.volumes, camera, this.depthTextureOpaque);
+            }
             // evaluate wboit
             if (postprocessing_1.PostprocessingPass.isEnabled(postprocessingProps)) {
                 this.postprocessing.target.bind();
@@ -108,7 +113,7 @@ var DrawPass = /** @class */ (function () {
         }
     };
     DrawPass.prototype._renderBlended = function (renderer, camera, scene, toDrawingBuffer, transparentBackground, postprocessingProps) {
-        var _a, _b;
+        var _a, _b, _c, _d;
         if (toDrawingBuffer) {
             this.drawTarget.bind();
         }
@@ -151,9 +156,29 @@ var DrawPass = /** @class */ (function () {
                     (_b = this.colorTarget.depthRenderbuffer) === null || _b === void 0 ? void 0 : _b.attachFramebuffer(this.postprocessing.target.framebuffer);
                 }
             }
-            renderer.renderBlendedVolume(scene.volumes, camera, this.depthTextureOpaque);
+            if (scene.volumes.renderables.length > 0) {
+                var target = postprocessing_1.PostprocessingPass.isEnabled(postprocessingProps)
+                    ? this.postprocessing.target : this.colorTarget;
+                if (!this.packedDepth) {
+                    this.depthTextureOpaque.detachFramebuffer(target.framebuffer, 'depth');
+                }
+                else {
+                    (_c = this.colorTarget.depthRenderbuffer) === null || _c === void 0 ? void 0 : _c.detachFramebuffer(target.framebuffer);
+                }
+                target.bind();
+                renderer.renderBlendedVolume(scene.volumes, camera, this.depthTextureOpaque);
+                if (!this.packedDepth) {
+                    this.depthTextureOpaque.attachFramebuffer(target.framebuffer, 'depth');
+                }
+                else {
+                    (_d = this.colorTarget.depthRenderbuffer) === null || _d === void 0 ? void 0 : _d.attachFramebuffer(target.framebuffer);
+                }
+                target.bind();
+            }
+        }
+        if (scene.opacityAverage < 1) {
+            renderer.renderBlendedTransparent(scene.primitives, camera, null);
         }
-        renderer.renderBlendedTransparent(scene.primitives, camera, null);
     };
     DrawPass.prototype._render = function (renderer, camera, scene, helper, toDrawingBuffer, props) {
         var volumeRendering = scene.volumes.renderables.length > 0;
@@ -225,6 +250,8 @@ var DrawPass = /** @class */ (function () {
         this.webgl.gl.flush();
     };
     DrawPass.prototype.render = function (ctx, props, toDrawingBuffer) {
+        if (debug_1.isTimingMode)
+            this.webgl.timer.mark('DrawPass.render');
         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());
@@ -236,6 +263,8 @@ var DrawPass = /** @class */ (function () {
         else {
             this._render(renderer, camera, scene, helper, toDrawingBuffer, props);
         }
+        if (debug_1.isTimingMode)
+            this.webgl.timer.markEnd('DrawPass.render');
     };
     DrawPass.prototype.getColorTarget = function (postprocessingProps) {
         if (postprocessing_1.AntialiasingPass.isEnabled(postprocessingProps)) {

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

@@ -17,6 +17,7 @@ var mol_util_1 = require("../../mol-util");
 var param_definition_1 = require("../../mol-util/param-definition");
 var quad_vert_1 = require("../../mol-gl/shader/quad.vert");
 var fxaa_frag_1 = require("../../mol-gl/shader/fxaa.frag");
+var debug_1 = require("../../mol-util/debug");
 exports.FxaaParams = {
     edgeThresholdMin: param_definition_1.ParamDefinition.Numeric(0.0312, { min: 0.0312, max: 0.0833, step: 0.0001 }, { description: 'Trims the algorithm from processing darks.' }),
     edgeThresholdMax: param_definition_1.ParamDefinition.Numeric(0.063, { min: 0.063, max: 0.333, step: 0.001 }, { description: 'The minimum amount of local contrast required to apply algorithm.' }),
@@ -68,6 +69,8 @@ var FxaaPass = /** @class */ (function () {
         }
     };
     FxaaPass.prototype.render = function (viewport, target) {
+        if (debug_1.isTimingMode)
+            this.webgl.timer.mark('FxaaPass.render');
         if (target) {
             target.bind();
         }
@@ -76,6 +79,8 @@ var FxaaPass = /** @class */ (function () {
         }
         this.updateState(viewport);
         this.renderable.render();
+        if (debug_1.isTimingMode)
+            this.webgl.timer.markEnd('FxaaPass.render');
     };
     return FxaaPass;
 }());

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

@@ -19,6 +19,7 @@ var quad_vert_1 = require("../../mol-gl/shader/quad.vert");
 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");
+var debug_1 = require("../../mol-util/debug");
 exports.MarkingParams = {
     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)),
@@ -91,6 +92,8 @@ var MarkingPass = /** @class */ (function () {
         mol_util_1.ValueCell.update(overlayValues.uGhostEdgeStrength, ghostEdgeStrength);
     };
     MarkingPass.prototype.render = function (viewport, target) {
+        if (debug_1.isTimingMode)
+            this.webgl.timer.mark('MarkingPass.render');
         this.edgesTarget.bind();
         this.setEdgeState(viewport);
         this.edge.render();
@@ -102,6 +105,8 @@ var MarkingPass = /** @class */ (function () {
         }
         this.setOverlayState(viewport);
         this.overlay.render();
+        if (debug_1.isTimingMode)
+            this.webgl.timer.markEnd('MarkingPass.render');
     };
     return MarkingPass;
 }());

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

@@ -18,6 +18,7 @@ var param_definition_1 = require("../../mol-util/param-definition");
 var camera_1 = require("../../mol-canvas3d/camera");
 var quad_vert_1 = require("../../mol-gl/shader/quad.vert");
 var compose_frag_1 = require("../../mol-gl/shader/compose.frag");
+var debug_1 = require("../../mol-util/debug");
 var ComposeSchema = tslib_1.__assign(tslib_1.__assign({}, util_1.QuadSchema), { tColor: (0, schema_1.TextureSpec)('texture', 'rgba', 'ubyte', 'nearest'), uTexSize: (0, schema_1.UniformSpec)('v2'), uWeight: (0, schema_1.UniformSpec)('f') });
 var ComposeShaderCode = (0, shader_code_1.ShaderCode)('compose', quad_vert_1.quad_vert, compose_frag_1.compose_frag);
 function getComposeRenderable(ctx, colorTexture) {
@@ -79,6 +80,8 @@ var MultiSamplePass = /** @class */ (function () {
         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;
+        if (debug_1.isTimingMode)
+            webgl.timer.mark('MultiSamplePass.renderMultiSample');
         // based on the Multisample Anti-Aliasing Render Pass
         // contributed to three.js by bhouston / http://clara.io/
         //
@@ -137,11 +140,15 @@ var MultiSamplePass = /** @class */ (function () {
         compose.render();
         camera.viewOffset.enabled = false;
         camera.update();
+        if (debug_1.isTimingMode)
+            webgl.timer.markEnd('MultiSamplePass.renderMultiSample');
     };
     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;
+        if (debug_1.isTimingMode)
+            webgl.timer.mark('MultiSamplePass.renderTemporalMultiSample');
         // based on the Multisample Anti-Aliasing Render Pass
         // contributed to three.js by bhouston / http://clara.io/
         //
@@ -229,6 +236,8 @@ var MultiSamplePass = /** @class */ (function () {
         }
         camera.viewOffset.enabled = false;
         camera.update();
+        if (debug_1.isTimingMode)
+            webgl.timer.markEnd('MultiSamplePass.renderTemporalMultiSample');
         return sampleIndex >= offsetList.length ? -2 : sampleIndex;
     };
     return MultiSamplePass;

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

@@ -7,7 +7,6 @@ import { PickingId } from '../../mol-geo/geometry/picking';
 import { Renderer } from '../../mol-gl/renderer';
 import { Scene } from '../../mol-gl/scene';
 import { WebGLContext } from '../../mol-gl/webgl/context';
-import { RenderTarget } from '../../mol-gl/webgl/render-target';
 import { Vec3 } from '../../mol-math/linear-algebra';
 import { Camera, ICamera } from '../camera';
 import { StereoCamera } from '../camera/stereo';
@@ -22,13 +21,27 @@ export declare class PickPass {
     private webgl;
     private drawPass;
     readonly pickBaseScale: number;
-    readonly objectPickTarget: RenderTarget;
-    readonly instancePickTarget: RenderTarget;
-    readonly groupPickTarget: RenderTarget;
-    readonly depthPickTarget: RenderTarget;
+    private readonly objectPickTarget;
+    private readonly instancePickTarget;
+    private readonly groupPickTarget;
+    private readonly depthPickTarget;
+    private readonly framebuffer;
+    private readonly objectPickTexture;
+    private readonly instancePickTexture;
+    private readonly groupPickTexture;
+    private readonly depthPickTexture;
+    private readonly objectPickFramebuffer;
+    private readonly instancePickFramebuffer;
+    private readonly groupPickFramebuffer;
+    private readonly depthPickFramebuffer;
+    private readonly depthRenderbuffer;
     private pickWidth;
     private pickHeight;
     constructor(webgl: WebGLContext, drawPass: DrawPass, pickBaseScale: number);
+    bindObject(): void;
+    bindInstance(): void;
+    bindGroup(): void;
+    bindDepth(): void;
     get drawingBufferHeight(): number;
     syncSize(): void;
     private renderVariant;

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

@@ -6,8 +6,10 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PickHelper = exports.PickPass = void 0;
+var compat_1 = require("../../mol-gl/webgl/compat");
 var linear_algebra_1 = require("../../mol-math/linear-algebra");
 var misc_1 = require("../../mol-math/misc");
+var debug_1 = require("../../mol-util/debug");
 var number_packing_1 = require("../../mol-util/number-packing");
 var stereo_1 = require("../camera/stereo");
 var util_1 = require("../camera/util");
@@ -21,11 +23,80 @@ var PickPass = /** @class */ (function () {
         var pickScale = pickBaseScale / webgl.pixelRatio;
         this.pickWidth = Math.ceil(drawPass.colorTarget.getWidth() * pickScale);
         this.pickHeight = Math.ceil(drawPass.colorTarget.getHeight() * pickScale);
-        this.objectPickTarget = webgl.createRenderTarget(this.pickWidth, this.pickHeight);
-        this.instancePickTarget = webgl.createRenderTarget(this.pickWidth, this.pickHeight);
-        this.groupPickTarget = webgl.createRenderTarget(this.pickWidth, this.pickHeight);
-        this.depthPickTarget = webgl.createRenderTarget(this.pickWidth, this.pickHeight);
+        var resources = webgl.resources, drawBuffers = webgl.extensions.drawBuffers, gl = webgl.gl;
+        if (drawBuffers) {
+            this.objectPickTexture = resources.texture('image-uint8', 'rgba', 'ubyte', 'nearest');
+            this.objectPickTexture.define(this.pickWidth, this.pickHeight);
+            this.instancePickTexture = resources.texture('image-uint8', 'rgba', 'ubyte', 'nearest');
+            this.instancePickTexture.define(this.pickWidth, this.pickHeight);
+            this.groupPickTexture = resources.texture('image-uint8', 'rgba', 'ubyte', 'nearest');
+            this.groupPickTexture.define(this.pickWidth, this.pickHeight);
+            this.depthPickTexture = resources.texture('image-uint8', 'rgba', 'ubyte', 'nearest');
+            this.depthPickTexture.define(this.pickWidth, this.pickHeight);
+            this.framebuffer = resources.framebuffer();
+            this.objectPickFramebuffer = resources.framebuffer();
+            this.instancePickFramebuffer = resources.framebuffer();
+            this.groupPickFramebuffer = resources.framebuffer();
+            this.depthPickFramebuffer = resources.framebuffer();
+            this.framebuffer.bind();
+            drawBuffers.drawBuffers([
+                drawBuffers.COLOR_ATTACHMENT0,
+                drawBuffers.COLOR_ATTACHMENT1,
+                drawBuffers.COLOR_ATTACHMENT2,
+                drawBuffers.COLOR_ATTACHMENT3,
+            ]);
+            this.objectPickTexture.attachFramebuffer(this.framebuffer, 'color0');
+            this.instancePickTexture.attachFramebuffer(this.framebuffer, 'color1');
+            this.groupPickTexture.attachFramebuffer(this.framebuffer, 'color2');
+            this.depthPickTexture.attachFramebuffer(this.framebuffer, 'color3');
+            this.depthRenderbuffer = (0, compat_1.isWebGL2)(gl)
+                ? resources.renderbuffer('depth32f', 'depth', this.pickWidth, this.pickHeight)
+                : resources.renderbuffer('depth16', 'depth', this.pickWidth, this.pickHeight);
+            this.depthRenderbuffer.attachFramebuffer(this.framebuffer);
+            this.objectPickTexture.attachFramebuffer(this.objectPickFramebuffer, 'color0');
+            this.instancePickTexture.attachFramebuffer(this.instancePickFramebuffer, 'color0');
+            this.groupPickTexture.attachFramebuffer(this.groupPickFramebuffer, 'color0');
+            this.depthPickTexture.attachFramebuffer(this.depthPickFramebuffer, 'color0');
+        }
+        else {
+            this.objectPickTarget = webgl.createRenderTarget(this.pickWidth, this.pickHeight);
+            this.instancePickTarget = webgl.createRenderTarget(this.pickWidth, this.pickHeight);
+            this.groupPickTarget = webgl.createRenderTarget(this.pickWidth, this.pickHeight);
+            this.depthPickTarget = webgl.createRenderTarget(this.pickWidth, this.pickHeight);
+        }
     }
+    PickPass.prototype.bindObject = function () {
+        if (this.webgl.extensions.drawBuffers) {
+            this.objectPickFramebuffer.bind();
+        }
+        else {
+            this.objectPickTarget.bind();
+        }
+    };
+    PickPass.prototype.bindInstance = function () {
+        if (this.webgl.extensions.drawBuffers) {
+            this.instancePickFramebuffer.bind();
+        }
+        else {
+            this.instancePickTarget.bind();
+        }
+    };
+    PickPass.prototype.bindGroup = function () {
+        if (this.webgl.extensions.drawBuffers) {
+            this.groupPickFramebuffer.bind();
+        }
+        else {
+            this.groupPickTarget.bind();
+        }
+    };
+    PickPass.prototype.bindDepth = function () {
+        if (this.webgl.extensions.drawBuffers) {
+            this.depthPickFramebuffer.bind();
+        }
+        else {
+            this.depthPickTarget.bind();
+        }
+    };
     Object.defineProperty(PickPass.prototype, "drawingBufferHeight", {
         get: function () {
             return this.drawPass.colorTarget.getHeight();
@@ -40,17 +111,28 @@ var PickPass = /** @class */ (function () {
         if (pickWidth !== this.pickWidth || pickHeight !== this.pickHeight) {
             this.pickWidth = pickWidth;
             this.pickHeight = pickHeight;
-            this.objectPickTarget.setSize(this.pickWidth, this.pickHeight);
-            this.instancePickTarget.setSize(this.pickWidth, this.pickHeight);
-            this.groupPickTarget.setSize(this.pickWidth, this.pickHeight);
-            this.depthPickTarget.setSize(this.pickWidth, this.pickHeight);
+            if (this.webgl.extensions.drawBuffers) {
+                this.objectPickTexture.define(this.pickWidth, this.pickHeight);
+                this.instancePickTexture.define(this.pickWidth, this.pickHeight);
+                this.groupPickTexture.define(this.pickWidth, this.pickHeight);
+                this.depthPickTexture.define(this.pickWidth, this.pickHeight);
+                this.depthRenderbuffer.setSize(this.pickWidth, this.pickHeight);
+            }
+            else {
+                this.objectPickTarget.setSize(this.pickWidth, this.pickHeight);
+                this.instancePickTarget.setSize(this.pickWidth, this.pickHeight);
+                this.groupPickTarget.setSize(this.pickWidth, this.pickHeight);
+                this.depthPickTarget.setSize(this.pickWidth, this.pickHeight);
+            }
         }
     };
     PickPass.prototype.renderVariant = function (renderer, camera, scene, helper, variant, pickType) {
         renderer.clear(false);
         renderer.update(camera);
         renderer.renderPick(scene.primitives, camera, variant, null, pickType);
-        renderer.renderPick(helper.handle.scene, camera, variant, null, pickType);
+        if (helper.handle.isEnabled) {
+            renderer.renderPick(helper.handle.scene, camera, variant, null, pickType);
+        }
         if (helper.camera.isEnabled) {
             helper.camera.update(camera);
             renderer.update(helper.camera.camera);
@@ -58,15 +140,21 @@ var PickPass = /** @class */ (function () {
         }
     };
     PickPass.prototype.render = function (renderer, camera, scene, helper) {
-        this.objectPickTarget.bind();
-        this.renderVariant(renderer, camera, scene, helper, 'pick', 1 /* Object */);
-        this.instancePickTarget.bind();
-        this.renderVariant(renderer, camera, scene, helper, 'pick', 2 /* Instance */);
-        this.groupPickTarget.bind();
-        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', 0 /* None */);
+        if (this.webgl.extensions.drawBuffers) {
+            this.framebuffer.bind();
+            this.renderVariant(renderer, camera, scene, helper, 'pick', 0 /* PickType.None */);
+        }
+        else {
+            this.objectPickTarget.bind();
+            this.renderVariant(renderer, camera, scene, helper, 'pick', 1 /* PickType.Object */);
+            this.instancePickTarget.bind();
+            this.renderVariant(renderer, camera, scene, helper, 'pick', 2 /* PickType.Instance */);
+            this.groupPickTarget.bind();
+            this.renderVariant(renderer, camera, scene, helper, 'pick', 3 /* PickType.Group */);
+            // printTexture(this.webgl, this.groupPickTarget.texture, { id: 'group' })
+            this.depthPickTarget.bind();
+            this.renderVariant(renderer, camera, scene, helper, 'depth', 0 /* PickType.None */);
+        }
     };
     return PickPass;
 }());
@@ -109,15 +197,19 @@ var PickHelper = /** @class */ (function () {
         this.spiral = (0, misc_1.spiral2d)(Math.round(this.pickScale * this.pickPadding));
     };
     PickHelper.prototype.syncBuffers = function () {
+        if (debug_1.isTimingMode)
+            this.webgl.timer.mark('PickHelper.syncBuffers');
         var _a = this, pickX = _a.pickX, pickY = _a.pickY, pickWidth = _a.pickWidth, pickHeight = _a.pickHeight;
-        this.pickPass.objectPickTarget.bind();
+        this.pickPass.bindObject();
         this.webgl.readPixels(pickX, pickY, pickWidth, pickHeight, this.objectBuffer);
-        this.pickPass.instancePickTarget.bind();
+        this.pickPass.bindInstance();
         this.webgl.readPixels(pickX, pickY, pickWidth, pickHeight, this.instanceBuffer);
-        this.pickPass.groupPickTarget.bind();
+        this.pickPass.bindGroup();
         this.webgl.readPixels(pickX, pickY, pickWidth, pickHeight, this.groupBuffer);
-        this.pickPass.depthPickTarget.bind();
+        this.pickPass.bindDepth();
         this.webgl.readPixels(pickX, pickY, pickWidth, pickHeight, this.depthBuffer);
+        if (debug_1.isTimingMode)
+            this.webgl.timer.markEnd('PickHelper.syncBuffers');
     };
     PickHelper.prototype.getBufferIdx = function (x, y) {
         return (y * this.pickWidth + x) * 4;
@@ -132,10 +224,12 @@ var PickHelper = /** @class */ (function () {
         return (0, number_packing_1.unpackRGBToInt)(buffer[idx], buffer[idx + 1], buffer[idx + 2]);
     };
     PickHelper.prototype.render = function (camera) {
+        if (debug_1.isTimingMode)
+            this.webgl.timer.mark('PickHelper.render');
         var _a = this, pickX = _a.pickX, pickY = _a.pickY, pickWidth = _a.pickWidth, pickHeight = _a.pickHeight, halfPickWidth = _a.halfPickWidth;
         var _b = this, renderer = _b.renderer, scene = _b.scene, helper = _b.helper;
         renderer.setTransparentBackground(false);
-        renderer.setDrawingBufferSize(this.pickPass.objectPickTarget.getWidth(), this.pickPass.objectPickTarget.getHeight());
+        renderer.setDrawingBufferSize(pickWidth, pickHeight);
         renderer.setPixelRatio(this.pickScale);
         if (stereo_1.StereoCamera.is(camera)) {
             renderer.setViewport(pickX, pickY, halfPickWidth, pickHeight);
@@ -148,6 +242,8 @@ var PickHelper = /** @class */ (function () {
             this.pickPass.render(renderer, camera, scene, helper);
         }
         this.dirty = false;
+        if (debug_1.isTimingMode)
+            this.webgl.timer.markEnd('PickHelper.render');
     };
     PickHelper.prototype.identifyInternal = function (x, y, camera) {
         var _a = this, webgl = _a.webgl, pickScale = _a.pickScale;
@@ -164,8 +260,12 @@ var PickHelper = /** @class */ (function () {
             y > viewport.y + viewport.height)
             return;
         if (this.dirty) {
+            if (debug_1.isTimingMode)
+                this.webgl.timer.mark('PickHelper.identify');
             this.render(camera);
             this.syncBuffers();
+            if (debug_1.isTimingMode)
+                this.webgl.timer.markEnd('PickHelper.identify');
         }
         var xv = x - viewport.x;
         var yv = y - viewport.y;
@@ -184,6 +284,7 @@ var PickHelper = /** @class */ (function () {
         if (groupId === -1 || groupId === NullId)
             return;
         var z = this.getDepth(xp, yp);
+        // console.log('z', z);
         var position = linear_algebra_1.Vec3.create(x, viewport.height - y, z);
         if (stereo_1.StereoCamera.is(camera)) {
             var halfWidth = Math.floor(viewport.width / 2);
@@ -199,7 +300,7 @@ var PickHelper = /** @class */ (function () {
         else {
             (0, util_1.cameraUnproject)(position, position, viewport, camera.inverseProjectionView);
         }
-        // console.log({ { objectId, instanceId, groupId }, position} );
+        // console.log({ id: { objectId, instanceId, groupId }, position });
         return { id: { objectId: objectId, instanceId: instanceId, groupId: groupId }, position: position };
     };
     PickHelper.prototype.identify = function (x, y, camera) {

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

@@ -24,6 +24,7 @@ var postprocessing_frag_1 = require("../../mol-gl/shader/postprocessing.frag");
 var color_1 = require("../../mol-util/color");
 var fxaa_1 = require("./fxaa");
 var smaa_1 = require("./smaa");
+var debug_1 = require("../../mol-util/debug");
 var OutlinesSchema = tslib_1.__assign(tslib_1.__assign({}, util_1.QuadSchema), { tDepthOpaque: (0, schema_1.TextureSpec)('texture', 'rgba', 'ubyte', 'nearest'), tDepthTransparent: (0, schema_1.TextureSpec)('texture', 'rgba', 'ubyte', 'nearest'), uTexSize: (0, schema_1.UniformSpec)('v2'), dOrthographic: (0, schema_1.DefineSpec)('number'), uNear: (0, schema_1.UniformSpec)('f'), uFar: (0, schema_1.UniformSpec)('f'), uMaxPossibleViewZDiff: (0, schema_1.UniformSpec)('f') });
 function getOutlinesRenderable(ctx, depthTextureOpaque, depthTextureTransparent) {
     var width = depthTextureOpaque.getWidth();
@@ -307,6 +308,8 @@ var PostprocessingPass = /** @class */ (function () {
         mol_util_1.ValueCell.update(this.renderable.values.uOcclusionOffset, linear_algebra_1.Vec2.set(this.renderable.values.uOcclusionOffset.ref.value, x, y));
     };
     PostprocessingPass.prototype.render = function (camera, toDrawingBuffer, transparentBackground, backgroundColor, props) {
+        if (debug_1.isTimingMode)
+            this.webgl.timer.mark('PostprocessingPass.render');
         this.updateState(camera, transparentBackground, backgroundColor, props);
         if (props.outline.name === 'on') {
             this.outlinesTarget.bind();
@@ -336,6 +339,8 @@ var PostprocessingPass = /** @class */ (function () {
         state.clearColor(0, 0, 0, 1);
         gl.clear(gl.COLOR_BUFFER_BIT);
         this.renderable.render();
+        if (debug_1.isTimingMode)
+            this.webgl.timer.markEnd('PostprocessingPass.render');
     };
     return PostprocessingPass;
 }());

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

@@ -101,6 +101,8 @@ var SmaaPass = /** @class */ (function () {
         }
     };
     SmaaPass.prototype.render = function (viewport, target) {
+        if (debug_1.isTimingMode)
+            this.webgl.timer.mark('SmaaPass.render');
         this.edgesTarget.bind();
         this.updateState(viewport);
         this.edgesRenderable.render();
@@ -115,6 +117,8 @@ var SmaaPass = /** @class */ (function () {
         }
         this.updateState(viewport);
         this.blendRenderable.render();
+        if (debug_1.isTimingMode)
+            this.webgl.timer.markEnd('SmaaPass.render');
     };
     return SmaaPass;
 }());

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

@@ -60,11 +60,15 @@ var WboitPass = /** @class */ (function () {
         state.enable(gl.BLEND);
     };
     WboitPass.prototype.render = function () {
+        if (debug_1.isTimingMode)
+            this.webgl.timer.mark('WboitPass.render');
         var _a = this.webgl, state = _a.state, gl = _a.gl;
         state.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
         state.enable(gl.BLEND);
         this.renderable.update();
         this.renderable.render();
+        if (debug_1.isTimingMode)
+            this.webgl.timer.markEnd('WboitPass.render');
     };
     WboitPass.prototype.setSize = function (width, height) {
         var _a = this.renderable.values.uTexSize.ref.value, w = _a[0], h = _a[1];

package/lib/commonjs/mol-data/db/column.js

@@ -67,11 +67,11 @@ var Column;
     }
     Column.is = is;
     function Undefined(rowCount, schema) {
-        return constColumn(schema['T'], rowCount, schema, 1 /* NotPresent */);
+        return constColumn(schema['T'], rowCount, schema, 1 /* ValueKind.NotPresent */);
     }
     Column.Undefined = Undefined;
     function ofConst(v, rowCount, type) {
-        return constColumn(v, rowCount, type, 0 /* Present */);
+        return constColumn(v, rowCount, type, 0 /* ValueKind.Present */);
     }
     Column.ofConst = ofConst;
     function ofLambda(spec) {
@@ -231,7 +231,7 @@ function constColumn(v, rowCount, schema, valueKind) {
     return {
         schema: schema,
         __array: void 0,
-        isDefined: valueKind === 0 /* Present */,
+        isDefined: valueKind === 0 /* Column.ValueKind.Present */,
         rowCount: rowCount,
         value: value,
         valueKind: function (row) { return valueKind; },
@@ -252,7 +252,7 @@ function lambdaColumn(_a) {
         isDefined: true,
         rowCount: rowCount,
         value: value,
-        valueKind: valueKind ? valueKind : function (row) { return 0 /* Present */; },
+        valueKind: valueKind ? valueKind : function (row) { return 0 /* Column.ValueKind.Present */; },
         toArray: function (params) {
             var _a = ColumnHelpers.createArray(rowCount, params), array = _a.array, start = _a.start;
             for (var i = 0, _i = array.length; i < _i; i++)
@@ -280,7 +280,7 @@ function arrayColumn(_a) {
         isDefined: true,
         rowCount: rowCount,
         value: value,
-        valueKind: valueKind ? valueKind : function (row) { return 0 /* Present */; },
+        valueKind: valueKind ? valueKind : function (row) { return 0 /* Column.ValueKind.Present */; },
         toArray: schema.valueType === 'str'
             ? schema.transform === 'lowercase'
                 ? function (params) {

package/lib/commonjs/mol-data/db/table.js

@@ -83,7 +83,7 @@ var Table;
                 rowCount: rowCount,
                 schema: schema[k],
                 value: function (r) { return rows[r][k]; },
-                valueKind: function (r) { return typeof rows[r][k] === 'undefined' ? 1 /* NotPresent */ : 0 /* Present */; }
+                valueKind: function (r) { return typeof rows[r][k] === 'undefined' ? 1 /* Column.ValueKind.NotPresent */ : 0 /* Column.ValueKind.Present */; }
             });
         };
         for (var _a = 0, columns_3 = columns; _a < columns_3.length; _a++) {
@@ -284,7 +284,7 @@ var Table;
             mol_util_1.StringBuilder.write(sb, '|');
             for (var i = 0; i < cols.length; i++) {
                 var c = table[cols[i]];
-                if (c.valueKind(r) === 0 /* Present */) {
+                if (c.valueKind(r) === 0 /* Column.ValueKind.Present */) {
                     mol_util_1.StringBuilder.write(sb, c.value(r));
                     mol_util_1.StringBuilder.write(sb, '|');
                 }

package/lib/commonjs/mol-data/util/array.d.ts

@@ -8,7 +8,7 @@ import { ArrayCtor } from '../../mol-util/type-helpers';
 export declare function arrayFind<T>(array: ArrayLike<T>, f: (v: T) => boolean): T | undefined;
 export declare function iterableToArray<T>(it: IterableIterator<T>): T[];
 /** Fills the array so that array[0] = start and array[array.length - 1] = end */
-export declare function createRangeArray(start: number, end: number, ctor?: ArrayCtor<number>): {
+export declare function createRangeArray(start: number, end: number, ctor?: ArrayCtor<number>): Int32Array | {
     [i: number]: number;
     length: number;
 };

package/lib/commonjs/mol-geo/geometry/texture-mesh/color-smoothing.js

@@ -20,6 +20,7 @@ var geometry_1 = require("../../../mol-math/geometry");
 var accumulate_frag_1 = require("../../../mol-gl/shader/compute/color-smoothing/accumulate.frag");
 var accumulate_vert_1 = require("../../../mol-gl/shader/compute/color-smoothing/accumulate.vert");
 var compat_1 = require("../../../mol-gl/webgl/compat");
+var debug_1 = require("../../../mol-util/debug");
 exports.ColorAccumulateSchema = {
     drawCount: (0, schema_1.ValueSpec)('number'),
     instanceCount: (0, schema_1.ValueSpec)('number'),
@@ -188,6 +189,8 @@ function calcTextureMeshColorSmoothing(input, resolution, stride, webgl, texture
     var drawBuffers = webgl.extensions.drawBuffers;
     if (!drawBuffers)
         throw new Error('need WebGL draw buffers');
+    if (debug_1.isTimingMode)
+        webgl.timer.mark('calcTextureMeshColorSmoothing');
     var gl = webgl.gl, resources = webgl.resources, state = webgl.state, _a = webgl.extensions, colorBufferHalfFloat = _a.colorBufferHalfFloat, textureHalfFloat = _a.textureHalfFloat;
     var isInstanceType = input.colorType.endsWith('Instance');
     var box = geometry_1.Box3D.fromSphere3D((0, geometry_1.Box3D)(), isInstanceType ? input.boundingSphere : input.invariantBoundingSphere);
@@ -240,6 +243,8 @@ function calcTextureMeshColorSmoothing(input, resolution, stride, webgl, texture
         drawBuffers.COLOR_ATTACHMENT1,
     ]);
     var _c = accumulateRenderable.values, uCurrentSlice = _c.uCurrentSlice, uCurrentX = _c.uCurrentX, uCurrentY = _c.uCurrentY;
+    if (debug_1.isTimingMode)
+        webgl.timer.mark('ColorAccumulate.render');
     setAccumulateDefaults(webgl);
     gl.viewport(0, 0, width, height);
     gl.scissor(0, 0, width, height);
@@ -267,6 +272,8 @@ function calcTextureMeshColorSmoothing(input, resolution, stride, webgl, texture
     accumulateTexture.detachFramebuffer(framebuffer, 0);
     countTexture.detachFramebuffer(framebuffer, 1);
     drawBuffers.drawBuffers([gl.COLOR_ATTACHMENT0, gl.NONE]);
+    if (debug_1.isTimingMode)
+        webgl.timer.markEnd('ColorAccumulate.render');
     // const accImage = new Float32Array(width * height * 4);
     // accumulateTexture.attachFramebuffer(framebuffer, 0);
     // webgl.readPixels(0, 0, width, height, accImage);
@@ -278,6 +285,8 @@ function calcTextureMeshColorSmoothing(input, resolution, stride, webgl, texture
     // console.log(cntImage);
     // printTextureImage({ array: cntImage, width, height }, { scale: 1 });
     // normalize
+    if (debug_1.isTimingMode)
+        webgl.timer.mark('ColorNormalize.render');
     if (!texture)
         texture = resources.texture('image-uint8', 'rgba', 'ubyte', 'linear');
     texture.define(width, height);
@@ -289,6 +298,8 @@ function calcTextureMeshColorSmoothing(input, resolution, stride, webgl, texture
     gl.scissor(0, 0, width, height);
     gl.clear(gl.COLOR_BUFFER_BIT);
     normalizeRenderable.render();
+    if (debug_1.isTimingMode)
+        webgl.timer.markEnd('ColorNormalize.render');
     // const normImage = new Uint8Array(width * height * 4);
     // texture.attachFramebuffer(framebuffer, 0);
     // webgl.readPixels(0, 0, width, height, normImage);
@@ -296,6 +307,8 @@ function calcTextureMeshColorSmoothing(input, resolution, stride, webgl, texture
     // printTextureImage({ array: normImage, width, height }, { scale: 1 });
     var gridTransform = linear_algebra_1.Vec4.create(min[0], min[1], min[2], scaleFactor);
     var type = isInstanceType ? 'volumeInstance' : 'volume';
+    if (debug_1.isTimingMode)
+        webgl.timer.markEnd('calcTextureMeshColorSmoothing');
     return { texture: texture, gridDim: gridDim, gridTexDim: linear_algebra_1.Vec2.create(width, height), gridTransform: gridTransform, type: type };
 }
 exports.calcTextureMeshColorSmoothing = calcTextureMeshColorSmoothing;