molstar 4.2.0 → 4.4.0

package/lib/commonjs/extensions/volumes-and-segmentations/global-state.d.ts

@@ -16,16 +16,16 @@ export type VolsegGlobalStateParamValues = PD.Values<typeof VolsegGlobalStatePar
 declare const VolsegGlobalState_base: {
     new (data: VolsegGlobalStateData, props?: {
         label: string;
-        description?: string | undefined;
+        description?: string;
     } | undefined): {
         id: import("../../mol-util").UUID;
         type: PluginStateObject.TypeInfo;
         label: string;
-        description?: string | undefined;
+        description?: string;
         data: VolsegGlobalStateData;
     };
     type: PluginStateObject.TypeInfo;
-    is(obj?: import("../../mol-state").StateObject<any, import("../../mol-state").StateObject.Type<any>> | undefined): obj is import("../../mol-state").StateObject<VolsegGlobalStateData, PluginStateObject.TypeInfo>;
+    is(obj?: import("../../mol-state").StateObject): obj is import("../../mol-state").StateObject<VolsegGlobalStateData, PluginStateObject.TypeInfo>;
 };
 export declare class VolsegGlobalState extends VolsegGlobalState_base {
 }

package/lib/commonjs/extensions/volumes-and-segmentations/helpers.js

@@ -5,7 +5,12 @@
  * @author Adam Midlik <midlik@gmail.com>
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.lazyGetter = exports.applyEllipsis = exports.CreateVolume = exports.NodeManager = exports.isDefined = exports.createEntryId = exports.splitEntryId = void 0;
+exports.CreateVolume = exports.NodeManager = void 0;
+exports.splitEntryId = splitEntryId;
+exports.createEntryId = createEntryId;
+exports.isDefined = isDefined;
+exports.applyEllipsis = applyEllipsis;
+exports.lazyGetter = lazyGetter;
 const objects_1 = require("../../mol-plugin-state/objects");
 const state_1 = require("../../mol-plugin/behavior/static/state");
 const mol_state_1 = require("../../mol-state");
@@ -20,7 +25,6 @@ function splitEntryId(entryId) {
         entryNumber: entry
     };
 }
-exports.splitEntryId = splitEntryId;
 /** Create entry ID (e.g. 'emd-1832') for a combination of source ('emdb') and number ('1832') */
 function createEntryId(source, entryNumber) {
     var _a;
@@ -28,11 +32,9 @@ function createEntryId(source, entryNumber) {
     const prefix = (_a = SOURCE_TO_PREFIX[source]) !== null && _a !== void 0 ? _a : source;
     return `${prefix}-${entryNumber}`;
 }
-exports.createEntryId = createEntryId;
 function isDefined(x) {
     return x !== undefined;
 }
-exports.isDefined = isDefined;
 class NodeManager {
     constructor() {
         this.nodes = {};
@@ -108,7 +110,6 @@ function applyEllipsis(name, max_chars = 60) {
         lastSpace--;
     return name.substring(0, lastSpace) + '...';
 }
-exports.applyEllipsis = applyEllipsis;
 function lazyGetter(getter, errorIfUndefined) {
     let value = undefined;
     return () => {
@@ -119,4 +120,3 @@ function lazyGetter(getter, errorIfUndefined) {
         return value;
     };
 }
-exports.lazyGetter = lazyGetter;

package/lib/commonjs/extensions/volumes-and-segmentations/ui.d.ts

@@ -3,7 +3,6 @@
  *
  * @author Adam Midlik <midlik@gmail.com>
  */
-/// <reference types="react" />
 import { CollapsableControls, CollapsableState } from '../../mol-plugin-ui/base';
 import { VolsegEntry } from './entry-root';
 import { VolsegGlobalStateData } from './global-state';

package/lib/commonjs/extensions/zenodo/ui.d.ts

@@ -3,7 +3,6 @@
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
-/// <reference types="react" />
 import { CollapsableControls, CollapsableState } from '../../mol-plugin-ui/base';
 import { PluginContext } from '../../mol-plugin/context';
 import { ParamDefinition as PD } from '../../mol-util/param-definition';

package/lib/commonjs/mol-canvas3d/camera/transition.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018-2019 Mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2024 Mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author David Sehnal <david.sehnal@gmail.com>
  */

package/lib/commonjs/mol-canvas3d/camera/transition.js

@@ -1,6 +1,6 @@
 "use strict";
 /**
- * Copyright (c) 2018-2019 Mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2024 Mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author David Sehnal <david.sehnal@gmail.com>
  */
@@ -71,19 +71,36 @@ class CameraTransitionManager {
 }
 exports.CameraTransitionManager = CameraTransitionManager;
 (function (CameraTransitionManager) {
-    const _rot = linear_algebra_1.Quat.identity();
+    const _rotUp = linear_algebra_1.Quat.identity();
+    const _rotDist = linear_algebra_1.Quat.identity();
+    const _sourcePosition = (0, linear_algebra_1.Vec3)();
+    const _targetPosition = (0, linear_algebra_1.Vec3)();
     function defaultTransition(out, t, source, target) {
         camera_1.Camera.copySnapshot(out, target);
         // Rotate up
-        linear_algebra_1.Quat.slerp(_rot, linear_algebra_1.Quat.Identity, linear_algebra_1.Quat.rotationTo(_rot, source.up, target.up), t);
-        linear_algebra_1.Vec3.transformQuat(out.up, source.up, _rot);
+        linear_algebra_1.Quat.slerp(_rotUp, linear_algebra_1.Quat.Identity, linear_algebra_1.Quat.rotationTo(_rotUp, source.up, target.up), t);
+        linear_algebra_1.Vec3.transformQuat(out.up, source.up, _rotUp);
         // Lerp target, position & radius
         linear_algebra_1.Vec3.lerp(out.target, source.target, target.target, t);
-        linear_algebra_1.Vec3.lerp(out.position, source.position, target.position, t);
+        // Interpolate distance
+        const distSource = linear_algebra_1.Vec3.distance(source.target, source.position);
+        const distTarget = linear_algebra_1.Vec3.distance(target.target, target.position);
+        const dist = (0, interpolate_1.lerp)(distSource, distTarget, t);
+        // Rotate between source and targer direction
+        linear_algebra_1.Vec3.sub(_sourcePosition, source.position, source.target);
+        linear_algebra_1.Vec3.normalize(_sourcePosition, _sourcePosition);
+        linear_algebra_1.Vec3.sub(_targetPosition, target.position, target.target);
+        linear_algebra_1.Vec3.normalize(_targetPosition, _targetPosition);
+        linear_algebra_1.Quat.rotationTo(_rotDist, _sourcePosition, _targetPosition);
+        linear_algebra_1.Quat.slerp(_rotDist, linear_algebra_1.Quat.Identity, _rotDist, t);
+        linear_algebra_1.Vec3.transformQuat(_sourcePosition, _sourcePosition, _rotDist);
+        linear_algebra_1.Vec3.scale(_sourcePosition, _sourcePosition, dist);
+        linear_algebra_1.Vec3.add(out.position, out.target, _sourcePosition);
+        // Interpolate radius
         out.radius = (0, interpolate_1.lerp)(source.radius, target.radius, t);
         // TODO take change of `clipFar` into account
         out.radiusMax = (0, interpolate_1.lerp)(source.radiusMax, target.radiusMax, t);
-        // Lerp fov & fog
+        // Interpolate fov & fog
         out.fov = (0, interpolate_1.lerp)(source.fov, target.fov, t);
         out.fog = (0, interpolate_1.lerp)(source.fog, target.fog, t);
     }

package/lib/commonjs/mol-canvas3d/camera/util.js

@@ -5,12 +5,13 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.cameraUnproject = exports.cameraProject = exports.Viewport = void 0;
+exports.Viewport = Viewport;
+exports.cameraProject = cameraProject;
+exports.cameraUnproject = cameraUnproject;
 const linear_algebra_1 = require("../../mol-math/linear-algebra");
 function Viewport() {
     return Viewport.zero();
 }
-exports.Viewport = Viewport;
 (function (Viewport) {
     function zero() {
         return { x: 0, y: 0, width: 0, height: 0 };
@@ -72,7 +73,6 @@ function cameraProject(out, point, viewport, projectionView) {
     out[3] = w === 0 ? 0 : 1 / w;
     return out;
 }
-exports.cameraProject = cameraProject;
 /**
  * Transform point from screen space to 3D coordinates.
  * The point must have `x` and `y` set to 2D window coordinates
@@ -88,4 +88,3 @@ function cameraUnproject(out, point, viewport, inverseProjectionView) {
     out[2] = 2 * pz - 1;
     return linear_algebra_1.Vec3.transformMat4(out, out, inverseProjectionView);
 }
-exports.cameraUnproject = cameraUnproject;

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

@@ -64,6 +64,7 @@ export declare const Canvas3DParams: {
         mode: string;
         sampleLevel: number;
         reduceFlicker: boolean;
+        reuseOcclusion: boolean;
     }>>;
     postprocessing: PD.Group<PD.Normalize<{
         occlusion: PD.NamedParams<PD.Normalize<unknown>, "off"> | PD.NamedParams<PD.Normalize<{
@@ -72,6 +73,7 @@ export declare const Canvas3DParams: {
             radius: any;
             bias: any;
             blurKernelSize: any;
+            blurDepthBias: any;
             resolutionScale: any;
             color: any;
         }>, "on">;
@@ -87,6 +89,14 @@ export declare const Canvas3DParams: {
             color: any;
             includeTransparent: any;
         }>, "on">;
+        dof: PD.NamedParams<PD.Normalize<unknown>, "off"> | PD.NamedParams<PD.Normalize<{
+            blurSize: any;
+            blurSpread: any;
+            inFocus: any;
+            PPM: any;
+            center: any;
+            mode: any;
+        }>, "on">;
         antialiasing: PD.NamedParams<PD.Normalize<unknown>, "off"> | PD.NamedParams<PD.Normalize<{
             edgeThreshold: any;
             maxSearchSteps: any;
@@ -140,6 +150,7 @@ export declare const Canvas3DParams: {
         dimStrength: number;
         markerPriority: number;
         xrayEdgeFalloff: number;
+        celSteps: number;
         exposure: number;
         light: PD.Normalize<{
             inclination: number;
@@ -223,6 +234,7 @@ export declare const Canvas3DParams: {
             doubleSided: any;
             flipSided: any;
             flatShaded: any;
+            celShaded: any;
             xrayShaded: any;
             transparentBackfaces: any;
             bumpFrequency: any;
@@ -279,6 +291,7 @@ export declare const DefaultCanvas3DParams: PD.Values<{
         mode: string;
         sampleLevel: number;
         reduceFlicker: boolean;
+        reuseOcclusion: boolean;
     }>>;
     postprocessing: PD.Group<PD.Normalize<{
         occlusion: PD.NamedParams<PD.Normalize<unknown>, "off"> | PD.NamedParams<PD.Normalize<{
@@ -287,6 +300,7 @@ export declare const DefaultCanvas3DParams: PD.Values<{
             radius: any;
             bias: any;
             blurKernelSize: any;
+            blurDepthBias: any;
             resolutionScale: any;
             color: any;
         }>, "on">;
@@ -302,6 +316,14 @@ export declare const DefaultCanvas3DParams: PD.Values<{
             color: any;
             includeTransparent: any;
         }>, "on">;
+        dof: PD.NamedParams<PD.Normalize<unknown>, "off"> | PD.NamedParams<PD.Normalize<{
+            blurSize: any;
+            blurSpread: any;
+            inFocus: any;
+            PPM: any;
+            center: any;
+            mode: any;
+        }>, "on">;
         antialiasing: PD.NamedParams<PD.Normalize<unknown>, "off"> | PD.NamedParams<PD.Normalize<{
             edgeThreshold: any;
             maxSearchSteps: any;
@@ -355,6 +377,7 @@ export declare const DefaultCanvas3DParams: PD.Values<{
         dimStrength: number;
         markerPriority: number;
         xrayEdgeFalloff: number;
+        celSteps: number;
         exposure: number;
         light: PD.Normalize<{
             inclination: number;
@@ -438,6 +461,7 @@ export declare const DefaultCanvas3DParams: PD.Values<{
             doubleSided: any;
             flipSided: any;
             flatShaded: any;
+            celShaded: any;
             xrayShaded: any;
             transparentBackfaces: any;
             bumpFrequency: any;
@@ -480,7 +504,7 @@ interface Canvas3DContext {
 }
 declare namespace Canvas3DContext {
     const DefaultAttribs: {
-        powerPreference: WebGLPowerPreference | undefined;
+        powerPreference: WebGLContextAttributes["powerPreference"];
         failIfMajorPerformanceCaveat: boolean;
         /** true by default to avoid issues with Safari (Jan 2021) */
         antialias: boolean;
@@ -519,6 +543,7 @@ interface Canvas3D {
     tick(t: now.Timestamp, options?: {
         isSynchronous?: boolean;
         manualDraw?: boolean;
+        updateControls?: boolean;
     }): void;
     update(repr?: Representation.Any, keepBoundingSphere?: boolean): void;
     clear(): void;

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

@@ -392,6 +392,10 @@ var Canvas3D;
         function tick(t, options) {
             currentTime = t;
             commit(options === null || options === void 0 ? void 0 : options.isSynchronous);
+            // update the controler before the camera transition
+            if (options === null || options === void 0 ? void 0 : options.updateControls) {
+                controls.update(currentTime);
+            }
             camera.transition.tick(currentTime);
             hiZ.tick();
             if (options === null || options === void 0 ? void 0 : options.manualDraw) {

package/lib/commonjs/mol-canvas3d/helper/bounding-sphere-helper.d.ts

@@ -27,11 +27,6 @@ export declare class BoundingSphereHelper {
     syncVisibility(): void;
     clear(): void;
     get isEnabled(): boolean;
-    get props(): Readonly<PD.Values<{
-        sceneBoundingSpheres: PD.BooleanParam;
-        visibleSceneBoundingSpheres: PD.BooleanParam;
-        objectBoundingSpheres: PD.BooleanParam;
-        instanceBoundingSpheres: PD.BooleanParam;
-    }>>;
+    get props(): Readonly<DebugHelperProps>;
     setProps(props: Partial<DebugHelperProps>): void;
 }

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

@@ -5,7 +5,8 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isCameraAxesLoci = exports.CameraHelperAxis = exports.CameraHelper = exports.CameraHelperParams = void 0;
+exports.CameraHelperAxis = exports.CameraHelper = exports.CameraHelperParams = void 0;
+exports.isCameraAxesLoci = isCameraAxesLoci;
 const immer_1 = require("immer");
 const interval_1 = require("../../mol-data/int/interval");
 const cylinder_1 = require("../../mol-geo/geometry/mesh/builder/cylinder");
@@ -208,7 +209,6 @@ function CameraAxesLoci(cameraHelper, groupId, instanceId) {
 function isCameraAxesLoci(x) {
     return x.kind === 'data-loci' && x.tag === 'camera-axes';
 }
-exports.isCameraAxesLoci = isCameraAxesLoci;
 function updateCamera(camera, viewport, viewOffset) {
     const { near, far } = camera;
     const fullLeft = -viewport.width / 2;

package/lib/commonjs/mol-canvas3d/helper/handle-helper.d.ts

@@ -23,6 +23,7 @@ export declare const HandleHelperParams: {
         doubleSided: boolean;
         flipSided: boolean;
         flatShaded: boolean;
+        celShaded: boolean;
         xrayShaded: boolean | "inverted";
         transparentBackfaces: "on" | "off" | "opaque";
         bumpFrequency: number;

package/lib/commonjs/mol-canvas3d/helper/handle-helper.js

@@ -5,7 +5,8 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isHandleLoci = exports.HandleGroup = exports.HandleHelper = exports.HandleHelperParams = void 0;
+exports.HandleGroup = exports.HandleHelper = exports.HandleHelperParams = void 0;
+exports.isHandleLoci = isHandleLoci;
 const scene_1 = require("../../mol-gl/scene");
 const mesh_builder_1 = require("../../mol-geo/geometry/mesh/mesh-builder");
 const linear_algebra_1 = require("../../mol-math/linear-algebra");
@@ -170,7 +171,6 @@ function HandleLoci(handleHelper, groupId, instanceId) {
 function isHandleLoci(x) {
     return x.kind === 'data-loci' && x.tag === 'handle';
 }
-exports.isHandleLoci = isHandleLoci;
 function getHandleShape(props, shape) {
     const scale = 10 * props.scale;
     const mesh = createHandleMesh(scale, shape === null || shape === void 0 ? void 0 : shape.geometry);

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

@@ -32,6 +32,7 @@ export declare const HelperParams: {
             doubleSided: any;
             flipSided: any;
             flatShaded: any;
+            celShaded: any;
             xrayShaded: any;
             transparentBackfaces: any;
             bumpFrequency: any;
@@ -70,6 +71,7 @@ export declare const DefaultHelperProps: PD.Values<{
             doubleSided: any;
             flipSided: any;
             flatShaded: any;
+            celShaded: any;
             xrayShaded: any;
             transparentBackfaces: any;
             bumpFrequency: any;

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

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) 2024 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Ludovic Autin <autin@scripps.edu>
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+import { WebGLContext } from '../../mol-gl/webgl/context';
+import { Texture } from '../../mol-gl/webgl/texture';
+import { ParamDefinition as PD } from '../../mol-util/param-definition';
+import { Viewport } from '../camera/util';
+import { RenderTarget } from '../../mol-gl/webgl/render-target';
+import { ICamera } from '../../mol-canvas3d/camera';
+import { Sphere3D } from '../../mol-math/geometry';
+import { PostprocessingProps } from './postprocessing';
+export declare const DofParams: {
+    blurSize: PD.Numeric;
+    blurSpread: PD.Numeric;
+    inFocus: PD.Numeric;
+    PPM: PD.Numeric;
+    center: PD.Select<string>;
+    mode: PD.Select<string>;
+};
+export type DofProps = PD.Values<typeof DofParams>;
+export declare class DofPass {
+    private webgl;
+    static isEnabled(props: PostprocessingProps): boolean;
+    readonly target: RenderTarget;
+    private readonly renderable;
+    constructor(webgl: WebGLContext, width: number, height: number);
+    private updateState;
+    setSize(width: number, height: number): void;
+    update(camera: ICamera, input: Texture, depthOpaque: Texture, depthTransparent: Texture, props: DofProps, sphere: Sphere3D): void;
+    render(viewport: Viewport, target: undefined | RenderTarget): void;
+}

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

@@ -0,0 +1,167 @@
+"use strict";
+/**
+ * Copyright (c) 2024 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Ludovic Autin <autin@scripps.edu>
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DofPass = exports.DofParams = void 0;
+const util_1 = require("../../mol-gl/compute/util");
+const renderable_1 = require("../../mol-gl/renderable");
+const schema_1 = require("../../mol-gl/renderable/schema");
+const shader_code_1 = require("../../mol-gl/shader-code");
+const render_item_1 = require("../../mol-gl/webgl/render-item");
+const texture_1 = require("../../mol-gl/webgl/texture");
+const linear_algebra_1 = require("../../mol-math/linear-algebra");
+const mol_util_1 = require("../../mol-util");
+const param_definition_1 = require("../../mol-util/param-definition");
+const quad_vert_1 = require("../../mol-gl/shader/quad.vert");
+const dof_frag_1 = require("../../mol-gl/shader/dof.frag");
+const debug_1 = require("../../mol-util/debug");
+exports.DofParams = {
+    blurSize: param_definition_1.ParamDefinition.Numeric(9, { min: 1, max: 32, step: 1 }),
+    blurSpread: param_definition_1.ParamDefinition.Numeric(1.0, { min: 0.0, max: 10.0, step: 0.1 }),
+    inFocus: param_definition_1.ParamDefinition.Numeric(0.0, { min: -5000.0, max: 5000.0, step: 1.0 }, { description: 'Distance from the scene center that will be in focus' }),
+    PPM: param_definition_1.ParamDefinition.Numeric(20.0, { min: 0.0, max: 5000.0, step: 0.1 }, { description: 'Size of the area that will be in focus' }),
+    center: param_definition_1.ParamDefinition.Select('camera-target', param_definition_1.ParamDefinition.arrayToOptions(['scene-center', 'camera-target'])),
+    mode: param_definition_1.ParamDefinition.Select('plane', param_definition_1.ParamDefinition.arrayToOptions(['plane', 'sphere'])),
+};
+class DofPass {
+    static isEnabled(props) {
+        return props.dof.name !== 'off';
+    }
+    constructor(webgl, width, height) {
+        this.webgl = webgl;
+        this.target = webgl.createRenderTarget(width, height, false);
+        const nullTexture = (0, texture_1.createNullTexture)();
+        this.renderable = getDofRenderable(webgl, nullTexture, nullTexture, nullTexture);
+    }
+    updateState(viewport) {
+        const { gl, state } = this.webgl;
+        state.enable(gl.SCISSOR_TEST);
+        state.disable(gl.BLEND);
+        state.disable(gl.DEPTH_TEST);
+        state.depthMask(false);
+        const { x, y, width, height } = viewport;
+        state.viewport(x, y, width, height);
+        state.scissor(x, y, width, height);
+        state.clearColor(0, 0, 0, 1);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+    }
+    setSize(width, height) {
+        const w = this.target.texture.getWidth();
+        const h = this.target.texture.getHeight();
+        if (width !== w || height !== h) {
+            this.target.setSize(width, height);
+            mol_util_1.ValueCell.update(this.renderable.values.uTexSize, linear_algebra_1.Vec2.set(this.renderable.values.uTexSize.ref.value, width, height));
+        }
+    }
+    update(camera, input, depthOpaque, depthTransparent, props, sphere) {
+        let needsUpdate = false;
+        if (this.renderable.values.tColor.ref.value !== input) {
+            mol_util_1.ValueCell.update(this.renderable.values.tColor, input);
+            needsUpdate = true;
+        }
+        if (this.renderable.values.tDepthOpaque.ref.value !== depthOpaque) {
+            mol_util_1.ValueCell.update(this.renderable.values.tDepthOpaque, depthOpaque);
+            needsUpdate = true;
+        }
+        if (this.renderable.values.tDepthTransparent.ref.value !== depthTransparent) {
+            mol_util_1.ValueCell.update(this.renderable.values.tDepthTransparent, depthTransparent);
+            needsUpdate = true;
+        }
+        const orthographic = camera.state.mode === 'orthographic' ? 1 : 0;
+        const invProjection = this.renderable.values.uInvProjection.ref.value;
+        linear_algebra_1.Mat4.invert(invProjection, camera.projection);
+        const [w, h] = this.renderable.values.uTexSize.ref.value;
+        const v = camera.viewport;
+        mol_util_1.ValueCell.update(this.renderable.values.uProjection, camera.projection);
+        mol_util_1.ValueCell.update(this.renderable.values.uInvProjection, invProjection);
+        mol_util_1.ValueCell.update(this.renderable.values.uMode, props.mode === 'sphere' ? 1 : 0);
+        linear_algebra_1.Vec4.set(this.renderable.values.uBounds.ref.value, v.x / w, v.y / h, (v.x + v.width) / w, (v.y + v.height) / h);
+        mol_util_1.ValueCell.update(this.renderable.values.uBounds, this.renderable.values.uBounds.ref.value);
+        mol_util_1.ValueCell.updateIfChanged(this.renderable.values.uNear, camera.near);
+        mol_util_1.ValueCell.updateIfChanged(this.renderable.values.uFar, camera.far);
+        mol_util_1.ValueCell.updateIfChanged(this.renderable.values.dOrthographic, orthographic);
+        if (this.renderable.values.dBlurSize.ref.value !== props.blurSize) {
+            mol_util_1.ValueCell.update(this.renderable.values.dBlurSize, props.blurSize);
+            needsUpdate = true;
+        }
+        const wolrdCenter = (props.center === 'scene-center' ? sphere.center : camera.state.target);
+        const distance = linear_algebra_1.Vec3.distance(camera.state.position, wolrdCenter);
+        const inFocus = distance + props.inFocus;
+        mol_util_1.ValueCell.updateIfChanged(this.renderable.values.uInFocus, inFocus);
+        // transform center in view space
+        const center = this.renderable.values.uCenter.ref.value;
+        linear_algebra_1.Vec3.transformMat4(center, wolrdCenter, camera.view);
+        mol_util_1.ValueCell.update(this.renderable.values.uCenter, center);
+        mol_util_1.ValueCell.updateIfChanged(this.renderable.values.uBlurSpread, props.blurSpread);
+        mol_util_1.ValueCell.updateIfChanged(this.renderable.values.uPPM, props.PPM);
+        if (needsUpdate) {
+            this.renderable.update();
+        }
+    }
+    render(viewport, target) {
+        if (debug_1.isTimingMode)
+            this.webgl.timer.mark('DofPass.render');
+        if (target) {
+            target.bind();
+        }
+        else {
+            this.webgl.unbindFramebuffer();
+        }
+        this.updateState(viewport);
+        this.renderable.render();
+        if (debug_1.isTimingMode)
+            this.webgl.timer.markEnd('DofPass.render');
+    }
+}
+exports.DofPass = DofPass;
+//
+const DofSchema = {
+    ...util_1.QuadSchema,
+    tDepthOpaque: (0, schema_1.TextureSpec)('texture', 'rgba', 'ubyte', 'nearest'),
+    tDepthTransparent: (0, schema_1.TextureSpec)('texture', 'rgba', 'ubyte', 'nearest'),
+    tColor: (0, schema_1.TextureSpec)('texture', 'rgba', 'ubyte', 'nearest'),
+    uTexSize: (0, schema_1.UniformSpec)('v2'),
+    uProjection: (0, schema_1.UniformSpec)('m4'),
+    uInvProjection: (0, schema_1.UniformSpec)('m4'),
+    uBounds: (0, schema_1.UniformSpec)('v4'),
+    uCenter: (0, schema_1.UniformSpec)('v3'),
+    uMode: (0, schema_1.UniformSpec)('i'),
+    dOrthographic: (0, schema_1.DefineSpec)('number'),
+    uNear: (0, schema_1.UniformSpec)('f'),
+    uFar: (0, schema_1.UniformSpec)('f'),
+    dBlurSize: (0, schema_1.DefineSpec)('number'),
+    uBlurSpread: (0, schema_1.UniformSpec)('f'),
+    uInFocus: (0, schema_1.UniformSpec)('f'),
+    uPPM: (0, schema_1.UniformSpec)('f'),
+};
+const DofShaderCode = (0, shader_code_1.ShaderCode)('dof', quad_vert_1.quad_vert, dof_frag_1.dof_frag);
+function getDofRenderable(ctx, colorTexture, depthTextureOpaque, depthTextureTransparent) {
+    const width = colorTexture.getWidth();
+    const height = colorTexture.getHeight();
+    const values = {
+        ...util_1.QuadValues,
+        tDepthOpaque: mol_util_1.ValueCell.create(depthTextureOpaque),
+        tDepthTransparent: mol_util_1.ValueCell.create(depthTextureTransparent),
+        tColor: mol_util_1.ValueCell.create(colorTexture),
+        uTexSize: mol_util_1.ValueCell.create(linear_algebra_1.Vec2.create(width, height)),
+        uProjection: mol_util_1.ValueCell.create(linear_algebra_1.Mat4.identity()),
+        uInvProjection: mol_util_1.ValueCell.create(linear_algebra_1.Mat4.identity()),
+        uBounds: mol_util_1.ValueCell.create((0, linear_algebra_1.Vec4)()),
+        uCenter: mol_util_1.ValueCell.create((0, linear_algebra_1.Vec3)()),
+        uMode: mol_util_1.ValueCell.create(0),
+        dOrthographic: mol_util_1.ValueCell.create(0),
+        uNear: mol_util_1.ValueCell.create(1),
+        uFar: mol_util_1.ValueCell.create(10000),
+        dBlurSize: mol_util_1.ValueCell.create(5),
+        uBlurSpread: mol_util_1.ValueCell.create(300.0),
+        uInFocus: mol_util_1.ValueCell.create(20.0),
+        uPPM: mol_util_1.ValueCell.create(20.0),
+    };
+    const schema = { ...DofSchema };
+    const renderItem = (0, render_item_1.createComputeRenderItem)(ctx, 'triangles', DofShaderCode, schema, values);
+    return (0, renderable_1.createComputeRenderable)(renderItem, values);
+}

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

@@ -18,6 +18,7 @@ import { DpoitPass } from './dpoit';
 import { AntialiasingPass, PostprocessingPass, PostprocessingProps } from './postprocessing';
 import { MarkingPass, MarkingProps } from './marking';
 import { AssetManager } from '../../mol-util/assets';
+import { DofPass } from './dof';
 import { BloomPass } from './bloom';
 type Props = {
     postprocessing: PostprocessingProps;
@@ -49,6 +50,7 @@ export declare class DrawPass {
     readonly postprocessing: PostprocessingPass;
     readonly antialiasing: AntialiasingPass;
     readonly bloom: BloomPass;
+    readonly dof: DofPass;
     private transparencyMode;
     setTransparency(transparency: 'wboit' | 'dpoit' | 'blended'): void;
     get transparency(): TransparencyMode;