@zephyr3d/scene 0.9.18 → 0.9.20

package/dist/camera/camera.js

@@ -15,6 +15,7 @@ import { getDevice } from '../app/api.js';
 import { ScreenAdapter } from '../app/screen.js';
 import { ABufferOIT } from '../render/abuffer_oit.js';
 import { WeightedBlendedOIT } from '../render/weightedblended_oit.js';
+import { DualDepthPeelingOIT } from '../render/dualdepthpeeling_oit.js';
 
 const SSS_DEFAULT_SETTINGS = {
     blurScale: 11,
@@ -46,24 +47,24 @@ const SSS_QUALITY_PRESET_SETTINGS = {
         normalCutoff: 0.72
     }
 };
-/**
- * A renderable camera node that manages view/projection math, frusta,
- * input control, picking, and a post-processing chain via a compositor.
- *
- * Key features:
- * - Maintains projection, view, VP, and inverse VP matrices and lazily recomputes them when invalidated.
- * - Provides world- and view-space frusta for culling and clipping.
- * - Supports perspective and orthographic projections.
- * - Integrates with post effects (Tonemap, FXAA, TAA, Bloom, SSR, SSS, SSAO, Motion Blur) through an internal `Compositor`.
- * - Handles temporal jitter and history state when TAA or motion blur are enabled.
- * - Emits picking rays from screen coordinates and supports async GPU picking.
- * - Optional controller integration for user input handling.
- *
- * Performance notes:
- * - Matrices/frusta are computed on demand and cached until invalidation.
- * - Temporal jitter and history are set up only when required by enabled features and device support.
- *
- * @public
+/**
+ * A renderable camera node that manages view/projection math, frusta,
+ * input control, picking, and a post-processing chain via a compositor.
+ *
+ * Key features:
+ * - Maintains projection, view, VP, and inverse VP matrices and lazily recomputes them when invalidated.
+ * - Provides world- and view-space frusta for culling and clipping.
+ * - Supports perspective and orthographic projections.
+ * - Integrates with post effects (Tonemap, FXAA, TAA, Bloom, SSR, SSS, SSAO, Motion Blur) through an internal `Compositor`.
+ * - Handles temporal jitter and history state when TAA or motion blur are enabled.
+ * - Emits picking rays from screen coordinates and supports async GPU picking.
+ * - Optional controller integration for user input handling.
+ *
+ * Performance notes:
+ * - Matrices/frusta are computed on demand and cached until invalidation.
+ * - Temporal jitter and history are set up only when required by enabled features and device support.
+ *
+ * @public
  */ class Camera extends SceneNode {
     /** @internal Halton 2-3 sequence used for TAA jittering. */ static _halton23 = halton23(16);
     /** @internal Per-camera history resources. */ static _historyData = new WeakMap();
@@ -92,10 +93,12 @@ const SSS_QUALITY_PRESET_SETTINGS = {
     /** @internal Order-Independent Transparency reference. */ _oit;
     /** @internal OIT algorithm selection mode. */ _oitMode;
     /** @internal ABuffer OIT layer budget. */ _oitABufferLayers;
+    /** @internal Dual depth peeling OIT peel iteration count. */ _oitDualDepthPeels;
     /** @internal Whether to perform a depth pre-pass. */ _depthPrePass;
     /** @internal Render path selection for scene renderer. */ _renderPath;
     /** @internal Whether command buffers may be reused for optimization. */ _commandBufferReuse;
     /** @internal Hi-Z acceleration enable (primarily for SSR). */ _HiZ;
+    /** @internal Screen-space shadow mask enable (Forward+ deferred shadows). */ _screenSpaceShadowMask;
     /** @internal If true, a float point backbuffer will be used. The default value is true */ _HDR;
     /** @internal Tonemap enable flag (via post effect). */ _toneMap;
     /** @internal Tonemap post effect reference. */ _postEffectTonemap;
@@ -174,14 +177,14 @@ const SSS_QUALITY_PRESET_SETTINGS = {
     /** @internal Post-processing compositor attached to this camera. */ _compositor;
     /** @internal Pointer interaction rectangle in css pixels (relative to canvas) */ _interactionRect;
     /** @internal captured by which mouse button (-1 if not captured) */ _capturedButton;
-    /**
-   * Creates a new camera node.
-   *
-   * Initializes projection/view matrices, temporal fields, controller linkage, and
-   * builds the default post-processing pipeline on the internal compositor.
-   *
-   * @param scene - The scene that owns this camera.
-   * @param projectionMatrix - Optional projection matrix to initialize with.
+    /**
+   * Creates a new camera node.
+   *
+   * Initializes projection/view matrices, temporal fields, controller linkage, and
+   * builds the default post-processing pipeline on the internal compositor.
+   *
+   * @param scene - The scene that owns this camera.
+   * @param projectionMatrix - Optional projection matrix to initialize with.
    */ constructor(scene, projectionMatrix){
         super(scene);
         this._projMatrix = projectionMatrix || Matrix4x4.identity();
@@ -206,11 +209,13 @@ const SSS_QUALITY_PRESET_SETTINGS = {
         this._oit = new DRef();
         this._oitMode = 'none';
         this._oitABufferLayers = 20;
+        this._oitDualDepthPeels = 8;
         this._depthPrePass = false;
         this._renderPath = 'forward';
         this._screenAdapter = new ScreenAdapter();
         this._adapted = false;
         this._HiZ = false;
+        this._screenSpaceShadowMask = true;
         this._HDR = true;
         this._toneMap = true;
         this._postEffectTonemap = new DRef();
@@ -303,81 +308,94 @@ const SSS_QUALITY_PRESET_SETTINGS = {
             scene.mainCamera = this;
         }
     }
-    /**
-   * The compositor that owns and runs the camera's post-processing chain.
+    /**
+   * The compositor that owns and runs the camera's post-processing chain.
    */ get compositor() {
         return this._compositor;
     }
-    /**
-   * Pointer interaction rectangle in css pixels (relative to canvas)
+    /**
+   * Pointer interaction rectangle in css pixels (relative to canvas)
    */ get interactionRect() {
         return this._interactionRect;
     }
     set interactionRect(rect) {
         this._interactionRect = rect;
     }
-    /**
-   * Framebuffer clear color, or `null` to disable.
+    /**
+   * Framebuffer clear color, or `null` to disable.
    */ get clearColor() {
         return this._clearColor;
     }
     set clearColor(v) {
         this._clearColor = v?.clone() ?? null;
     }
-    /**
-   * Framebuffer stencil clear value, disabled when null. Default is 0.
+    /**
+   * Framebuffer stencil clear value, disabled when null. Default is 0.
    */ get clearDepth() {
         return this._clearDepth;
     }
     set clearDepth(v) {
         this._clearDepth = v;
     }
-    /**
-   * Framebuffer stencil clear value, disabled when null. Default is 0.
+    /**
+   * Framebuffer stencil clear value, disabled when null. Default is 0.
    */ get clearStencil() {
         return this._clearStencil;
     }
     set clearStencil(v) {
         this._clearStencil = v;
     }
-    /**
-   * Whether Hi-Z acceleration is enabled.
-   *
-   * Often improves SSR performance with little quality impact when supported.
+    /**
+   * Whether Hi-Z acceleration is enabled.
+   *
+   * Often improves SSR performance with little quality impact when supported.
    */ get HiZ() {
         return this._HiZ;
     }
     set HiZ(val) {
         this._HiZ = !!val;
     }
-    /**
-   * Render path used by the scene renderer.
+    /**
+   * Whether the screen-space shadow mask is enabled.
+   *
+   * When enabled, shadow-casting lights are lit through the clustered pass and
+   * sample a pre-rendered screen-space shadow mask instead of each casting an
+   * additional full-scene additive light pass. Requires the depth prepass
+   * (always on in Forward+).
+   */ get screenSpaceShadowMask() {
+        return this._screenSpaceShadowMask;
+    }
+    set screenSpaceShadowMask(val) {
+        this._screenSpaceShadowMask = !!val;
+    }
+    /**
+   * Render path used by the scene renderer.
    */ get renderPath() {
         return this._renderPath;
     }
     set renderPath(_val) {
         this._renderPath = 'forward';
     }
-    /**
-   * Whether HDR backbuffer is enabled.
-   *
-   * Tonemap should be disabled when not using HDR backbuffer.
+    /**
+   * Whether HDR backbuffer is enabled.
+   *
+   * Tonemap should be disabled when not using HDR backbuffer.
    */ get HDR() {
         return this._HDR;
     }
     set HDR(val) {
         this._HDR = !!val;
     }
-    /**
-   * Whether tonemapping is enabled via the post effect.
+    /**
+   * Whether tonemapping is enabled via the post effect.
    */ get toneMap() {
         return this._postEffectTonemap.get().enabled;
     }
     set toneMap(val) {
         this._postEffectTonemap.get().enabled = !!val;
     }
-    /**
-   * Whether motion blur is enabled via the post effect.
+    /**
+   * Whether motion blur is enabled via the post effect.
    */ get motionBlur() {
         return this._postEffectMotionBlur.get().enabled;
     }
@@ -393,16 +411,16 @@ const SSS_QUALITY_PRESET_SETTINGS = {
             this._postEffectMotionBlur.get().strength = this._motionBlurStrength;
         }
     }
-    /**
-   * Gets whether Bloom is enabled.
+    /**
+   * Gets whether Bloom is enabled.
    */ get bloom() {
         return this._postEffectBloom.get().enabled;
     }
     set bloom(val) {
         this._postEffectBloom.get().enabled = !!val;
     }
-    /**
-   * Maximum bloom downsample levels
+    /**
+   * Maximum bloom downsample levels
    */ get bloomMaxDownsampleLevels() {
         return this._bloomMaxDownsampleLevels;
     }
@@ -412,8 +430,8 @@ const SSS_QUALITY_PRESET_SETTINGS = {
             this._postEffectBloom.get().maxDownsampleLevel = val;
         }
     }
-    /**
-   * Bloom downsample limit
+    /**
+   * Bloom downsample limit
    */ get bloomDownsampleLimit() {
         return this._bloomDownsampleLimit;
     }
@@ -423,8 +441,8 @@ const SSS_QUALITY_PRESET_SETTINGS = {
             this._postEffectBloom.get().downsampleLimit = val;
         }
     }
-    /**
-   * Bloom threshold
+    /**
+   * Bloom threshold
    */ get bloomThreshold() {
         return this._bloomThreshold;
     }
@@ -434,8 +452,8 @@ const SSS_QUALITY_PRESET_SETTINGS = {
             this._postEffectBloom.get().threshold = val;
         }
     }
-    /**
-   * Bloom threshold knee
+    /**
+   * Bloom threshold knee
    */ get bloomThresholdKnee() {
         return this._bloomThresholdKnee;
     }
@@ -445,8 +463,8 @@ const SSS_QUALITY_PRESET_SETTINGS = {
             this._postEffectBloom.get().thresholdKnee = val;
         }
     }
-    /**
-   * Bloom intensity
+    /**
+   * Bloom intensity
    */ get bloomIntensity() {
         return this._bloomIntensity;
     }
@@ -498,16 +516,16 @@ const SSS_QUALITY_PRESET_SETTINGS = {
             this._postEffectColorAdjust.get().sharpen = val;
         }
     }
-    /**
-   * Gets whether FXAA is enabled.
+    /**
+   * Gets whether FXAA is enabled.
    */ get FXAA() {
         return this._postEffectFXAA.get().enabled;
     }
     set FXAA(val) {
         this._postEffectFXAA.get().enabled = !!val;
     }
-    /**
-   * Tonemap exposure
+    /**
+   * Tonemap exposure
    */ get toneMapExposure() {
         return this._tonemapExposure;
     }
@@ -517,156 +535,156 @@ const SSS_QUALITY_PRESET_SETTINGS = {
             this._postEffectTonemap.get().exposure = val;
         }
     }
-    /**
-   * Gets whether TAA is enabled.
+    /**
+   * Gets whether TAA is enabled.
    */ get TAA() {
         return this._postEffectTAA.get().enabled;
     }
     set TAA(val) {
         this._postEffectTAA.get().enabled = !!val;
     }
-    /**
-   * Gets the debug flag for TAA
+    /**
+   * Gets the debug flag for TAA
    */ get TAADebug() {
         return this._TAADebug;
     }
     set TAADebug(val) {
         this._TAADebug = val;
     }
-    /**
-   * Enables cascade debug visualization for directional shadows.
+    /**
+   * Enables cascade debug visualization for directional shadows.
    */ get shadowDebugCascades() {
         return this._shadowDebugCascades;
     }
     set shadowDebugCascades(val) {
         this._shadowDebugCascades = !!val;
     }
-    /**
-   * Gets whether Screen Space Reflections (SSR) is enabled.
+    /**
+   * Gets whether Screen Space Reflections (SSR) is enabled.
    */ get SSR() {
         return this._postEffectSSR.get().enabled;
     }
     set SSR(val) {
         this._postEffectSSR.get().enabled = !!val;
     }
-    /**
-   * Gets the maximum roughness value for screen space reflections.
-   * Controls the cutoff point where surfaces are considered too rough for SSR.
+    /**
+   * Gets the maximum roughness value for screen space reflections.
+   * Controls the cutoff point where surfaces are considered too rough for SSR.
    */ get ssrMaxRoughness() {
         return this._ssrMaxRoughness;
     }
     set ssrMaxRoughness(val) {
         this._ssrMaxRoughness = val;
     }
-    /**
-   * Gets the roughness factor for SSR calculations.
-   * Affects how surface roughness influences reflection clarity.
+    /**
+   * Gets the roughness factor for SSR calculations.
+   * Affects how surface roughness influences reflection clarity.
    */ get ssrRoughnessFactor() {
         return this._ssrRoughnessFactor;
     }
     set ssrRoughnessFactor(val) {
         this._ssrRoughnessFactor = val;
     }
-    /**
-   * Gets the stride value for SSR ray marching.
-   * Controls the step size during ray marching. Larger values improve performance but may miss details.
+    /**
+   * Gets the stride value for SSR ray marching.
+   * Controls the step size during ray marching. Larger values improve performance but may miss details.
    */ get ssrStride() {
         return this._ssrStride;
     }
     set ssrStride(val) {
         this._ssrStride = val;
     }
-    /**
-   * Gets the maximum distance for SSR ray marching.
-   * Defines how far rays will travel when searching for reflection intersections.
+    /**
+   * Gets the maximum distance for SSR ray marching.
+   * Defines how far rays will travel when searching for reflection intersections.
    */ get ssrMaxDistance() {
         return this._ssrParams.x;
     }
     set ssrMaxDistance(val) {
         this._ssrParams.x = val;
     }
-    /**
-   * Gets the number of iterations for SSR ray marching.
-   * Higher values provide more accurate reflections but impact performance.
+    /**
+   * Gets the number of iterations for SSR ray marching.
+   * Higher values provide more accurate reflections but impact performance.
    */ get ssrIterations() {
         return this._ssrParams.y;
     }
     set ssrIterations(val) {
         this._ssrParams.y = val;
     }
-    /**
-   * Gets the thickness value for SSR calculations.
-   * Determines the thickness threshold for surfaces when calculating reflections.
+    /**
+   * Gets the thickness value for SSR calculations.
+   * Determines the thickness threshold for surfaces when calculating reflections.
    */ get ssrThickness() {
         return this._ssrParams.z;
     }
     set ssrThickness(val) {
         this._ssrParams.z = val;
     }
-    /**
-   * Gets whether SSR should calculate thickness automatically.
-   * When enabled, the system will dynamically compute surface thickness for reflections.
+    /**
+   * Gets whether SSR should calculate thickness automatically.
+   * When enabled, the system will dynamically compute surface thickness for reflections.
    */ get ssrCalcThickness() {
         return this._ssrCalcThickness;
     }
     set ssrCalcThickness(val) {
         this._ssrCalcThickness = !!val;
     }
-    /**
-   * Gets the blur scale factor for SSR.
-   * Controls the overall intensity of the blur effect applied to reflections.
+    /**
+   * Gets the blur scale factor for SSR.
+   * Controls the overall intensity of the blur effect applied to reflections.
    */ get ssrBlurScale() {
         return this._ssrBlurriness;
     }
     set ssrBlurScale(val) {
         this._ssrBlurriness = val;
     }
-    /**
-   * Gets the depth cutoff value for SSR blur.
-   * Determines at what depth difference the blur effect should be reduced or eliminated.
+    /**
+   * Gets the depth cutoff value for SSR blur.
+   * Determines at what depth difference the blur effect should be reduced or eliminated.
    */ get ssrBlurDepthCutoff() {
         return this._ssrBlurDepthCutoff;
     }
     set ssrBlurDepthCutoff(val) {
         this._ssrBlurDepthCutoff = val;
     }
-    /**
-   * Gets the kernel size for the SSR blur effect.
-   * Defines the size of the blur kernel. Larger values create softer, more spread-out blur.
+    /**
+   * Gets the kernel size for the SSR blur effect.
+   * Defines the size of the blur kernel. Larger values create softer, more spread-out blur.
    */ get ssrBlurKernelSize() {
         return this._ssrBlurKernelSize;
     }
     set ssrBlurKernelSize(val) {
         this._ssrBlurKernelSize = val;
     }
-    /**
-   * Gets the standard deviation for the SSR Gaussian blur.
-   * Controls the distribution of the blur effect. Higher values create more pronounced blur.
+    /**
+   * Gets the standard deviation for the SSR Gaussian blur.
+   * Controls the distribution of the blur effect. Higher values create more pronounced blur.
    */ get ssrBlurStdDev() {
         return this._ssrBlurStdDev;
     }
     set ssrBlurStdDev(val) {
         this._ssrBlurStdDev = val;
     }
-    /**
-   * Gets whether SSR temporal accumulation is enabled.
+    /**
+   * Gets whether SSR temporal accumulation is enabled.
    */ get ssrTemporal() {
         return this._ssrTemporal;
     }
     set ssrTemporal(val) {
         this._ssrTemporal = !!val;
     }
-    /**
-   * Gets SSR temporal blending weight in [0, 1].
-   * Higher values rely more on reprojected history.
+    /**
+   * Gets SSR temporal blending weight in [0, 1].
+   * Higher values rely more on reprojected history.
    */ get ssrTemporalWeight() {
         return this._ssrTemporalWeight;
     }
     set ssrTemporalWeight(val) {
         this._ssrTemporalWeight = Math.max(0, Math.min(1, val ?? 0));
     }
-    /**
-   * Gets whether Screen Space Subsurface Scattering (SSS) is enabled.
+    /**
+   * Gets whether Screen Space Subsurface Scattering (SSS) is enabled.
    */ get SSS() {
         return this._postEffectSSS.get().enabled;
     }
@@ -679,11 +697,11 @@ const SSS_QUALITY_PRESET_SETTINGS = {
     set sssBlurScale(val) {
         this._sssBlurScale = Math.max(0, val ?? 0);
     }
-    /**
-   * High-level quality preset for SSS blur controls.
-   *
-   * This is the primary user-facing SSS quality control and only affects
-   * the blur sampling quality/performance tradeoff, not the authored look.
+    /**
+   * High-level quality preset for SSS blur controls.
+   *
+   * This is the primary user-facing SSS quality control and only affects
+   * the blur sampling quality/performance tradeoff, not the authored look.
    */ get sssQualityPreset() {
         return this._sssQualityPreset;
     }
@@ -781,8 +799,8 @@ const SSS_QUALITY_PRESET_SETTINGS = {
     /** @internal */ get ssrParams() {
         return this._ssrParams;
     }
-    /**
-   * Gets whether SSAO is enabled.
+    /**
+   * Gets whether SSAO is enabled.
    */ get SSAO() {
         return this._postEffectSSAO.get().enabled;
     }
@@ -889,6 +907,21 @@ const SSS_QUALITY_PRESET_SETTINGS = {
             }
         }
     }
+    /** Dual depth peeling OIT peel iteration count. */ get oitDualDepthPeels() {
+        return this._oitDualDepthPeels;
+    }
+    set oitDualDepthPeels(val) {
+        const peels = Math.max(1, Math.floor(val || 0));
+        if (peels !== this._oitDualDepthPeels) {
+            this._oitDualDepthPeels = peels;
+            // Peel count only drives the per-frame pass loop, so update the live
+            // instance in place instead of rebuilding it.
+            const oit = this._oit.get();
+            if (oit instanceof DualDepthPeelingOIT) {
+                oit.numPeels = peels;
+            }
+        }
+    }
     /** Clip plane mask */ get clipMask() {
         return this._clipMask;
     }
@@ -922,27 +955,27 @@ const SSS_QUALITY_PRESET_SETTINGS = {
         }
         return this._viewport;
     }
-    /**
-   * Screen configuration used for adapting the camera viewport
+    /**
+   * Screen configuration used for adapting the camera viewport
    */ get screenConfig() {
         return this._screenAdapter.config;
     }
     set screenConfig(config) {
         this._screenAdapter.config = config;
     }
-    /**
-   * Screen viewport used for adapting the camera viewport
+    /**
+   * Screen viewport used for adapting the camera viewport
    */ get screenViewport() {
         return this._screenAdapter.viewport;
     }
     set screenViewport(viewport) {
         this._screenAdapter.viewport = viewport;
     }
-    /**
-   * Handle input events
-   * @param ev - input event object
-   * @param type - event type, default to ev.type
-   * @returns Boolean value indicates whether the event was handled.
+    /**
+   * Handle input events
+   * @param ev - input event object
+   * @param type - event type, default to ev.type
+   * @returns Boolean value indicates whether the event was handled.
    */ handleEvent(ev, type) {
         let handled = false;
         if (this._controller) {
@@ -975,12 +1008,12 @@ const SSS_QUALITY_PRESET_SETTINGS = {
         }
         return handled;
     }
-    /**
-   * Constructs a ray based on the given screen coordinates.
-   *
-   * @param x - The x-component of the screen coordinates, relative to the top-left corner of the viewport.
-   * @param y - The y-component of the screen coordinates, relative to the top-left corner of the viewport.
-   * @returns The ray originating from the camera position and passing through the given screen coordinates.
+    /**
+   * Constructs a ray based on the given screen coordinates.
+   *
+   * @param x - The x-component of the screen coordinates, relative to the top-left corner of the viewport.
+   * @param y - The y-component of the screen coordinates, relative to the top-left corner of the viewport.
+   * @returns The ray originating from the camera position and passing through the given screen coordinates.
    */ constructRay(x, y) {
         const width = this.viewport ? this.viewport[2] : getDevice().getViewport().width;
         const height = this.viewport ? this.viewport[3] : getDevice().getViewport().height;
@@ -998,54 +1031,54 @@ const SSS_QUALITY_PRESET_SETTINGS = {
         const vDir = Vector3.sub(farWorld.xyz(), vEye).inplaceNormalize();
         return new Ray(vEye, vDir);
     }
-    /**
-   * Place the camera by specifying the camera position and the target point
-   * @param eye - The camera position
-   * @param target - The target point to look at
-   * @param up - The up vector
-   * @returns self
+    /**
+   * Place the camera by specifying the camera position and the target point
+   * @param eye - The camera position
+   * @param target - The target point to look at
+   * @param up - The up vector
+   * @returns self
    */ lookAt(eye, target, up) {
         return this.setLocalTransform(Matrix4x4.lookAt(eye, target, up));
     }
-    /**
-   * Place the camera to look at a given cube face at a given camera position
-   * @param face - The cube face to look at
-   * @param position - The camera position
-   * @returns self
+    /**
+   * Place the camera to look at a given cube face at a given camera position
+   * @param face - The cube face to look at
+   * @param position - The camera position
+   * @returns self
    */ lookAtCubeFace(face, position) {
         return this.setLocalTransform(Matrix4x4.lookAtCubeFace(face, position ?? this.position));
     }
-    /**
-   * Setup a perspective projection matrix for the camera
-   * @param fovY - The vertical field of view in radians.
-   * @param aspect - The aspect ratio
-   * @param zNear - The near clip plane
-   * @param zFar - The far clip plane
-   * @returns self
+    /**
+   * Setup a perspective projection matrix for the camera
+   * @param fovY - The vertical field of view in radians.
+   * @param aspect - The aspect ratio
+   * @param zNear - The near clip plane
+   * @param zFar - The far clip plane
+   * @returns self
    */ setPerspective(fovY, aspect, zNear, zFar) {
         this._projMatrix.perspective(fovY, aspect, zNear, zFar);
         Matrix4x4.invert(this._projMatrix, this._invProjMatrix);
         this._invalidate(true);
         return this;
     }
-    /**
-   * Setup a orthogonal projection matrix for the camera
-   * @param left - Left bound of the frustum
-   * @param right - Right bound of the frustum
-   * @param bottom - Bottom bound of the frustum
-   * @param top - Top bound of the frustum
-   * @param near - Near bound of the frustum.
-   * @param far - Far bound of the frustum.
-   * @returns self
+    /**
+   * Setup a orthogonal projection matrix for the camera
+   * @param left - Left bound of the frustum
+   * @param right - Right bound of the frustum
+   * @param bottom - Bottom bound of the frustum
+   * @param top - Top bound of the frustum
+   * @param near - Near bound of the frustum.
+   * @param far - Far bound of the frustum.
+   * @returns self
    */ setOrtho(left, right, bottom, top, near, far) {
         this._projMatrix.ortho(left, right, bottom, top, near, far);
         Matrix4x4.invert(this._projMatrix, this._invProjMatrix);
         this._invalidate(true);
         return this;
     }
-    /**
-   * Setup a projection matrix for the camera
-   * @param matrix - The projection matrix
+    /**
+   * Setup a projection matrix for the camera
+   * @param matrix - The projection matrix
    */ setProjectionMatrix(matrix) {
         if (matrix && matrix !== this._projMatrix) {
             this._projMatrix = matrix;
@@ -1053,18 +1086,18 @@ const SSS_QUALITY_PRESET_SETTINGS = {
             this._invalidate(true);
         }
     }
-    /**
-   * Gets the projection matrix of the camera
-   * @returns The projection matrix
+    /**
+   * Gets the projection matrix of the camera
+   * @returns The projection matrix
    */ getProjectionMatrix() {
         if (this.dirtyCheck()) {
             this._compute();
         }
         return this._projMatrix;
     }
-    /**
-   * Gets the inverse projection matrix of the camera
-   * @returns The projection matrix
+    /**
+   * Gets the inverse projection matrix of the camera
+   * @returns The projection matrix
    */ getInvProjectionMatrix() {
         if (this.dirtyCheck()) {
             this._compute();
@@ -1082,11 +1115,11 @@ const SSS_QUALITY_PRESET_SETTINGS = {
         rotationMatrix.setRow(2, new Vector4(zAxis.x, zAxis.y, zAxis.z, 0));
         return rotationMatrix;
     }
-    /**
-   * View matrix of the camera
-   *
-   * @remarks
-   * Camera's view matrix will transform a point from the world space to the camera space
+    /**
+   * View matrix of the camera
+   *
+   * @remarks
+   * Camera's view matrix will transform a point from the world space to the camera space
    */ get viewMatrix() {
         if (this.dirtyCheck()) {
             this._compute();
@@ -1099,11 +1132,11 @@ const SSS_QUALITY_PRESET_SETTINGS = {
         }
         return this._viewProjMatrix;
     }
-    /**
-   * The inverse-view-projection matrix of the camera
-   *
-   * @remarks
-   * The inverse-view-projection matrix transforms a point from the clip space to the camera space
+    /**
+   * The inverse-view-projection matrix of the camera
+   *
+   * @remarks
+   * The inverse-view-projection matrix transforms a point from the clip space to the camera space
    */ get invViewProjectionMatrix() {
         if (this.dirtyCheck()) {
             this._compute();
@@ -1155,9 +1188,9 @@ const SSS_QUALITY_PRESET_SETTINGS = {
     /** Returns true if the camera is orthographic */ isOrtho() {
         return this.getProjectionMatrix().isOrtho();
     }
-    /**
-   * Gets the camera history data which is used in temporal reprojection
-   * @returns Camera history data
+    /**
+   * Gets the camera history data which is used in temporal reprojection
+   * @returns Camera history data
    */ getHistoryData() {
         let data = Camera._historyData.get(this);
         if (!data) {
@@ -1171,8 +1204,8 @@ const SSS_QUALITY_PRESET_SETTINGS = {
         }
         return data;
     }
-    /**
-   * Clears the camera history data which is used in temporal reprojection
+    /**
+   * Clears the camera history data which is used in temporal reprojection
    */ clearHistoryData() {
         const data = Camera._historyData.get(this);
         if (data) {
@@ -1302,10 +1335,10 @@ const SSS_QUALITY_PRESET_SETTINGS = {
         this._sssResolvedSettings.blurDepthCutoff = source.blurDepthCutoff;
         this._sssResolvedSettings.normalCutoff = source.normalCutoff;
     }
-    /**
-   * Renders a scene
-   * @param scene - The scene to be rendered
-   * @param compositor - Compositor instance that will be used to apply postprocess effects
+    /**
+   * Renders a scene
+   * @param scene - The scene to be rendered
+   * @param compositor - Compositor instance that will be used to apply postprocess effects
    */ render(scene) {
         const device = getDevice();
         //this.updatePostProcessing(device);
@@ -1379,13 +1412,13 @@ const SSS_QUALITY_PRESET_SETTINGS = {
     /** @internal */ getPickPosY() {
         return this._pickPosY;
     }
-    /**
-   * Updates the controller state
+    /**
+   * Updates the controller state
    */ updateController() {
         this._controller?.update();
     }
-    /**
-   * Reset the controller
+    /**
+   * Reset the controller
    */ resetController() {
         this._controller?.reset();
     }
@@ -1410,15 +1443,15 @@ const SSS_QUALITY_PRESET_SETTINGS = {
     /** @internal */ get prevPosition() {
         return this._prevPosition;
     }
-    /**
-   * Gets the camera history resource manager for temporal effects.
+    /**
+   * Gets the camera history resource manager for temporal effects.
    */ getHistoryResourceManager() {
         return Camera._historyResourceManager.get(this) ?? null;
     }
-    /**
-   * Sets the camera history resource manager for temporal effects.
-   *
-   * @internal
+    /**
+   * Sets the camera history resource manager for temporal effects.
+   *
+   * @internal
    */ setHistoryResourceManager(manager) {
         const current = Camera._historyResourceManager.get(this);
         if (current && current !== manager) {
@@ -1482,6 +1515,9 @@ const SSS_QUALITY_PRESET_SETTINGS = {
         if (mode === 'weighted') {
             return new WeightedBlendedOIT();
         }
+        if (mode === 'dual-depth') {
+            return new DualDepthPeelingOIT(this._oitDualDepthPeels);
+        }
         return null;
     }
     /** @internal */ inferOITMode(oit) {
@@ -1495,6 +1531,9 @@ const SSS_QUALITY_PRESET_SETTINGS = {
         if (type === WeightedBlendedOIT.type) {
             return 'weighted';
         }
+        if (type === DualDepthPeelingOIT.type) {
+            return 'dual-depth';
+        }
         return null;
     }
     /** @internal */ posInViewport(x, y) {