molstar 3.7.0 → 3.8.0

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

@@ -21,9 +21,11 @@ import { postprocessing_frag } from '../../mol-gl/shader/postprocessing.frag';
 import { Color } from '../../mol-util/color';
 import { FxaaParams, FxaaPass } from './fxaa';
 import { SmaaParams, SmaaPass } from './smaa';
-var OutlinesSchema = __assign(__assign({}, QuadSchema), { tDepth: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'), uTexSize: UniformSpec('v2'), dOrthographic: DefineSpec('number'), uNear: UniformSpec('f'), uFar: UniformSpec('f'), uMaxPossibleViewZDiff: UniformSpec('f') });
-function getOutlinesRenderable(ctx, depthTexture) {
-    var values = __assign(__assign({}, QuadValues), { tDepth: ValueCell.create(depthTexture), uTexSize: ValueCell.create(Vec2.create(depthTexture.getWidth(), depthTexture.getHeight())), dOrthographic: ValueCell.create(0), uNear: ValueCell.create(1), uFar: ValueCell.create(10000), uMaxPossibleViewZDiff: ValueCell.create(0.5) });
+var OutlinesSchema = __assign(__assign({}, QuadSchema), { tDepthOpaque: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'), tDepthTransparent: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'), uTexSize: UniformSpec('v2'), dOrthographic: DefineSpec('number'), uNear: UniformSpec('f'), uFar: UniformSpec('f'), uMaxPossibleViewZDiff: UniformSpec('f') });
+function getOutlinesRenderable(ctx, depthTextureOpaque, depthTextureTransparent) {
+    var width = depthTextureOpaque.getWidth();
+    var height = depthTextureOpaque.getHeight();
+    var values = __assign(__assign({}, QuadValues), { tDepthOpaque: ValueCell.create(depthTextureOpaque), tDepthTransparent: ValueCell.create(depthTextureTransparent), uTexSize: ValueCell.create(Vec2.create(width, height)), dOrthographic: ValueCell.create(0), uNear: ValueCell.create(1), uFar: ValueCell.create(10000), uMaxPossibleViewZDiff: ValueCell.create(0.5) });
     var schema = __assign({}, OutlinesSchema);
     var shaderCode = ShaderCode('outlines', quad_vert, outlines_frag);
     var renderItem = createComputeRenderItem(ctx, 'triangles', shaderCode, schema, values);
@@ -65,9 +67,9 @@ function getSamples(vectorSamples, nSamples) {
     }
     return samples;
 }
-var PostprocessingSchema = __assign(__assign({}, QuadSchema), { tSsaoDepth: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'), tColor: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'), tDepth: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'), tOutlines: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'), uTexSize: UniformSpec('v2'), dOrthographic: DefineSpec('number'), uNear: UniformSpec('f'), uFar: UniformSpec('f'), uFogNear: UniformSpec('f'), uFogFar: UniformSpec('f'), uFogColor: UniformSpec('v3'), uOutlineColor: UniformSpec('v3'), uTransparentBackground: UniformSpec('b'), uMaxPossibleViewZDiff: UniformSpec('f'), dOcclusionEnable: DefineSpec('boolean'), uOcclusionOffset: UniformSpec('v2'), dOutlineEnable: DefineSpec('boolean'), dOutlineScale: DefineSpec('number'), uOutlineThreshold: UniformSpec('f') });
-function getPostprocessingRenderable(ctx, colorTexture, depthTexture, outlinesTexture, ssaoDepthTexture) {
-    var values = __assign(__assign({}, QuadValues), { tSsaoDepth: ValueCell.create(ssaoDepthTexture), tColor: ValueCell.create(colorTexture), tDepth: ValueCell.create(depthTexture), tOutlines: ValueCell.create(outlinesTexture), uTexSize: ValueCell.create(Vec2.create(colorTexture.getWidth(), colorTexture.getHeight())), dOrthographic: ValueCell.create(0), uNear: ValueCell.create(1), uFar: ValueCell.create(10000), uFogNear: ValueCell.create(10000), uFogFar: ValueCell.create(10000), uFogColor: ValueCell.create(Vec3.create(1, 1, 1)), uOutlineColor: ValueCell.create(Vec3.create(0, 0, 0)), uTransparentBackground: ValueCell.create(false), uMaxPossibleViewZDiff: ValueCell.create(0.5), dOcclusionEnable: ValueCell.create(true), uOcclusionOffset: ValueCell.create(Vec2.create(0, 0)), dOutlineEnable: ValueCell.create(false), dOutlineScale: ValueCell.create(1), uOutlineThreshold: ValueCell.create(0.33) });
+var PostprocessingSchema = __assign(__assign({}, QuadSchema), { tSsaoDepth: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'), tColor: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'), tDepthOpaque: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'), tDepthTransparent: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'), tOutlines: TextureSpec('texture', 'rgba', 'ubyte', 'nearest'), uTexSize: UniformSpec('v2'), dOrthographic: DefineSpec('number'), uNear: UniformSpec('f'), uFar: UniformSpec('f'), uFogNear: UniformSpec('f'), uFogFar: UniformSpec('f'), uFogColor: UniformSpec('v3'), uOutlineColor: UniformSpec('v3'), uTransparentBackground: UniformSpec('b'), uMaxPossibleViewZDiff: UniformSpec('f'), dOcclusionEnable: DefineSpec('boolean'), uOcclusionOffset: UniformSpec('v2'), dOutlineEnable: DefineSpec('boolean'), dOutlineScale: DefineSpec('number'), uOutlineThreshold: UniformSpec('f') });
+function getPostprocessingRenderable(ctx, colorTexture, depthTextureOpaque, depthTextureTransparent, outlinesTexture, ssaoDepthTexture) {
+    var values = __assign(__assign({}, QuadValues), { tSsaoDepth: ValueCell.create(ssaoDepthTexture), tColor: ValueCell.create(colorTexture), tDepthOpaque: ValueCell.create(depthTextureOpaque), tDepthTransparent: ValueCell.create(depthTextureTransparent), tOutlines: ValueCell.create(outlinesTexture), uTexSize: ValueCell.create(Vec2.create(colorTexture.getWidth(), colorTexture.getHeight())), dOrthographic: ValueCell.create(0), uNear: ValueCell.create(1), uFar: ValueCell.create(10000), uFogNear: ValueCell.create(10000), uFogFar: ValueCell.create(10000), uFogColor: ValueCell.create(Vec3.create(1, 1, 1)), uOutlineColor: ValueCell.create(Vec3.create(0, 0, 0)), uTransparentBackground: ValueCell.create(false), uMaxPossibleViewZDiff: ValueCell.create(0.5), dOcclusionEnable: ValueCell.create(true), uOcclusionOffset: ValueCell.create(Vec2.create(0, 0)), dOutlineEnable: ValueCell.create(false), dOutlineScale: ValueCell.create(1), uOutlineThreshold: ValueCell.create(0.33) });
     var schema = __assign({}, PostprocessingSchema);
     var shaderCode = ShaderCode('postprocessing', quad_vert, postprocessing_frag);
     var renderItem = createComputeRenderItem(ctx, 'triangles', shaderCode, schema, values);
@@ -103,7 +105,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.depthTexture, depthTextureOpaque = drawPass.depthTexturePrimitives;
         var width = colorTarget.getWidth();
         var height = colorTarget.getHeight();
         this.nSamples = 1;
@@ -113,7 +115,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 = Vec3();
@@ -130,7 +132,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 = createCopyRenderable(webgl, depthTexture);
+        this.downsampleDepthRenderable = createCopyRenderable(webgl, depthTextureOpaque);
         this.ssaoDepthTexture = webgl.resources.texture('image-uint8', 'rgba', 'ubyte', 'linear');
         this.ssaoDepthTexture.define(sw, sh);
         this.ssaoDepthTexture.attachFramebuffer(this.ssaoFramebuffer, 'color0');
@@ -138,14 +140,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;

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

@@ -9,7 +9,6 @@ import { createTextureImage } from '../../mol-gl/renderable/util';
 import { Color } from '../../mol-util/color';
 import { Vec2, Vec3, Vec4 } from '../../mol-math/linear-algebra';
 import { NullLocation } from '../../mol-model/location';
-import { Geometry } from './geometry';
 import { createNullTexture } from '../../mol-gl/webgl/texture';
 export function createColors(locationIt, positionIt, colorTheme, colorData) {
     var data = _createColors(locationIt, positionIt, colorTheme, colorData);
@@ -23,27 +22,18 @@ export function createColors(locationIt, positionIt, colorTheme, colorData) {
     return data;
 }
 function _createColors(locationIt, positionIt, colorTheme, colorData) {
-    switch (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
+                ? createInstanceColor(locationIt, colorTheme.color, colorData)
+                : createGroupColor(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/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/mol-geo/geometry/cylinders/cylinders.js

@@ -153,7 +153,7 @@ export var Cylinders;
         var padding = getMaxSize(size) * props.sizeFactor;
         var invariantBoundingSphere = Sphere3D.clone(cylinders.boundingSphere);
         var boundingSphere = calculateTransformBoundingSphere(invariantBoundingSphere, transform.aTransform.ref.value, instanceCount);
-        return __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({ dGeometryType: 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: ValueCell.create(boundingSphere), invariantBoundingSphere: ValueCell.create(invariantBoundingSphere), uInvariantBoundingSphere: ValueCell.create(Vec4.ofSphere(invariantBoundingSphere)) }, color), size), marker), overpaint), transparency), material), clipping), transform), { padding: ValueCell.create(padding) }), BaseGeometry.createValues(props, counts)), { uSizeFactor: ValueCell.create(props.sizeFactor * props.sizeAspectRatio), uDoubleSided: ValueCell.create(props.doubleSided), dIgnoreLight: ValueCell.create(props.ignoreLight), dXrayShaded: ValueCell.create(props.xrayShaded), dOpaqueBackfaces: ValueCell.create(props.transparentBackfaces === 'opaque'), uBumpFrequency: ValueCell.create(props.bumpFrequency), uBumpAmplitude: ValueCell.create(props.bumpAmplitude) });
+        return __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({ dGeometryType: 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: ValueCell.create(boundingSphere), invariantBoundingSphere: ValueCell.create(invariantBoundingSphere), uInvariantBoundingSphere: ValueCell.create(Vec4.ofSphere(invariantBoundingSphere)) }, color), size), marker), overpaint), transparency), material), clipping), transform), { padding: ValueCell.create(padding) }), BaseGeometry.createValues(props, counts)), { uSizeFactor: ValueCell.create(props.sizeFactor * props.sizeAspectRatio), uDoubleSided: ValueCell.create(props.doubleSided), dIgnoreLight: ValueCell.create(props.ignoreLight), dXrayShaded: ValueCell.create(props.xrayShaded), dTransparentBackfaces: ValueCell.create(props.transparentBackfaces), uBumpFrequency: ValueCell.create(props.bumpFrequency), uBumpAmplitude: ValueCell.create(props.bumpAmplitude) });
     }
     function createValuesSimple(cylinders, props, colorValue, sizeValue, transform) {
         var s = BaseGeometry.createSimple(colorValue, sizeValue, transform);
@@ -166,7 +166,7 @@ export var Cylinders;
         ValueCell.updateIfChanged(values.uDoubleSided, props.doubleSided);
         ValueCell.updateIfChanged(values.dIgnoreLight, props.ignoreLight);
         ValueCell.updateIfChanged(values.dXrayShaded, props.xrayShaded);
-        ValueCell.updateIfChanged(values.dOpaqueBackfaces, props.transparentBackfaces === 'opaque');
+        ValueCell.updateIfChanged(values.dTransparentBackfaces, props.transparentBackfaces);
         ValueCell.updateIfChanged(values.uBumpFrequency, props.bumpFrequency);
         ValueCell.updateIfChanged(values.uBumpAmplitude, props.bumpAmplitude);
     }

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

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

package/lib/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/mol-geo/geometry/spheres/spheres.js

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

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

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

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

@@ -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>
  */
@@ -14,6 +14,8 @@ export function applyTransparencyValue(array, start, end, value) {
     return true;
 }
 export 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/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">;

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

@@ -9,7 +9,7 @@ import { createGraphicsRenderItem } from '../webgl/render-item';
 import { GlobalUniformSchema, BaseSchema, AttributeSpec, InternalSchema, SizeSchema, ElementsSpec, ValueSpec, DefineSpec, GlobalTextureSchema, UniformSpec } from './schema';
 import { CylindersShaderCode } from '../shader-code';
 import { ValueCell } from '../../mol-util';
-export var CylindersSchema = __assign(__assign(__assign({}, BaseSchema), SizeSchema), { aGroup: AttributeSpec('float32', 1, 0), aStart: AttributeSpec('float32', 3, 0), aEnd: AttributeSpec('float32', 3, 0), aMapping: AttributeSpec('float32', 3, 0), aScale: AttributeSpec('float32', 1, 0), aCap: AttributeSpec('float32', 1, 0), elements: ElementsSpec('uint32'), padding: ValueSpec('number'), uDoubleSided: UniformSpec('b'), dIgnoreLight: DefineSpec('boolean'), dXrayShaded: DefineSpec('boolean'), dOpaqueBackfaces: DefineSpec('boolean'), uBumpFrequency: UniformSpec('f'), uBumpAmplitude: UniformSpec('f') });
+export var CylindersSchema = __assign(__assign(__assign({}, BaseSchema), SizeSchema), { aGroup: AttributeSpec('float32', 1, 0), aStart: AttributeSpec('float32', 3, 0), aEnd: AttributeSpec('float32', 3, 0), aMapping: AttributeSpec('float32', 3, 0), aScale: AttributeSpec('float32', 1, 0), aCap: AttributeSpec('float32', 1, 0), elements: ElementsSpec('uint32'), padding: ValueSpec('number'), uDoubleSided: UniformSpec('b'), dIgnoreLight: DefineSpec('boolean'), dXrayShaded: DefineSpec('boolean'), dTransparentBackfaces: DefineSpec('string', ['off', 'on', 'opaque']), uBumpFrequency: UniformSpec('f'), uBumpAmplitude: UniformSpec('f') });
 export function CylindersRenderable(ctx, id, values, state, materialId, variants) {
     var schema = __assign(__assign(__assign(__assign({}, GlobalUniformSchema), GlobalTextureSchema), InternalSchema), CylindersSchema);
     var internalValues = {

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

@@ -17,7 +17,7 @@ export declare const MeshSchema: {
     readonly dFlipSided: DefineSpec<"boolean">;
     readonly dIgnoreLight: DefineSpec<"boolean">;
     readonly dXrayShaded: DefineSpec<"boolean">;
-    readonly dOpaqueBackfaces: DefineSpec<"boolean">;
+    readonly dTransparentBackfaces: DefineSpec<"string">;
     readonly uBumpFrequency: UniformSpec<"f">;
     readonly uBumpAmplitude: UniformSpec<"f">;
     readonly meta: ValueSpec<"unknown">;

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

@@ -9,7 +9,7 @@ import { createGraphicsRenderItem } from '../webgl/render-item';
 import { GlobalUniformSchema, BaseSchema, AttributeSpec, ElementsSpec, DefineSpec, InternalSchema, GlobalTextureSchema, ValueSpec, UniformSpec } from './schema';
 import { MeshShaderCode } from '../shader-code';
 import { ValueCell } from '../../mol-util';
-export var MeshSchema = __assign(__assign({}, BaseSchema), { aGroup: AttributeSpec('float32', 1, 0), aPosition: AttributeSpec('float32', 3, 0), aNormal: AttributeSpec('float32', 3, 0), elements: ElementsSpec('uint32'), dFlatShaded: DefineSpec('boolean'), uDoubleSided: UniformSpec('b'), dFlipSided: DefineSpec('boolean'), dIgnoreLight: DefineSpec('boolean'), dXrayShaded: DefineSpec('boolean'), dOpaqueBackfaces: DefineSpec('boolean'), uBumpFrequency: UniformSpec('f'), uBumpAmplitude: UniformSpec('f'), meta: ValueSpec('unknown') });
+export var MeshSchema = __assign(__assign({}, BaseSchema), { aGroup: AttributeSpec('float32', 1, 0), aPosition: AttributeSpec('float32', 3, 0), aNormal: AttributeSpec('float32', 3, 0), elements: ElementsSpec('uint32'), dFlatShaded: DefineSpec('boolean'), uDoubleSided: UniformSpec('b'), dFlipSided: DefineSpec('boolean'), dIgnoreLight: DefineSpec('boolean'), dXrayShaded: DefineSpec('boolean'), dTransparentBackfaces: DefineSpec('string', ['off', 'on', 'opaque']), uBumpFrequency: UniformSpec('f'), uBumpAmplitude: UniformSpec('f'), meta: ValueSpec('unknown') });
 export function MeshRenderable(ctx, id, values, state, materialId, variants) {
     var schema = __assign(__assign(__assign(__assign({}, GlobalUniformSchema), GlobalTextureSchema), InternalSchema), MeshSchema);
     var internalValues = {

package/lib/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/mol-gl/renderable/schema.js

@@ -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>
  */
@@ -94,7 +94,7 @@ export var 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/mol-gl/renderable/spheres.d.ts

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

package/lib/mol-gl/renderable/spheres.js

@@ -9,7 +9,7 @@ import { createGraphicsRenderItem } from '../webgl/render-item';
 import { GlobalUniformSchema, BaseSchema, AttributeSpec, InternalSchema, SizeSchema, ElementsSpec, ValueSpec, DefineSpec, GlobalTextureSchema, UniformSpec } from './schema';
 import { SpheresShaderCode } from '../shader-code';
 import { ValueCell } from '../../mol-util';
-export var SpheresSchema = __assign(__assign(__assign({}, BaseSchema), SizeSchema), { aGroup: AttributeSpec('float32', 1, 0), aPosition: AttributeSpec('float32', 3, 0), aMapping: AttributeSpec('float32', 2, 0), elements: ElementsSpec('uint32'), padding: ValueSpec('number'), uDoubleSided: UniformSpec('b'), dIgnoreLight: DefineSpec('boolean'), dXrayShaded: DefineSpec('boolean'), dOpaqueBackfaces: DefineSpec('boolean'), uBumpFrequency: UniformSpec('f'), uBumpAmplitude: UniformSpec('f') });
+export var SpheresSchema = __assign(__assign(__assign({}, BaseSchema), SizeSchema), { aGroup: AttributeSpec('float32', 1, 0), aPosition: AttributeSpec('float32', 3, 0), aMapping: AttributeSpec('float32', 2, 0), elements: ElementsSpec('uint32'), padding: ValueSpec('number'), uDoubleSided: UniformSpec('b'), dIgnoreLight: DefineSpec('boolean'), dXrayShaded: DefineSpec('boolean'), dTransparentBackfaces: DefineSpec('string', ['off', 'on', 'opaque']), uBumpFrequency: UniformSpec('f'), uBumpAmplitude: UniformSpec('f') });
 export function SpheresRenderable(ctx, id, values, state, materialId, variants) {
     var schema = __assign(__assign(__assign(__assign({}, GlobalUniformSchema), GlobalTextureSchema), InternalSchema), SpheresSchema);
     var internalValues = {

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

@@ -17,7 +17,7 @@ export declare const TextureMeshSchema: {
     dFlipSided: DefineSpec<"boolean">;
     dIgnoreLight: DefineSpec<"boolean">;
     dXrayShaded: DefineSpec<"boolean">;
-    dOpaqueBackfaces: DefineSpec<"boolean">;
+    dTransparentBackfaces: DefineSpec<"string">;
     uBumpFrequency: UniformSpec<"f">;
     uBumpAmplitude: UniformSpec<"f">;
     meta: ValueSpec<"unknown">;

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

@@ -9,7 +9,7 @@ import { createGraphicsRenderItem } from '../webgl/render-item';
 import { GlobalUniformSchema, BaseSchema, DefineSpec, InternalSchema, UniformSpec, TextureSpec, GlobalTextureSchema, ValueSpec } from './schema';
 import { MeshShaderCode } from '../shader-code';
 import { ValueCell } from '../../mol-util';
-export var TextureMeshSchema = __assign(__assign({}, BaseSchema), { uGeoTexDim: UniformSpec('v2', 'buffered'), tPosition: TextureSpec('texture', 'rgb', 'float', 'nearest'), tGroup: TextureSpec('texture', 'alpha', 'float', 'nearest'), tNormal: TextureSpec('texture', 'rgb', 'float', 'nearest'), dFlatShaded: DefineSpec('boolean'), uDoubleSided: UniformSpec('b'), dFlipSided: DefineSpec('boolean'), dIgnoreLight: DefineSpec('boolean'), dXrayShaded: DefineSpec('boolean'), dOpaqueBackfaces: DefineSpec('boolean'), uBumpFrequency: UniformSpec('f'), uBumpAmplitude: UniformSpec('f'), meta: ValueSpec('unknown') });
+export var TextureMeshSchema = __assign(__assign({}, BaseSchema), { uGeoTexDim: UniformSpec('v2', 'buffered'), tPosition: TextureSpec('texture', 'rgb', 'float', 'nearest'), tGroup: TextureSpec('texture', 'alpha', 'float', 'nearest'), tNormal: TextureSpec('texture', 'rgb', 'float', 'nearest'), dFlatShaded: DefineSpec('boolean'), uDoubleSided: UniformSpec('b'), dFlipSided: DefineSpec('boolean'), dIgnoreLight: DefineSpec('boolean'), dXrayShaded: DefineSpec('boolean'), dTransparentBackfaces: DefineSpec('string', ['off', 'on', 'opaque']), uBumpFrequency: UniformSpec('f'), uBumpAmplitude: UniformSpec('f'), meta: ValueSpec('unknown') });
 export function TextureMeshRenderable(ctx, id, values, state, materialId, variants) {
     var schema = __assign(__assign(__assign(__assign({}, GlobalUniformSchema), GlobalTextureSchema), InternalSchema), TextureMeshSchema);
     var internalValues = {

package/lib/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;