molstar 3.6.0 → 3.8.0

package/lib/commonjs/mol-geo/geometry/transparency-data.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,8 @@ function applyTransparencyValue(array, start, end, value) {
 }
 exports.applyTransparencyValue = applyTransparencyValue;
 function getTransparencyAverage(array, count) {
+    if (count === 0 || array.length < count)
+        return 0;
     var sum = 0;
     for (var i = 0; i < count; ++i) {
         sum += array[i];

package/lib/commonjs/mol-gl/renderable/cylinders.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2020-2021 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 Alexander Rose <alexander.rose@weirdbyte.de>
  */
@@ -19,6 +19,7 @@ export declare const CylindersSchema: {
     uDoubleSided: UniformSpec<"b">;
     dIgnoreLight: DefineSpec<"boolean">;
     dXrayShaded: DefineSpec<"boolean">;
+    dTransparentBackfaces: DefineSpec<"string">;
     uBumpFrequency: UniformSpec<"f">;
     uBumpAmplitude: UniformSpec<"f">;
     uSize: UniformSpec<"f">;

package/lib/commonjs/mol-gl/renderable/cylinders.js

@@ -1,6 +1,6 @@
 "use strict";
 /**
- * Copyright (c) 2020-2021 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 Alexander Rose <alexander.rose@weirdbyte.de>
  */
@@ -12,7 +12,7 @@ var render_item_1 = require("../webgl/render-item");
 var schema_1 = require("./schema");
 var shader_code_1 = require("../shader-code");
 var mol_util_1 = require("../../mol-util");
-exports.CylindersSchema = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, schema_1.BaseSchema), schema_1.SizeSchema), { aGroup: (0, schema_1.AttributeSpec)('float32', 1, 0), aStart: (0, schema_1.AttributeSpec)('float32', 3, 0), aEnd: (0, schema_1.AttributeSpec)('float32', 3, 0), aMapping: (0, schema_1.AttributeSpec)('float32', 3, 0), aScale: (0, schema_1.AttributeSpec)('float32', 1, 0), aCap: (0, schema_1.AttributeSpec)('float32', 1, 0), elements: (0, schema_1.ElementsSpec)('uint32'), padding: (0, schema_1.ValueSpec)('number'), uDoubleSided: (0, schema_1.UniformSpec)('b'), dIgnoreLight: (0, schema_1.DefineSpec)('boolean'), dXrayShaded: (0, schema_1.DefineSpec)('boolean'), uBumpFrequency: (0, schema_1.UniformSpec)('f'), uBumpAmplitude: (0, schema_1.UniformSpec)('f') });
+exports.CylindersSchema = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, schema_1.BaseSchema), schema_1.SizeSchema), { aGroup: (0, schema_1.AttributeSpec)('float32', 1, 0), aStart: (0, schema_1.AttributeSpec)('float32', 3, 0), aEnd: (0, schema_1.AttributeSpec)('float32', 3, 0), aMapping: (0, schema_1.AttributeSpec)('float32', 3, 0), aScale: (0, schema_1.AttributeSpec)('float32', 1, 0), aCap: (0, schema_1.AttributeSpec)('float32', 1, 0), elements: (0, schema_1.ElementsSpec)('uint32'), padding: (0, schema_1.ValueSpec)('number'), uDoubleSided: (0, schema_1.UniformSpec)('b'), dIgnoreLight: (0, schema_1.DefineSpec)('boolean'), dXrayShaded: (0, schema_1.DefineSpec)('boolean'), dTransparentBackfaces: (0, schema_1.DefineSpec)('string', ['off', 'on', 'opaque']), uBumpFrequency: (0, schema_1.UniformSpec)('f'), uBumpAmplitude: (0, schema_1.UniformSpec)('f') });
 function CylindersRenderable(ctx, id, values, state, materialId, variants) {
     var schema = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, schema_1.GlobalUniformSchema), schema_1.GlobalTextureSchema), schema_1.InternalSchema), exports.CylindersSchema);
     var internalValues = {

package/lib/commonjs/mol-gl/renderable/mesh.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
@@ -17,6 +17,7 @@ export declare const MeshSchema: {
     readonly dFlipSided: DefineSpec<"boolean">;
     readonly dIgnoreLight: DefineSpec<"boolean">;
     readonly dXrayShaded: DefineSpec<"boolean">;
+    readonly dTransparentBackfaces: DefineSpec<"string">;
     readonly uBumpFrequency: UniformSpec<"f">;
     readonly uBumpAmplitude: UniformSpec<"f">;
     readonly meta: ValueSpec<"unknown">;

package/lib/commonjs/mol-gl/renderable/mesh.js

@@ -1,6 +1,6 @@
 "use strict";
 /**
- * Copyright (c) 2018-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
@@ -12,7 +12,7 @@ var render_item_1 = require("../webgl/render-item");
 var schema_1 = require("./schema");
 var shader_code_1 = require("../shader-code");
 var mol_util_1 = require("../../mol-util");
-exports.MeshSchema = tslib_1.__assign(tslib_1.__assign({}, schema_1.BaseSchema), { aGroup: (0, schema_1.AttributeSpec)('float32', 1, 0), aPosition: (0, schema_1.AttributeSpec)('float32', 3, 0), aNormal: (0, schema_1.AttributeSpec)('float32', 3, 0), elements: (0, schema_1.ElementsSpec)('uint32'), dFlatShaded: (0, schema_1.DefineSpec)('boolean'), uDoubleSided: (0, schema_1.UniformSpec)('b'), dFlipSided: (0, schema_1.DefineSpec)('boolean'), dIgnoreLight: (0, schema_1.DefineSpec)('boolean'), dXrayShaded: (0, schema_1.DefineSpec)('boolean'), uBumpFrequency: (0, schema_1.UniformSpec)('f'), uBumpAmplitude: (0, schema_1.UniformSpec)('f'), meta: (0, schema_1.ValueSpec)('unknown') });
+exports.MeshSchema = tslib_1.__assign(tslib_1.__assign({}, schema_1.BaseSchema), { aGroup: (0, schema_1.AttributeSpec)('float32', 1, 0), aPosition: (0, schema_1.AttributeSpec)('float32', 3, 0), aNormal: (0, schema_1.AttributeSpec)('float32', 3, 0), elements: (0, schema_1.ElementsSpec)('uint32'), dFlatShaded: (0, schema_1.DefineSpec)('boolean'), uDoubleSided: (0, schema_1.UniformSpec)('b'), dFlipSided: (0, schema_1.DefineSpec)('boolean'), dIgnoreLight: (0, schema_1.DefineSpec)('boolean'), dXrayShaded: (0, schema_1.DefineSpec)('boolean'), dTransparentBackfaces: (0, schema_1.DefineSpec)('string', ['off', 'on', 'opaque']), uBumpFrequency: (0, schema_1.UniformSpec)('f'), uBumpAmplitude: (0, schema_1.UniformSpec)('f'), meta: (0, schema_1.ValueSpec)('unknown') });
 function MeshRenderable(ctx, id, values, state, materialId, variants) {
     var schema = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, schema_1.GlobalUniformSchema), schema_1.GlobalTextureSchema), schema_1.InternalSchema), exports.MeshSchema);
     var internalValues = {

package/lib/commonjs/mol-gl/renderable/schema.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
@@ -119,7 +119,7 @@ export declare const GlobalUniformSchema: {
     readonly uSelectStrength: UniformSpec<"f">;
     readonly uMarkerPriority: UniformSpec<"i">;
     readonly uXrayEdgeFalloff: UniformSpec<"f">;
-    readonly uRenderWboit: UniformSpec<"b">;
+    readonly uRenderMask: UniformSpec<"i">;
     readonly uMarkingDepthTest: UniformSpec<"b">;
     readonly uMarkingType: UniformSpec<"i">;
     readonly uPickType: UniformSpec<"i">;

package/lib/commonjs/mol-gl/renderable/schema.js

@@ -1,6 +1,6 @@
 "use strict";
 /**
- * Copyright (c) 2018-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
@@ -105,7 +105,7 @@ exports.GlobalUniformSchema = {
     uSelectStrength: UniformSpec('f'),
     uMarkerPriority: UniformSpec('i'),
     uXrayEdgeFalloff: UniformSpec('f'),
-    uRenderWboit: UniformSpec('b'),
+    uRenderMask: UniformSpec('i'),
     uMarkingDepthTest: UniformSpec('b'),
     uMarkingType: UniformSpec('i'),
     uPickType: UniformSpec('i'),

package/lib/commonjs/mol-gl/renderable/spheres.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>
  */
@@ -16,6 +16,7 @@ export declare const SpheresSchema: {
     uDoubleSided: UniformSpec<"b">;
     dIgnoreLight: DefineSpec<"boolean">;
     dXrayShaded: DefineSpec<"boolean">;
+    dTransparentBackfaces: DefineSpec<"string">;
     uBumpFrequency: UniformSpec<"f">;
     uBumpAmplitude: UniformSpec<"f">;
     uSize: UniformSpec<"f">;

package/lib/commonjs/mol-gl/renderable/spheres.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>
  */
@@ -12,7 +12,7 @@ var render_item_1 = require("../webgl/render-item");
 var schema_1 = require("./schema");
 var shader_code_1 = require("../shader-code");
 var mol_util_1 = require("../../mol-util");
-exports.SpheresSchema = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, schema_1.BaseSchema), schema_1.SizeSchema), { aGroup: (0, schema_1.AttributeSpec)('float32', 1, 0), aPosition: (0, schema_1.AttributeSpec)('float32', 3, 0), aMapping: (0, schema_1.AttributeSpec)('float32', 2, 0), elements: (0, schema_1.ElementsSpec)('uint32'), padding: (0, schema_1.ValueSpec)('number'), uDoubleSided: (0, schema_1.UniformSpec)('b'), dIgnoreLight: (0, schema_1.DefineSpec)('boolean'), dXrayShaded: (0, schema_1.DefineSpec)('boolean'), uBumpFrequency: (0, schema_1.UniformSpec)('f'), uBumpAmplitude: (0, schema_1.UniformSpec)('f') });
+exports.SpheresSchema = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, schema_1.BaseSchema), schema_1.SizeSchema), { aGroup: (0, schema_1.AttributeSpec)('float32', 1, 0), aPosition: (0, schema_1.AttributeSpec)('float32', 3, 0), aMapping: (0, schema_1.AttributeSpec)('float32', 2, 0), elements: (0, schema_1.ElementsSpec)('uint32'), padding: (0, schema_1.ValueSpec)('number'), uDoubleSided: (0, schema_1.UniformSpec)('b'), dIgnoreLight: (0, schema_1.DefineSpec)('boolean'), dXrayShaded: (0, schema_1.DefineSpec)('boolean'), dTransparentBackfaces: (0, schema_1.DefineSpec)('string', ['off', 'on', 'opaque']), uBumpFrequency: (0, schema_1.UniformSpec)('f'), uBumpAmplitude: (0, schema_1.UniformSpec)('f') });
 function SpheresRenderable(ctx, id, values, state, materialId, variants) {
     var schema = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, schema_1.GlobalUniformSchema), schema_1.GlobalTextureSchema), schema_1.InternalSchema), exports.SpheresSchema);
     var internalValues = {

package/lib/commonjs/mol-gl/renderable/texture-mesh.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>
  */
@@ -17,6 +17,7 @@ export declare const TextureMeshSchema: {
     dFlipSided: DefineSpec<"boolean">;
     dIgnoreLight: DefineSpec<"boolean">;
     dXrayShaded: DefineSpec<"boolean">;
+    dTransparentBackfaces: DefineSpec<"string">;
     uBumpFrequency: UniformSpec<"f">;
     uBumpAmplitude: UniformSpec<"f">;
     meta: ValueSpec<"unknown">;

package/lib/commonjs/mol-gl/renderable/texture-mesh.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>
  */
@@ -12,7 +12,7 @@ var render_item_1 = require("../webgl/render-item");
 var schema_1 = require("./schema");
 var shader_code_1 = require("../shader-code");
 var mol_util_1 = require("../../mol-util");
-exports.TextureMeshSchema = tslib_1.__assign(tslib_1.__assign({}, schema_1.BaseSchema), { uGeoTexDim: (0, schema_1.UniformSpec)('v2', 'buffered'), tPosition: (0, schema_1.TextureSpec)('texture', 'rgb', 'float', 'nearest'), tGroup: (0, schema_1.TextureSpec)('texture', 'alpha', 'float', 'nearest'), tNormal: (0, schema_1.TextureSpec)('texture', 'rgb', 'float', 'nearest'), dFlatShaded: (0, schema_1.DefineSpec)('boolean'), uDoubleSided: (0, schema_1.UniformSpec)('b'), dFlipSided: (0, schema_1.DefineSpec)('boolean'), dIgnoreLight: (0, schema_1.DefineSpec)('boolean'), dXrayShaded: (0, schema_1.DefineSpec)('boolean'), uBumpFrequency: (0, schema_1.UniformSpec)('f'), uBumpAmplitude: (0, schema_1.UniformSpec)('f'), meta: (0, schema_1.ValueSpec)('unknown') });
+exports.TextureMeshSchema = tslib_1.__assign(tslib_1.__assign({}, schema_1.BaseSchema), { uGeoTexDim: (0, schema_1.UniformSpec)('v2', 'buffered'), tPosition: (0, schema_1.TextureSpec)('texture', 'rgb', 'float', 'nearest'), tGroup: (0, schema_1.TextureSpec)('texture', 'alpha', 'float', 'nearest'), tNormal: (0, schema_1.TextureSpec)('texture', 'rgb', 'float', 'nearest'), dFlatShaded: (0, schema_1.DefineSpec)('boolean'), uDoubleSided: (0, schema_1.UniformSpec)('b'), dFlipSided: (0, schema_1.DefineSpec)('boolean'), dIgnoreLight: (0, schema_1.DefineSpec)('boolean'), dXrayShaded: (0, schema_1.DefineSpec)('boolean'), dTransparentBackfaces: (0, schema_1.DefineSpec)('string', ['off', 'on', 'opaque']), uBumpFrequency: (0, schema_1.UniformSpec)('f'), uBumpAmplitude: (0, schema_1.UniformSpec)('f'), meta: (0, schema_1.ValueSpec)('unknown') });
 function TextureMeshRenderable(ctx, id, values, state, materialId, variants) {
     var schema = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, schema_1.GlobalUniformSchema), schema_1.GlobalTextureSchema), schema_1.InternalSchema), exports.TextureMeshSchema);
     var internalValues = {

package/lib/commonjs/mol-gl/renderer.d.ts

@@ -7,7 +7,6 @@ import { ICamera } from '../mol-canvas3d/camera';
 import { Scene } from './scene';
 import { WebGLContext } from './webgl/context';
 import { Color } from '../mol-util/color';
-import { GraphicsRenderVariant } from './webgl/render-item';
 import { ParamDefinition as PD } from '../mol-util/param-definition';
 import { Texture } from './webgl/texture';
 export interface RendererStats {
@@ -38,17 +37,18 @@ interface Renderer {
     readonly stats: RendererStats;
     readonly props: Readonly<RendererProps>;
     clear: (toBackgroundColor: boolean, ignoreTransparentBackground?: boolean) => void;
-    clearDepth: () => void;
+    clearDepth: (packed?: boolean) => void;
     update: (camera: ICamera) => void;
-    renderPick: (group: Scene.Group, camera: ICamera, variant: GraphicsRenderVariant, depthTexture: Texture | null, pickType: PickType) => void;
+    renderPick: (group: Scene.Group, camera: ICamera, variant: 'pick' | 'depth', depthTexture: Texture | null, pickType: PickType) => void;
     renderDepth: (group: Scene.Group, camera: ICamera, depthTexture: Texture | null) => void;
+    renderDepthOpaque: (group: Scene.Group, camera: ICamera, depthTexture: Texture | null) => void;
+    renderDepthTransparent: (group: Scene.Group, camera: ICamera, depthTexture: Texture | null) => void;
     renderMarkingDepth: (group: Scene.Group, camera: ICamera, depthTexture: Texture | null) => void;
     renderMarkingMask: (group: Scene.Group, camera: ICamera, depthTexture: Texture | null) => void;
     renderBlended: (group: Scene.Group, camera: ICamera, depthTexture: Texture | null) => void;
     renderBlendedOpaque: (group: Scene.Group, camera: ICamera, depthTexture: Texture | null) => void;
     renderBlendedTransparent: (group: Scene.Group, camera: ICamera, depthTexture: Texture | null) => void;
-    renderBlendedVolumeOpaque: (group: Scene.Group, camera: ICamera, depthTexture: Texture | null) => void;
-    renderBlendedVolumeTransparent: (group: Scene.Group, camera: ICamera, depthTexture: Texture | null) => void;
+    renderBlendedVolume: (group: Scene.Group, camera: ICamera, depthTexture: Texture | null) => void;
     renderWboitOpaque: (group: Scene.Group, camera: ICamera, depthTexture: Texture | null) => void;
     renderWboitTransparent: (group: Scene.Group, camera: ICamera, depthTexture: Texture | null) => void;
     setProps: (props: Partial<RendererProps>) => void;

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

@@ -67,7 +67,9 @@ var Renderer;
         var drawingBufferSize = linear_algebra_1.Vec2.create(gl.drawingBufferWidth, gl.drawingBufferHeight);
         var bgColor = color_1.Color.toVec3Normalized((0, linear_algebra_1.Vec3)(), p.backgroundColor);
         var transparentBackground = false;
-        var emptyDepthTexture = ctx.resources.texture('image-depth', 'depth', 'ushort', 'nearest');
+        var emptyDepthTexture = ctx.resources.texture('image-uint8', 'rgba', 'ubyte', 'nearest');
+        emptyDepthTexture.define(1, 1);
+        emptyDepthTexture.load({ array: new Uint8Array([255, 255, 255, 255]), width: 1, height: 1 });
         var sharedTexturesList = [
             ['tDepth', emptyDepthTexture]
         ];
@@ -104,7 +106,7 @@ var Renderer;
             uFogNear: mol_util_1.ValueCell.create(1),
             uFogFar: mol_util_1.ValueCell.create(10000),
             uFogColor: mol_util_1.ValueCell.create(bgColor),
-            uRenderWboit: mol_util_1.ValueCell.create(false),
+            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 */),
@@ -125,7 +127,8 @@ var Renderer;
         };
         var globalUniformList = Object.entries(globalUniforms);
         var globalUniformsNeedUpdate = true;
-        var renderObject = function (r, variant) {
+        var renderObject = function (r, variant, flag) {
+            var _a, _b, _c;
             if (r.state.disposed || !r.state.visible || (!r.state.pickable && variant === 'pick')) {
                 return;
             }
@@ -160,6 +163,28 @@ var Renderer;
                     state.depthMask(false);
                 }
             }
+            else if (flag === 1 /* BlendedFront */) {
+                state.enable(gl.CULL_FACE);
+                if ((_a = r.values.dFlipSided) === null || _a === void 0 ? void 0 : _a.ref.value) {
+                    state.frontFace(gl.CW);
+                    state.cullFace(gl.FRONT);
+                }
+                else {
+                    state.frontFace(gl.CCW);
+                    state.cullFace(gl.BACK);
+                }
+            }
+            else if (flag === 2 /* BlendedBack */) {
+                state.enable(gl.CULL_FACE);
+                if ((_b = r.values.dFlipSided) === null || _b === void 0 ? void 0 : _b.ref.value) {
+                    state.frontFace(gl.CW);
+                    state.cullFace(gl.BACK);
+                }
+                else {
+                    state.frontFace(gl.CCW);
+                    state.cullFace(gl.FRONT);
+                }
+            }
             else {
                 if (r.values.uDoubleSided) {
                     if (r.values.uDoubleSided.ref.value || r.values.hasReflection.ref.value) {
@@ -173,15 +198,9 @@ var Renderer;
                     // webgl default
                     state.disable(gl.CULL_FACE);
                 }
-                if (r.values.dFlipSided) {
-                    if (r.values.dFlipSided.ref.value) {
-                        state.frontFace(gl.CW);
-                        state.cullFace(gl.FRONT);
-                    }
-                    else {
-                        state.frontFace(gl.CCW);
-                        state.cullFace(gl.BACK);
-                    }
+                if ((_c = r.values.dFlipSided) === null || _c === void 0 ? void 0 : _c.ref.value) {
+                    state.frontFace(gl.CW);
+                    state.cullFace(gl.FRONT);
                 }
                 else {
                     // webgl default
@@ -206,14 +225,14 @@ var Renderer;
             mol_util_1.ValueCell.updateIfChanged(globalUniforms.uFogNear, camera.fogNear);
             mol_util_1.ValueCell.updateIfChanged(globalUniforms.uTransparentBackground, transparentBackground);
         };
-        var updateInternal = function (group, camera, depthTexture, renderWboit, markingDepthTest) {
+        var updateInternal = function (group, camera, depthTexture, renderMask, markingDepthTest) {
             (0, array_1.arrayMapUpsert)(sharedTexturesList, 'tDepth', depthTexture || emptyDepthTexture);
             mol_util_1.ValueCell.update(globalUniforms.uModel, group.view);
             mol_util_1.ValueCell.update(globalUniforms.uModelView, linear_algebra_1.Mat4.mul(modelView, group.view, camera.view));
             mol_util_1.ValueCell.update(globalUniforms.uInvModelView, linear_algebra_1.Mat4.invert(invModelView, modelView));
             mol_util_1.ValueCell.update(globalUniforms.uModelViewProjection, linear_algebra_1.Mat4.mul(modelViewProjection, modelView, camera.projection));
             mol_util_1.ValueCell.update(globalUniforms.uInvModelViewProjection, linear_algebra_1.Mat4.invert(invModelViewProjection, modelViewProjection));
-            mol_util_1.ValueCell.updateIfChanged(globalUniforms.uRenderWboit, renderWboit);
+            mol_util_1.ValueCell.updateIfChanged(globalUniforms.uRenderMask, renderMask);
             mol_util_1.ValueCell.updateIfChanged(globalUniforms.uMarkingDepthTest, markingDepthTest);
             state.enable(gl.SCISSOR_TEST);
             state.colorMask(true, true, true, true);
@@ -227,12 +246,12 @@ var Renderer;
             state.disable(gl.BLEND);
             state.enable(gl.DEPTH_TEST);
             state.depthMask(true);
-            updateInternal(group, camera, depthTexture, false, false);
+            updateInternal(group, camera, depthTexture, 0 /* 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);
+                    renderObject(renderables[i], variant, 0 /* None */);
                 }
             }
         };
@@ -240,23 +259,51 @@ var Renderer;
             state.disable(gl.BLEND);
             state.enable(gl.DEPTH_TEST);
             state.depthMask(true);
-            updateInternal(group, camera, depthTexture, false, false);
+            updateInternal(group, camera, depthTexture, 0 /* All */, false);
+            var renderables = group.renderables;
+            for (var i = 0, il = renderables.length; i < il; ++i) {
+                renderObject(renderables[i], 'depth', 0 /* None */);
+            }
+        };
+        var renderDepthOpaque = function (group, camera, depthTexture) {
+            var _a;
+            state.disable(gl.BLEND);
+            state.enable(gl.DEPTH_TEST);
+            state.depthMask(true);
+            updateInternal(group, camera, depthTexture, 1 /* 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 */);
+                }
+            }
+        };
+        var renderDepthTransparent = function (group, camera, depthTexture) {
+            var _a;
+            state.disable(gl.BLEND);
+            state.enable(gl.DEPTH_TEST);
+            state.depthMask(true);
+            updateInternal(group, camera, depthTexture, 2 /* Transparent */, false);
             var renderables = group.renderables;
             for (var i = 0, il = renderables.length; i < il; ++i) {
-                renderObject(renderables[i], 'depth');
+                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 */);
+                }
             }
         };
         var renderMarkingDepth = function (group, camera, depthTexture) {
             state.disable(gl.BLEND);
             state.enable(gl.DEPTH_TEST);
             state.depthMask(true);
-            updateInternal(group, camera, depthTexture, false, false);
+            updateInternal(group, camera, depthTexture, 0 /* All */, false);
             mol_util_1.ValueCell.updateIfChanged(globalUniforms.uMarkingType, 1 /* 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');
+                    renderObject(renderables[i], 'marking', 0 /* None */);
                 }
             }
         };
@@ -264,13 +311,13 @@ var Renderer;
             state.disable(gl.BLEND);
             state.enable(gl.DEPTH_TEST);
             state.depthMask(true);
-            updateInternal(group, camera, depthTexture, false, !!depthTexture);
+            updateInternal(group, camera, depthTexture, 0 /* All */, !!depthTexture);
             mol_util_1.ValueCell.updateIfChanged(globalUniforms.uMarkingType, 2 /* 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');
+                    renderObject(renderables[i], 'marking', 0 /* None */);
                 }
             }
         };
@@ -279,21 +326,26 @@ var Renderer;
             renderBlendedTransparent(group, camera, depthTexture);
         };
         var renderBlendedOpaque = function (group, camera, depthTexture) {
+            var _a, _b;
             state.disable(gl.BLEND);
             state.enable(gl.DEPTH_TEST);
             state.depthMask(true);
-            updateInternal(group, camera, depthTexture, false, false);
+            updateInternal(group, camera, depthTexture, 1 /* 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');
+                    renderObject(r, 'colorBlended', 0 /* 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 */);
                 }
             }
         };
         var renderBlendedTransparent = function (group, camera, depthTexture) {
+            var _a, _b;
             state.enable(gl.DEPTH_TEST);
-            updateInternal(group, camera, depthTexture, false, false);
+            updateInternal(group, camera, depthTexture, 2 /* Transparent */, false);
             var renderables = group.renderables;
             if (transparentBackground) {
                 state.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
@@ -306,69 +358,58 @@ 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');
+                    renderObject(r, 'colorBlended', 0 /* None */);
                 }
             }
             state.depthMask(false);
             for (var i = 0, il = renderables.length; i < il; ++i) {
                 var r = renderables[i];
-                if (!r.state.opaque && !r.state.writeDepth) {
-                    renderObject(r, 'colorBlended');
-                }
-            }
-        };
-        var renderBlendedVolumeOpaque = function (group, camera, depthTexture) {
-            var _a;
-            state.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
-            state.enable(gl.BLEND);
-            updateInternal(group, camera, depthTexture, false, false);
-            var renderables = group.renderables;
-            for (var i = 0, il = renderables.length; i < il; ++i) {
-                var r = renderables[i];
-                // TODO: simplify, handle in renderable.state???
-                // 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 && !((_a = r.values.dXrayShaded) === null || _a === void 0 ? void 0 : _a.ref.value)) {
-                    renderObject(r, 'colorBlended');
+                if ((!r.state.opaque && !r.state.writeDepth) || r.values.transparencyAverage.ref.value > 0) {
+                    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', 1 /* BlendedFront */);
+                    }
+                    else {
+                        renderObject(r, 'colorBlended', 0 /* None */);
+                    }
                 }
             }
         };
-        var renderBlendedVolumeTransparent = function (group, camera, depthTexture) {
-            var _a;
+        var renderBlendedVolume = function (group, camera, depthTexture) {
             state.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
             state.enable(gl.BLEND);
-            updateInternal(group, camera, depthTexture, false, false);
+            updateInternal(group, camera, depthTexture, 2 /* Transparent */, false);
             var renderables = group.renderables;
             for (var i = 0, il = renderables.length; i < il; ++i) {
                 var r = renderables[i];
-                // TODO: simplify, handle in renderable.state???
-                // 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 || ((_a = r.values.dXrayShaded) === null || _a === void 0 ? void 0 : _a.ref.value)) {
-                    renderObject(r, 'colorBlended');
+                if (r.values.dGeometryType.ref.value === 'directVolume') {
+                    renderObject(r, 'colorBlended', 0 /* None */);
                 }
             }
         };
         var renderWboitOpaque = function (group, camera, depthTexture) {
-            var _a, _b;
+            var _a, _b, _c;
             state.disable(gl.BLEND);
             state.enable(gl.DEPTH_TEST);
             state.depthMask(true);
-            updateInternal(group, camera, depthTexture, false, false);
+            updateInternal(group, camera, depthTexture, 1 /* Opaque */, false);
             var renderables = group.renderables;
             for (var i = 0, il = renderables.length; i < il; ++i) {
                 var r = renderables[i];
                 // TODO: simplify, handle in renderable.state???
                 // 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)) {
-                    renderObject(r, 'colorWboit');
+                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 */);
                 }
             }
         };
         var renderWboitTransparent = function (group, camera, depthTexture) {
             var _a, _b;
-            updateInternal(group, camera, depthTexture, true, false);
+            updateInternal(group, camera, depthTexture, 2 /* Transparent */, false);
             var renderables = group.renderables;
             for (var i = 0, il = renderables.length; i < il; ++i) {
                 var r = renderables[i];
@@ -376,7 +417,7 @@ 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');
+                    renderObject(r, 'colorWboit', 0 /* None */);
                 }
             }
         };
@@ -397,22 +438,31 @@ var Renderer;
                 }
                 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
             },
-            clearDepth: function () {
+            clearDepth: function (packed) {
+                if (packed === void 0) { packed = false; }
                 state.enable(gl.SCISSOR_TEST);
-                state.enable(gl.DEPTH_TEST);
-                state.depthMask(true);
-                gl.clear(gl.DEPTH_BUFFER_BIT);
+                if (packed) {
+                    state.colorMask(true, true, true, true);
+                    state.clearColor(1, 1, 1, 1);
+                    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+                }
+                else {
+                    state.enable(gl.DEPTH_TEST);
+                    state.depthMask(true);
+                    gl.clear(gl.DEPTH_BUFFER_BIT);
+                }
             },
             update: update,
             renderPick: renderPick,
             renderDepth: renderDepth,
+            renderDepthOpaque: renderDepthOpaque,
+            renderDepthTransparent: renderDepthTransparent,
             renderMarkingDepth: renderMarkingDepth,
             renderMarkingMask: renderMarkingMask,
             renderBlended: renderBlended,
             renderBlendedOpaque: renderBlendedOpaque,
             renderBlendedTransparent: renderBlendedTransparent,
-            renderBlendedVolumeOpaque: renderBlendedVolumeOpaque,
-            renderBlendedVolumeTransparent: renderBlendedVolumeTransparent,
+            renderBlendedVolume: renderBlendedVolume,
             renderWboitOpaque: renderWboitOpaque,
             renderWboitTransparent: renderWboitTransparent,
             setProps: function (props) {

package/lib/commonjs/mol-gl/scene.d.ts

@@ -27,6 +27,7 @@ interface Scene extends Object3D {
     clear: () => void;
     forEach: (callbackFn: (value: GraphicsRenderable, key: GraphicsRenderObject) => void) => void;
     getMarkerAverage: () => number;
+    getOpacityAverage: () => number;
 }
 declare namespace Scene {
     interface Group extends Object3D {

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

@@ -16,6 +16,7 @@ var array_1 = require("../mol-util/array");
 var boundary_helper_1 = require("../mol-math/geometry/boundary-helper");
 var util_1 = require("../mol-data/util");
 var render_item_1 = require("./webgl/render-item");
+var interpolate_1 = require("../mol-math/interpolate");
 var boundaryHelper = new boundary_helper_1.BoundaryHelper('98');
 function calculateBoundingSphere(renderables, boundingSphere, onlyVisible) {
     boundaryHelper.reset();
@@ -221,14 +222,38 @@ var Scene;
             getMarkerAverage: function () {
                 if (primitives.length === 0 && volumes.length === 0)
                     return 0;
+                var count = 0;
                 var markerAverage = 0;
                 for (var i = 0, il = primitives.length; i < il; ++i) {
+                    if (!primitives[i].state.visible)
+                        continue;
                     markerAverage += primitives[i].values.markerAverage.ref.value;
+                    count += 1;
                 }
                 for (var i = 0, il = volumes.length; i < il; ++i) {
+                    if (!volumes[i].state.visible)
+                        continue;
                     markerAverage += volumes[i].values.markerAverage.ref.value;
+                    count += 1;
                 }
-                return markerAverage / (primitives.length + volumes.length);
+                return count > 0 ? markerAverage / count : 0;
+            },
+            getOpacityAverage: function () {
+                if (primitives.length === 0)
+                    return 0;
+                var count = 0;
+                var opacityAverage = 0;
+                for (var i = 0, il = primitives.length; i < il; ++i) {
+                    var p = primitives[i];
+                    if (!p.state.visible)
+                        continue;
+                    // TODO: simplify, handle in renderable.state???
+                    // uAlpha is updated in "render" so we need to recompute it here
+                    var alpha = (0, interpolate_1.clamp)(p.values.alpha.ref.value * p.state.alphaFactor, 0, 1);
+                    opacityAverage += (1 - p.values.transparencyAverage.ref.value) * alpha;
+                    count += 1;
+                }
+                return count > 0 ? opacityAverage / count : 0;
             },
         };
     }

package/lib/commonjs/mol-gl/shader/chunks/apply-interior-color.glsl.d.ts

@@ -1 +1 @@
-export declare const apply_interior_color = "\nif (interior) {\n    if (uInteriorColorFlag) {\n        gl_FragColor.rgb = uInteriorColor;\n    } else {\n        gl_FragColor.rgb *= 1.0 - uInteriorDarkening;\n    }\n}\n";
+export declare const apply_interior_color = "\nif (interior) {\n    if (uInteriorColorFlag) {\n        gl_FragColor.rgb = uInteriorColor;\n    } else {\n        gl_FragColor.rgb *= 1.0 - uInteriorDarkening;\n    }\n\n    #ifdef dTransparentBackfaces_opaque\n        gl_FragColor.a = 1.0;\n    #endif\n}\n";