molstar 3.8.2 → 3.9.0

package/lib/commonjs/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)[];

package/lib/commonjs/mol-gl/compute/grid3d.js

@@ -1,6 +1,6 @@
 "use strict";
 /**
- * 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>
  */
@@ -19,6 +19,7 @@ var util_1 = require("./util");
 var render_item_1 = require("../webgl/render-item");
 var renderable_1 = require("../renderable");
 var is_little_endian_1 = require("../../mol-util/is-little-endian");
+var debug_1 = require("../../mol-util/debug");
 function canComputeGrid3dOnGPU(webgl) {
     return !!(webgl === null || webgl === void 0 ? void 0 : webgl.extensions.textureFloat);
 }
@@ -58,7 +59,7 @@ function createGrid3dComputeRenderable(spec) {
         .replace('{RETURN}', spec.returnCode);
     var shader = (0, shader_code_1.ShaderCode)(id, quad_vert_1.quad_vert, code);
     return function (ctx, webgl, grid, params) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
-        var schema, _i, _a, b, framebuffer, tex, _b, nx, ny, nz, uWidth, values, renderable, cells, array, gl, states, yieldPeriod, i;
+        var schema, _i, _a, b, framebuffer, tex, _b, nx, ny, nz, uWidth, values, renderable, cells, array, gl, state, states, yieldPeriod, i;
         var _c;
         return tslib_1.__generator(this, function (_d) {
             switch (_d.label) {
@@ -120,23 +121,27 @@ function createGrid3dComputeRenderable(spec) {
                     }
                     array = new Uint8Array(uWidth * uWidth * 4);
                     if (!spec.cumulative) return [3 /*break*/, 7];
-                    gl = webgl.gl;
+                    gl = webgl.gl, state = webgl.state;
+                    if (debug_1.isTimingMode)
+                        webgl.timer.mark('Grid3dCompute.renderCumulative');
                     states = spec.cumulative.states(params);
                     tex[0].define(uWidth, uWidth);
                     tex[1].define(uWidth, uWidth);
                     resetGl(webgl, uWidth);
-                    gl.clearColor(0, 0, 0, 0);
+                    state.clearColor(0, 0, 0, 0);
                     tex[0].attachFramebuffer(framebuffer, 'color0');
                     gl.clear(gl.COLOR_BUFFER_BIT);
                     tex[1].attachFramebuffer(framebuffer, 'color0');
                     gl.clear(gl.COLOR_BUFFER_BIT);
-                    if (!spec.cumulative.yieldPeriod) return [3 /*break*/, 2];
+                    if (!(spec.cumulative.yieldPeriod && !debug_1.isTimingMode)) return [3 /*break*/, 2];
                     return [4 /*yield*/, ctx.update({ message: 'Computing...', isIndeterminate: false, current: 0, max: states.length })];
                 case 1:
                     _d.sent();
                     _d.label = 2;
                 case 2:
                     yieldPeriod = Math.max(1, (_c = spec.cumulative.yieldPeriod) !== null && _c !== void 0 ? _c : 1 | 0);
+                    if (debug_1.isTimingMode)
+                        webgl.timer.mark('Grid3dCompute.renderBatch');
                     i = 0;
                     _d.label = 3;
                 case 3:
@@ -149,9 +154,13 @@ function createGrid3dComputeRenderable(spec) {
                     renderable.render();
                     if (!(spec.cumulative.yieldPeriod && i !== states.length - 1)) return [3 /*break*/, 5];
                     if (i % yieldPeriod === yieldPeriod - 1) {
-                        webgl.readPixels(0, 0, 1, 1, array);
+                        webgl.waitForGpuCommandsCompleteSync();
+                        if (debug_1.isTimingMode)
+                            webgl.timer.markEnd('Grid3dCompute.renderBatch');
+                        if (debug_1.isTimingMode)
+                            webgl.timer.mark('Grid3dCompute.renderBatch');
                     }
-                    if (!ctx.shouldUpdate) return [3 /*break*/, 5];
+                    if (!(ctx.shouldUpdate && !debug_1.isTimingMode)) return [3 /*break*/, 5];
                     return [4 /*yield*/, ctx.update({ current: i + 1 })];
                 case 4:
                     _d.sent();
@@ -159,17 +168,30 @@ function createGrid3dComputeRenderable(spec) {
                 case 5:
                     i++;
                     return [3 /*break*/, 3];
-                case 6: return [3 /*break*/, 8];
+                case 6:
+                    if (debug_1.isTimingMode)
+                        webgl.timer.markEnd('Grid3dCompute.renderBatch');
+                    if (debug_1.isTimingMode)
+                        webgl.timer.markEnd('Grid3dCompute.renderCumulative');
+                    return [3 /*break*/, 8];
                 case 7:
+                    if (debug_1.isTimingMode)
+                        webgl.timer.mark('Grid3dCompute.render');
                     tex[0].define(uWidth, uWidth);
                     tex[0].attachFramebuffer(framebuffer, 'color0');
                     framebuffer.bind();
                     resetGl(webgl, uWidth);
                     renderable.update();
                     renderable.render();
+                    if (debug_1.isTimingMode)
+                        webgl.timer.markEnd('Grid3dCompute.render');
                     _d.label = 8;
                 case 8:
+                    if (debug_1.isTimingMode)
+                        webgl.timer.mark('Grid3dCompute.readPixels');
                     webgl.readPixels(0, 0, uWidth, uWidth, array);
+                    if (debug_1.isTimingMode)
+                        webgl.timer.markEnd('Grid3dCompute.readPixels');
                     return [2 /*return*/, new Float32Array(array.buffer, array.byteOffset, nx * ny * nz)];
             }
         });

package/lib/commonjs/mol-gl/compute/histogram-pyramid/reduction.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2019-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */

package/lib/commonjs/mol-gl/compute/histogram-pyramid/reduction.js

@@ -1,6 +1,6 @@
 "use strict";
 /**
- * Copyright (c) 2019-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
@@ -18,6 +18,7 @@ var misc_1 = require("../../../mol-math/misc");
 var quad_vert_1 = require("../../../mol-gl/shader/quad.vert");
 var reduction_frag_1 = require("../../../mol-gl/shader/histogram-pyramid/reduction.frag");
 var compat_1 = require("../../webgl/compat");
+var debug_1 = require("../../../mol-util/debug");
 var HistopyramidReductionSchema = tslib_1.__assign(tslib_1.__assign({}, util_1.QuadSchema), { tInputLevel: (0, schema_1.TextureSpec)('texture', 'rgba', 'float', 'nearest'), tPreviousLevel: (0, schema_1.TextureSpec)('texture', 'rgba', 'float', 'nearest'), uSize: (0, schema_1.UniformSpec)('f'), uTexSize: (0, schema_1.UniformSpec)('f'), uFirst: (0, schema_1.UniformSpec)('b') });
 var HistogramPyramidName = 'histogram-pyramid';
 function getHistopyramidReductionRenderable(ctx, inputLevel, previousLevel) {
@@ -82,6 +83,8 @@ function tryGetFramebuffer(name, webgl) {
     return webgl.namedFramebuffers[_name];
 }
 function createHistogramPyramid(ctx, inputTexture, scale, gridTexDim) {
+    if (debug_1.isTimingMode)
+        ctx.timer.mark('createHistogramPyramid');
     var gl = ctx.gl;
     var w = inputTexture.getWidth();
     var h = inputTexture.getHeight();
@@ -145,6 +148,8 @@ function createHistogramPyramid(ctx, inputTexture, scale, gridTexDim) {
         offset += size;
     }
     gl.finish();
+    if (debug_1.isTimingMode)
+        ctx.timer.markEnd('createHistogramPyramid');
     // printTexture(ctx, pyramidTex, 2)
     //
     // return at least a count of one to avoid issues downstram

package/lib/commonjs/mol-gl/compute/histogram-pyramid/sum.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2019-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */

package/lib/commonjs/mol-gl/compute/histogram-pyramid/sum.js

@@ -1,6 +1,6 @@
 "use strict";
 /**
- * Copyright (c) 2019-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
@@ -17,6 +17,7 @@ var util_1 = require("../util");
 var quad_vert_1 = require("../../../mol-gl/shader/quad.vert");
 var sum_frag_1 = require("../../../mol-gl/shader/histogram-pyramid/sum.frag");
 var compat_1 = require("../../webgl/compat");
+var debug_1 = require("../../../mol-util/debug");
 var HistopyramidSumSchema = tslib_1.__assign(tslib_1.__assign({}, util_1.QuadSchema), { tTexture: (0, schema_1.TextureSpec)('texture', 'rgba', 'float', 'nearest') });
 var HistopyramidSumName = 'histopyramid-sum';
 function getHistopyramidSumRenderable(ctx, texture) {
@@ -50,6 +51,8 @@ function setRenderingDefaults(ctx) {
 var sumBytes = new Uint8Array(4);
 var sumInts = new Int32Array(4);
 function getHistopyramidSum(ctx, pyramidTopTexture) {
+    if (debug_1.isTimingMode)
+        ctx.timer.mark('getHistopyramidSum');
     var gl = ctx.gl, resources = ctx.resources;
     var renderable = getHistopyramidSumRenderable(ctx, pyramidTopTexture);
     ctx.state.currentRenderItemId = -1;
@@ -71,6 +74,8 @@ function getHistopyramidSum(ctx, pyramidTopTexture) {
     gl.finish();
     ctx.readPixels(0, 0, 1, 1, (0, compat_1.isWebGL2)(gl) ? sumInts : sumBytes);
     ctx.unbindFramebuffer();
+    if (debug_1.isTimingMode)
+        ctx.timer.markEnd('getHistopyramidSum');
     return (0, compat_1.isWebGL2)(gl)
         ? sumInts[0]
         : (0, number_packing_1.unpackRGBToInt)(sumBytes[0], sumBytes[1], sumBytes[2]);

package/lib/commonjs/mol-gl/compute/marching-cubes/active-voxels.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2019-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */

package/lib/commonjs/mol-gl/compute/marching-cubes/active-voxels.js

@@ -1,6 +1,6 @@
 "use strict";
 /**
- * Copyright (c) 2019-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
@@ -16,6 +16,7 @@ var util_1 = require("../util");
 var tables_1 = require("./tables");
 var quad_vert_1 = require("../../../mol-gl/shader/quad.vert");
 var active_voxels_frag_1 = require("../../../mol-gl/shader/marching-cubes/active-voxels.frag");
+var debug_1 = require("../../../mol-util/debug");
 var ActiveVoxelsSchema = tslib_1.__assign(tslib_1.__assign({}, util_1.QuadSchema), { tTriCount: (0, schema_1.TextureSpec)('image-uint8', 'alpha', 'ubyte', 'nearest'), tVolumeData: (0, schema_1.TextureSpec)('texture', 'rgba', 'ubyte', 'nearest'), uIsoValue: (0, schema_1.UniformSpec)('f'), uGridDim: (0, schema_1.UniformSpec)('v3'), uGridTexDim: (0, schema_1.UniformSpec)('v3'), uScale: (0, schema_1.UniformSpec)('v2') });
 var ActiveVoxelsName = 'active-voxels';
 function getActiveVoxelsRenderable(ctx, volumeData, gridDim, gridTexDim, isoValue, scale) {
@@ -52,6 +53,8 @@ function setRenderingDefaults(ctx) {
     state.clearColor(0, 0, 0, 0);
 }
 function calcActiveVoxels(ctx, volumeData, gridDim, gridTexDim, isoValue, gridScale) {
+    if (debug_1.isTimingMode)
+        ctx.timer.mark('calcActiveVoxels');
     var gl = ctx.gl, resources = ctx.resources;
     var width = volumeData.getWidth();
     var height = volumeData.getHeight();
@@ -78,6 +81,8 @@ function calcActiveVoxels(ctx, volumeData, gridDim, gridTexDim, isoValue, gridSc
     // console.log('volumeData', volumeData);
     // console.log('at', readTexture(ctx, activeVoxelsTex));
     gl.finish();
+    if (debug_1.isTimingMode)
+        ctx.timer.markEnd('calcActiveVoxels');
     return activeVoxelsTex;
 }
 exports.calcActiveVoxels = calcActiveVoxels;

package/lib/commonjs/mol-gl/compute/marching-cubes/isosurface.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2019-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */

package/lib/commonjs/mol-gl/compute/marching-cubes/isosurface.js

@@ -1,6 +1,6 @@
 "use strict";
 /**
- * Copyright (c) 2019-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2019-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
@@ -19,6 +19,7 @@ var quad_vert_1 = require("../../../mol-gl/shader/quad.vert");
 var isosurface_frag_1 = require("../../../mol-gl/shader/marching-cubes/isosurface.frag");
 var active_voxels_1 = require("./active-voxels");
 var compat_1 = require("../../webgl/compat");
+var debug_1 = require("../../../mol-util/debug");
 var IsosurfaceSchema = tslib_1.__assign(tslib_1.__assign({}, util_1.QuadSchema), { tTriIndices: (0, schema_1.TextureSpec)('image-uint8', 'alpha', 'ubyte', 'nearest'), tActiveVoxelsPyramid: (0, schema_1.TextureSpec)('texture', 'rgba', 'float', 'nearest'), tActiveVoxelsBase: (0, schema_1.TextureSpec)('texture', 'rgba', 'float', 'nearest'), tVolumeData: (0, schema_1.TextureSpec)('texture', 'rgba', 'ubyte', 'nearest'), uIsoValue: (0, schema_1.UniformSpec)('f'), uSize: (0, schema_1.UniformSpec)('f'), uLevels: (0, schema_1.UniformSpec)('f'), uCount: (0, schema_1.UniformSpec)('f'), uInvert: (0, schema_1.UniformSpec)('b'), uGridDim: (0, schema_1.UniformSpec)('v3'), uGridTexDim: (0, schema_1.UniformSpec)('v3'), uGridTransform: (0, schema_1.UniformSpec)('m4'), uScale: (0, schema_1.UniformSpec)('v2'), dPackedGroup: (0, schema_1.DefineSpec)('boolean'), dAxisOrder: (0, schema_1.DefineSpec)('string', ['012', '021', '102', '120', '201', '210']) });
 var IsosurfaceName = 'isosurface';
 function getIsosurfaceRenderable(ctx, activeVoxelsPyramid, activeVoxelsBase, volumeData, gridDim, gridTexDim, transform, isoValue, levels, scale, count, invert, packedGroup, axisOrder) {
@@ -67,6 +68,8 @@ function createIsosurfaceBuffers(ctx, activeVoxelsBase, volumeData, histogramPyr
     var drawBuffers = ctx.extensions.drawBuffers;
     if (!drawBuffers)
         throw new Error('need WebGL draw buffers');
+    if (debug_1.isTimingMode)
+        ctx.timer.mark('createIsosurfaceBuffers');
     var gl = ctx.gl, resources = ctx.resources, extensions = ctx.extensions;
     var pyramidTex = histogramPyramid.pyramidTex, height = histogramPyramid.height, levels = histogramPyramid.levels, scale = histogramPyramid.scale, count = histogramPyramid.count;
     var width = pyramidTex.getWidth();
@@ -124,6 +127,8 @@ function createIsosurfaceBuffers(ctx, activeVoxelsBase, volumeData, histogramPyr
     gl.clear(gl.COLOR_BUFFER_BIT);
     renderable.render();
     gl.finish();
+    if (debug_1.isTimingMode)
+        ctx.timer.markEnd('createIsosurfaceBuffers');
     return { vertexTexture: vertexTexture, groupTexture: groupTexture, normalTexture: normalTexture, vertexCount: count };
 }
 exports.createIsosurfaceBuffers = createIsosurfaceBuffers;
@@ -138,18 +143,13 @@ exports.createIsosurfaceBuffers = createIsosurfaceBuffers;
  * Implementation based on http://www.miaumiau.cat/2016/10/stream-compaction-in-webgl/
  */
 function extractIsosurface(ctx, volumeData, gridDim, gridTexDim, gridTexScale, transform, isoValue, invert, packedGroup, axisOrder, vertexTexture, groupTexture, normalTexture) {
-    // console.time('calcActiveVoxels');
+    if (debug_1.isTimingMode)
+        ctx.timer.mark('extractIsosurface');
     var activeVoxelsTex = (0, active_voxels_1.calcActiveVoxels)(ctx, volumeData, gridDim, gridTexDim, isoValue, gridTexScale);
-    // ctx.waitForGpuCommandsCompleteSync();
-    // console.timeEnd('calcActiveVoxels');
-    // console.time('createHistogramPyramid');
     var compacted = (0, reduction_1.createHistogramPyramid)(ctx, activeVoxelsTex, gridTexScale, gridTexDim);
-    // ctx.waitForGpuCommandsCompleteSync();
-    // console.timeEnd('createHistogramPyramid');
-    // console.time('createIsosurfaceBuffers');
     var gv = createIsosurfaceBuffers(ctx, activeVoxelsTex, volumeData, compacted, gridDim, gridTexDim, transform, isoValue, invert, packedGroup, axisOrder, vertexTexture, groupTexture, normalTexture);
-    // ctx.waitForGpuCommandsCompleteSync();
-    // console.timeEnd('createIsosurfaceBuffers');
+    if (debug_1.isTimingMode)
+        ctx.timer.markEnd('extractIsosurface');
     return gv;
 }
 exports.extractIsosurface = extractIsosurface;

package/lib/commonjs/mol-gl/renderer.js

@@ -14,6 +14,7 @@ var param_definition_1 = require("../mol-util/param-definition");
 var misc_1 = require("../mol-math/misc");
 var array_1 = require("../mol-util/array");
 var interpolate_1 = require("../mol-math/interpolate");
+var debug_1 = require("../mol-util/debug");
 exports.RendererParams = {
     backgroundColor: param_definition_1.ParamDefinition.Color((0, color_1.Color)(0x000000), { description: 'Background color of the 3D canvas' }),
     pickingAlphaThreshold: param_definition_1.ParamDefinition.Numeric(0.5, { min: 0.0, max: 1.0, step: 0.01 }, { description: 'The minimum opacity value needed for an object to be pickable.' }),
@@ -108,8 +109,8 @@ var Renderer;
             uFogColor: mol_util_1.ValueCell.create(bgColor),
             uRenderMask: mol_util_1.ValueCell.create(0),
             uMarkingDepthTest: mol_util_1.ValueCell.create(false),
-            uPickType: mol_util_1.ValueCell.create(0 /* None */),
-            uMarkingType: mol_util_1.ValueCell.create(0 /* None */),
+            uPickType: mol_util_1.ValueCell.create(0 /* PickType.None */),
+            uMarkingType: mol_util_1.ValueCell.create(0 /* MarkingType.None */),
             uTransparentBackground: mol_util_1.ValueCell.create(false),
             uLightDirection: mol_util_1.ValueCell.create(light.direction),
             uLightColor: mol_util_1.ValueCell.create(light.color),
@@ -163,7 +164,7 @@ var Renderer;
                     state.depthMask(false);
                 }
             }
-            else if (flag === 1 /* BlendedFront */) {
+            else if (flag === 1 /* Flag.BlendedFront */) {
                 state.enable(gl.CULL_FACE);
                 if ((_a = r.values.dFlipSided) === null || _a === void 0 ? void 0 : _a.ref.value) {
                     state.frontFace(gl.CW);
@@ -174,7 +175,7 @@ var Renderer;
                     state.cullFace(gl.BACK);
                 }
             }
-            else if (flag === 2 /* BlendedBack */) {
+            else if (flag === 2 /* Flag.BlendedBack */) {
                 state.enable(gl.CULL_FACE);
                 if ((_b = r.values.dFlipSided) === null || _b === void 0 ? void 0 : _b.ref.value) {
                     state.frontFace(gl.CW);
@@ -243,83 +244,107 @@ var Renderer;
             state.currentRenderItemId = -1;
         };
         var renderPick = function (group, camera, variant, depthTexture, pickType) {
+            if (debug_1.isTimingMode)
+                ctx.timer.mark('Renderer.renderPick');
             state.disable(gl.BLEND);
             state.enable(gl.DEPTH_TEST);
             state.depthMask(true);
-            updateInternal(group, camera, depthTexture, 0 /* All */, false);
+            updateInternal(group, camera, depthTexture, 0 /* Mask.All */, false);
             mol_util_1.ValueCell.updateIfChanged(globalUniforms.uPickType, pickType);
             var renderables = group.renderables;
             for (var i = 0, il = renderables.length; i < il; ++i) {
                 if (!renderables[i].state.colorOnly) {
-                    renderObject(renderables[i], variant, 0 /* None */);
+                    renderObject(renderables[i], variant, 0 /* Flag.None */);
                 }
             }
+            if (debug_1.isTimingMode)
+                ctx.timer.markEnd('Renderer.renderPick');
         };
         var renderDepth = function (group, camera, depthTexture) {
+            if (debug_1.isTimingMode)
+                ctx.timer.mark('Renderer.renderDepth');
             state.disable(gl.BLEND);
             state.enable(gl.DEPTH_TEST);
             state.depthMask(true);
-            updateInternal(group, camera, depthTexture, 0 /* All */, false);
+            updateInternal(group, camera, depthTexture, 0 /* Mask.All */, false);
             var renderables = group.renderables;
             for (var i = 0, il = renderables.length; i < il; ++i) {
-                renderObject(renderables[i], 'depth', 0 /* None */);
+                renderObject(renderables[i], 'depth', 0 /* Flag.None */);
             }
+            if (debug_1.isTimingMode)
+                ctx.timer.markEnd('Renderer.renderDepth');
         };
         var renderDepthOpaque = function (group, camera, depthTexture) {
             var _a;
+            if (debug_1.isTimingMode)
+                ctx.timer.mark('Renderer.renderDepthOpaque');
             state.disable(gl.BLEND);
             state.enable(gl.DEPTH_TEST);
             state.depthMask(true);
-            updateInternal(group, camera, depthTexture, 1 /* Opaque */, false);
+            updateInternal(group, camera, depthTexture, 1 /* Mask.Opaque */, false);
             var renderables = group.renderables;
             for (var i = 0, il = renderables.length; i < il; ++i) {
                 var r = renderables[i];
                 if (r.state.opaque && r.values.transparencyAverage.ref.value !== 1 && !((_a = r.values.dXrayShaded) === null || _a === void 0 ? void 0 : _a.ref.value)) {
-                    renderObject(r, 'depth', 0 /* None */);
+                    renderObject(r, 'depth', 0 /* Flag.None */);
                 }
             }
+            if (debug_1.isTimingMode)
+                ctx.timer.markEnd('Renderer.renderDepthOpaque');
         };
         var renderDepthTransparent = function (group, camera, depthTexture) {
             var _a;
+            if (debug_1.isTimingMode)
+                ctx.timer.mark('Renderer.renderDepthTransparent');
             state.disable(gl.BLEND);
             state.enable(gl.DEPTH_TEST);
             state.depthMask(true);
-            updateInternal(group, camera, depthTexture, 2 /* Transparent */, false);
+            updateInternal(group, camera, depthTexture, 2 /* Mask.Transparent */, false);
             var renderables = group.renderables;
             for (var i = 0, il = renderables.length; i < il; ++i) {
                 var r = renderables[i];
                 if (!r.state.opaque || r.values.transparencyAverage.ref.value > 0 || ((_a = r.values.dXrayShaded) === null || _a === void 0 ? void 0 : _a.ref.value)) {
-                    renderObject(r, 'depth', 0 /* None */);
+                    renderObject(r, 'depth', 0 /* Flag.None */);
                 }
             }
+            if (debug_1.isTimingMode)
+                ctx.timer.markEnd('Renderer.renderDepthTransparent');
         };
         var renderMarkingDepth = function (group, camera, depthTexture) {
+            if (debug_1.isTimingMode)
+                ctx.timer.mark('Renderer.renderMarkingDepth');
             state.disable(gl.BLEND);
             state.enable(gl.DEPTH_TEST);
             state.depthMask(true);
-            updateInternal(group, camera, depthTexture, 0 /* All */, false);
-            mol_util_1.ValueCell.updateIfChanged(globalUniforms.uMarkingType, 1 /* Depth */);
+            updateInternal(group, camera, depthTexture, 0 /* Mask.All */, false);
+            mol_util_1.ValueCell.updateIfChanged(globalUniforms.uMarkingType, 1 /* MarkingType.Depth */);
             var renderables = group.renderables;
             for (var i = 0, il = renderables.length; i < il; ++i) {
                 var r = renderables[i];
                 if (r.values.markerAverage.ref.value !== 1) {
-                    renderObject(renderables[i], 'marking', 0 /* None */);
+                    renderObject(renderables[i], 'marking', 0 /* Flag.None */);
                 }
             }
+            if (debug_1.isTimingMode)
+                ctx.timer.markEnd('Renderer.renderMarkingDepth');
         };
         var renderMarkingMask = function (group, camera, depthTexture) {
+            if (debug_1.isTimingMode)
+                ctx.timer.mark('Renderer.renderMarkingMask');
             state.disable(gl.BLEND);
             state.enable(gl.DEPTH_TEST);
             state.depthMask(true);
-            updateInternal(group, camera, depthTexture, 0 /* All */, !!depthTexture);
-            mol_util_1.ValueCell.updateIfChanged(globalUniforms.uMarkingType, 2 /* Mask */);
+            updateInternal(group, camera, depthTexture, 0 /* Mask.All */, !!depthTexture);
+            mol_util_1.ValueCell.updateIfChanged(globalUniforms.uMarkingType, 2 /* MarkingType.Mask */);
             var renderables = group.renderables;
             for (var i = 0, il = renderables.length; i < il; ++i) {
                 var r = renderables[i];
                 if (r.values.markerAverage.ref.value > 0) {
-                    renderObject(renderables[i], 'marking', 0 /* None */);
+                    renderObject(renderables[i], 'marking', 0 /* Flag.None */);
                 }
             }
+            if (debug_1.isTimingMode)
+                ctx.timer.markEnd('Renderer.renderMarkingMask');
         };
         var renderBlended = function (group, camera, depthTexture) {
             renderBlendedOpaque(group, camera, depthTexture);
@@ -327,25 +352,31 @@ var Renderer;
         };
         var renderBlendedOpaque = function (group, camera, depthTexture) {
             var _a, _b;
+            if (debug_1.isTimingMode)
+                ctx.timer.mark('Renderer.renderBlendedOpaque');
             state.disable(gl.BLEND);
             state.enable(gl.DEPTH_TEST);
             state.depthMask(true);
-            updateInternal(group, camera, depthTexture, 1 /* Opaque */, false);
+            updateInternal(group, camera, depthTexture, 1 /* Mask.Opaque */, false);
             var renderables = group.renderables;
             for (var i = 0, il = renderables.length; i < il; ++i) {
                 var r = renderables[i];
                 if (r.state.opaque) {
-                    renderObject(r, 'colorBlended', 0 /* None */);
+                    renderObject(r, 'colorBlended', 0 /* Flag.None */);
                 }
                 else if (((_a = r.values.uDoubleSided) === null || _a === void 0 ? void 0 : _a.ref.value) && ((_b = r.values.dTransparentBackfaces) === null || _b === void 0 ? void 0 : _b.ref.value) === 'opaque') {
-                    renderObject(r, 'colorBlended', 2 /* BlendedBack */);
+                    renderObject(r, 'colorBlended', 2 /* Flag.BlendedBack */);
                 }
             }
+            if (debug_1.isTimingMode)
+                ctx.timer.markEnd('Renderer.renderBlendedOpaque');
         };
         var renderBlendedTransparent = function (group, camera, depthTexture) {
             var _a, _b;
+            if (debug_1.isTimingMode)
+                ctx.timer.mark('Renderer.renderBlendedTransparent');
             state.enable(gl.DEPTH_TEST);
-            updateInternal(group, camera, depthTexture, 2 /* Transparent */, false);
+            updateInternal(group, camera, depthTexture, 2 /* Mask.Transparent */, false);
             var renderables = group.renderables;
             if (transparentBackground) {
                 state.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
@@ -358,7 +389,7 @@ var Renderer;
             for (var i = 0, il = renderables.length; i < il; ++i) {
                 var r = renderables[i];
                 if (!r.state.opaque && r.state.writeDepth) {
-                    renderObject(r, 'colorBlended', 0 /* None */);
+                    renderObject(r, 'colorBlended', 0 /* Flag.None */);
                 }
             }
             state.depthMask(false);
@@ -368,34 +399,42 @@ var Renderer;
                     if ((_a = r.values.uDoubleSided) === null || _a === void 0 ? void 0 : _a.ref.value) {
                         // render frontfaces and backfaces separately to avoid artefacts
                         if (((_b = r.values.dTransparentBackfaces) === null || _b === void 0 ? void 0 : _b.ref.value) !== 'opaque') {
-                            renderObject(r, 'colorBlended', 2 /* BlendedBack */);
+                            renderObject(r, 'colorBlended', 2 /* Flag.BlendedBack */);
                         }
-                        renderObject(r, 'colorBlended', 1 /* BlendedFront */);
+                        renderObject(r, 'colorBlended', 1 /* Flag.BlendedFront */);
                     }
                     else {
-                        renderObject(r, 'colorBlended', 0 /* None */);
+                        renderObject(r, 'colorBlended', 0 /* Flag.None */);
                     }
                 }
             }
+            if (debug_1.isTimingMode)
+                ctx.timer.markEnd('Renderer.renderBlendedTransparent');
         };
         var renderBlendedVolume = function (group, camera, depthTexture) {
+            if (debug_1.isTimingMode)
+                ctx.timer.mark('Renderer.renderBlendedVolume');
             state.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
             state.enable(gl.BLEND);
-            updateInternal(group, camera, depthTexture, 2 /* Transparent */, false);
+            updateInternal(group, camera, depthTexture, 2 /* Mask.Transparent */, false);
             var renderables = group.renderables;
             for (var i = 0, il = renderables.length; i < il; ++i) {
                 var r = renderables[i];
                 if (r.values.dGeometryType.ref.value === 'directVolume') {
-                    renderObject(r, 'colorBlended', 0 /* None */);
+                    renderObject(r, 'colorBlended', 0 /* Flag.None */);
                 }
             }
+            if (debug_1.isTimingMode)
+                ctx.timer.markEnd('Renderer.renderBlendedVolume');
         };
         var renderWboitOpaque = function (group, camera, depthTexture) {
             var _a, _b, _c;
+            if (debug_1.isTimingMode)
+                ctx.timer.mark('Renderer.renderWboitOpaque');
             state.disable(gl.BLEND);
             state.enable(gl.DEPTH_TEST);
             state.depthMask(true);
-            updateInternal(group, camera, depthTexture, 1 /* Opaque */, false);
+            updateInternal(group, camera, depthTexture, 1 /* Mask.Opaque */, false);
             var renderables = group.renderables;
             for (var i = 0, il = renderables.length; i < il; ++i) {
                 var r = renderables[i];
@@ -403,13 +442,17 @@ var Renderer;
                 // uAlpha is updated in "render" so we need to recompute it here
                 var alpha = (0, interpolate_1.clamp)(r.values.alpha.ref.value * r.state.alphaFactor, 0, 1);
                 if ((alpha === 1 && r.values.transparencyAverage.ref.value !== 1 && r.values.dGeometryType.ref.value !== 'directVolume' && ((_a = r.values.dPointStyle) === null || _a === void 0 ? void 0 : _a.ref.value) !== 'fuzzy' && !((_b = r.values.dXrayShaded) === null || _b === void 0 ? void 0 : _b.ref.value)) || ((_c = r.values.dTransparentBackfaces) === null || _c === void 0 ? void 0 : _c.ref.value) === 'opaque') {
-                    renderObject(r, 'colorWboit', 0 /* None */);
+                    renderObject(r, 'colorWboit', 0 /* Flag.None */);
                 }
             }
+            if (debug_1.isTimingMode)
+                ctx.timer.markEnd('Renderer.renderWboitOpaque');
         };
         var renderWboitTransparent = function (group, camera, depthTexture) {
             var _a, _b;
-            updateInternal(group, camera, depthTexture, 2 /* Transparent */, false);
+            if (debug_1.isTimingMode)
+                ctx.timer.mark('Renderer.renderWboitTransparent');
+            updateInternal(group, camera, depthTexture, 2 /* Mask.Transparent */, false);
             var renderables = group.renderables;
             for (var i = 0, il = renderables.length; i < il; ++i) {
                 var r = renderables[i];
@@ -417,9 +460,11 @@ var Renderer;
                 // uAlpha is updated in "render" so we need to recompute it here
                 var alpha = (0, interpolate_1.clamp)(r.values.alpha.ref.value * r.state.alphaFactor, 0, 1);
                 if (alpha < 1 || r.values.transparencyAverage.ref.value > 0 || r.values.dGeometryType.ref.value === 'directVolume' || ((_a = r.values.dPointStyle) === null || _a === void 0 ? void 0 : _a.ref.value) === 'fuzzy' || !!r.values.uBackgroundColor || ((_b = r.values.dXrayShaded) === null || _b === void 0 ? void 0 : _b.ref.value)) {
-                    renderObject(r, 'colorWboit', 0 /* None */);
+                    renderObject(r, 'colorWboit', 0 /* Flag.None */);
                 }
             }
+            if (debug_1.isTimingMode)
+                ctx.timer.markEnd('Renderer.renderWboitTransparent');
         };
         return {
             clear: function (toBackgroundColor, ignoreTransparentBackground) {

package/lib/commonjs/mol-gl/scene.js

@@ -232,6 +232,8 @@ var Scene;
                     renderables[i].dispose();
                 }
                 renderables.length = 0;
+                primitives.length = 0;
+                volumes.length = 0;
                 renderableMap.clear();
                 boundingSphereDirty = true;
                 boundingSphereVisibleDirty = true;

package/lib/commonjs/mol-gl/shader/chunks/assign-color-varying.glsl.d.ts

@@ -1 +1 @@
-export declare const assign_color_varying = "\n#if defined(dRenderVariant_color)\n    #if defined(dColorType_attribute)\n        vColor.rgb = aColor;\n    #elif defined(dColorType_instance)\n        vColor.rgb = readFromTexture(tColor, aInstance, uColorTexDim).rgb;\n    #elif defined(dColorType_group)\n        vColor.rgb = readFromTexture(tColor, group, uColorTexDim).rgb;\n    #elif defined(dColorType_groupInstance)\n        vColor.rgb = readFromTexture(tColor, aInstance * float(uGroupCount) + group, uColorTexDim).rgb;\n    #elif defined(dColorType_vertex)\n        vColor.rgb = readFromTexture(tColor, VertexID, uColorTexDim).rgb;\n    #elif defined(dColorType_vertexInstance)\n        vColor.rgb = readFromTexture(tColor, int(aInstance) * uVertexCount + VertexID, uColorTexDim).rgb;\n    #elif defined(dColorType_volume)\n        vec3 cgridPos = (uColorGridTransform.w * (position - uColorGridTransform.xyz)) / uColorGridDim;\n        vColor.rgb = texture3dFrom2dLinear(tColorGrid, cgridPos, uColorGridDim, uColorTexDim).rgb;\n    #elif defined(dColorType_volumeInstance)\n        vec3 cgridPos = (uColorGridTransform.w * (vModelPosition - uColorGridTransform.xyz)) / uColorGridDim;\n        vColor.rgb = texture3dFrom2dLinear(tColorGrid, cgridPos, uColorGridDim, uColorTexDim).rgb;\n    #endif\n\n    #ifdef dUsePalette\n        vPaletteV = ((vColor.r * 256.0 * 256.0 * 255.0 + vColor.g * 256.0 * 255.0 + vColor.b * 255.0) - 1.0) / 16777215.0;\n    #endif\n\n    #ifdef dOverpaint\n        #if defined(dOverpaintType_groupInstance)\n            vOverpaint = readFromTexture(tOverpaint, aInstance * float(uGroupCount) + group, uOverpaintTexDim);\n        #elif defined(dOverpaintType_vertexInstance)\n            vOverpaint = readFromTexture(tOverpaint, int(aInstance) * uVertexCount + VertexID, uOverpaintTexDim);\n        #elif defined(dOverpaintType_volumeInstance)\n            vec3 ogridPos = (uOverpaintGridTransform.w * (vModelPosition - uOverpaintGridTransform.xyz)) / uOverpaintGridDim;\n            vOverpaint = texture3dFrom2dLinear(tOverpaintGrid, ogridPos, uOverpaintGridDim, uOverpaintTexDim);\n        #endif\n\n        // pre-mix to avoid darkening due to empty overpaint\n        #ifdef dColorType_uniform\n            vOverpaint.rgb = mix(uColor.rgb, vOverpaint.rgb, vOverpaint.a);\n        #else\n            vOverpaint.rgb = mix(vColor.rgb, vOverpaint.rgb, vOverpaint.a);\n        #endif\n    #endif\n\n    #ifdef dSubstance\n        #if defined(dSubstanceType_groupInstance)\n            vSubstance = readFromTexture(tSubstance, aInstance * float(uGroupCount) + group, uSubstanceTexDim);\n        #elif defined(dSubstanceType_vertexInstance)\n            vSubstance = readFromTexture(tSubstance, int(aInstance) * uVertexCount + VertexID, uSubstanceTexDim);\n        #elif defined(dSubstanceType_volumeInstance)\n            vec3 sgridPos = (uSubstanceGridTransform.w * (vModelPosition - uSubstanceGridTransform.xyz)) / uSubstanceGridDim;\n            vSubstance = texture3dFrom2dLinear(tSubstanceGrid, sgridPos, uSubstanceGridDim, uSubstanceTexDim);\n        #endif\n\n        // pre-mix to avoid artifacts due to empty substance\n        vSubstance.rgb = mix(vec3(uMetalness, uRoughness, uBumpiness), vSubstance.rgb, vSubstance.a);\n    #endif\n#elif defined(dRenderVariant_pick)\n    if (uPickType == 1) {\n        vColor = vec4(packIntToRGB(float(uObjectId)), 1.0);\n    } else if (uPickType == 2) {\n        vColor = vec4(packIntToRGB(aInstance), 1.0);\n    } else {\n        vColor = vec4(packIntToRGB(group), 1.0);\n    }\n#endif\n\n#ifdef dTransparency\n    vGroup = group;\n\n    #if defined(dTransparencyType_groupInstance)\n        vTransparency = readFromTexture(tTransparency, aInstance * float(uGroupCount) + group, uTransparencyTexDim).a;\n    #elif defined(dTransparencyType_vertexInstance)\n        vTransparency = readFromTexture(tTransparency, int(aInstance) * uVertexCount + VertexID, uTransparencyTexDim).a;\n    #elif defined(dTransparencyType_volumeInstance)\n        vec3 tgridPos = (uTransparencyGridTransform.w * (vModelPosition - uTransparencyGridTransform.xyz)) / uTransparencyGridDim;\n        vTransparency = texture3dFrom2dLinear(tTransparencyGrid, tgridPos, uTransparencyGridDim, uTransparencyTexDim).a;\n    #endif\n#endif\n";
+export declare const assign_color_varying = "\n#if defined(dRenderVariant_color)\n    #if defined(dColorType_attribute)\n        vColor.rgb = aColor;\n    #elif defined(dColorType_instance)\n        vColor.rgb = readFromTexture(tColor, aInstance, uColorTexDim).rgb;\n    #elif defined(dColorType_group)\n        vColor.rgb = readFromTexture(tColor, group, uColorTexDim).rgb;\n    #elif defined(dColorType_groupInstance)\n        vColor.rgb = readFromTexture(tColor, aInstance * float(uGroupCount) + group, uColorTexDim).rgb;\n    #elif defined(dColorType_vertex)\n        vColor.rgb = readFromTexture(tColor, VertexID, uColorTexDim).rgb;\n    #elif defined(dColorType_vertexInstance)\n        vColor.rgb = readFromTexture(tColor, int(aInstance) * uVertexCount + VertexID, uColorTexDim).rgb;\n    #elif defined(dColorType_volume)\n        vec3 cgridPos = (uColorGridTransform.w * (position - uColorGridTransform.xyz)) / uColorGridDim;\n        vColor.rgb = texture3dFrom2dLinear(tColorGrid, cgridPos, uColorGridDim, uColorTexDim).rgb;\n    #elif defined(dColorType_volumeInstance)\n        vec3 cgridPos = (uColorGridTransform.w * (vModelPosition - uColorGridTransform.xyz)) / uColorGridDim;\n        vColor.rgb = texture3dFrom2dLinear(tColorGrid, cgridPos, uColorGridDim, uColorTexDim).rgb;\n    #endif\n\n    #ifdef dUsePalette\n        vPaletteV = ((vColor.r * 256.0 * 256.0 * 255.0 + vColor.g * 256.0 * 255.0 + vColor.b * 255.0) - 1.0) / 16777215.0;\n    #endif\n\n    #ifdef dOverpaint\n        #if defined(dOverpaintType_groupInstance)\n            vOverpaint = readFromTexture(tOverpaint, aInstance * float(uGroupCount) + group, uOverpaintTexDim);\n        #elif defined(dOverpaintType_vertexInstance)\n            vOverpaint = readFromTexture(tOverpaint, int(aInstance) * uVertexCount + VertexID, uOverpaintTexDim);\n        #elif defined(dOverpaintType_volumeInstance)\n            vec3 ogridPos = (uOverpaintGridTransform.w * (vModelPosition - uOverpaintGridTransform.xyz)) / uOverpaintGridDim;\n            vOverpaint = texture3dFrom2dLinear(tOverpaintGrid, ogridPos, uOverpaintGridDim, uOverpaintTexDim);\n        #endif\n\n        // pre-mix to avoid darkening due to empty overpaint\n        #ifdef dColorType_uniform\n            vOverpaint.rgb = mix(uColor.rgb, vOverpaint.rgb, vOverpaint.a);\n        #else\n            vOverpaint.rgb = mix(vColor.rgb, vOverpaint.rgb, vOverpaint.a);\n        #endif\n    #endif\n\n    #ifdef dSubstance\n        #if defined(dSubstanceType_groupInstance)\n            vSubstance = readFromTexture(tSubstance, aInstance * float(uGroupCount) + group, uSubstanceTexDim);\n        #elif defined(dSubstanceType_vertexInstance)\n            vSubstance = readFromTexture(tSubstance, int(aInstance) * uVertexCount + VertexID, uSubstanceTexDim);\n        #elif defined(dSubstanceType_volumeInstance)\n            vec3 sgridPos = (uSubstanceGridTransform.w * (vModelPosition - uSubstanceGridTransform.xyz)) / uSubstanceGridDim;\n            vSubstance = texture3dFrom2dLinear(tSubstanceGrid, sgridPos, uSubstanceGridDim, uSubstanceTexDim);\n        #endif\n\n        // pre-mix to avoid artifacts due to empty substance\n        vSubstance.rgb = mix(vec3(uMetalness, uRoughness, uBumpiness), vSubstance.rgb, vSubstance.a);\n    #endif\n#elif defined(dRenderVariant_pick)\n    #ifdef requiredDrawBuffers\n        vObject = vec4(packIntToRGB(float(uObjectId)), 1.0);\n        vInstance = vec4(packIntToRGB(aInstance), 1.0);\n        vGroup = vec4(packIntToRGB(group), 1.0);\n    #else\n        if (uPickType == 1) {\n            vColor = vec4(packIntToRGB(float(uObjectId)), 1.0);\n        } else if (uPickType == 2) {\n            vColor = vec4(packIntToRGB(aInstance), 1.0);\n        } else {\n            vColor = vec4(packIntToRGB(group), 1.0);\n        }\n    #endif\n#endif\n\n#ifdef dTransparency\n    vGroup = group;\n\n    #if defined(dTransparencyType_groupInstance)\n        vTransparency = readFromTexture(tTransparency, aInstance * float(uGroupCount) + group, uTransparencyTexDim).a;\n    #elif defined(dTransparencyType_vertexInstance)\n        vTransparency = readFromTexture(tTransparency, int(aInstance) * uVertexCount + VertexID, uTransparencyTexDim).a;\n    #elif defined(dTransparencyType_volumeInstance)\n        vec3 tgridPos = (uTransparencyGridTransform.w * (vModelPosition - uTransparencyGridTransform.xyz)) / uTransparencyGridDim;\n        vTransparency = texture3dFrom2dLinear(tTransparencyGrid, tgridPos, uTransparencyGridDim, uTransparencyTexDim).a;\n    #endif\n#endif\n";