molstar 3.0.0-dev.6 → 3.0.0-dev.7

package/lib/commonjs/mol-repr/volume/representation.d.ts

@@ -43,6 +43,16 @@ export declare const VolumeParams: {
         roughness: number;
         bumpiness: number;
     }>>;
+    clip: PD.Group<PD.Normalize<{
+        variant: import("../../mol-util/clip").Clip.Variant;
+        objects: PD.Normalize<{
+            type: any;
+            invert: any;
+            position: any;
+            rotation: any;
+            scale: any;
+        }>[];
+    }>>;
 };
 export declare type VolumeParams = typeof VolumeParams;
 export declare function VolumeRepresentation<P extends VolumeParams>(label: string, ctx: RepresentationContext, getParams: RepresentationParamsGetter<Volume, P>, visualCtor: (materialId: number, volume: Volume, props: PD.Values<P>, webgl?: WebGLContext) => VolumeVisual<P>, getLoci: (volume: Volume, props: PD.Values<P>) => Loci): VolumeRepresentation<P>;

package/lib/commonjs/mol-repr/volume/slice.d.ts

@@ -65,6 +65,16 @@ export declare const SliceParams: {
         roughness: number;
         bumpiness: number;
     }>>;
+    clip: PD.Group<PD.Normalize<{
+        variant: import("../../mol-util/clip").Clip.Variant;
+        objects: PD.Normalize<{
+            type: any;
+            invert: any;
+            position: any;
+            rotation: any;
+            scale: any;
+        }>[];
+    }>>;
 };
 export declare type SliceParams = typeof SliceParams;
 export declare function getSliceParams(ctx: ThemeRegistryContext, volume: Volume): {
@@ -121,6 +131,16 @@ export declare function getSliceParams(ctx: ThemeRegistryContext, volume: Volume
         roughness: number;
         bumpiness: number;
     }>>;
+    clip: PD.Group<PD.Normalize<{
+        variant: import("../../mol-util/clip").Clip.Variant;
+        objects: PD.Normalize<{
+            type: any;
+            invert: any;
+            position: any;
+            rotation: any;
+            scale: any;
+        }>[];
+    }>>;
 };
 export declare function SliceVisual(materialId: number): VolumeVisual<SliceParams>;
 export declare function SliceRepresentation(ctx: RepresentationContext, getParams: RepresentationParamsGetter<Volume, SliceParams>): VolumeRepresentation<SliceParams>;
@@ -178,4 +198,14 @@ export declare const SliceRepresentationProvider: VolumeRepresentationProvider<{
         roughness: number;
         bumpiness: number;
     }>>;
+    clip: PD.Group<PD.Normalize<{
+        variant: import("../../mol-util/clip").Clip.Variant;
+        objects: PD.Normalize<{
+            type: any;
+            invert: any;
+            position: any;
+            rotation: any;
+            scale: any;
+        }>[];
+    }>>;
 }, "slice">;

package/lib/commonjs/mol-theme/clipping.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2020-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
@@ -10,7 +10,7 @@ export { Clipping };
 declare type Clipping = {
     readonly layers: ReadonlyArray<Clipping.Layer>;
 };
-declare function Clipping(layers: ReadonlyArray<Clipping.Layer>): Clipping;
+declare function Clipping(layers: Clipping['layers']): Clipping;
 declare namespace Clipping {
     type Layer = {
         readonly loci: StructureElement.Loci;
@@ -44,22 +44,14 @@ declare namespace Clipping {
         function fromNames(names: Names[]): Flag;
         function toNames(groups: Groups): Names[];
     }
-    /** Clip object types */
-    const Type: {
-        none: number;
-        plane: number;
-        sphere: number;
-        cube: number;
-        cylinder: number;
-        infiniteCone: number;
-    };
-    type Variant = 'instance' | 'pixel';
     function areEqual(cA: Clipping, cB: Clipping): boolean;
+    /** Check if layers empty */
     function isEmpty(clipping: Clipping): boolean;
-    function remap(clipping: Clipping, structure: Structure): {
-        layers: Layer[];
-    };
+    /** Remap layers */
+    function remap(clipping: Clipping, structure: Structure): Clipping;
+    /** Merge layers */
     function merge(clipping: Clipping): Clipping;
+    /** Filter layers */
     function filter(clipping: Clipping, filter: Structure): Clipping;
     type ScriptLayer = {
         script: Script;

package/lib/commonjs/mol-theme/clipping.js

@@ -1,6 +1,6 @@
 "use strict";
 /**
- * Copyright (c) 2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2020-2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
@@ -72,18 +72,7 @@ exports.Clipping = Clipping;
         }
         Groups.toNames = toNames;
     })(Groups = Clipping.Groups || (Clipping.Groups = {}));
-    /** Clip object types */
-    Clipping.Type = {
-        none: 0,
-        plane: 1,
-        sphere: 2,
-        cube: 3,
-        cylinder: 4,
-        infiniteCone: 5,
-    };
     function areEqual(cA, cB) {
-        if (cA.layers.length === 0 && cB.layers.length === 0)
-            return true;
         if (cA.layers.length !== cB.layers.length)
             return false;
         for (var i = 0, il = cA.layers.length; i < il; ++i) {
@@ -95,10 +84,12 @@ exports.Clipping = Clipping;
         return true;
     }
     Clipping.areEqual = areEqual;
+    /** Check if layers empty */
     function isEmpty(clipping) {
         return clipping.layers.length === 0;
     }
     Clipping.isEmpty = isEmpty;
+    /** Remap layers */
     function remap(clipping, structure) {
         var layers = [];
         for (var _i = 0, _a = clipping.layers; _i < _a.length; _i++) {
@@ -112,6 +103,7 @@ exports.Clipping = Clipping;
         return { layers: layers };
     }
     Clipping.remap = remap;
+    /** Merge layers */
     function merge(clipping) {
         if (isEmpty(clipping))
             return clipping;
@@ -136,6 +128,7 @@ exports.Clipping = Clipping;
         return { layers: layers };
     }
     Clipping.merge = merge;
+    /** Filter layers */
     function filter(clipping, filter) {
         if (isEmpty(clipping))
             return clipping;

package/lib/commonjs/mol-util/clip.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) 2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+import { Vec3 } from '../mol-math/linear-algebra';
+import { ParamDefinition as PD } from './param-definition';
+export interface Clip {
+    variant: Clip.Variant;
+    objects: Clip.Objects;
+}
+export declare function Clip(): void;
+export declare namespace Clip {
+    /** Clip object types */
+    const Type: {
+        none: number;
+        plane: number;
+        sphere: number;
+        cube: number;
+        cylinder: number;
+        infiniteCone: number;
+    };
+    type Variant = 'instance' | 'pixel';
+    type Objects = {
+        count: number;
+        type: number[];
+        invert: boolean[];
+        position: number[];
+        rotation: number[];
+        scale: number[];
+    };
+    const Params: {
+        variant: PD.Select<Variant>;
+        objects: PD.ObjectList<PD.Normalize<{
+            type: "none" | "sphere" | "cube" | "plane" | "cylinder" | "infiniteCone";
+            invert: boolean;
+            position: Vec3;
+            rotation: PD.Normalize<{
+                axis: any;
+                angle: any;
+            }>;
+            scale: Vec3;
+        }>>;
+    };
+    type Params = typeof Params;
+    type Props = PD.Values<Params>;
+    function getClip(props: Props, clip?: Clip): Clip;
+    function areEqual(cA: Clip, cB: Clip): boolean;
+}

package/lib/commonjs/mol-util/clip.js

@@ -0,0 +1,97 @@
+"use strict";
+/**
+ * Copyright (c) 2021 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Clip = void 0;
+var linear_algebra_1 = require("../mol-math/linear-algebra");
+var misc_1 = require("../mol-math/misc");
+var param_definition_1 = require("./param-definition");
+var string_1 = require("./string");
+function Clip() {
+}
+exports.Clip = Clip;
+(function (Clip) {
+    /** Clip object types */
+    Clip.Type = {
+        none: 0,
+        plane: 1,
+        sphere: 2,
+        cube: 3,
+        cylinder: 4,
+        infiniteCone: 5,
+    };
+    Clip.Params = {
+        variant: param_definition_1.ParamDefinition.Select('pixel', param_definition_1.ParamDefinition.arrayToOptions(['instance', 'pixel'])),
+        objects: param_definition_1.ParamDefinition.ObjectList({
+            type: param_definition_1.ParamDefinition.Select('plane', param_definition_1.ParamDefinition.objectToOptions(Clip.Type, function (t) { return (0, string_1.stringToWords)(t); })),
+            invert: param_definition_1.ParamDefinition.Boolean(false),
+            position: param_definition_1.ParamDefinition.Vec3((0, linear_algebra_1.Vec3)()),
+            rotation: param_definition_1.ParamDefinition.Group({
+                axis: param_definition_1.ParamDefinition.Vec3(linear_algebra_1.Vec3.create(1, 0, 0)),
+                angle: param_definition_1.ParamDefinition.Numeric(0, { min: -180, max: 180, step: 1 }, { description: 'Angle in Degrees' }),
+            }, { isExpanded: true }),
+            scale: param_definition_1.ParamDefinition.Vec3(linear_algebra_1.Vec3.create(1, 1, 1)),
+        }, function (o) { return (0, string_1.stringToWords)(o.type); })
+    };
+    function createClipObjects() {
+        return {
+            count: 0,
+            type: (new Array(5)).fill(1),
+            invert: (new Array(5)).fill(false),
+            position: (new Array(5 * 3)).fill(0),
+            rotation: (new Array(5 * 4)).fill(0),
+            scale: (new Array(5 * 3)).fill(1),
+        };
+    }
+    var qA = (0, linear_algebra_1.Quat)();
+    var qB = (0, linear_algebra_1.Quat)();
+    var vA = (0, linear_algebra_1.Vec3)();
+    var vB = (0, linear_algebra_1.Vec3)();
+    function getClip(props, clip) {
+        var _a = (clip === null || clip === void 0 ? void 0 : clip.objects) || createClipObjects(), type = _a.type, invert = _a.invert, position = _a.position, rotation = _a.rotation, scale = _a.scale;
+        for (var i = 0, il = props.objects.length; i < il; ++i) {
+            var p = props.objects[i];
+            type[i] = Clip.Type[p.type];
+            invert[i] = p.invert;
+            linear_algebra_1.Vec3.toArray(p.position, position, i * 3);
+            linear_algebra_1.Quat.toArray(linear_algebra_1.Quat.setAxisAngle(qA, p.rotation.axis, (0, misc_1.degToRad)(p.rotation.angle)), rotation, i * 4);
+            linear_algebra_1.Vec3.toArray(p.scale, scale, i * 3);
+        }
+        return {
+            variant: props.variant,
+            objects: { count: props.objects.length, type: type, invert: invert, position: position, rotation: rotation, scale: scale }
+        };
+    }
+    Clip.getClip = getClip;
+    function areEqual(cA, cB) {
+        if (cA.variant !== cB.variant)
+            return false;
+        if (cA.objects.count !== cB.objects.count)
+            return false;
+        var oA = cA.objects, oB = cB.objects;
+        for (var i = 0, il = oA.count; i < il; ++i) {
+            if (oA.invert[i] !== oB.invert[i])
+                return false;
+            if (oA.type[i] !== oB.type[i])
+                return false;
+            linear_algebra_1.Vec3.fromArray(vA, oA.position, i * 3);
+            linear_algebra_1.Vec3.fromArray(vB, oB.position, i * 3);
+            if (!linear_algebra_1.Vec3.equals(vA, vB))
+                return false;
+            linear_algebra_1.Vec3.fromArray(vA, oA.scale, i * 3);
+            linear_algebra_1.Vec3.fromArray(vB, oB.scale, i * 3);
+            if (!linear_algebra_1.Vec3.equals(vA, vB))
+                return false;
+            linear_algebra_1.Quat.fromArray(qA, oA.rotation, i * 4);
+            linear_algebra_1.Quat.fromArray(qB, oB.rotation, i * 4);
+            if (!linear_algebra_1.Quat.equals(qA, qB))
+                return false;
+        }
+        return true;
+    }
+    Clip.areEqual = areEqual;
+})(Clip = exports.Clip || (exports.Clip = {}));
+//# sourceMappingURL=clip.js.map

package/lib/extensions/anvil/behavior.d.ts

@@ -32,6 +32,10 @@ declare const MembraneOrientation3D: StateTransformer<PluginStateObject.Molecule
         roughness: number;
         bumpiness: number;
     }>;
+    clip: PD.Normalize<{
+        variant: any;
+        objects: any;
+    }>;
     sectorOpacity: number;
     doubleSided: boolean;
     flipSided: boolean;

package/lib/extensions/anvil/representation.d.ts

@@ -27,6 +27,16 @@ declare const BilayerPlanesParams: {
         roughness: number;
         bumpiness: number;
     }>>;
+    clip: PD.Group<PD.Normalize<{
+        variant: import("../../mol-util/clip").Clip.Variant;
+        objects: PD.Normalize<{
+            type: any;
+            invert: any;
+            position: any;
+            rotation: any;
+            scale: any;
+        }>[];
+    }>>;
 };
 export declare type BilayerPlanesParams = typeof BilayerPlanesParams;
 export declare type BilayerPlanesProps = PD.Values<BilayerPlanesParams>;
@@ -44,6 +54,16 @@ declare const BilayerRimsParams: {
         roughness: number;
         bumpiness: number;
     }>>;
+    clip: PD.Group<PD.Normalize<{
+        variant: import("../../mol-util/clip").Clip.Variant;
+        objects: PD.Normalize<{
+            type: any;
+            invert: any;
+            position: any;
+            rotation: any;
+            scale: any;
+        }>[];
+    }>>;
 };
 export declare type BilayerRimsParams = typeof BilayerRimsParams;
 export declare type BilayerRimsProps = PD.Values<BilayerRimsParams>;
@@ -62,6 +82,16 @@ export declare const MembraneOrientationParams: {
         roughness: number;
         bumpiness: number;
     }>>;
+    clip: PD.Group<PD.Normalize<{
+        variant: import("../../mol-util/clip").Clip.Variant;
+        objects: PD.Normalize<{
+            type: any;
+            invert: any;
+            position: any;
+            rotation: any;
+            scale: any;
+        }>[];
+    }>>;
     sectorOpacity: PD.Numeric;
     doubleSided: PD.BooleanParam;
     flipSided: PD.BooleanParam;
@@ -88,6 +118,16 @@ export declare function getMembraneOrientationParams(ctx: ThemeRegistryContext,
         roughness: number;
         bumpiness: number;
     }>>;
+    clip: PD.Group<PD.Normalize<{
+        variant: import("../../mol-util/clip").Clip.Variant;
+        objects: PD.Normalize<{
+            type: any;
+            invert: any;
+            position: any;
+            rotation: any;
+            scale: any;
+        }>[];
+    }>>;
     sectorOpacity: PD.Numeric;
     doubleSided: PD.BooleanParam;
     flipSided: PD.BooleanParam;
@@ -114,6 +154,16 @@ export declare const MembraneOrientationRepresentationProvider: StructureReprese
         roughness: number;
         bumpiness: number;
     }>>;
+    clip: PD.Group<PD.Normalize<{
+        variant: import("../../mol-util/clip").Clip.Variant;
+        objects: PD.Normalize<{
+            type: any;
+            invert: any;
+            position: any;
+            rotation: any;
+            scale: any;
+        }>[];
+    }>>;
     sectorOpacity: PD.Numeric;
     doubleSided: PD.BooleanParam;
     flipSided: PD.BooleanParam;

package/lib/extensions/cellpack/representation.d.ts

@@ -52,6 +52,16 @@ export declare const MBParams: {
         roughness: number;
         bumpiness: number;
     }>>;
+    clip: PD.Group<PD.Normalize<{
+        variant: import("../../mol-util/clip").Clip.Variant;
+        objects: PD.Normalize<{
+            type: any;
+            invert: any;
+            position: any;
+            rotation: any;
+            scale: any;
+        }>[];
+    }>>;
 };
 export declare type MBParams = typeof MBParams;
 export declare type UnitcellProps = PD.Values<MBParams>;

package/lib/extensions/dnatco/confal-pyramids/representation.d.ts

@@ -26,6 +26,16 @@ export declare const ConfalPyramidsParams: {
         roughness: number;
         bumpiness: number;
     }>>;
+    clip: PD.Group<PD.Normalize<{
+        variant: import("../../../mol-util/clip").Clip.Variant;
+        objects: PD.Normalize<{
+            type: any;
+            invert: any;
+            position: any;
+            rotation: any;
+            scale: any;
+        }>[];
+    }>>;
 };
 export declare type ConfalPyramidsParams = typeof ConfalPyramidsParams;
 export declare function getConfalPyramidsParams(ctx: ThemeRegistryContext, structure: Structure): {
@@ -45,6 +55,16 @@ export declare function getConfalPyramidsParams(ctx: ThemeRegistryContext, struc
         roughness: number;
         bumpiness: number;
     }>>;
+    clip: PD.Group<PD.Normalize<{
+        variant: import("../../../mol-util/clip").Clip.Variant;
+        objects: PD.Normalize<{
+            type: any;
+            invert: any;
+            position: any;
+            rotation: any;
+            scale: any;
+        }>[];
+    }>>;
 };
 export declare type ConfalPyramidsRepresentation = StructureRepresentation<ConfalPyramidsParams>;
 export declare function ConfalPyramidsRepresentation(ctx: RepresentationContext, getParams: RepresentationParamsGetter<Structure, ConfalPyramidsParams>): ConfalPyramidsRepresentation;
@@ -65,4 +85,14 @@ export declare const ConfalPyramidsRepresentationProvider: StructureRepresentati
         roughness: number;
         bumpiness: number;
     }>>;
+    clip: PD.Group<PD.Normalize<{
+        variant: import("../../../mol-util/clip").Clip.Variant;
+        objects: PD.Normalize<{
+            type: any;
+            invert: any;
+            position: any;
+            rotation: any;
+            scale: any;
+        }>[];
+    }>>;
 }, "confal-pyramids">;

package/lib/extensions/rcsb/assembly-symmetry/behavior.d.ts

@@ -33,6 +33,10 @@ declare const AssemblySymmetry3D: StateTransformer<PluginStateObject.Molecule.St
         roughness: number;
         bumpiness: number;
     }>;
+    clip: PD.Normalize<{
+        variant: any;
+        objects: any;
+    }>;
     axesColor: PD.NamedParams<PD.Normalize<{
         colorValue: any;
     }>, "uniform"> | PD.NamedParams<PD.Normalize<unknown>, "byOrder">;

package/lib/extensions/rcsb/assembly-symmetry/representation.d.ts

@@ -25,6 +25,16 @@ export declare const AssemblySymmetryParams: {
         roughness: number;
         bumpiness: number;
     }>>;
+    clip: PD.Group<PD.Normalize<{
+        variant: import("../../../mol-util/clip").Clip.Variant;
+        objects: PD.Normalize<{
+            type: any;
+            invert: any;
+            position: any;
+            rotation: any;
+            scale: any;
+        }>[];
+    }>>;
     axesColor: PD.Mapped<PD.NamedParams<PD.Normalize<{
         colorValue: Color;
     }>, "uniform"> | PD.NamedParams<PD.Normalize<unknown>, "byOrder">>;

package/lib/extensions/rcsb/validation-report/representation.d.ts

@@ -40,6 +40,16 @@ export declare const IntraUnitClashParams: {
         roughness: number;
         bumpiness: number;
     }>>;
+    clip: PD.Group<PD.Normalize<{
+        variant: import("../../../mol-util/clip").Clip.Variant;
+        objects: PD.Normalize<{
+            type: any;
+            invert: any;
+            position: any;
+            rotation: any;
+            scale: any;
+        }>[];
+    }>>;
 };
 export declare type IntraUnitClashParams = typeof IntraUnitClashParams;
 export declare function IntraUnitClashVisual(materialId: number): UnitsVisual<IntraUnitClashParams>;
@@ -72,6 +82,16 @@ export declare const InterUnitClashParams: {
         roughness: number;
         bumpiness: number;
     }>>;
+    clip: PD.Group<PD.Normalize<{
+        variant: import("../../../mol-util/clip").Clip.Variant;
+        objects: PD.Normalize<{
+            type: any;
+            invert: any;
+            position: any;
+            rotation: any;
+            scale: any;
+        }>[];
+    }>>;
 };
 export declare type InterUnitClashParams = typeof InterUnitClashParams;
 export declare function InterUnitClashVisual(materialId: number): ComplexVisual<InterUnitClashParams>;
@@ -105,6 +125,16 @@ export declare const ClashesParams: {
         roughness: number;
         bumpiness: number;
     }>>;
+    clip: PD.Group<PD.Normalize<{
+        variant: import("../../../mol-util/clip").Clip.Variant;
+        objects: PD.Normalize<{
+            type: any;
+            invert: any;
+            position: any;
+            rotation: any;
+            scale: any;
+        }>[];
+    }>>;
 };
 export declare type ClashesParams = typeof ClashesParams;
 export declare function getClashesParams(ctx: ThemeRegistryContext, structure: Structure): {
@@ -137,6 +167,16 @@ export declare function getClashesParams(ctx: ThemeRegistryContext, structure: S
         roughness: number;
         bumpiness: number;
     }>>;
+    clip: PD.Group<PD.Normalize<{
+        variant: import("../../../mol-util/clip").Clip.Variant;
+        objects: PD.Normalize<{
+            type: any;
+            invert: any;
+            position: any;
+            rotation: any;
+            scale: any;
+        }>[];
+    }>>;
 };
 export declare type ClashesRepresentation = StructureRepresentation<ClashesParams>;
 export declare function ClashesRepresentation(ctx: RepresentationContext, getParams: RepresentationParamsGetter<Structure, ClashesParams>): ClashesRepresentation;
@@ -170,4 +210,14 @@ export declare const ClashesRepresentationProvider: StructureRepresentationProvi
         roughness: number;
         bumpiness: number;
     }>>;
+    clip: PD.Group<PD.Normalize<{
+        variant: import("../../../mol-util/clip").Clip.Variant;
+        objects: PD.Normalize<{
+            type: any;
+            invert: any;
+            position: any;
+            rotation: any;
+            scale: any;
+        }>[];
+    }>>;
 }, ValidationReport.Tag.Clashes>;

package/lib/mol-canvas3d/canvas3d.d.ts

@@ -107,10 +107,6 @@ export declare const Canvas3DParams: {
         }>[];
         ambientColor: import("../mol-util/color").Color;
         ambientIntensity: number;
-        clip: PD.Normalize<{
-            variant: any;
-            objects: any;
-        }>;
     }>>;
     trackball: PD.Group<PD.Normalize<{
         noScroll: boolean;
@@ -169,6 +165,7 @@ export declare const Canvas3DParams: {
             bumpAmplitude: any;
             quality: any;
             material: any;
+            clip: any;
         }>, "on">;
     }>>;
 };
@@ -258,10 +255,6 @@ export declare const DefaultCanvas3DParams: PD.Values<{
         }>[];
         ambientColor: import("../mol-util/color").Color;
         ambientIntensity: number;
-        clip: PD.Normalize<{
-            variant: any;
-            objects: any;
-        }>;
     }>>;
     trackball: PD.Group<PD.Normalize<{
         noScroll: boolean;
@@ -320,6 +313,7 @@ export declare const DefaultCanvas3DParams: PD.Values<{
             bumpAmplitude: any;
             quality: any;
             material: any;
+            clip: any;
         }>, "on">;
     }>>;
 }>;

package/lib/mol-canvas3d/canvas3d.js

@@ -35,6 +35,7 @@ import { Helper } from './helper/helper';
 import { Passes } from './passes/passes';
 import { shallowEqual } from '../mol-util';
 import { MarkingParams } from './passes/marking';
+import { GraphicsRenderVariantsBlended, GraphicsRenderVariantsWboit } from '../mol-gl/webgl/render-item';
 export var Canvas3DParams = {
     camera: PD.Group({
         mode: PD.Select('perspective', PD.arrayToOptions(['perspective', 'orthographic']), { label: 'Camera' }),
@@ -200,7 +201,7 @@ var Canvas3D;
         var width = 128;
         var height = 128;
         updateViewport();
-        var scene = Scene.create(webgl);
+        var scene = Scene.create(webgl, passes.draw.wboitEnabled ? GraphicsRenderVariantsWboit : GraphicsRenderVariantsBlended);
         var camera = new Camera({
             position: Vec3.create(0, 0, 100),
             mode: p.camera.mode,

package/lib/mol-canvas3d/helper/bounding-sphere-helper.js

@@ -15,6 +15,7 @@ import { ColorNames } from '../../mol-util/color/names';
 import { sphereVertexCount } from '../../mol-geo/primitive/sphere';
 import { ValueCell } from '../../mol-util';
 import { Geometry } from '../../mol-geo/geometry/geometry';
+import { GraphicsRenderVariantsBlended } from '../../mol-gl/webgl/render-item';
 export var DebugHelperParams = {
     sceneBoundingSpheres: PD.Boolean(false, { description: 'Show full scene bounding spheres.' }),
     visibleSceneBoundingSpheres: PD.Boolean(false, { description: 'Show visible scene bounding spheres.' }),
@@ -25,7 +26,7 @@ var BoundingSphereHelper = /** @class */ (function () {
     function BoundingSphereHelper(ctx, parent, props) {
         this.objectsData = new Map();
         this.instancesData = new Map();
-        this.scene = Scene.create(ctx);
+        this.scene = Scene.create(ctx, GraphicsRenderVariantsBlended);
         this.parent = parent;
         this._props = __assign(__assign({}, PD.getDefaultValues(DebugHelperParams)), props);
     }
@@ -148,6 +149,6 @@ var objectMaterialId = getNextMaterialId();
 var instanceMaterialId = getNextMaterialId();
 function createBoundingSphereRenderObject(mesh, color, materialId, transform) {
     var values = Mesh.Utils.createValuesSimple(mesh, { alpha: 0.1, doubleSided: false }, color, 1, transform);
-    return createRenderObject('mesh', values, { disposed: false, visible: true, alphaFactor: 1, pickable: false, colorOnly: false, opaque: false, writeDepth: false, noClip: false }, materialId);
+    return createRenderObject('mesh', values, { disposed: false, visible: true, alphaFactor: 1, pickable: false, colorOnly: false, opaque: false, writeDepth: false }, materialId);
 }
 //# sourceMappingURL=bounding-sphere-helper.js.map

package/lib/mol-canvas3d/helper/camera-helper.d.ts

@@ -30,6 +30,10 @@ export declare const CameraHelperParams: {
             roughness: number;
             bumpiness: number;
         }>;
+        clip: PD.Normalize<{
+            variant: any;
+            objects: any;
+        }>;
     }>, "on">>;
 };
 export declare type CameraHelperParams = typeof CameraHelperParams;