molstar 3.8.2 → 3.9.0

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

@@ -14,6 +14,7 @@ import { ValueCell } from '../../mol-util';
 import { ParamDefinition as PD } from '../../mol-util/param-definition';
 import { quad_vert } from '../../mol-gl/shader/quad.vert';
 import { fxaa_frag } from '../../mol-gl/shader/fxaa.frag';
+import { isTimingMode } from '../../mol-util/debug';
 export var FxaaParams = {
     edgeThresholdMin: PD.Numeric(0.0312, { min: 0.0312, max: 0.0833, step: 0.0001 }, { description: 'Trims the algorithm from processing darks.' }),
     edgeThresholdMax: PD.Numeric(0.063, { min: 0.063, max: 0.333, step: 0.001 }, { description: 'The minimum amount of local contrast required to apply algorithm.' }),
@@ -65,6 +66,8 @@ var FxaaPass = /** @class */ (function () {
         }
     };
     FxaaPass.prototype.render = function (viewport, target) {
+        if (isTimingMode)
+            this.webgl.timer.mark('FxaaPass.render');
         if (target) {
             target.bind();
         }
@@ -73,6 +76,8 @@ var FxaaPass = /** @class */ (function () {
         }
         this.updateState(viewport);
         this.renderable.render();
+        if (isTimingMode)
+            this.webgl.timer.markEnd('FxaaPass.render');
     };
     return FxaaPass;
 }());

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

@@ -16,6 +16,7 @@ import { quad_vert } from '../../mol-gl/shader/quad.vert';
 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';
+import { isTimingMode } from '../../mol-util/debug';
 export var MarkingParams = {
     enabled: PD.Boolean(true),
     highlightEdgeColor: PD.Color(Color.darken(Color.fromNormalizedRgb(1.0, 0.4, 0.6), 1.0)),
@@ -88,6 +89,8 @@ var MarkingPass = /** @class */ (function () {
         ValueCell.update(overlayValues.uGhostEdgeStrength, ghostEdgeStrength);
     };
     MarkingPass.prototype.render = function (viewport, target) {
+        if (isTimingMode)
+            this.webgl.timer.mark('MarkingPass.render');
         this.edgesTarget.bind();
         this.setEdgeState(viewport);
         this.edge.render();
@@ -99,6 +102,8 @@ var MarkingPass = /** @class */ (function () {
         }
         this.setOverlayState(viewport);
         this.overlay.render();
+        if (isTimingMode)
+            this.webgl.timer.markEnd('MarkingPass.render');
     };
     return MarkingPass;
 }());

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

@@ -15,6 +15,7 @@ import { ParamDefinition as PD } from '../../mol-util/param-definition';
 import { Camera } from '../../mol-canvas3d/camera';
 import { quad_vert } from '../../mol-gl/shader/quad.vert';
 import { compose_frag } from '../../mol-gl/shader/compose.frag';
+import { isTimingMode } from '../../mol-util/debug';
 var ComposeSchema = __assign(__assign({}, QuadSchema), { tColor: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'), uTexSize: UniformSpec('v2'), uWeight: UniformSpec('f') });
 var ComposeShaderCode = ShaderCode('compose', quad_vert, compose_frag);
 function getComposeRenderable(ctx, colorTexture) {
@@ -76,6 +77,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 (isTimingMode)
+            webgl.timer.mark('MultiSamplePass.renderMultiSample');
         // based on the Multisample Anti-Aliasing Render Pass
         // contributed to three.js by bhouston / http://clara.io/
         //
@@ -134,11 +137,15 @@ var MultiSamplePass = /** @class */ (function () {
         compose.render();
         camera.viewOffset.enabled = false;
         camera.update();
+        if (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 (isTimingMode)
+            webgl.timer.mark('MultiSamplePass.renderTemporalMultiSample');
         // based on the Multisample Anti-Aliasing Render Pass
         // contributed to three.js by bhouston / http://clara.io/
         //
@@ -226,6 +233,8 @@ var MultiSamplePass = /** @class */ (function () {
         }
         camera.viewOffset.enabled = false;
         camera.update();
+        if (isTimingMode)
+            webgl.timer.markEnd('MultiSamplePass.renderTemporalMultiSample');
         return sampleIndex >= offsetList.length ? -2 : sampleIndex;
     };
     return MultiSamplePass;

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

@@ -3,8 +3,10 @@
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
+import { isWebGL2 } from '../../mol-gl/webgl/compat';
 import { Vec3 } from '../../mol-math/linear-algebra';
 import { spiral2d } from '../../mol-math/misc';
+import { isTimingMode } from '../../mol-util/debug';
 import { unpackRGBToInt, unpackRGBAToDepth } from '../../mol-util/number-packing';
 import { StereoCamera } from '../camera/stereo';
 import { cameraUnproject } from '../camera/util';
@@ -18,11 +20,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 = 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();
@@ -37,17 +108,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);
@@ -55,15 +137,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;
 }());
@@ -106,15 +194,19 @@ var PickHelper = /** @class */ (function () {
         this.spiral = spiral2d(Math.round(this.pickScale * this.pickPadding));
     };
     PickHelper.prototype.syncBuffers = function () {
+        if (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 (isTimingMode)
+            this.webgl.timer.markEnd('PickHelper.syncBuffers');
     };
     PickHelper.prototype.getBufferIdx = function (x, y) {
         return (y * this.pickWidth + x) * 4;
@@ -129,10 +221,12 @@ var PickHelper = /** @class */ (function () {
         return unpackRGBToInt(buffer[idx], buffer[idx + 1], buffer[idx + 2]);
     };
     PickHelper.prototype.render = function (camera) {
+        if (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 (StereoCamera.is(camera)) {
             renderer.setViewport(pickX, pickY, halfPickWidth, pickHeight);
@@ -145,6 +239,8 @@ var PickHelper = /** @class */ (function () {
             this.pickPass.render(renderer, camera, scene, helper);
         }
         this.dirty = false;
+        if (isTimingMode)
+            this.webgl.timer.markEnd('PickHelper.render');
     };
     PickHelper.prototype.identifyInternal = function (x, y, camera) {
         var _a = this, webgl = _a.webgl, pickScale = _a.pickScale;
@@ -161,8 +257,12 @@ var PickHelper = /** @class */ (function () {
             y > viewport.y + viewport.height)
             return;
         if (this.dirty) {
+            if (isTimingMode)
+                this.webgl.timer.mark('PickHelper.identify');
             this.render(camera);
             this.syncBuffers();
+            if (isTimingMode)
+                this.webgl.timer.markEnd('PickHelper.identify');
         }
         var xv = x - viewport.x;
         var yv = y - viewport.y;
@@ -181,6 +281,7 @@ var PickHelper = /** @class */ (function () {
         if (groupId === -1 || groupId === NullId)
             return;
         var z = this.getDepth(xp, yp);
+        // console.log('z', z);
         var position = Vec3.create(x, viewport.height - y, z);
         if (StereoCamera.is(camera)) {
             var halfWidth = Math.floor(viewport.width / 2);
@@ -196,7 +297,7 @@ var PickHelper = /** @class */ (function () {
         else {
             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/mol-canvas3d/passes/postprocessing.js

@@ -21,6 +21,7 @@ import { postprocessing_frag } from '../../mol-gl/shader/postprocessing.frag';
 import { Color } from '../../mol-util/color';
 import { FxaaParams, FxaaPass } from './fxaa';
 import { SmaaParams, SmaaPass } from './smaa';
+import { isTimingMode } from '../../mol-util/debug';
 var OutlinesSchema = __assign(__assign({}, QuadSchema), { tDepthOpaque: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'), tDepthTransparent: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'), uTexSize: UniformSpec('v2'), dOrthographic: DefineSpec('number'), uNear: UniformSpec('f'), uFar: UniformSpec('f'), uMaxPossibleViewZDiff: UniformSpec('f') });
 function getOutlinesRenderable(ctx, depthTextureOpaque, depthTextureTransparent) {
     var width = depthTextureOpaque.getWidth();
@@ -304,6 +305,8 @@ var PostprocessingPass = /** @class */ (function () {
         ValueCell.update(this.renderable.values.uOcclusionOffset, Vec2.set(this.renderable.values.uOcclusionOffset.ref.value, x, y));
     };
     PostprocessingPass.prototype.render = function (camera, toDrawingBuffer, transparentBackground, backgroundColor, props) {
+        if (isTimingMode)
+            this.webgl.timer.mark('PostprocessingPass.render');
         this.updateState(camera, transparentBackground, backgroundColor, props);
         if (props.outline.name === 'on') {
             this.outlinesTarget.bind();
@@ -333,6 +336,8 @@ var PostprocessingPass = /** @class */ (function () {
         state.clearColor(0, 0, 0, 1);
         gl.clear(gl.COLOR_BUFFER_BIT);
         this.renderable.render();
+        if (isTimingMode)
+            this.webgl.timer.markEnd('PostprocessingPass.render');
     };
     return PostprocessingPass;
 }());

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

@@ -20,7 +20,7 @@ import { weights_frag } from '../../mol-gl/shader/smaa/weights.frag';
 import { edges_vert } from '../../mol-gl/shader/smaa/edges.vert';
 import { edges_frag } from '../../mol-gl/shader/smaa/edges.frag';
 import { Viewport } from '../camera/util';
-import { isDebugMode } from '../../mol-util/debug';
+import { isDebugMode, isTimingMode } from '../../mol-util/debug';
 export var SmaaParams = {
     edgeThreshold: PD.Numeric(0.1, { min: 0.05, max: 0.15, step: 0.01 }),
     maxSearchSteps: PD.Numeric(16, { min: 0, max: 32, step: 1 }),
@@ -98,6 +98,8 @@ var SmaaPass = /** @class */ (function () {
         }
     };
     SmaaPass.prototype.render = function (viewport, target) {
+        if (isTimingMode)
+            this.webgl.timer.mark('SmaaPass.render');
         this.edgesTarget.bind();
         this.updateState(viewport);
         this.edgesRenderable.render();
@@ -112,6 +114,8 @@ var SmaaPass = /** @class */ (function () {
         }
         this.updateState(viewport);
         this.blendRenderable.render();
+        if (isTimingMode)
+            this.webgl.timer.markEnd('SmaaPass.render');
     };
     return SmaaPass;
 }());

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

@@ -14,7 +14,7 @@ import { ValueCell } from '../../mol-util';
 import { quad_vert } from '../../mol-gl/shader/quad.vert';
 import { evaluateWboit_frag } from '../../mol-gl/shader/evaluate-wboit.frag';
 import { Vec2 } from '../../mol-math/linear-algebra';
-import { isDebugMode } from '../../mol-util/debug';
+import { isDebugMode, isTimingMode } from '../../mol-util/debug';
 var EvaluateWboitSchema = __assign(__assign({}, QuadSchema), { tWboitA: TextureSpec('texture', 'rgba', 'float', 'nearest'), tWboitB: TextureSpec('texture', 'rgba', 'float', 'nearest'), uTexSize: UniformSpec('v2') });
 var EvaluateWboitShaderCode = ShaderCode('evaluate-wboit', quad_vert, evaluateWboit_frag);
 function getEvaluateWboitRenderable(ctx, wboitATexture, wboitBTexture) {
@@ -57,11 +57,15 @@ var WboitPass = /** @class */ (function () {
         state.enable(gl.BLEND);
     };
     WboitPass.prototype.render = function () {
+        if (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 (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/mol-data/db/column.js

@@ -63,11 +63,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) {
@@ -227,7 +227,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; },
@@ -248,7 +248,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++)
@@ -276,7 +276,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/mol-data/db/table.js

@@ -80,7 +80,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++) {
@@ -281,7 +281,7 @@ var Table;
             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 */) {
                     StringBuilder.write(sb, c.value(r));
                     StringBuilder.write(sb, '|');
                 }

package/lib/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/mol-geo/geometry/texture-mesh/color-smoothing.js

@@ -17,6 +17,7 @@ import { Box3D } from '../../../mol-math/geometry';
 import { accumulate_frag } from '../../../mol-gl/shader/compute/color-smoothing/accumulate.frag';
 import { accumulate_vert } from '../../../mol-gl/shader/compute/color-smoothing/accumulate.vert';
 import { isWebGL2 } from '../../../mol-gl/webgl/compat';
+import { isTimingMode } from '../../../mol-util/debug';
 export var ColorAccumulateSchema = {
     drawCount: ValueSpec('number'),
     instanceCount: ValueSpec('number'),
@@ -185,6 +186,8 @@ export function calcTextureMeshColorSmoothing(input, resolution, stride, webgl,
     var drawBuffers = webgl.extensions.drawBuffers;
     if (!drawBuffers)
         throw new Error('need WebGL draw buffers');
+    if (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 = Box3D.fromSphere3D(Box3D(), isInstanceType ? input.boundingSphere : input.invariantBoundingSphere);
@@ -237,6 +240,8 @@ export function calcTextureMeshColorSmoothing(input, resolution, stride, webgl,
         drawBuffers.COLOR_ATTACHMENT1,
     ]);
     var _c = accumulateRenderable.values, uCurrentSlice = _c.uCurrentSlice, uCurrentX = _c.uCurrentX, uCurrentY = _c.uCurrentY;
+    if (isTimingMode)
+        webgl.timer.mark('ColorAccumulate.render');
     setAccumulateDefaults(webgl);
     gl.viewport(0, 0, width, height);
     gl.scissor(0, 0, width, height);
@@ -264,6 +269,8 @@ export function calcTextureMeshColorSmoothing(input, resolution, stride, webgl,
     accumulateTexture.detachFramebuffer(framebuffer, 0);
     countTexture.detachFramebuffer(framebuffer, 1);
     drawBuffers.drawBuffers([gl.COLOR_ATTACHMENT0, gl.NONE]);
+    if (isTimingMode)
+        webgl.timer.markEnd('ColorAccumulate.render');
     // const accImage = new Float32Array(width * height * 4);
     // accumulateTexture.attachFramebuffer(framebuffer, 0);
     // webgl.readPixels(0, 0, width, height, accImage);
@@ -275,6 +282,8 @@ export function calcTextureMeshColorSmoothing(input, resolution, stride, webgl,
     // console.log(cntImage);
     // printTextureImage({ array: cntImage, width, height }, { scale: 1 });
     // normalize
+    if (isTimingMode)
+        webgl.timer.mark('ColorNormalize.render');
     if (!texture)
         texture = resources.texture('image-uint8', 'rgba', 'ubyte', 'linear');
     texture.define(width, height);
@@ -286,6 +295,8 @@ export function calcTextureMeshColorSmoothing(input, resolution, stride, webgl,
     gl.scissor(0, 0, width, height);
     gl.clear(gl.COLOR_BUFFER_BIT);
     normalizeRenderable.render();
+    if (isTimingMode)
+        webgl.timer.markEnd('ColorNormalize.render');
     // const normImage = new Uint8Array(width * height * 4);
     // texture.attachFramebuffer(framebuffer, 0);
     // webgl.readPixels(0, 0, width, height, normImage);
@@ -293,6 +304,8 @@ export function calcTextureMeshColorSmoothing(input, resolution, stride, webgl,
     // printTextureImage({ array: normImage, width, height }, { scale: 1 });
     var gridTransform = Vec4.create(min[0], min[1], min[2], scaleFactor);
     var type = isInstanceType ? 'volumeInstance' : 'volume';
+    if (isTimingMode)
+        webgl.timer.markEnd('calcTextureMeshColorSmoothing');
     return { texture: texture, gridDim: gridDim, gridTexDim: Vec2.create(width, height), gridTransform: gridTransform, type: type };
 }
 //

package/lib/mol-gl/compute/grid3d.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2020-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author David Sehnal <david.sehnal@gmail.com>
  */
@@ -7,7 +7,7 @@ import { RenderableSchema, Values, UnboxedValues } from '../renderable/schema';
 import { WebGLContext } from '../webgl/context';
 import { RegularGrid3d } from '../../mol-math/geometry/common';
 import { RuntimeContext } from '../../mol-task';
-export declare function canComputeGrid3dOnGPU(webgl?: WebGLContext): boolean;
+export declare function canComputeGrid3dOnGPU(webgl?: WebGLContext): webgl is WebGLContext;
 export interface Grid3DComputeRenderableSpec<S extends RenderableSchema, P, CS> {
     schema: S;
     loopBounds?: (keyof S)[];