molstar 3.8.2 → 3.10.0

package/lib/extensions/model-archive/quality-assessment/color/qmean.js

@@ -61,7 +61,7 @@ export function QmeanScoreColorTheme(ctx, props) {
 export var QmeanScoreColorThemeProvider = {
     name: 'qmean-score',
     label: 'QMEAN Score',
-    category: "Validation" /* Validation */,
+    category: "Validation" /* ColorTheme.Category.Validation */,
     factory: QmeanScoreColorTheme,
     getParams: getQmeanScoreColorThemeParams,
     defaultValues: PD.getDefaultValues(getQmeanScoreColorThemeParams({})),

package/lib/extensions/mp4-export/ui.js

@@ -82,6 +82,7 @@ var Mp4EncoderUI = /** @class */ (function (_super) {
     };
     Mp4EncoderUI.prototype.componentWillUnmount = function () {
         var _a;
+        _super.prototype.componentWillUnmount.call(this);
         (_a = this._controls) === null || _a === void 0 ? void 0 : _a.dispose();
         this._controls = void 0;
     };

package/lib/extensions/pdbe/structure-quality-report/color.js

@@ -79,7 +79,7 @@ export function StructureQualityReportColorTheme(ctx, props) {
 export var StructureQualityReportColorThemeProvider = {
     name: 'pdbe-structure-quality-report',
     label: 'Structure Quality Report',
-    category: "Validation" /* Validation */,
+    category: "Validation" /* ColorTheme.Category.Validation */,
     factory: StructureQualityReportColorTheme,
     getParams: function (ctx) {
         var issueTypes = StructureQualityReport.getIssueTypes(ctx.structure);

package/lib/extensions/rcsb/assembly-symmetry/color.js

@@ -12,10 +12,10 @@ import { getPalette, getPaletteParams } from '../../../mol-util/color/palette';
 var DefaultColor = Color(0xCCCCCC);
 function getAsymId(unit) {
     switch (unit.kind) {
-        case 0 /* Atomic */:
+        case 0 /* Unit.Kind.Atomic */:
             return StructureProperties.chain.label_asym_id;
-        case 1 /* Spheres */:
-        case 2 /* Gaussians */:
+        case 1 /* Unit.Kind.Spheres */:
+        case 2 /* Unit.Kind.Gaussians */:
             return StructureProperties.coarse.asym_id;
     }
 }
@@ -83,7 +83,7 @@ export function AssemblySymmetryClusterColorTheme(ctx, props) {
 export var AssemblySymmetryClusterColorThemeProvider = {
     name: AssemblySymmetry.Tag.Cluster,
     label: 'Assembly Symmetry Cluster',
-    category: "Symmetry" /* Symmetry */,
+    category: "Symmetry" /* ColorTheme.Category.Symmetry */,
     factory: AssemblySymmetryClusterColorTheme,
     getParams: getAssemblySymmetryClusterColorThemeParams,
     defaultValues: PD.getDefaultValues(AssemblySymmetryClusterColorThemeParams),

package/lib/extensions/rcsb/validation-report/color/density-fit.js

@@ -62,7 +62,7 @@ export function DensityFitColorTheme(ctx, props) {
 export var DensityFitColorThemeProvider = {
     name: ValidationReport.Tag.DensityFit,
     label: 'Density Fit',
-    category: "Validation" /* Validation */,
+    category: "Validation" /* ColorTheme.Category.Validation */,
     factory: DensityFitColorTheme,
     getParams: function () { return ({}); },
     defaultValues: PD.getDefaultValues({}),

package/lib/extensions/rcsb/validation-report/color/geometry-quality.js

@@ -51,7 +51,7 @@ export function GeometryQualityColorTheme(ctx, props) {
             if (value === undefined)
                 return DefaultColor;
             var count = SetUtils.differenceSize(value, ignore_1);
-            if (count > 0 && polymerType_1[rI] === 0 /* NA */) {
+            if (count > 0 && polymerType_1[rI] === 0 /* PolymerType.NA */) {
                 count = 0;
                 if (!ignore_1.has('clash') && clashes_1.getVertexEdgeCount(element) > 0)
                     count += 1;
@@ -92,7 +92,7 @@ export function GeometryQualityColorTheme(ctx, props) {
 export var GeometryQualityColorThemeProvider = {
     name: ValidationReport.Tag.GeometryQuality,
     label: 'Geometry Quality',
-    category: "Validation" /* Validation */,
+    category: "Validation" /* ColorTheme.Category.Validation */,
     factory: GeometryQualityColorTheme,
     getParams: getGeometricQualityColorThemeParams,
     defaultValues: PD.getDefaultValues(getGeometricQualityColorThemeParams({})),

package/lib/extensions/rcsb/validation-report/color/random-coil-index.js

@@ -50,7 +50,7 @@ export function RandomCoilIndexColorTheme(ctx, props) {
 export var RandomCoilIndexColorThemeProvider = {
     name: ValidationReport.Tag.RandomCoilIndex,
     label: 'Random Coil Index',
-    category: "Validation" /* Validation */,
+    category: "Validation" /* ColorTheme.Category.Validation */,
     factory: RandomCoilIndexColorTheme,
     getParams: function () { return ({}); },
     defaultValues: PD.getDefaultValues({}),

package/lib/extensions/rcsb/validation-report/representation.js

@@ -39,7 +39,7 @@ function createIntraUnitClashCylinderMesh(ctx, unit, structure, theme, props, me
             pos(elements[a[edgeIndex]], posA);
             pos(elements[b[edgeIndex]], posB);
         },
-        style: function (edgeIndex) { return 6 /* Disk */; },
+        style: function (edgeIndex) { return 6 /* LinkStyle.Disk */; },
         radius: function (edgeIndex) { return magnitude[edgeIndex] * sizeFactor; },
     };
     var _a = createLinkCylinderMesh(ctx, builderProps, props, mesh), m = _a.mesh, boundingSphere = _a.boundingSphere;
@@ -139,7 +139,7 @@ function createInterUnitClashCylinderMesh(ctx, structure, theme, props, mesh) {
             uA.conformation.position(uA.elements[b.indexA], posA);
             uB.conformation.position(uB.elements[b.indexB], posB);
         },
-        style: function (edgeIndex) { return 6 /* Disk */; },
+        style: function (edgeIndex) { return 6 /* LinkStyle.Disk */; },
         radius: function (edgeIndex) { return edges[edgeIndex].props.magnitude * sizeFactor; }
     };
     var _a = createLinkCylinderMesh(ctx, builderProps, props, mesh), m = _a.mesh, boundingSphere = _a.boundingSphere;

package/lib/mol-canvas3d/canvas3d.js

@@ -26,7 +26,7 @@ import { MultiSampleHelper, MultiSampleParams, MultiSamplePass } from './passes/
 import { PickHelper } from './passes/pick';
 import { ImagePass } from './passes/image';
 import { Sphere3D } from '../mol-math/geometry';
-import { isDebugMode } from '../mol-util/debug';
+import { isDebugMode, isTimingMode } from '../mol-util/debug';
 import { CameraHelperParams } from './helper/camera-helper';
 import { produce } from 'immer';
 import { HandleHelperParams } from './helper/handle-helper';
@@ -300,6 +300,8 @@ var Canvas3D;
                     stereoCamera.update();
                     cam = stereoCamera;
                 }
+                if (isTimingMode)
+                    webgl.timer.mark('Canvas3D.render');
                 var ctx = { renderer: renderer, camera: cam, scene: scene, helper: helper };
                 if (MultiSamplePass.isEnabled(p.multiSample)) {
                     var forceOn = !cameraChanged && markingUpdated && !controls.isAnimating;
@@ -308,6 +310,8 @@ var Canvas3D;
                 else {
                     passes.draw.render(ctx, p, true);
                 }
+                if (isTimingMode)
+                    webgl.timer.markEnd('Canvas3D.render');
                 // if only marking has updated, do not set the flag to dirty
                 pickHelper.dirty = pickHelper.dirty || shouldRender;
                 didRender = true;

package/lib/mol-canvas3d/controls/trackball.js

@@ -18,14 +18,14 @@ var B = ButtonsType;
 var M = ModifiersKeys;
 var Trigger = Binding.Trigger;
 export var DefaultTrackballBindings = {
-    dragRotate: Binding([Trigger(1 /* Primary */, M.create())], 'Rotate', 'Drag using ${triggers}'),
-    dragRotateZ: Binding([Trigger(1 /* Primary */, M.create({ shift: true }))], 'Rotate around z-axis', 'Drag using ${triggers}'),
-    dragPan: Binding([Trigger(2 /* Secondary */, M.create()), Trigger(1 /* Primary */, M.create({ control: true }))], 'Pan', 'Drag using ${triggers}'),
+    dragRotate: Binding([Trigger(1 /* B.Flag.Primary */, M.create())], 'Rotate', 'Drag using ${triggers}'),
+    dragRotateZ: Binding([Trigger(1 /* B.Flag.Primary */, M.create({ shift: true }))], 'Rotate around z-axis', 'Drag using ${triggers}'),
+    dragPan: Binding([Trigger(2 /* B.Flag.Secondary */, M.create()), Trigger(1 /* B.Flag.Primary */, M.create({ control: true }))], 'Pan', 'Drag using ${triggers}'),
     dragZoom: Binding.Empty,
-    dragFocus: Binding([Trigger(8 /* Forth */, M.create())], 'Focus', 'Drag using ${triggers}'),
-    dragFocusZoom: Binding([Trigger(4 /* Auxilary */, M.create())], 'Focus and zoom', 'Drag using ${triggers}'),
-    scrollZoom: Binding([Trigger(4 /* Auxilary */, M.create())], 'Zoom', 'Scroll using ${triggers}'),
-    scrollFocus: Binding([Trigger(4 /* Auxilary */, M.create({ shift: true }))], 'Clip', 'Scroll using ${triggers}'),
+    dragFocus: Binding([Trigger(8 /* B.Flag.Forth */, M.create())], 'Focus', 'Drag using ${triggers}'),
+    dragFocusZoom: Binding([Trigger(4 /* B.Flag.Auxilary */, M.create())], 'Focus and zoom', 'Drag using ${triggers}'),
+    scrollZoom: Binding([Trigger(4 /* B.Flag.Auxilary */, M.create())], 'Zoom', 'Scroll using ${triggers}'),
+    scrollFocus: Binding([Trigger(4 /* B.Flag.Auxilary */, M.create({ shift: true }))], 'Clip', 'Scroll using ${triggers}'),
     scrollFocusZoom: Binding.Empty,
 };
 export var TrackballControlsParams = {

package/lib/mol-canvas3d/helper/camera-helper.js

@@ -86,7 +86,7 @@ var CameraHelper = /** @class */ (function () {
     });
     CameraHelper.prototype.getLoci = function (pickingId) {
         var objectId = pickingId.objectId, groupId = pickingId.groupId, instanceId = pickingId.instanceId;
-        if (!this.renderObject || objectId !== this.renderObject.id || groupId === 0 /* None */)
+        if (!this.renderObject || objectId !== this.renderObject.id || groupId === 0 /* CameraHelperAxis.None */)
             return EmptyLoci;
         return CameraAxesLoci(this, groupId, instanceId);
     };
@@ -114,12 +114,12 @@ var CameraHelper = /** @class */ (function () {
 export { CameraHelper };
 function getAxisLabel(axis) {
     switch (axis) {
-        case 1 /* X */: return 'X Axis';
-        case 2 /* Y */: return 'Y Axis';
-        case 3 /* Z */: return 'Z Axis';
-        case 4 /* XY */: return 'XY Plane';
-        case 5 /* XZ */: return 'XZ Plane';
-        case 6 /* YZ */: return 'YZ Plane';
+        case 1 /* CameraHelperAxis.X */: return 'X Axis';
+        case 2 /* CameraHelperAxis.Y */: return 'Y Axis';
+        case 3 /* CameraHelperAxis.Z */: return 'Z Axis';
+        case 4 /* CameraHelperAxis.XY */: return 'XY Plane';
+        case 5 /* CameraHelperAxis.XZ */: return 'XZ Plane';
+        case 6 /* CameraHelperAxis.YZ */: return 'YZ Plane';
         default: return 'Axes';
     }
 }
@@ -160,33 +160,33 @@ function createAxesMesh(scale, mesh) {
     var y = Vec3.scale(Vec3(), Vec3.unitY, scale);
     var z = Vec3.scale(Vec3(), Vec3.unitZ, scale);
     var cylinderProps = { radiusTop: radius, radiusBottom: radius, radialSegments: 32 };
-    state.currentGroup = 0 /* None */;
+    state.currentGroup = 0 /* CameraHelperAxis.None */;
     addSphere(state, Vec3.origin, radius, 2);
-    state.currentGroup = 1 /* X */;
+    state.currentGroup = 1 /* CameraHelperAxis.X */;
     addSphere(state, x, radius, 2);
     addCylinder(state, Vec3.origin, x, 1, cylinderProps);
-    state.currentGroup = 2 /* Y */;
+    state.currentGroup = 2 /* CameraHelperAxis.Y */;
     addSphere(state, y, radius, 2);
     addCylinder(state, Vec3.origin, y, 1, cylinderProps);
-    state.currentGroup = 3 /* Z */;
+    state.currentGroup = 3 /* CameraHelperAxis.Z */;
     addSphere(state, z, radius, 2);
     addCylinder(state, Vec3.origin, z, 1, cylinderProps);
     Vec3.scale(x, x, 0.5);
     Vec3.scale(y, y, 0.5);
     Vec3.scale(z, z, 0.5);
-    state.currentGroup = 4 /* XY */;
+    state.currentGroup = 4 /* CameraHelperAxis.XY */;
     MeshBuilder.addTriangle(state, Vec3.origin, x, y);
     MeshBuilder.addTriangle(state, Vec3.origin, y, x);
     var xy = Vec3.add(Vec3(), x, y);
     MeshBuilder.addTriangle(state, xy, x, y);
     MeshBuilder.addTriangle(state, xy, y, x);
-    state.currentGroup = 5 /* XZ */;
+    state.currentGroup = 5 /* CameraHelperAxis.XZ */;
     MeshBuilder.addTriangle(state, Vec3.origin, x, z);
     MeshBuilder.addTriangle(state, Vec3.origin, z, x);
     var xz = Vec3.add(Vec3(), x, z);
     MeshBuilder.addTriangle(state, xz, x, z);
     MeshBuilder.addTriangle(state, xz, z, x);
-    state.currentGroup = 6 /* YZ */;
+    state.currentGroup = 6 /* CameraHelperAxis.YZ */;
     MeshBuilder.addTriangle(state, Vec3.origin, y, z);
     MeshBuilder.addTriangle(state, Vec3.origin, z, y);
     var yz = Vec3.add(Vec3(), y, z);

package/lib/mol-canvas3d/helper/interaction-events.js

@@ -85,7 +85,7 @@ var Canvas3dInteractionHelper = /** @class */ (function () {
     };
     Canvas3dInteractionHelper.prototype.identify = function (e, t) {
         var xyChanged = this.startX !== this.endX || this.startY !== this.endY;
-        if (e === 2 /* Drag */) {
+        if (e === 2 /* InputEvent.Drag */) {
             if (xyChanged && !this.outsideViewport(this.startX, this.startY)) {
                 this.events.drag.next({ current: this.prevLoci, buttons: this.buttons, button: this.button, modifiers: this.modifiers, pageStart: Vec2.create(this.startX, this.startY), pageEnd: Vec2.create(this.endX, this.endY) });
                 this.startX = this.endX;
@@ -100,7 +100,7 @@ var Canvas3dInteractionHelper = /** @class */ (function () {
             this.startX = this.endX;
             this.startY = this.endY;
         }
-        if (e === 1 /* Click */) {
+        if (e === 1 /* InputEvent.Click */) {
             var loci_1 = this.getLoci(this.id, this.position);
             this.events.click.next({ current: loci_1, buttons: this.buttons, button: this.button, modifiers: this.modifiers, page: Vec2.create(this.endX, this.endY), position: this.position });
             this.prevLoci = loci_1;
@@ -116,7 +116,7 @@ var Canvas3dInteractionHelper = /** @class */ (function () {
         if (this.inside && t - this.prevT > 1000 / this.props.maxFps) {
             this.prevT = t;
             this.currentIdentifyT = t;
-            this.identify(this.isInteracting ? 2 /* Drag */ : 0 /* Move */, t);
+            this.identify(this.isInteracting ? 2 /* InputEvent.Drag */ : 0 /* InputEvent.Move */, t);
         }
     };
     Canvas3dInteractionHelper.prototype.leave = function () {
@@ -140,7 +140,7 @@ var Canvas3dInteractionHelper = /** @class */ (function () {
         this.buttons = buttons;
         this.button = button;
         this.modifiers = modifiers;
-        this.identify(1 /* Click */, 0);
+        this.identify(1 /* InputEvent.Click */, 0);
     };
     Canvas3dInteractionHelper.prototype.drag = function (x, y, buttons, button, modifiers) {
         this.endX = x;
@@ -148,7 +148,7 @@ var Canvas3dInteractionHelper = /** @class */ (function () {
         this.buttons = buttons;
         this.button = button;
         this.modifiers = modifiers;
-        this.identify(2 /* Drag */, 0);
+        this.identify(2 /* InputEvent.Drag */, 0);
     };
     Canvas3dInteractionHelper.prototype.modify = function (modifiers) {
         if (ModifiersKeys.areEqual(modifiers, this.modifiers))

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

@@ -12,6 +12,7 @@ import { WboitPass } from './wboit';
 import { AntialiasingPass, PostprocessingPass } from './postprocessing';
 import { MarkingPass } from './marking';
 import { createCopyRenderable } from '../../mol-gl/compute/util';
+import { isTimingMode } from '../../mol-util/debug';
 var DrawPass = /** @class */ (function () {
     function DrawPass(webgl, width, height, enableWboit) {
         this.webgl = webgl;
@@ -92,8 +93,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 (PostprocessingPass.isEnabled(postprocessingProps)) {
                 this.postprocessing.target.bind();
@@ -105,7 +110,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();
         }
@@ -148,9 +153,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 = 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;
@@ -222,6 +247,8 @@ var DrawPass = /** @class */ (function () {
         this.webgl.gl.flush();
     };
     DrawPass.prototype.render = function (ctx, props, toDrawingBuffer) {
+        if (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());
@@ -233,6 +260,8 @@ var DrawPass = /** @class */ (function () {
         else {
             this._render(renderer, camera, scene, helper, toDrawingBuffer, props);
         }
+        if (isTimingMode)
+            this.webgl.timer.markEnd('DrawPass.render');
     };
     DrawPass.prototype.getColorTarget = function (postprocessingProps) {
         if (AntialiasingPass.isEnabled(postprocessingProps)) {

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;