molstar 3.7.0 → 3.8.2

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

@@ -7,30 +7,14 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DrawPass = void 0;
-var tslib_1 = require("tslib");
 var render_target_1 = require("../../mol-gl/webgl/render-target");
-var util_1 = require("../../mol-gl/compute/util");
-var schema_1 = require("../../mol-gl/renderable/schema");
-var renderable_1 = require("../../mol-gl/renderable");
-var shader_code_1 = require("../../mol-gl/shader-code");
-var render_item_1 = require("../../mol-gl/webgl/render-item");
 var mol_util_1 = require("../../mol-util");
 var linear_algebra_1 = require("../../mol-math/linear-algebra");
-var quad_vert_1 = require("../../mol-gl/shader/quad.vert");
-var depth_merge_frag_1 = require("../../mol-gl/shader/depth-merge.frag");
 var stereo_1 = require("../camera/stereo");
 var wboit_1 = require("./wboit");
 var postprocessing_1 = require("./postprocessing");
 var marking_1 = require("./marking");
-var util_2 = require("../../mol-gl/compute/util");
-var DepthMergeSchema = tslib_1.__assign(tslib_1.__assign({}, util_1.QuadSchema), { tDepthPrimitives: (0, schema_1.TextureSpec)('texture', 'depth', 'ushort', 'nearest'), tDepthVolumes: (0, schema_1.TextureSpec)('texture', 'depth', 'ushort', 'nearest'), uTexSize: (0, schema_1.UniformSpec)('v2'), dPackedDepth: (0, schema_1.DefineSpec)('boolean') });
-var DepthMergeShaderCode = (0, shader_code_1.ShaderCode)('depth-merge', quad_vert_1.quad_vert, depth_merge_frag_1.depthMerge_frag);
-function getDepthMergeRenderable(ctx, depthTexturePrimitives, depthTextureVolumes, packedDepth) {
-    var values = tslib_1.__assign(tslib_1.__assign({}, util_1.QuadValues), { tDepthPrimitives: mol_util_1.ValueCell.create(depthTexturePrimitives), tDepthVolumes: mol_util_1.ValueCell.create(depthTextureVolumes), uTexSize: mol_util_1.ValueCell.create(linear_algebra_1.Vec2.create(depthTexturePrimitives.getWidth(), depthTexturePrimitives.getHeight())), dPackedDepth: mol_util_1.ValueCell.create(packedDepth) });
-    var schema = tslib_1.__assign({}, DepthMergeSchema);
-    var renderItem = (0, render_item_1.createComputeRenderItem)(ctx, 'triangles', DepthMergeShaderCode, schema, values);
-    return (0, renderable_1.createComputeRenderable)(renderItem, values);
-}
+var util_1 = require("../../mol-gl/compute/util");
 var DrawPass = /** @class */ (function () {
     function DrawPass(webgl, width, height, enableWboit) {
         this.webgl = webgl;
@@ -38,23 +22,19 @@ var DrawPass = /** @class */ (function () {
         this.drawTarget = (0, render_target_1.createNullRenderTarget)(webgl.gl);
         this.colorTarget = webgl.createRenderTarget(width, height, true, 'uint8', 'linear');
         this.packedDepth = !extensions.depthTexture;
-        this.depthTarget = webgl.createRenderTarget(width, height);
-        this.depthTexture = this.depthTarget.texture;
-        this.depthTargetPrimitives = this.packedDepth ? webgl.createRenderTarget(width, height) : null;
-        this.depthTargetVolumes = this.packedDepth ? webgl.createRenderTarget(width, height) : null;
-        this.depthTexturePrimitives = this.depthTargetPrimitives ? this.depthTargetPrimitives.texture : resources.texture('image-depth', 'depth', isWebGL2 ? 'float' : 'ushort', 'nearest');
-        this.depthTextureVolumes = this.depthTargetVolumes ? this.depthTargetVolumes.texture : resources.texture('image-depth', 'depth', isWebGL2 ? 'float' : 'ushort', 'nearest');
+        this.depthTargetTransparent = webgl.createRenderTarget(width, height);
+        this.depthTextureTransparent = this.depthTargetTransparent.texture;
+        this.depthTargetOpaque = this.packedDepth ? webgl.createRenderTarget(width, height) : null;
+        this.depthTextureOpaque = this.depthTargetOpaque ? this.depthTargetOpaque.texture : resources.texture('image-depth', 'depth', isWebGL2 ? 'float' : 'ushort', 'nearest');
         if (!this.packedDepth) {
-            this.depthTexturePrimitives.define(width, height);
-            this.depthTextureVolumes.define(width, height);
+            this.depthTextureOpaque.define(width, height);
         }
-        this.depthMerge = getDepthMergeRenderable(webgl, this.depthTexturePrimitives, this.depthTextureVolumes, this.packedDepth);
         this.wboit = enableWboit ? new wboit_1.WboitPass(webgl, width, height) : undefined;
         this.marking = new marking_1.MarkingPass(webgl, width, height);
         this.postprocessing = new postprocessing_1.PostprocessingPass(webgl, this);
         this.antialiasing = new postprocessing_1.AntialiasingPass(webgl, this);
-        this.copyFboTarget = (0, util_2.createCopyRenderable)(webgl, this.colorTarget.texture);
-        this.copyFboPostprocessing = (0, util_2.createCopyRenderable)(webgl, this.postprocessing.target.texture);
+        this.copyFboTarget = (0, util_1.createCopyRenderable)(webgl, this.colorTarget.texture);
+        this.copyFboPostprocessing = (0, util_1.createCopyRenderable)(webgl, this.postprocessing.target.texture);
     }
     Object.defineProperty(DrawPass.prototype, "wboitEnabled", {
         get: function () {
@@ -74,20 +54,13 @@ var DrawPass = /** @class */ (function () {
         var h = this.colorTarget.getHeight();
         if (width !== w || height !== h) {
             this.colorTarget.setSize(width, height);
-            this.depthTarget.setSize(width, height);
-            if (this.depthTargetPrimitives) {
-                this.depthTargetPrimitives.setSize(width, height);
-            }
-            else {
-                this.depthTexturePrimitives.define(width, height);
-            }
-            if (this.depthTargetVolumes) {
-                this.depthTargetVolumes.setSize(width, height);
+            this.depthTargetTransparent.setSize(width, height);
+            if (this.depthTargetOpaque) {
+                this.depthTargetOpaque.setSize(width, height);
             }
             else {
-                this.depthTextureVolumes.define(width, height);
+                this.depthTextureOpaque.define(width, height);
             }
-            mol_util_1.ValueCell.update(this.depthMerge.values.uTexSize, linear_algebra_1.Vec2.set(this.depthMerge.values.uTexSize.ref.value, width, height));
             mol_util_1.ValueCell.update(this.copyFboTarget.values.uTexSize, linear_algebra_1.Vec2.set(this.copyFboTarget.values.uTexSize.ref.value, width, height));
             mol_util_1.ValueCell.update(this.copyFboPostprocessing.values.uTexSize, linear_algebra_1.Vec2.set(this.copyFboPostprocessing.values.uTexSize.ref.value, width, height));
             if ((_a = this.wboit) === null || _a === void 0 ? void 0 : _a.supported) {
@@ -98,18 +71,6 @@ var DrawPass = /** @class */ (function () {
             this.antialiasing.setSize(width, height);
         }
     };
-    DrawPass.prototype._depthMerge = function () {
-        var _a = this.webgl, state = _a.state, gl = _a.gl;
-        this.depthMerge.update();
-        this.depthTarget.bind();
-        state.disable(gl.BLEND);
-        state.disable(gl.DEPTH_TEST);
-        state.disable(gl.CULL_FACE);
-        state.depthMask(false);
-        state.clearColor(1, 1, 1, 1);
-        gl.clear(gl.COLOR_BUFFER_BIT);
-        this.depthMerge.render();
-    };
     DrawPass.prototype._renderWboit = function (renderer, camera, scene, transparentBackground, postprocessingProps) {
         var _a;
         if (!((_a = this.wboit) === null || _a === void 0 ? void 0 : _a.supported))
@@ -117,43 +78,44 @@ var DrawPass = /** @class */ (function () {
         this.colorTarget.bind();
         renderer.clear(true);
         // render opaque primitives
-        this.depthTexturePrimitives.attachFramebuffer(this.colorTarget.framebuffer, 'depth');
+        this.depthTextureOpaque.attachFramebuffer(this.colorTarget.framebuffer, 'depth');
         this.colorTarget.bind();
         renderer.clearDepth();
         renderer.renderWboitOpaque(scene.primitives, camera, null);
-        // render opaque volumes
-        this.depthTextureVolumes.attachFramebuffer(this.colorTarget.framebuffer, 'depth');
-        this.colorTarget.bind();
-        renderer.clearDepth();
-        renderer.renderWboitOpaque(scene.volumes, camera, this.depthTexturePrimitives);
-        // merge depth of opaque primitives and volumes
-        this._depthMerge();
         if (postprocessing_1.PostprocessingPass.isEnabled(postprocessingProps)) {
+            if (postprocessing_1.PostprocessingPass.isOutlineEnabled(postprocessingProps)) {
+                this.depthTargetTransparent.bind();
+                renderer.clearDepth(true);
+                if (scene.opacityAverage < 1) {
+                    renderer.renderDepthTransparent(scene.primitives, camera, this.depthTextureOpaque);
+                }
+            }
             this.postprocessing.render(camera, false, transparentBackground, renderer.props.backgroundColor, postprocessingProps);
         }
         // render transparent primitives and volumes
-        this.wboit.bind();
-        renderer.renderWboitTransparent(scene.primitives, camera, this.depthTexture);
-        renderer.renderWboitTransparent(scene.volumes, camera, this.depthTexture);
-        // evaluate wboit
-        if (postprocessing_1.PostprocessingPass.isEnabled(postprocessingProps)) {
-            this.depthTexturePrimitives.attachFramebuffer(this.postprocessing.target.framebuffer, 'depth');
-            this.postprocessing.target.bind();
-        }
-        else {
-            this.depthTexturePrimitives.attachFramebuffer(this.colorTarget.framebuffer, 'depth');
-            this.colorTarget.bind();
+        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);
+            // evaluate wboit
+            if (postprocessing_1.PostprocessingPass.isEnabled(postprocessingProps)) {
+                this.postprocessing.target.bind();
+            }
+            else {
+                this.colorTarget.bind();
+            }
+            this.wboit.render();
         }
-        this.wboit.render();
     };
     DrawPass.prototype._renderBlended = function (renderer, camera, scene, toDrawingBuffer, transparentBackground, postprocessingProps) {
+        var _a, _b;
         if (toDrawingBuffer) {
             this.drawTarget.bind();
         }
         else {
             this.colorTarget.bind();
             if (!this.packedDepth) {
-                this.depthTexturePrimitives.attachFramebuffer(this.colorTarget.framebuffer, 'depth');
+                this.depthTextureOpaque.attachFramebuffer(this.colorTarget.framebuffer, 'depth');
             }
         }
         renderer.clear(true);
@@ -161,39 +123,35 @@ var DrawPass = /** @class */ (function () {
         if (!toDrawingBuffer) {
             // do a depth pass if not rendering to drawing buffer and
             // extensions.depthTexture is unsupported (i.e. depthTarget is set)
-            if (this.depthTargetPrimitives) {
-                this.depthTargetPrimitives.bind();
-                renderer.clear(false);
-                // TODO: this should only render opaque
-                renderer.renderDepth(scene.primitives, camera, null);
-                this.colorTarget.bind();
-            }
-            // do direct-volume rendering
-            if (!this.packedDepth) {
-                this.depthTextureVolumes.attachFramebuffer(this.colorTarget.framebuffer, 'depth');
-                renderer.clearDepth(); // from previous frame
-            }
-            renderer.renderBlendedVolumeOpaque(scene.volumes, camera, this.depthTexturePrimitives);
-            // do volume depth pass if extensions.depthTexture is unsupported (i.e. depthTarget is set)
-            if (this.depthTargetVolumes) {
-                this.depthTargetVolumes.bind();
-                renderer.clear(false);
-                renderer.renderDepth(scene.volumes, camera, this.depthTexturePrimitives);
+            if (this.depthTargetOpaque) {
+                this.depthTargetOpaque.bind();
+                renderer.clearDepth(true);
+                renderer.renderDepthOpaque(scene.primitives, camera, null);
                 this.colorTarget.bind();
             }
-            // merge depths from primitive and volume rendering
-            this._depthMerge();
-            this.colorTarget.bind();
             if (postprocessing_1.PostprocessingPass.isEnabled(postprocessingProps)) {
+                if (!this.packedDepth) {
+                    this.depthTextureOpaque.detachFramebuffer(this.postprocessing.target.framebuffer, 'depth');
+                }
+                else {
+                    (_a = this.colorTarget.depthRenderbuffer) === null || _a === void 0 ? void 0 : _a.detachFramebuffer(this.postprocessing.target.framebuffer);
+                }
+                if (postprocessing_1.PostprocessingPass.isOutlineEnabled(postprocessingProps)) {
+                    this.depthTargetTransparent.bind();
+                    renderer.clearDepth(true);
+                    if (scene.opacityAverage < 1) {
+                        renderer.renderDepthTransparent(scene.primitives, camera, this.depthTextureOpaque);
+                    }
+                }
                 this.postprocessing.render(camera, false, transparentBackground, renderer.props.backgroundColor, postprocessingProps);
+                if (!this.packedDepth) {
+                    this.depthTextureOpaque.attachFramebuffer(this.postprocessing.target.framebuffer, 'depth');
+                }
+                else {
+                    (_b = this.colorTarget.depthRenderbuffer) === null || _b === void 0 ? void 0 : _b.attachFramebuffer(this.postprocessing.target.framebuffer);
+                }
             }
-            renderer.renderBlendedVolumeTransparent(scene.volumes, camera, this.depthTexturePrimitives);
-            var target = postprocessing_1.PostprocessingPass.isEnabled(postprocessingProps)
-                ? this.postprocessing.target : this.colorTarget;
-            if (!this.packedDepth) {
-                this.depthTexturePrimitives.attachFramebuffer(target.framebuffer, 'depth');
-            }
-            target.bind();
+            renderer.renderBlendedVolume(scene.volumes, camera, this.depthTextureOpaque);
         }
         renderer.renderBlendedTransparent(scene.primitives, camera, null);
     };
@@ -225,10 +183,9 @@ var DrawPass = /** @class */ (function () {
             this.drawTarget.bind();
         }
         if (markingEnabled) {
-            var markerAverage = scene.getMarkerAverage();
-            if (markerAverage > 0) {
+            if (scene.markerAverage > 0) {
                 var markingDepthTest = props.marking.ghostEdgeStrength < 1;
-                if (markingDepthTest && markerAverage !== 1) {
+                if (markingDepthTest && scene.markerAverage !== 1) {
                     this.marking.depthTarget.bind();
                     renderer.clear(false, true);
                     renderer.renderMarkingDepth(scene.primitives, camera, null);

package/lib/commonjs/mol-canvas3d/passes/pick.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-canvas3d/passes/pick.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>
  */
@@ -47,11 +47,9 @@ var PickPass = /** @class */ (function () {
         }
     };
     PickPass.prototype.renderVariant = function (renderer, camera, scene, helper, variant, pickType) {
-        var depth = this.drawPass.depthTexturePrimitives;
         renderer.clear(false);
         renderer.update(camera);
         renderer.renderPick(scene.primitives, camera, variant, null, pickType);
-        renderer.renderPick(scene.volumes, camera, variant, depth, pickType);
         renderer.renderPick(helper.handle.scene, camera, variant, null, pickType);
         if (helper.camera.isEnabled) {
             helper.camera.update(camera);

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

@@ -38,6 +38,7 @@ export declare class PostprocessingPass {
     private webgl;
     private drawPass;
     static isEnabled(props: PostprocessingProps): boolean;
+    static isOutlineEnabled(props: PostprocessingProps): boolean;
     readonly target: RenderTarget;
     private readonly outlinesTarget;
     private readonly outlinesRenderable;

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

@@ -24,9 +24,11 @@ var postprocessing_frag_1 = require("../../mol-gl/shader/postprocessing.frag");
 var color_1 = require("../../mol-util/color");
 var fxaa_1 = require("./fxaa");
 var smaa_1 = require("./smaa");
-var OutlinesSchema = tslib_1.__assign(tslib_1.__assign({}, util_1.QuadSchema), { tDepth: (0, schema_1.TextureSpec)('texture', 'rgba', 'ubyte', 'nearest'), uTexSize: (0, schema_1.UniformSpec)('v2'), dOrthographic: (0, schema_1.DefineSpec)('number'), uNear: (0, schema_1.UniformSpec)('f'), uFar: (0, schema_1.UniformSpec)('f'), uMaxPossibleViewZDiff: (0, schema_1.UniformSpec)('f') });
-function getOutlinesRenderable(ctx, depthTexture) {
-    var values = tslib_1.__assign(tslib_1.__assign({}, util_1.QuadValues), { tDepth: mol_util_1.ValueCell.create(depthTexture), uTexSize: mol_util_1.ValueCell.create(linear_algebra_1.Vec2.create(depthTexture.getWidth(), depthTexture.getHeight())), dOrthographic: mol_util_1.ValueCell.create(0), uNear: mol_util_1.ValueCell.create(1), uFar: mol_util_1.ValueCell.create(10000), uMaxPossibleViewZDiff: mol_util_1.ValueCell.create(0.5) });
+var OutlinesSchema = tslib_1.__assign(tslib_1.__assign({}, util_1.QuadSchema), { tDepthOpaque: (0, schema_1.TextureSpec)('texture', 'rgba', 'ubyte', 'nearest'), tDepthTransparent: (0, schema_1.TextureSpec)('texture', 'rgba', 'ubyte', 'nearest'), uTexSize: (0, schema_1.UniformSpec)('v2'), dOrthographic: (0, schema_1.DefineSpec)('number'), uNear: (0, schema_1.UniformSpec)('f'), uFar: (0, schema_1.UniformSpec)('f'), uMaxPossibleViewZDiff: (0, schema_1.UniformSpec)('f') });
+function getOutlinesRenderable(ctx, depthTextureOpaque, depthTextureTransparent) {
+    var width = depthTextureOpaque.getWidth();
+    var height = depthTextureOpaque.getHeight();
+    var values = tslib_1.__assign(tslib_1.__assign({}, util_1.QuadValues), { tDepthOpaque: mol_util_1.ValueCell.create(depthTextureOpaque), tDepthTransparent: mol_util_1.ValueCell.create(depthTextureTransparent), uTexSize: mol_util_1.ValueCell.create(linear_algebra_1.Vec2.create(width, height)), dOrthographic: mol_util_1.ValueCell.create(0), uNear: mol_util_1.ValueCell.create(1), uFar: mol_util_1.ValueCell.create(10000), uMaxPossibleViewZDiff: mol_util_1.ValueCell.create(0.5) });
     var schema = tslib_1.__assign({}, OutlinesSchema);
     var shaderCode = (0, shader_code_1.ShaderCode)('outlines', quad_vert_1.quad_vert, outlines_frag_1.outlines_frag);
     var renderItem = (0, render_item_1.createComputeRenderItem)(ctx, 'triangles', shaderCode, schema, values);
@@ -68,9 +70,9 @@ function getSamples(vectorSamples, nSamples) {
     }
     return samples;
 }
-var PostprocessingSchema = tslib_1.__assign(tslib_1.__assign({}, util_1.QuadSchema), { tSsaoDepth: (0, schema_1.TextureSpec)('texture', 'rgba', 'ubyte', 'nearest'), tColor: (0, schema_1.TextureSpec)('texture', 'rgba', 'ubyte', 'nearest'), tDepth: (0, schema_1.TextureSpec)('texture', 'rgba', 'ubyte', 'nearest'), tOutlines: (0, schema_1.TextureSpec)('texture', 'rgba', 'ubyte', 'nearest'), uTexSize: (0, schema_1.UniformSpec)('v2'), dOrthographic: (0, schema_1.DefineSpec)('number'), uNear: (0, schema_1.UniformSpec)('f'), uFar: (0, schema_1.UniformSpec)('f'), uFogNear: (0, schema_1.UniformSpec)('f'), uFogFar: (0, schema_1.UniformSpec)('f'), uFogColor: (0, schema_1.UniformSpec)('v3'), uOutlineColor: (0, schema_1.UniformSpec)('v3'), uTransparentBackground: (0, schema_1.UniformSpec)('b'), uMaxPossibleViewZDiff: (0, schema_1.UniformSpec)('f'), dOcclusionEnable: (0, schema_1.DefineSpec)('boolean'), uOcclusionOffset: (0, schema_1.UniformSpec)('v2'), dOutlineEnable: (0, schema_1.DefineSpec)('boolean'), dOutlineScale: (0, schema_1.DefineSpec)('number'), uOutlineThreshold: (0, schema_1.UniformSpec)('f') });
-function getPostprocessingRenderable(ctx, colorTexture, depthTexture, outlinesTexture, ssaoDepthTexture) {
-    var values = tslib_1.__assign(tslib_1.__assign({}, util_1.QuadValues), { tSsaoDepth: mol_util_1.ValueCell.create(ssaoDepthTexture), tColor: mol_util_1.ValueCell.create(colorTexture), tDepth: mol_util_1.ValueCell.create(depthTexture), tOutlines: mol_util_1.ValueCell.create(outlinesTexture), uTexSize: mol_util_1.ValueCell.create(linear_algebra_1.Vec2.create(colorTexture.getWidth(), colorTexture.getHeight())), dOrthographic: mol_util_1.ValueCell.create(0), uNear: mol_util_1.ValueCell.create(1), uFar: mol_util_1.ValueCell.create(10000), uFogNear: mol_util_1.ValueCell.create(10000), uFogFar: mol_util_1.ValueCell.create(10000), uFogColor: mol_util_1.ValueCell.create(linear_algebra_1.Vec3.create(1, 1, 1)), uOutlineColor: mol_util_1.ValueCell.create(linear_algebra_1.Vec3.create(0, 0, 0)), uTransparentBackground: mol_util_1.ValueCell.create(false), uMaxPossibleViewZDiff: mol_util_1.ValueCell.create(0.5), dOcclusionEnable: mol_util_1.ValueCell.create(true), uOcclusionOffset: mol_util_1.ValueCell.create(linear_algebra_1.Vec2.create(0, 0)), dOutlineEnable: mol_util_1.ValueCell.create(false), dOutlineScale: mol_util_1.ValueCell.create(1), uOutlineThreshold: mol_util_1.ValueCell.create(0.33) });
+var PostprocessingSchema = tslib_1.__assign(tslib_1.__assign({}, util_1.QuadSchema), { tSsaoDepth: (0, schema_1.TextureSpec)('texture', 'rgba', 'ubyte', 'nearest'), tColor: (0, schema_1.TextureSpec)('texture', 'rgba', 'ubyte', 'nearest'), tDepthOpaque: (0, schema_1.TextureSpec)('texture', 'rgba', 'ubyte', 'nearest'), tDepthTransparent: (0, schema_1.TextureSpec)('texture', 'rgba', 'ubyte', 'nearest'), tOutlines: (0, schema_1.TextureSpec)('texture', 'rgba', 'ubyte', 'nearest'), uTexSize: (0, schema_1.UniformSpec)('v2'), dOrthographic: (0, schema_1.DefineSpec)('number'), uNear: (0, schema_1.UniformSpec)('f'), uFar: (0, schema_1.UniformSpec)('f'), uFogNear: (0, schema_1.UniformSpec)('f'), uFogFar: (0, schema_1.UniformSpec)('f'), uFogColor: (0, schema_1.UniformSpec)('v3'), uOutlineColor: (0, schema_1.UniformSpec)('v3'), uTransparentBackground: (0, schema_1.UniformSpec)('b'), uMaxPossibleViewZDiff: (0, schema_1.UniformSpec)('f'), dOcclusionEnable: (0, schema_1.DefineSpec)('boolean'), uOcclusionOffset: (0, schema_1.UniformSpec)('v2'), dOutlineEnable: (0, schema_1.DefineSpec)('boolean'), dOutlineScale: (0, schema_1.DefineSpec)('number'), uOutlineThreshold: (0, schema_1.UniformSpec)('f') });
+function getPostprocessingRenderable(ctx, colorTexture, depthTextureOpaque, depthTextureTransparent, outlinesTexture, ssaoDepthTexture) {
+    var values = tslib_1.__assign(tslib_1.__assign({}, util_1.QuadValues), { tSsaoDepth: mol_util_1.ValueCell.create(ssaoDepthTexture), tColor: mol_util_1.ValueCell.create(colorTexture), tDepthOpaque: mol_util_1.ValueCell.create(depthTextureOpaque), tDepthTransparent: mol_util_1.ValueCell.create(depthTextureTransparent), tOutlines: mol_util_1.ValueCell.create(outlinesTexture), uTexSize: mol_util_1.ValueCell.create(linear_algebra_1.Vec2.create(colorTexture.getWidth(), colorTexture.getHeight())), dOrthographic: mol_util_1.ValueCell.create(0), uNear: mol_util_1.ValueCell.create(1), uFar: mol_util_1.ValueCell.create(10000), uFogNear: mol_util_1.ValueCell.create(10000), uFogFar: mol_util_1.ValueCell.create(10000), uFogColor: mol_util_1.ValueCell.create(linear_algebra_1.Vec3.create(1, 1, 1)), uOutlineColor: mol_util_1.ValueCell.create(linear_algebra_1.Vec3.create(0, 0, 0)), uTransparentBackground: mol_util_1.ValueCell.create(false), uMaxPossibleViewZDiff: mol_util_1.ValueCell.create(0.5), dOcclusionEnable: mol_util_1.ValueCell.create(true), uOcclusionOffset: mol_util_1.ValueCell.create(linear_algebra_1.Vec2.create(0, 0)), dOutlineEnable: mol_util_1.ValueCell.create(false), dOutlineScale: mol_util_1.ValueCell.create(1), uOutlineThreshold: mol_util_1.ValueCell.create(0.33) });
     var schema = tslib_1.__assign({}, PostprocessingSchema);
     var shaderCode = (0, shader_code_1.ShaderCode)('postprocessing', quad_vert_1.quad_vert, postprocessing_frag_1.postprocessing_frag);
     var renderItem = (0, render_item_1.createComputeRenderItem)(ctx, 'triangles', shaderCode, schema, values);
@@ -106,7 +108,7 @@ var PostprocessingPass = /** @class */ (function () {
         this.webgl = webgl;
         this.drawPass = drawPass;
         this.occlusionOffset = [0, 0];
-        var colorTarget = drawPass.colorTarget, depthTexture = drawPass.depthTexture;
+        var colorTarget = drawPass.colorTarget, depthTextureTransparent = drawPass.depthTextureTransparent, depthTextureOpaque = drawPass.depthTextureOpaque;
         var width = colorTarget.getWidth();
         var height = colorTarget.getHeight();
         this.nSamples = 1;
@@ -116,7 +118,7 @@ var PostprocessingPass = /** @class */ (function () {
         // needs to be linear for anti-aliasing pass
         this.target = webgl.createRenderTarget(width, height, false, 'uint8', 'linear');
         this.outlinesTarget = webgl.createRenderTarget(width, height, false);
-        this.outlinesRenderable = getOutlinesRenderable(webgl, depthTexture);
+        this.outlinesRenderable = getOutlinesRenderable(webgl, depthTextureOpaque, depthTextureTransparent);
         this.randomHemisphereVector = [];
         for (var i = 0; i < 256; i++) {
             var v = (0, linear_algebra_1.Vec3)();
@@ -133,7 +135,7 @@ var PostprocessingPass = /** @class */ (function () {
         var sw = Math.floor(width * this.ssaoScale);
         var sh = Math.floor(height * this.ssaoScale);
         this.downsampledDepthTarget = webgl.createRenderTarget(sw, sh, false, 'uint8', 'linear');
-        this.downsampleDepthRenderable = (0, util_1.createCopyRenderable)(webgl, depthTexture);
+        this.downsampleDepthRenderable = (0, util_1.createCopyRenderable)(webgl, depthTextureOpaque);
         this.ssaoDepthTexture = webgl.resources.texture('image-uint8', 'rgba', 'ubyte', 'linear');
         this.ssaoDepthTexture.define(sw, sh);
         this.ssaoDepthTexture.attachFramebuffer(this.ssaoFramebuffer, 'color0');
@@ -141,14 +143,17 @@ var PostprocessingPass = /** @class */ (function () {
         this.ssaoDepthBlurProxyTexture.define(sw, sh);
         this.ssaoDepthBlurProxyTexture.attachFramebuffer(this.ssaoBlurFirstPassFramebuffer, 'color0');
         this.ssaoDepthTexture.attachFramebuffer(this.ssaoBlurSecondPassFramebuffer, 'color0');
-        this.ssaoRenderable = getSsaoRenderable(webgl, this.downsampleFactor === 1 ? depthTexture : this.downsampledDepthTarget.texture);
+        this.ssaoRenderable = getSsaoRenderable(webgl, this.downsampleFactor === 1 ? depthTextureOpaque : this.downsampledDepthTarget.texture);
         this.ssaoBlurFirstPassRenderable = getSsaoBlurRenderable(webgl, this.ssaoDepthTexture, 'horizontal');
         this.ssaoBlurSecondPassRenderable = getSsaoBlurRenderable(webgl, this.ssaoDepthBlurProxyTexture, 'vertical');
-        this.renderable = getPostprocessingRenderable(webgl, colorTarget.texture, depthTexture, this.outlinesTarget.texture, this.ssaoDepthTexture);
+        this.renderable = getPostprocessingRenderable(webgl, colorTarget.texture, depthTextureOpaque, depthTextureTransparent, this.outlinesTarget.texture, this.ssaoDepthTexture);
     }
     PostprocessingPass.isEnabled = function (props) {
         return props.occlusion.name === 'on' || props.outline.name === 'on';
     };
+    PostprocessingPass.isOutlineEnabled = function (props) {
+        return props.outline.name === 'on';
+    };
     PostprocessingPass.prototype.calcSsaoScale = function () {
         // downscale ssao for high pixel-ratios
         return Math.min(1, 1 / this.webgl.pixelRatio) * this.downsampleFactor;
@@ -229,7 +234,7 @@ var PostprocessingPass = /** @class */ (function () {
                 this.ssaoDepthTexture.define(sw, sh);
                 this.ssaoDepthBlurProxyTexture.define(sw, sh);
                 if (this.ssaoScale === 1) {
-                    mol_util_1.ValueCell.update(this.ssaoRenderable.values.tDepth, this.drawPass.depthTexture);
+                    mol_util_1.ValueCell.update(this.ssaoRenderable.values.tDepth, this.drawPass.depthTextureTransparent);
                 }
                 else {
                     mol_util_1.ValueCell.update(this.ssaoRenderable.values.tDepth, this.downsampledDepthTarget.texture);

package/lib/commonjs/mol-geo/geometry/color-data.d.ts

@@ -11,7 +11,10 @@ import { Vec2, Vec3, Vec4 } from '../../mol-math/linear-algebra';
 import { LocationIterator } from '../util/location-iterator';
 import { ColorTheme, ColorVolume } from '../../mol-theme/color';
 import { Texture } from '../../mol-gl/webgl/texture';
-export declare type ColorType = 'uniform' | 'instance' | 'group' | 'groupInstance' | 'vertex' | 'vertexInstance' | 'volume' | 'volumeInstance' | 'direct';
+export declare type ColorTypeLocation = 'uniform' | 'instance' | 'group' | 'groupInstance' | 'vertex' | 'vertexInstance';
+export declare type ColorTypeGrid = 'volume' | 'volumeInstance';
+export declare type ColorTypeDirect = 'direct';
+export declare type ColorType = ColorTypeLocation | ColorTypeGrid | ColorTypeDirect;
 export declare type ColorData = {
     uColor: ValueCell<Vec3>;
     tColor: ValueCell<TextureImage<Uint8Array>>;
@@ -23,7 +26,7 @@ export declare type ColorData = {
     dColorType: ValueCell<string>;
     dUsePalette: ValueCell<boolean>;
 };
-export declare function createColors(locationIt: LocationIterator, positionIt: LocationIterator, colorTheme: ColorTheme<any>, colorData?: ColorData): ColorData;
+export declare function createColors(locationIt: LocationIterator, positionIt: LocationIterator, colorTheme: ColorTheme<any, any>, colorData?: ColorData): ColorData;
 export declare function createValueColor(value: Color, colorData?: ColorData): ColorData;
 export declare function createTextureColor(colors: TextureImage<Uint8Array>, type: ColorType, colorData?: ColorData): ColorData;
 export declare function createGridColor(grid: ColorVolume, type: ColorType, colorData?: ColorData): ColorData;

package/lib/commonjs/mol-geo/geometry/color-data.js

@@ -12,7 +12,6 @@ var util_1 = require("../../mol-gl/renderable/util");
 var color_1 = require("../../mol-util/color");
 var linear_algebra_1 = require("../../mol-math/linear-algebra");
 var location_1 = require("../../mol-model/location");
-var geometry_1 = require("./geometry");
 var texture_1 = require("../../mol-gl/webgl/texture");
 function createColors(locationIt, positionIt, colorTheme, colorData) {
     var data = _createColors(locationIt, positionIt, colorTheme, colorData);
@@ -27,27 +26,18 @@ function createColors(locationIt, positionIt, colorTheme, colorData) {
 }
 exports.createColors = createColors;
 function _createColors(locationIt, positionIt, colorTheme, colorData) {
-    switch (geometry_1.Geometry.getGranularity(locationIt, colorTheme.granularity)) {
+    switch (colorTheme.granularity) {
         case 'uniform': return createUniformColor(locationIt, colorTheme.color, colorData);
-        case 'instance': return createInstanceColor(locationIt, colorTheme.color, colorData);
+        case 'instance':
+            return locationIt.nonInstanceable
+                ? createGroupColor(locationIt, colorTheme.color, colorData)
+                : createInstanceColor(locationIt, colorTheme.color, colorData);
         case 'group': return createGroupColor(locationIt, colorTheme.color, colorData);
         case 'groupInstance': return createGroupInstanceColor(locationIt, colorTheme.color, colorData);
         case 'vertex': return createVertexColor(positionIt, colorTheme.color, colorData);
         case 'vertexInstance': return createVertexInstanceColor(positionIt, colorTheme.color, colorData);
-        case 'volume':
-            if (colorTheme.grid) {
-                return createGridColor(colorTheme.grid, 'volume', colorData);
-            }
-            else {
-                throw new Error('Grid missing for "volume" color theme');
-            }
-        case 'volumeInstance':
-            if (colorTheme.grid) {
-                return createGridColor(colorTheme.grid, 'volumeInstance', colorData);
-            }
-            else {
-                throw new Error('Grid missing for "volume" color theme');
-            }
+        case 'volume': return createGridColor(colorTheme.grid, 'volume', colorData);
+        case 'volumeInstance': return createGridColor(colorTheme.grid, 'volumeInstance', colorData);
         case 'direct': return createDirectColor(colorData);
     }
 }

package/lib/commonjs/mol-geo/geometry/cylinders/cylinders.d.ts

@@ -50,8 +50,8 @@ export declare namespace Cylinders {
         quality: PD.Select<"auto" | "medium" | "high" | "low" | "custom" | "highest" | "higher" | "lower" | "lowest">;
         material: PD.Group<PD.Normalize<{
             metalness: number;
-            roughness: number;
             /** Number of cylinders */
+            roughness: number;
             bumpiness: number;
         }>>;
         clip: PD.Group<PD.Normalize<{

package/lib/commonjs/mol-geo/geometry/cylinders/cylinders.js

@@ -156,7 +156,7 @@ var Cylinders;
         var padding = (0, size_data_1.getMaxSize)(size) * props.sizeFactor;
         var invariantBoundingSphere = geometry_1.Sphere3D.clone(cylinders.boundingSphere);
         var boundingSphere = (0, util_2.calculateTransformBoundingSphere)(invariantBoundingSphere, transform.aTransform.ref.value, instanceCount);
-        return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ dGeometryType: mol_util_1.ValueCell.create('cylinders'), aMapping: cylinders.mappingBuffer, aGroup: cylinders.groupBuffer, aStart: cylinders.startBuffer, aEnd: cylinders.endBuffer, aScale: cylinders.scaleBuffer, aCap: cylinders.capBuffer, elements: cylinders.indexBuffer, boundingSphere: mol_util_1.ValueCell.create(boundingSphere), invariantBoundingSphere: mol_util_1.ValueCell.create(invariantBoundingSphere), uInvariantBoundingSphere: mol_util_1.ValueCell.create(linear_algebra_1.Vec4.ofSphere(invariantBoundingSphere)) }, color), size), marker), overpaint), transparency), material), clipping), transform), { padding: mol_util_1.ValueCell.create(padding) }), base_1.BaseGeometry.createValues(props, counts)), { uSizeFactor: mol_util_1.ValueCell.create(props.sizeFactor * props.sizeAspectRatio), uDoubleSided: mol_util_1.ValueCell.create(props.doubleSided), dIgnoreLight: mol_util_1.ValueCell.create(props.ignoreLight), dXrayShaded: mol_util_1.ValueCell.create(props.xrayShaded), dOpaqueBackfaces: mol_util_1.ValueCell.create(props.transparentBackfaces === 'opaque'), uBumpFrequency: mol_util_1.ValueCell.create(props.bumpFrequency), uBumpAmplitude: mol_util_1.ValueCell.create(props.bumpAmplitude) });
+        return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ dGeometryType: mol_util_1.ValueCell.create('cylinders'), aMapping: cylinders.mappingBuffer, aGroup: cylinders.groupBuffer, aStart: cylinders.startBuffer, aEnd: cylinders.endBuffer, aScale: cylinders.scaleBuffer, aCap: cylinders.capBuffer, elements: cylinders.indexBuffer, boundingSphere: mol_util_1.ValueCell.create(boundingSphere), invariantBoundingSphere: mol_util_1.ValueCell.create(invariantBoundingSphere), uInvariantBoundingSphere: mol_util_1.ValueCell.create(linear_algebra_1.Vec4.ofSphere(invariantBoundingSphere)) }, color), size), marker), overpaint), transparency), material), clipping), transform), { padding: mol_util_1.ValueCell.create(padding) }), base_1.BaseGeometry.createValues(props, counts)), { uSizeFactor: mol_util_1.ValueCell.create(props.sizeFactor * props.sizeAspectRatio), uDoubleSided: mol_util_1.ValueCell.create(props.doubleSided), dIgnoreLight: mol_util_1.ValueCell.create(props.ignoreLight), dXrayShaded: mol_util_1.ValueCell.create(props.xrayShaded), dTransparentBackfaces: mol_util_1.ValueCell.create(props.transparentBackfaces), uBumpFrequency: mol_util_1.ValueCell.create(props.bumpFrequency), uBumpAmplitude: mol_util_1.ValueCell.create(props.bumpAmplitude) });
     }
     function createValuesSimple(cylinders, props, colorValue, sizeValue, transform) {
         var s = base_1.BaseGeometry.createSimple(colorValue, sizeValue, transform);
@@ -169,7 +169,7 @@ var Cylinders;
         mol_util_1.ValueCell.updateIfChanged(values.uDoubleSided, props.doubleSided);
         mol_util_1.ValueCell.updateIfChanged(values.dIgnoreLight, props.ignoreLight);
         mol_util_1.ValueCell.updateIfChanged(values.dXrayShaded, props.xrayShaded);
-        mol_util_1.ValueCell.updateIfChanged(values.dOpaqueBackfaces, props.transparentBackfaces === 'opaque');
+        mol_util_1.ValueCell.updateIfChanged(values.dTransparentBackfaces, props.transparentBackfaces);
         mol_util_1.ValueCell.updateIfChanged(values.uBumpFrequency, props.bumpFrequency);
         mol_util_1.ValueCell.updateIfChanged(values.uBumpAmplitude, props.bumpAmplitude);
     }

package/lib/commonjs/mol-geo/geometry/lines/lines.d.ts

@@ -44,6 +44,7 @@ export declare namespace Lines {
         material: PD.Group<PD.Normalize<{
             metalness: number;
             roughness: number;
+            /** Number of lines */
             bumpiness: number;
         }>>;
         clip: PD.Group<PD.Normalize<{

package/lib/commonjs/mol-geo/geometry/mesh/mesh.js

@@ -596,7 +596,7 @@ var Mesh;
         var counts = { drawCount: mesh.triangleCount * 3, vertexCount: mesh.vertexCount, groupCount: groupCount, instanceCount: instanceCount };
         var invariantBoundingSphere = geometry_1.Sphere3D.clone(mesh.boundingSphere);
         var boundingSphere = (0, util_3.calculateTransformBoundingSphere)(invariantBoundingSphere, transform.aTransform.ref.value, instanceCount);
-        return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ dGeometryType: mol_util_1.ValueCell.create('mesh'), aPosition: mesh.vertexBuffer, aNormal: mesh.normalBuffer, aGroup: mesh.groupBuffer, elements: mesh.indexBuffer, boundingSphere: mol_util_1.ValueCell.create(boundingSphere), invariantBoundingSphere: mol_util_1.ValueCell.create(invariantBoundingSphere), uInvariantBoundingSphere: mol_util_1.ValueCell.create(linear_algebra_1.Vec4.ofSphere(invariantBoundingSphere)) }, color), marker), overpaint), transparency), material), clipping), transform), base_1.BaseGeometry.createValues(props, counts)), { uDoubleSided: mol_util_1.ValueCell.create(props.doubleSided), dFlatShaded: mol_util_1.ValueCell.create(props.flatShaded), dFlipSided: mol_util_1.ValueCell.create(props.flipSided), dIgnoreLight: mol_util_1.ValueCell.create(props.ignoreLight), dXrayShaded: mol_util_1.ValueCell.create(props.xrayShaded), dOpaqueBackfaces: mol_util_1.ValueCell.create(props.transparentBackfaces === 'opaque'), uBumpFrequency: mol_util_1.ValueCell.create(props.bumpFrequency), uBumpAmplitude: mol_util_1.ValueCell.create(props.bumpAmplitude), meta: mol_util_1.ValueCell.create(mesh.meta) });
+        return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ dGeometryType: mol_util_1.ValueCell.create('mesh'), aPosition: mesh.vertexBuffer, aNormal: mesh.normalBuffer, aGroup: mesh.groupBuffer, elements: mesh.indexBuffer, boundingSphere: mol_util_1.ValueCell.create(boundingSphere), invariantBoundingSphere: mol_util_1.ValueCell.create(invariantBoundingSphere), uInvariantBoundingSphere: mol_util_1.ValueCell.create(linear_algebra_1.Vec4.ofSphere(invariantBoundingSphere)) }, color), marker), overpaint), transparency), material), clipping), transform), base_1.BaseGeometry.createValues(props, counts)), { uDoubleSided: mol_util_1.ValueCell.create(props.doubleSided), dFlatShaded: mol_util_1.ValueCell.create(props.flatShaded), dFlipSided: mol_util_1.ValueCell.create(props.flipSided), dIgnoreLight: mol_util_1.ValueCell.create(props.ignoreLight), dXrayShaded: mol_util_1.ValueCell.create(props.xrayShaded), dTransparentBackfaces: mol_util_1.ValueCell.create(props.transparentBackfaces), uBumpFrequency: mol_util_1.ValueCell.create(props.bumpFrequency), uBumpAmplitude: mol_util_1.ValueCell.create(props.bumpAmplitude), meta: mol_util_1.ValueCell.create(mesh.meta) });
     }
     function createValuesSimple(mesh, props, colorValue, sizeValue, transform) {
         var s = base_1.BaseGeometry.createSimple(colorValue, sizeValue, transform);
@@ -610,7 +610,7 @@ var Mesh;
         mol_util_1.ValueCell.updateIfChanged(values.dFlipSided, props.flipSided);
         mol_util_1.ValueCell.updateIfChanged(values.dIgnoreLight, props.ignoreLight);
         mol_util_1.ValueCell.updateIfChanged(values.dXrayShaded, props.xrayShaded);
-        mol_util_1.ValueCell.updateIfChanged(values.dOpaqueBackfaces, props.transparentBackfaces === 'opaque');
+        mol_util_1.ValueCell.updateIfChanged(values.dTransparentBackfaces, props.transparentBackfaces);
         mol_util_1.ValueCell.updateIfChanged(values.uBumpFrequency, props.bumpFrequency);
         mol_util_1.ValueCell.updateIfChanged(values.uBumpAmplitude, props.bumpAmplitude);
     }

package/lib/commonjs/mol-geo/geometry/points/points.d.ts

@@ -43,7 +43,7 @@ export declare namespace Points {
         quality: PD.Select<"auto" | "medium" | "high" | "low" | "custom" | "highest" | "higher" | "lower" | "lowest">;
         material: PD.Group<PD.Normalize<{
             metalness: number;
-            roughness: number; /** Number of vertices in the point cloud */
+            roughness: number;
             bumpiness: number;
         }>>;
         clip: PD.Group<PD.Normalize<{

package/lib/commonjs/mol-geo/geometry/spheres/spheres.js

@@ -135,7 +135,7 @@ var Spheres;
         var padding = spheres.boundingSphere.radius ? (0, size_data_1.getMaxSize)(size) * props.sizeFactor : 0;
         var invariantBoundingSphere = geometry_1.Sphere3D.expand((0, geometry_1.Sphere3D)(), spheres.boundingSphere, padding);
         var boundingSphere = (0, util_1.calculateTransformBoundingSphere)(invariantBoundingSphere, transform.aTransform.ref.value, instanceCount);
-        return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ dGeometryType: mol_util_1.ValueCell.create('spheres'), aPosition: spheres.centerBuffer, aMapping: spheres.mappingBuffer, aGroup: spheres.groupBuffer, elements: spheres.indexBuffer, boundingSphere: mol_util_1.ValueCell.create(boundingSphere), invariantBoundingSphere: mol_util_1.ValueCell.create(invariantBoundingSphere), uInvariantBoundingSphere: mol_util_1.ValueCell.create(linear_algebra_1.Vec4.ofSphere(invariantBoundingSphere)) }, color), size), marker), overpaint), transparency), material), clipping), transform), { padding: mol_util_1.ValueCell.create(padding) }), base_1.BaseGeometry.createValues(props, counts)), { uSizeFactor: mol_util_1.ValueCell.create(props.sizeFactor), uDoubleSided: mol_util_1.ValueCell.create(props.doubleSided), dIgnoreLight: mol_util_1.ValueCell.create(props.ignoreLight), dXrayShaded: mol_util_1.ValueCell.create(props.xrayShaded), dOpaqueBackfaces: mol_util_1.ValueCell.create(props.transparentBackfaces === 'opaque'), uBumpFrequency: mol_util_1.ValueCell.create(props.bumpFrequency), uBumpAmplitude: mol_util_1.ValueCell.create(props.bumpAmplitude) });
+        return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ dGeometryType: mol_util_1.ValueCell.create('spheres'), aPosition: spheres.centerBuffer, aMapping: spheres.mappingBuffer, aGroup: spheres.groupBuffer, elements: spheres.indexBuffer, boundingSphere: mol_util_1.ValueCell.create(boundingSphere), invariantBoundingSphere: mol_util_1.ValueCell.create(invariantBoundingSphere), uInvariantBoundingSphere: mol_util_1.ValueCell.create(linear_algebra_1.Vec4.ofSphere(invariantBoundingSphere)) }, color), size), marker), overpaint), transparency), material), clipping), transform), { padding: mol_util_1.ValueCell.create(padding) }), base_1.BaseGeometry.createValues(props, counts)), { uSizeFactor: mol_util_1.ValueCell.create(props.sizeFactor), uDoubleSided: mol_util_1.ValueCell.create(props.doubleSided), dIgnoreLight: mol_util_1.ValueCell.create(props.ignoreLight), dXrayShaded: mol_util_1.ValueCell.create(props.xrayShaded), dTransparentBackfaces: mol_util_1.ValueCell.create(props.transparentBackfaces), uBumpFrequency: mol_util_1.ValueCell.create(props.bumpFrequency), uBumpAmplitude: mol_util_1.ValueCell.create(props.bumpAmplitude) });
     }
     function createValuesSimple(spheres, props, colorValue, sizeValue, transform) {
         var s = base_1.BaseGeometry.createSimple(colorValue, sizeValue, transform);
@@ -148,7 +148,7 @@ var Spheres;
         mol_util_1.ValueCell.updateIfChanged(values.uDoubleSided, props.doubleSided);
         mol_util_1.ValueCell.updateIfChanged(values.dIgnoreLight, props.ignoreLight);
         mol_util_1.ValueCell.updateIfChanged(values.dXrayShaded, props.xrayShaded);
-        mol_util_1.ValueCell.updateIfChanged(values.dOpaqueBackfaces, props.transparentBackfaces === 'opaque');
+        mol_util_1.ValueCell.updateIfChanged(values.dTransparentBackfaces, props.transparentBackfaces);
         mol_util_1.ValueCell.updateIfChanged(values.uBumpFrequency, props.bumpFrequency);
         mol_util_1.ValueCell.updateIfChanged(values.uBumpAmplitude, props.bumpAmplitude);
     }

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

@@ -113,7 +113,7 @@ var TextureMesh;
         var counts = { drawCount: textureMesh.vertexCount, vertexCount: textureMesh.vertexCount, groupCount: groupCount, instanceCount: instanceCount };
         var invariantBoundingSphere = geometry_1.Sphere3D.clone(textureMesh.boundingSphere);
         var boundingSphere = (0, util_1.calculateTransformBoundingSphere)(invariantBoundingSphere, transform.aTransform.ref.value, instanceCount);
-        return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ dGeometryType: mol_util_1.ValueCell.create('textureMesh'), uGeoTexDim: textureMesh.geoTextureDim, tPosition: textureMesh.vertexTexture, tGroup: textureMesh.groupTexture, tNormal: textureMesh.normalTexture, boundingSphere: mol_util_1.ValueCell.create(boundingSphere), invariantBoundingSphere: mol_util_1.ValueCell.create(invariantBoundingSphere), uInvariantBoundingSphere: mol_util_1.ValueCell.create(linear_algebra_1.Vec4.ofSphere(invariantBoundingSphere)) }, color), marker), overpaint), transparency), substance), clipping), transform), base_1.BaseGeometry.createValues(props, counts)), { uDoubleSided: mol_util_1.ValueCell.create(props.doubleSided), dFlatShaded: mol_util_1.ValueCell.create(props.flatShaded), dFlipSided: mol_util_1.ValueCell.create(props.flipSided), dIgnoreLight: mol_util_1.ValueCell.create(props.ignoreLight), dXrayShaded: mol_util_1.ValueCell.create(props.xrayShaded), dOpaqueBackfaces: mol_util_1.ValueCell.create(props.transparentBackfaces === 'opaque'), uBumpFrequency: mol_util_1.ValueCell.create(props.bumpFrequency), uBumpAmplitude: mol_util_1.ValueCell.create(props.bumpAmplitude), meta: mol_util_1.ValueCell.create(textureMesh.meta) });
+        return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ dGeometryType: mol_util_1.ValueCell.create('textureMesh'), uGeoTexDim: textureMesh.geoTextureDim, tPosition: textureMesh.vertexTexture, tGroup: textureMesh.groupTexture, tNormal: textureMesh.normalTexture, boundingSphere: mol_util_1.ValueCell.create(boundingSphere), invariantBoundingSphere: mol_util_1.ValueCell.create(invariantBoundingSphere), uInvariantBoundingSphere: mol_util_1.ValueCell.create(linear_algebra_1.Vec4.ofSphere(invariantBoundingSphere)) }, color), marker), overpaint), transparency), substance), clipping), transform), base_1.BaseGeometry.createValues(props, counts)), { uDoubleSided: mol_util_1.ValueCell.create(props.doubleSided), dFlatShaded: mol_util_1.ValueCell.create(props.flatShaded), dFlipSided: mol_util_1.ValueCell.create(props.flipSided), dIgnoreLight: mol_util_1.ValueCell.create(props.ignoreLight), dXrayShaded: mol_util_1.ValueCell.create(props.xrayShaded), dTransparentBackfaces: mol_util_1.ValueCell.create(props.transparentBackfaces), uBumpFrequency: mol_util_1.ValueCell.create(props.bumpFrequency), uBumpAmplitude: mol_util_1.ValueCell.create(props.bumpAmplitude), meta: mol_util_1.ValueCell.create(textureMesh.meta) });
     }
     function createValuesSimple(textureMesh, props, colorValue, sizeValue, transform) {
         var s = base_1.BaseGeometry.createSimple(colorValue, sizeValue, transform);
@@ -127,7 +127,7 @@ var TextureMesh;
         mol_util_1.ValueCell.updateIfChanged(values.dFlipSided, props.flipSided);
         mol_util_1.ValueCell.updateIfChanged(values.dIgnoreLight, props.ignoreLight);
         mol_util_1.ValueCell.updateIfChanged(values.dXrayShaded, props.xrayShaded);
-        mol_util_1.ValueCell.updateIfChanged(values.dOpaqueBackfaces, props.transparentBackfaces === 'opaque');
+        mol_util_1.ValueCell.updateIfChanged(values.dTransparentBackfaces, props.transparentBackfaces);
         mol_util_1.ValueCell.updateIfChanged(values.uBumpFrequency, props.bumpFrequency);
         mol_util_1.ValueCell.updateIfChanged(values.uBumpAmplitude, props.bumpAmplitude);
     }

package/lib/commonjs/mol-geo/geometry/transparency-data.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-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

@@ -19,7 +19,7 @@ export declare const CylindersSchema: {
     uDoubleSided: UniformSpec<"b">;
     dIgnoreLight: DefineSpec<"boolean">;
     dXrayShaded: DefineSpec<"boolean">;
-    dOpaqueBackfaces: DefineSpec<"boolean">;
+    dTransparentBackfaces: DefineSpec<"string">;
     uBumpFrequency: UniformSpec<"f">;
     uBumpAmplitude: UniformSpec<"f">;
     uSize: UniformSpec<"f">;