@zephyr3d/scene 0.6.0 → 0.7.0

package/dist/camera/camera.js

@@ -1,102 +1,214 @@
-import { Matrix4x4, Vector4, Vector3, Ray, Frustum } from '@zephyr3d/base';
+import { halton23, Matrix4x4, Vector4, DRef, Vector2, Vector3, Ray, Frustum } from '@zephyr3d/base';
 import { SceneNode } from '../scene/scene_node.js';
-import { Application } from '../app.js';
-import '../scene/octree.js';
-import '../values.js';
-import '@zephyr3d/device';
-import '../material/shader/helper.js';
-import '../material/lambert.js';
-import '../material/blinn.js';
-import '../material/unlit.js';
-import '../material/meshmaterial.js';
-import '../material/grassmaterial.js';
-import '../material/terrainmaterial.js';
-import '../material/pbrmr.js';
-import '../material/pbrsg.js';
-import { SceneRenderer } from '../render/renderer.js';
-import '../render/sky.js';
-import '../render/clipmap.js';
+import { Compositor } from '../posteffect/compositor.js';
+import { TAA } from '../posteffect/taa.js';
+import { SSR } from '../posteffect/ssr.js';
+import { Tonemap } from '../posteffect/tonemap.js';
+import { FXAA } from '../posteffect/fxaa.js';
+import { Bloom } from '../posteffect/bloom.js';
+import { SAO } from '../posteffect/sao.js';
+import { MotionBlur } from '../posteffect/motionblur.js';
+import { getDevice } from '../app/api.js';
 
 /**
- * The camera node class
+ * 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, 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 */ _projMatrix;
-    /** @internal */ _viewMatrix;
-    /** @internal */ _viewProjMatrix;
-    /** @internal */ _rotationMatrix;
-    /** @internal */ _invViewProjMatrix;
-    /** @internal */ _clipPlane;
-    /** @internal */ _controller;
-    /** @internal */ _frustum;
-    /** @internal */ _frustumV;
-    /** @internal */ _dirty;
-    /** @internal */ _sampleCount;
-    /** @internal */ _framebuffer;
-    /** @internal */ _viewport;
-    /** @internal */ _scissor;
-    /** @internal */ _clearColor;
-    /** @internal */ _clipMask;
-    /** @internal */ _oit;
-    /** @internal */ _depthPrePass;
-    /** @internal */ _commandBufferReuse;
-    /** @internal */ _HiZ;
-    /** @internal */ _SSR;
-    /** @internal */ _ssrParams;
-    /** @internal */ _ssrMaxRoughness;
-    /** @internal */ _ssrRoughnessFactor;
-    /** @internal */ _ssrStride;
-    /** @internal */ _ssrCalcThickness;
-    /** @internal */ _ssrBlurriness;
-    /** @internal */ _ssrBlurDepthCutoff;
-    /** @internal */ _ssrBlurKernelSize;
-    /** @internal */ _ssrBlurStdDev;
-    /** @internal */ _picking;
-    /** @internal */ _pickPosX;
-    /** @internal */ _pickPosY;
-    /** @internal */ _pickResultPromise;
-    /** @internal */ _pickResult;
-    /**
-   * Creates a new camera node
+    /** @internal Halton 2-3 sequence used for TAA jittering. */ static _halton23 = halton23(16);
+    /** @internal Per-camera history resources. */ static _historyData = new WeakMap();
+    /** @internal Projection matrix. */ _projMatrix;
+    /** @internal Inverse projection matrix. */ _invProjMatrix;
+    /** @internal View matrix (world -\> camera). */ _viewMatrix;
+    /** @internal View-projection matrix. */ _viewProjMatrix;
+    /** @internal Rotation matrix derived from world transform (camera conventions). */ _rotationMatrix;
+    /** @internal Inverse view-projection matrix. */ _invViewProjMatrix;
+    /** @internal Framebuffer clear color, disabled when null. Default is null */ _clearColor;
+    /** @internal Framebuffer depth clear value, disabled when null. Default is 1 */ _clearDepth;
+    /** @internal Framebuffer stencil clear value, disabled when null. Default is 0 */ _clearStencil;
+    /** @internal Optional clip plane in camera space. */ _clipPlane;
+    /** @internal Camera controller (input). */ _controller;
+    /** @internal World-space frustum (from VP). */ _frustum;
+    /** @internal View-space frustum (from P). */ _frustumV;
+    /** @internal Dirty flag indicating derived matrices/frusta need recompute. */ _dirty;
+    /** @internal Viewport [x, y, w, h]; null uses full framebuffer. */ _viewport;
+    /** @internal Scissor rectangle [x, y, w, h]; null uses viewport. */ _scissor;
+    /** @internal Clip plane mask for custom clipping schemes. */ _clipMask;
+    /** @internal Order-Independent Transparency reference. */ _oit;
+    /** @internal Whether to perform a depth pre-pass. */ _depthPrePass;
+    /** @internal Whether command buffers may be reused for optimization. */ _commandBufferReuse;
+    /** @internal Hi-Z acceleration enable (primarily for SSR). */ _HiZ;
+    /** @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;
+    /** @internal Tonemap exposure. */ _tonemapExposure;
+    /** @internal Motion blur enable flag (via post effect). */ _motionBlur;
+    /** @internal Motion blur post effect reference. */ _postEffectMotionBlur;
+    /** @internal Motion blur strength. */ _motionBlurStrength;
+    /** @internal Bloom enable flag (via post effect). */ _bloom;
+    /** @internal Bloom post effect reference. */ _postEffectBloom;
+    /** @internal Bloom downsample level cap. */ _bloomMaxDownsampleLevels;
+    /** @internal Bloom downsample resolution limit. */ _bloomDownsampleLimit;
+    /** @internal Bloom threshold. */ _bloomThreshold;
+    /** @internal Bloom threshold knee (soft thresholding). */ _bloomThresholdKnee;
+    /** @internal Bloom intensity. */ _bloomIntensity;
+    /** @internal FXAA enable flag (via post effect). */ _FXAA;
+    /** @internal FXAA post effect reference. */ _postEffectFXAA;
+    /** @internal TAA enable flag (via post effect). */ _TAA;
+    /** @internal TAA post effect reference. */ _postEffectTAA;
+    /** @internal TAA debug mode (implementation-defined). */ _TAADebug;
+    /** @internal SSR enable flag (via post effect). */ _SSR;
+    /** @internal SSR post effect reference. */ _postEffectSSR;
+    /** @internal SSR parameter vector: (maxDistance, iterations, thickness, reserved). */ _ssrParams;
+    /** @internal SSR roughness cutoff; above this SSR is suppressed. */ _ssrMaxRoughness;
+    /** @internal SSR roughness factor scaling. */ _ssrRoughnessFactor;
+    /** @internal SSR stride for ray marching. */ _ssrStride;
+    /** @internal Whether SSR thickness is computed automatically. */ _ssrCalcThickness;
+    /** @internal SSR blur scale. */ _ssrBlurriness;
+    /** @internal SSR blur depth cutoff. */ _ssrBlurDepthCutoff;
+    /** @internal SSR blur kernel size. */ _ssrBlurKernelSize;
+    /** @internal SSR Gaussian blur standard deviation. */ _ssrBlurStdDev;
+    /** @internal SSAO enable flag (via post effect). */ _SSAO;
+    /** @internal SSAO post effect reference. */ _postEffectSSAO;
+    /** @internal SSAO scale (sampling radius multiplier). */ _SSAOScale;
+    /** @internal SSAO bias (self-shadowing reduction). */ _SSAOBias;
+    /** @internal SSAO sample radius. */ _SSAORadius;
+    /** @internal SSAO intensity. */ _SSAOIntensity;
+    /** @internal SSAO blur depth cutoff. */ _SSAOBlurDepthCutoff;
+    /** @internal Pending GPU-pick promise (one-shot). */ _pickResultPromise;
+    /** @internal Resolver for the pending pick promise. */ _pickResultResolve;
+    /** @internal Last pick X position (viewport-relative). */ _pickPosX;
+    /** @internal Last pick Y position (viewport-relative). */ _pickPosY;
+    /** @internal Last resolved pick result (optional cache). */ _pickResult;
+    /** @internal Current jitter value in clip space (x, y). */ _jitterValue;
+    /** @internal Previous frame’s jitter value. */ _prevJitterValue;
+    /** @internal Current jittered VP matrix. */ _jitteredVPMatrix;
+    /** @internal Inverse of the current jittered VP matrix. */ _jitteredInvVPMatrix;
+    /** @internal Previous frame’s non-jittered VP matrix. */ _prevVPMatrix;
+    /** @internal Previous frame’s camera world position. */ _prevPosition;
+    /** @internal Previous frame’s jittered VP matrix. */ _prevJitteredVPMatrix;
+    /** @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 the camera belongs to
-   * @param projectionMatrix - Projection matrix for this camera
+   * @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();
+        this._invProjMatrix = Matrix4x4.invert(this._projMatrix);
         this._viewMatrix = Matrix4x4.identity();
         this._viewProjMatrix = Matrix4x4.identity();
         this._invViewProjMatrix = Matrix4x4.identity();
         this._clipPlane = null;
+        this._clearColor = new Vector4(0, 0, 0, 1);
+        this._clearDepth = 1;
+        this._clearStencil = 0;
         this._dirty = true;
         this._controller = null;
-        this._framebuffer = null;
         this._viewport = null;
         this._scissor = null;
-        this._clearColor = new Vector4(0, 0, 0, 1);
         this._clipMask = 0;
-        this._sampleCount = 1;
         this._frustum = null;
         this._frustumV = null;
-        this._oit = null;
+        this._oit = new DRef();
         this._depthPrePass = false;
-        this._pickPosX = 0;
-        this._pickPosY = 0;
         this._HiZ = false;
+        this._HDR = true;
+        this._toneMap = true;
+        this._postEffectTonemap = new DRef();
+        this._tonemapExposure = 1;
+        this._motionBlur = false;
+        this._postEffectMotionBlur = new DRef();
+        this._motionBlurStrength = 1;
+        this._bloom = false;
+        this._postEffectBloom = new DRef();
+        this._bloomMaxDownsampleLevels = 4;
+        this._bloomDownsampleLimit = 32;
+        this._bloomThreshold = 0.8;
+        this._bloomThresholdKnee = 0;
+        this._bloomIntensity = 1;
+        this._FXAA = false;
+        this._postEffectFXAA = new DRef();
+        this._TAA = false;
+        this._postEffectTAA = new DRef();
+        this._TAADebug = 0;
         this._SSR = false;
+        this._postEffectSSR = new DRef();
         this._ssrParams = new Vector4(100, 120, 0.5, 0);
         this._ssrMaxRoughness = 0.8;
         this._ssrRoughnessFactor = 1;
         this._ssrStride = 2;
         this._ssrCalcThickness = false;
-        this._ssrBlurriness = 0.05;
+        this._ssrBlurriness = 0.01;
         this._ssrBlurDepthCutoff = 2;
-        this._ssrBlurKernelSize = 17;
+        this._ssrBlurKernelSize = 10;
         this._ssrBlurStdDev = 10;
+        this._SSAO = false;
+        this._postEffectSSAO = new DRef();
+        this._SSAOScale = 10;
+        this._SSAOBias = 1;
+        this._SSAOIntensity = 0.025;
+        this._SSAORadius = 100;
+        this._SSAOBlurDepthCutoff = 2;
         this._pickResult = null;
         this._commandBufferReuse = true;
+        this._jitteredVPMatrix = new Matrix4x4();
+        this._jitteredInvVPMatrix = new Matrix4x4();
+        this._jitterValue = new Vector2(0, 0);
+        this._prevVPMatrix = null;
+        this._prevPosition = null;
+        this._prevJitteredVPMatrix = null;
+        this._prevJitterValue = null;
+        this._pickResultPromise = null;
+        this._pickResultResolve = null;
+        this._pickPosX = 0;
+        this._pickPosY = 0;
+        this._compositor = new Compositor();
+        this._capturedButton = -1;
+        this._interactionRect = null;
+        this.updatePostProcessing();
+        if (scene && !scene.mainCamera) {
+            scene.mainCamera = this;
+        }
+    }
+    /**
+   * 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)
+   */ get interactionRect() {
+        return this._interactionRect;
     }
-    /** Clip plane in camera space */ get clipPlane() {
+    set interactionRect(rect) {
+        this._interactionRect = rect;
+    }
+    /**
+   * Clip plane in camera space.
+   *
+   * Setting this invalidates derived data. Shaders should respect `clipMask` and plane.
+   */ get clipPlane() {
         return this._clipPlane;
     }
     set clipPlane(plane) {
@@ -104,8 +216,33 @@ import '../render/clipmap.js';
         this._invalidate(false);
     }
     /**
-   * Gets whether Hi-Z acceleration is enabled.
-   * When enabled, it can significantly improve SSR performance with minimal quality impact.
+   * 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.
+   */ get clearDepth() {
+        return this._clearDepth;
+    }
+    set clearDepth(v) {
+        this._clearDepth = v;
+    }
+    /**
+   * 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.
    */ get HiZ() {
         return this._HiZ;
     }
@@ -113,12 +250,145 @@ import '../render/clipmap.js';
         this._HiZ = !!val;
     }
     /**
+   * 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.
+   */ get toneMap() {
+        return this._postEffectTonemap.get().enabled;
+    }
+    set toneMap(val) {
+        this._postEffectTonemap.get().enabled = !!val;
+    }
+    /**
+   * Whether motion blur is enabled via the post effect.
+   */ get motionBlur() {
+        return this._postEffectMotionBlur.get().enabled;
+    }
+    set motionBlur(val) {
+        this._postEffectMotionBlur.get().enabled = !!val;
+    }
+    /** Motion blur strength */ get motionBlurStrength() {
+        return this._motionBlurStrength;
+    }
+    set motionBlurStrength(val) {
+        this._motionBlurStrength = val;
+        if (this._postEffectMotionBlur.get()) {
+            this._postEffectMotionBlur.get().strength = this._motionBlurStrength;
+        }
+    }
+    /**
+   * Gets whether Bloom is enabled.
+   */ get bloom() {
+        return this._postEffectBloom.get().enabled;
+    }
+    set bloom(val) {
+        this._postEffectBloom.get().enabled = !!val;
+    }
+    /**
+   * Maximum bloom downsample levels
+   */ get bloomMaxDownsampleLevels() {
+        return this._bloomMaxDownsampleLevels;
+    }
+    set bloomMaxDownsampleLevels(val) {
+        this._bloomMaxDownsampleLevels = val;
+        if (this._postEffectBloom.get()) {
+            this._postEffectBloom.get().maxDownsampleLevel = val;
+        }
+    }
+    /**
+   * Bloom downsample limit
+   */ get bloomDownsampleLimit() {
+        return this._bloomDownsampleLimit;
+    }
+    set bloomDownsampleLimit(val) {
+        this._bloomDownsampleLimit = val;
+        if (this._postEffectBloom.get()) {
+            this._postEffectBloom.get().downsampleLimit = val;
+        }
+    }
+    /**
+   * Bloom threshold
+   */ get bloomThreshold() {
+        return this._bloomThreshold;
+    }
+    set bloomThreshold(val) {
+        this._bloomThreshold = val;
+        if (this._postEffectBloom.get()) {
+            this._postEffectBloom.get().threshold = val;
+        }
+    }
+    /**
+   * Bloom threshold knee
+   */ get bloomThresholdKnee() {
+        return this._bloomThresholdKnee;
+    }
+    set bloomThresholdKnee(val) {
+        this._bloomThresholdKnee = val;
+        if (this._postEffectBloom.get()) {
+            this._postEffectBloom.get().thresholdKnee = val;
+        }
+    }
+    /**
+   * Bloom intensity
+   */ get bloomIntensity() {
+        return this._bloomIntensity;
+    }
+    set bloomIntensity(val) {
+        this._bloomIntensity = val;
+        if (this._postEffectBloom.get()) {
+            this._postEffectBloom.get().intensity = val;
+        }
+    }
+    /**
+   * Gets whether FXAA is enabled.
+   */ get FXAA() {
+        return this._postEffectFXAA.get().enabled;
+    }
+    set FXAA(val) {
+        this._postEffectFXAA.get().enabled = !!val;
+    }
+    /**
+   * Tonemap exposure
+   */ get toneMapExposure() {
+        return this._tonemapExposure;
+    }
+    set toneMapExposure(val) {
+        this._tonemapExposure = val;
+        if (this._postEffectTonemap.get()) {
+            this._postEffectTonemap.get().exposure = val;
+        }
+    }
+    /**
+   * 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
+   */ get TAADebug() {
+        return this._TAADebug;
+    }
+    set TAADebug(val) {
+        this._TAADebug = val;
+    }
+    /**
    * Gets whether Screen Space Reflections (SSR) is enabled.
    */ get SSR() {
-        return this._SSR;
+        return this._postEffectSSR.get().enabled;
     }
     set SSR(val) {
-        this._SSR = !!val;
+        this._postEffectSSR.get().enabled = !!val;
     }
     /**
    * Gets the maximum roughness value for screen space reflections.
@@ -222,68 +492,76 @@ import '../render/clipmap.js';
     /** @internal */ get ssrParams() {
         return this._ssrParams;
     }
-    /** Whether to perform a depth pass */ get depthPrePass() {
-        return this._depthPrePass;
+    /**
+   * Gets whether SSAO is enabled.
+   */ get SSAO() {
+        return this._postEffectSSAO.get().enabled;
     }
-    set depthPrePass(val) {
-        this._depthPrePass = !!val;
+    set SSAO(val) {
+        this._postEffectSSAO.get().enabled = !!val;
     }
-    /** Whether to allow command buffer reuse optimization */ get commandBufferReuse() {
-        return this._commandBufferReuse;
+    /** SSAO scale */ get SSAOScale() {
+        return this._SSAOScale;
     }
-    set commandBufferReuse(val) {
-        this._commandBufferReuse = !!val;
+    set SSAOScale(val) {
+        this._SSAOScale = val;
+        if (this._postEffectSSAO.get()) {
+            this._postEffectSSAO.get().scale = val;
+        }
     }
-    /** Whether GPU picking is enabled for this camera */ get enablePicking() {
-        return this._picking;
+    /** SSAO bias */ get SSAOBias() {
+        return this._SSAOBias;
     }
-    set enablePicking(enable) {
-        this._picking = !!enable;
+    set SSAOBias(val) {
+        this._SSAOBias = val;
+        if (this._postEffectSSAO.get()) {
+            this._postEffectSSAO.get().bias = val;
+        }
     }
-    /** X coordinate for picking related to viewport  */ get pickPosX() {
-        return this._pickPosX;
+    /** SSAO radius */ get SSAORadius() {
+        return this._SSAORadius;
     }
-    set pickPosX(val) {
-        this._pickPosX = val;
+    set SSAORadius(val) {
+        this._SSAORadius = val;
+        if (this._postEffectSSAO.get()) {
+            this._postEffectSSAO.get().radius = val;
+        }
     }
-    /** Y coordinate for picking related to viewport  */ get pickPosY() {
-        return this._pickPosY;
+    /** SSAO intensity */ get SSAOIntensity() {
+        return this._SSAOIntensity;
     }
-    set pickPosY(val) {
-        this._pickPosY = val;
+    set SSAOIntensity(val) {
+        this._SSAOIntensity = val;
+        if (this._postEffectSSAO.get()) {
+            this._postEffectSSAO.get().intensity = val;
+        }
     }
-    /** Pick result */ get pickResult() {
-        return this._pickResult;
+    /** SSAO depth cutoff */ get SSAOBlurDepthCutoff() {
+        return this._SSAOBlurDepthCutoff;
     }
-    set pickResult(val) {
-        this._pickResult = val;
+    set SSAOBlurDepthCutoff(val) {
+        this._SSAOBlurDepthCutoff = val;
+        if (this._postEffectSSAO.get()) {
+            this._postEffectSSAO.get().blurDepthCutoff = val;
+        }
     }
-    /** @internal */ get pickResultAsync() {
-        return this._pickResultPromise;
+    /** Whether to perform a depth pass */ get depthPrePass() {
+        return this._depthPrePass;
     }
-    set pickResultAsync(val) {
-        this._pickResultPromise = val;
+    set depthPrePass(val) {
+        this._depthPrePass = !!val;
     }
-    /**
-   * Sample count for MSAA
-   *
-   * @remarks
-   * If greater than one, force the scene to be rendered using multisampled framebuffer
-   */ get sampleCount() {
-        return this._sampleCount;
+    /** Whether to allow command buffer reuse optimization */ get commandBufferReuse() {
+        return this._commandBufferReuse;
     }
-    set sampleCount(val) {
-        if (val !== 1 && val !== 4) {
-            console.error(`Invalid sample count: ${val}`);
-        } else {
-            this._sampleCount = val;
-        }
+    set commandBufferReuse(val) {
+        this._commandBufferReuse = !!val;
     }
     /** OIT */ get oit() {
-        return this._oit;
+        return this._oit.get();
     }
     set oit(val) {
-        this._oit = val;
+        this._oit.set(val);
     }
     /** Clip plane mask */ get clipMask() {
         return this._clipMask;
@@ -291,12 +569,6 @@ import '../render/clipmap.js';
     set clipMask(val) {
         this._clipMask = val;
     }
-    /** Framebuffer object into which the scene will be rendered */ get framebuffer() {
-        return this._framebuffer;
-    }
-    set framebuffer(fb) {
-        this._framebuffer = fb ?? null;
-    }
     /** Viewport used for rendering, if null, use full framebuffer size */ get viewport() {
         return this._viewport ? [
             ...this._viewport
@@ -313,16 +585,6 @@ import '../render/clipmap.js';
     set scissor(rect) {
         this._scissor = rect?.slice() ?? null;
     }
-    /** Color value used to clear color buffer before rendering, if null, color buffer will not be cleared */ get clearColor() {
-        return this._clearColor;
-    }
-    set clearColor(val) {
-        if (!val) {
-            this._clearColor = null;
-        } else {
-            this._clearColor.set(val);
-        }
-    }
     /**
    * Handle input events
    * @param ev - input event object
@@ -331,11 +593,20 @@ import '../render/clipmap.js';
    */ handleEvent(ev, type) {
         let handled = false;
         if (this._controller) {
+            if (this._capturedButton < 0 && (ev instanceof PointerEvent || ev instanceof WheelEvent) && !this.posInViewport(ev.offsetX, ev.offsetY)) {
+                return false;
+            }
             type = type ?? ev.type;
             if (type === 'pointerdown') {
+                if (this._capturedButton < 0) {
+                    this._capturedButton = ev.button;
+                }
                 handled = this._controller.onMouseDown(ev);
             } else if (type === 'pointerup') {
                 handled = this._controller.onMouseUp(ev);
+                if (this._capturedButton === ev.button) {
+                    this._capturedButton = -1;
+                }
             } else if (type === 'pointermove') {
                 handled = this._controller.onMouseMove(ev);
             } else if (type === 'wheel') {
@@ -345,7 +616,7 @@ import '../render/clipmap.js';
             } else if (type === 'keyup') {
                 handled = this._controller.onKeyUp(ev);
             }
-            if (handled) {
+            if (handled && ev.preventDefault) {
                 ev.preventDefault();
             }
         }
@@ -358,13 +629,20 @@ import '../render/clipmap.js';
    * @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] : Application.instance.device.getViewport().width;
-        const height = this.viewport ? this.viewport[3] : Application.instance.device.getViewport().height;
-        const vClip = new Vector4(2 * x / width - 1, 1 - 2 * y / height, 1, 1);
-        const vWorld = this.invViewProjectionMatrix.transform(vClip);
-        vWorld.scaleBy(1 / vWorld.w);
-        const vEye = this.getWorldPosition();
-        const vDir = Vector3.sub(vWorld.xyz(), vEye).inplaceNormalize();
+        const width = this.viewport ? this.viewport[2] : getDevice().getViewport().width;
+        const height = this.viewport ? this.viewport[3] : getDevice().getViewport().height;
+        const ndcX = 2 * x / width - 1;
+        const ndcY = 1 - 2 * y / height;
+        const nearClip = new Vector4(ndcX, ndcY, 0, 1);
+        const farClip = new Vector4(ndcX, ndcY, 1, 1);
+        const nearWorld = this.invViewProjectionMatrix.transform(nearClip);
+        const farWorld = this.invViewProjectionMatrix.transform(farClip);
+        if (this.isPerspective()) {
+            nearWorld.scaleBy(1 / nearWorld.w);
+            farWorld.scaleBy(1 / farWorld.w);
+        }
+        const vEye = this.isPerspective() ? this.getWorldPosition() : nearWorld.xyz();
+        const vDir = Vector3.sub(farWorld.xyz(), vEye).inplaceNormalize();
         return new Ray(vEye, vDir);
     }
     /**
@@ -393,6 +671,7 @@ import '../render/clipmap.js';
    * @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;
     }
@@ -407,6 +686,7 @@ import '../render/clipmap.js';
    * @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;
     }
@@ -415,7 +695,8 @@ import '../render/clipmap.js';
    * @param matrix - The projection matrix
    */ setProjectionMatrix(matrix) {
         if (matrix && matrix !== this._projMatrix) {
-            this._projMatrix.set(matrix);
+            this._projMatrix = matrix;
+            Matrix4x4.invert(this._projMatrix, this._invProjMatrix);
             this._invalidate(true);
         }
     }
@@ -429,6 +710,16 @@ import '../render/clipmap.js';
         }
         return this._projMatrix;
     }
+    /**
+   * Gets the inverse projection matrix of the camera
+   * @returns The projection matrix
+   */ getInvProjectionMatrix() {
+        if (this._dirty) {
+            this._dirty = false;
+            this._compute();
+        }
+        return this._invProjMatrix;
+    }
     getRotationMatrix() {
         const rotationMatrix = new Matrix4x4();
         this.worldMatrix.decompose(null, rotationMatrix, null);
@@ -498,32 +789,191 @@ import '../render/clipmap.js';
         return true;
     }
     /** Gets the near clip plane of the camera */ getNearPlane() {
-        return this._projMatrix.getNearPlane();
+        return this.getProjectionMatrix().getNearPlane();
     }
     /** Gets the far clip plane of the camera */ getFarPlane() {
-        return this._projMatrix.getFarPlane();
+        return this.getProjectionMatrix().getFarPlane();
     }
     /** Gets the vertical field of view of the camera */ getFOV() {
-        return this._projMatrix.getFov();
+        return this.getProjectionMatrix().getFov();
     }
     /** Gets the tangent of half of the vertical field of view */ getTanHalfFovy() {
-        return this._projMatrix.getTanHalfFov();
+        return this.getProjectionMatrix().getTanHalfFov();
     }
     /** Gets the aspect ratio */ getAspect() {
-        return this._projMatrix.getAspect();
+        return this.getProjectionMatrix().getAspect();
+    }
+    /** Returns true if the camera is perspective */ isPerspective() {
+        return this.getProjectionMatrix().isPerspective();
+    }
+    /** 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
+   */ getHistoryData() {
+        let data = Camera._historyData.get(this);
+        if (!data) {
+            data = {
+                prevColorTex: null,
+                prevMotionVectorTex: null
+            };
+            Camera._historyData.set(this, data);
+        }
+        return data;
+    }
+    /**
+   * Clears the camera history data which is used in temporal reprojection
+   */ clearHistoryData() {
+        const data = Camera._historyData.get(this);
+        if (data) {
+            if (data.prevColorTex) {
+                getDevice().pool.releaseTexture(data.prevColorTex);
+            }
+            if (data.prevMotionVectorTex) {
+                getDevice().pool.releaseTexture(data.prevMotionVectorTex);
+            }
+            Camera._historyData.delete(this);
+        }
+        this._prevVPMatrix = null;
+        this._prevPosition = null;
+        this._prevJitteredVPMatrix = null;
+        this._prevJitterValue = null;
+    }
+    /** @internal */ updatePostProcessing() {
+        this._compositor.clear();
+        if (!this._postEffectSSR.get()) {
+            const ssr = new SSR();
+            ssr.enabled = false;
+            this._postEffectSSR.set(ssr);
+            this._compositor.appendPostEffect(ssr);
+        }
+        if (!this._postEffectSSAO.get()) {
+            const ssao = new SAO();
+            ssao.enabled = false;
+            ssao.scale = this._SSAOScale;
+            ssao.bias = this._SSAOBias;
+            ssao.radius = this._SSAORadius;
+            ssao.intensity = this._SSAOIntensity;
+            ssao.blurDepthCutoff = this._SSAOBlurDepthCutoff;
+            this._postEffectSSAO.set(ssao);
+            this._compositor.appendPostEffect(ssao);
+        }
+        if (!this._postEffectTAA.get()) {
+            const taa = new TAA();
+            taa.enabled = false;
+            this._postEffectTAA.set(taa);
+            this._compositor.appendPostEffect(taa);
+        }
+        if (!this._postEffectMotionBlur.get()) {
+            const motionBlur = new MotionBlur();
+            motionBlur.enabled = false;
+            motionBlur.strength = this._motionBlurStrength;
+            this._postEffectMotionBlur.set(motionBlur);
+            this._compositor.appendPostEffect(motionBlur);
+        }
+        if (!this._postEffectTonemap.get()) {
+            const tonemap = new Tonemap();
+            tonemap.enabled = true;
+            tonemap.exposure = this._tonemapExposure;
+            this._postEffectTonemap.set(tonemap);
+            this._compositor.appendPostEffect(tonemap);
+        }
+        if (!this._postEffectFXAA.get()) {
+            const fxaa = new FXAA();
+            fxaa.enabled = false;
+            this._postEffectFXAA.set(fxaa);
+            this._compositor.appendPostEffect(fxaa);
+        }
+        if (!this._postEffectBloom.get()) {
+            const bloom = new Bloom();
+            bloom.enabled = false;
+            bloom.maxDownsampleLevel = this._bloomMaxDownsampleLevels;
+            bloom.downsampleLimit = this._bloomDownsampleLimit;
+            bloom.threshold = this._bloomThreshold;
+            bloom.thresholdKnee = this._bloomThresholdKnee;
+            bloom.intensity = this._bloomIntensity;
+            this._postEffectBloom.set(bloom);
+            this._compositor.appendPostEffect(bloom);
+        }
     }
     /**
    * Renders a scene
    * @param scene - The scene to be rendered
    * @param compositor - Compositor instance that will be used to apply postprocess effects
-   */ render(scene, compositor) {
-        const device = Application.instance.device;
+   */ render(scene) {
+        const device = getDevice();
+        //this.updatePostProcessing(device);
+        const useMotionVector = (this.TAA || this.motionBlur) && device.type !== 'webgl';
+        const useTAA = useMotionVector && this.TAA;
+        scene.dispatchEvent('startrender', scene, this, this._compositor);
+        if (useMotionVector) {
+            const width = device.getDrawingBufferWidth();
+            const height = device.getDrawingBufferHeight();
+            if (useTAA) {
+                const halton = Camera._halton23[device.frameInfo.frameCounter % Camera._halton23.length];
+                this._jitterValue.setXY(halton[0] * 2 / width, halton[1] * 2 / height);
+            } else {
+                this._jitterValue.setXY(0, 0);
+            }
+            this._jitteredVPMatrix.set(this.getProjectionMatrix());
+            this._jitteredVPMatrix[8] += this._jitterValue.x;
+            this._jitteredVPMatrix[9] += this._jitterValue.y;
+            this._jitteredVPMatrix.multiplyRight(this.viewMatrix);
+            Matrix4x4.invert(this._jitteredVPMatrix, this._jitteredInvVPMatrix);
+            if (!this._prevJitteredVPMatrix) {
+                this._prevJitteredVPMatrix = new Matrix4x4();
+                this._prevJitteredVPMatrix.set(this._jitteredVPMatrix);
+                this._prevJitterValue = new Vector2(this._jitterValue);
+            }
+            if (!this._prevVPMatrix) {
+                this._prevVPMatrix = new Matrix4x4();
+                this._prevVPMatrix.set(this.viewProjectionMatrix);
+                this._prevPosition = this.getWorldPosition();
+            }
+        } else {
+            this._jitterValue.setXY(0, 0);
+            this._prevVPMatrix = null;
+            this._prevPosition = null;
+            this._prevJitteredVPMatrix = null;
+            this._prevJitterValue = null;
+            this._jitteredInvVPMatrix.set(this.invViewProjectionMatrix);
+        }
         device.pushDeviceStates();
         device.reverseVertexWindingOrder(false);
-        device.setFramebuffer(this._framebuffer);
-        SceneRenderer.setClearColor(this._clearColor);
-        SceneRenderer.renderScene(scene, this, compositor);
+        scene.getRenderer().renderScene(scene, this);
         device.popDeviceStates();
+        if (useMotionVector) {
+            this._prevJitteredVPMatrix.set(this._jitteredVPMatrix);
+            this._prevJitterValue.set(this._jitterValue);
+            this._prevVPMatrix.set(this.viewProjectionMatrix);
+            this._prevPosition = this.getWorldPosition();
+        }
+        scene.dispatchEvent('endrender', scene, this, this._compositor);
+    }
+    async pickAsync(posX, posY) {
+        this._pickPosX = posX;
+        this._pickPosY = posY;
+        if (!this._pickResultPromise) {
+            this._pickResultPromise = new Promise((resolve)=>{
+                this._pickResultResolve = (result)=>{
+                    resolve(result);
+                    this._pickResultPromise = null;
+                    this._pickResultResolve = null;
+                };
+            });
+        }
+        return this._pickResultPromise;
+    }
+    /** @internal */ getPickResultResolveFunc() {
+        return this._pickResultResolve;
+    }
+    /** @internal */ getPickPosX() {
+        return this._pickPosX;
+    }
+    /** @internal */ getPickPosY() {
+        return this._pickPosY;
     }
     /**
    * Updates the controller state
@@ -535,6 +985,27 @@ import '../render/clipmap.js';
    */ resetController() {
         this._controller?.reset();
     }
+    /** @internal */ get jitteredVPMatrix() {
+        return this._jitteredVPMatrix;
+    }
+    /** @internal */ get jitteredInvVPMatrix() {
+        return this._jitteredInvVPMatrix;
+    }
+    /** @internal */ get jitterValue() {
+        return this._jitterValue;
+    }
+    /** @internal */ get prevJitteredVPMatrix() {
+        return this._prevJitteredVPMatrix;
+    }
+    /** @internal */ get prevJitterValue() {
+        return this._prevJitterValue;
+    }
+    /** @internal */ get prevVPMatrix() {
+        return this._prevVPMatrix;
+    }
+    /** @internal */ get prevPosition() {
+        return this._prevPosition;
+    }
     /** @internal */ setController(controller) {
         if (this._controller !== controller) {
             if (controller && controller._getCamera() && controller._getCamera() !== this) {
@@ -568,11 +1039,44 @@ import '../render/clipmap.js';
         super._onTransformChanged(invalidateLocal);
         this._invalidate(false);
     }
-    /** {@inheritdoc SceneNode.dispose} */ dispose() {
+    /** {@inheritdoc SceneNode.onDispose} */ onDispose() {
+        super.onDispose();
         this.setController(null);
+        this.clearHistoryData();
         this._projMatrix = null;
         this._viewMatrix = null;
         this._viewProjMatrix = null;
+        this._postEffectBloom.dispose();
+        this._postEffectFXAA.dispose();
+        this._postEffectMotionBlur.dispose();
+        this._postEffectSSAO.dispose();
+        this._postEffectSSR.dispose();
+        this._postEffectTAA.dispose();
+        this._postEffectTonemap.dispose();
+        this._oit.dispose();
+    }
+    /** @internal */ posInViewport(x, y) {
+        let rect = this._interactionRect;
+        if (!rect && this.viewport) {
+            const cvs = getDevice().canvas;
+            const vp = this.viewport;
+            const vp_x = vp[0];
+            const vp_y = cvs.clientHeight - vp[1] - vp[3];
+            const vp_w = vp[2];
+            const vp_h = vp[3];
+            rect = [
+                vp_x,
+                vp_y,
+                vp_w,
+                vp_h
+            ];
+        }
+        if (!rect) {
+            return true;
+        }
+        x -= rect[0];
+        y -= rect[1];
+        return x >= 0 && x < rect[2] && y >= 0 && y < rect[3];
     }
 }