lythreeframe 1.2.22 → 1.2.24

package/dist/bundle.esm.js

@@ -1,15 +1,12 @@
-import { MathUtils, Object3D, Vector3, Box3, Quaternion, Euler, Matrix4, Mesh, LoadingManager, BufferGeometry, Texture, FileLoader, Material, WebGPURenderer, PostProcessing, Vector2, Raycaster, PerspectiveCamera, OrthographicCamera, Clock, DirectionalLight, MeshStandardMaterial, BoxGeometry, MeshBasicMaterial, PlaneGeometry, SphereGeometry } from 'three/webgpu';
+import { MathUtils, Object3D, Vector3, Box3, Quaternion, Euler, Matrix4, Mesh, LoadingManager, BufferGeometry, Texture, FileLoader, Material, NearestFilter, WebGPURenderer, PostProcessing, Color, Vector2, Raycaster, PerspectiveCamera, OrthographicCamera, Clock, DirectionalLight, MeshStandardMaterial, BoxGeometry, MeshBasicMaterial, PlaneGeometry, SphereGeometry } from 'three/webgpu';
 import { GLTFLoader, DRACOLoader, CSS2DRenderer, OrbitControls } from 'three/examples/jsm/Addons.js';
-import { pass, mrt, output, uniform, velocity, metalness, transformedNormalView, blendColor } from 'three/tsl';
+import { pass, mrt, output, uniform, metalness, transformedNormalView, time, oscSine } from 'three/tsl';
+import { dof } from 'three/addons/tsl/display/DepthOfFieldNode.js';
 import { bloom } from 'three/examples/jsm/tsl/display/BloomNode.js';
 import { denoise } from 'three/examples/jsm/tsl/display/DenoiseNode.js';
-import { dof } from 'three/examples/jsm/tsl/display/DepthOfFieldNode.js';
+import { fxaa } from 'three/examples/jsm/tsl/display/FXAANode.js';
 import { ao } from 'three/examples/jsm/tsl/display/GTAONode.js';
-import { ssr } from 'three/examples/jsm/tsl/display/SSRNode.js';
-import { lensflare } from 'three/examples/jsm/tsl/display/LensflareNode.js';
 import { outline } from 'three/examples/jsm/tsl/display/OutlineNode.js';
-import { motionBlur } from 'three/examples/jsm/tsl/display/MotionBlur.js';
-import { fxaa } from 'three/examples/jsm/tsl/display/FXAANode.js';
 import { smaa } from 'three/examples/jsm/tsl/display/SMAANode.js';
 import { gsap } from 'gsap';
 import { Scene } from 'three';
@@ -1261,68 +1258,18 @@ class Delegate {
     }
 }
 
-const DefaultSSRParam = {
-    isEnabled: false,
-    maxDistance: 0.5,
-    opacity: 1,
-    thickness: 0.015,
-};
-
-const DefaultDenoiseParam = {
-    denoiseRadius: 5,
-    lumaPhi: 5,
-    depthPhi: 5,
-    normalPhi: 5
-};
-
-const DefaultGTAOParam = {
-    isEnabled: false,
-    distanceExponent: 1,
-    distanceFallOff: 1,
-    radius: 0.25,
-    scale: 1,
-    thickness: 1,
-    denoised: true,
-    denoiseParam: DefaultDenoiseParam,
-};
-
-const DefaultBloomParam = {
-    isEnabled: false,
-    threshold: 0,
-    strength: 1,
-    radius: 0,
-};
-
-const DefaultDOFParam = {
-    isEnabled: false,
-    focus: 500.0,
-    aperture: 5,
-    maxblur: 0.01
-};
-
-const DefaultOutlineParams = {
-    isEnabled: false,
-    edgeStrength: 3.0,
-    edgeGlow: 1.0,
-    edgeThickness: 1.0,
-    pulsePeriod: 0.0,
-    visibleEdgeColor: 0xffffff,
-    hiddenEdgeColor: 0xffffff,
-};
-
-const DefaultAAParams = {
-    isEnabled: false,
-    type: "fxaa",
-};
-
 const DefaultPostProcessParam = {
-    bloom: Object.assign({}, DefaultBloomParam),
-    dof: Object.assign({}, DefaultDOFParam),
-    ssr: Object.assign({}, DefaultSSRParam),
-    gtao: Object.assign({}, DefaultGTAOParam),
-    outline: Object.assign({}, DefaultOutlineParams),
-    aa: Object.assign({}, DefaultAAParams)
+    steps: []
 };
+var PostProcessStepType;
+(function (PostProcessStepType) {
+    PostProcessStepType[PostProcessStepType["Bloom"] = 0] = "Bloom";
+    PostProcessStepType[PostProcessStepType["DepthOfField"] = 1] = "DepthOfField";
+    PostProcessStepType[PostProcessStepType["ScreenSpaceReflection"] = 2] = "ScreenSpaceReflection";
+    PostProcessStepType[PostProcessStepType["GroundTruthAmbientOcclusion"] = 3] = "GroundTruthAmbientOcclusion";
+    PostProcessStepType[PostProcessStepType["Outline"] = 4] = "Outline";
+    PostProcessStepType[PostProcessStepType["Antialiasing"] = 5] = "Antialiasing";
+})(PostProcessStepType || (PostProcessStepType = {}));
 
 class World {
     get scene() {
@@ -1392,7 +1339,10 @@ class World {
 class WebGPUPostProcessFactory {
     // scene pass
     static constructScenePass(scene, camera) {
-        const scenePass = pass(scene, camera);
+        const scenePass = pass(scene, camera, { minFilter: NearestFilter, magFilter: NearestFilter });
+        // scenePass.setMRT(mrt({
+        //     output: output,
+        // }));
         scenePass.setMRT(mrt({
             output: output,
         }));
@@ -1402,12 +1352,12 @@ class WebGPUPostProcessFactory {
         let oldMRT = scenePass.getMRT();
         let newMRT = mrt(outputNodes);
         if (oldMRT) {
-            scenePass.setMRT(oldMRT.merge(newMRT));
+            let merge = oldMRT.merge(newMRT);
+            scenePass.setMRT(merge);
         }
         else {
             scenePass.setMRT(newMRT);
         }
-        console.log(scenePass.getMRT(), "MRTTTTTTT");
     }
     // bloom pass
     static constructBloomPass(scenePass, params) {
@@ -1425,34 +1375,37 @@ class WebGPUPostProcessFactory {
     static constructDOFPass(scenePass, params) {
         const scenePassColor = scenePass.getTextureNode('output');
         const scenePassViewZ = scenePass.getViewZNode();
-        return dof(scenePassColor, scenePassViewZ, uniform(params.focus), uniform(params.aperture).mul(0.00001), uniform(params.maxblur));
+        return dof(scenePassColor, scenePassViewZ, uniform(params.focus), uniform(params.aperture), uniform(params.maxblur));
     }
     static updateDOFPass(dofPass, params) {
         dofPass.focus.value = params.focus;
-        dofPass.aperture.value = params.aperture * 0.00001;
+        dofPass.aperture.value = params.aperture;
         dofPass.maxblur.value = params.maxblur;
     }
     // motion blur
-    static constructMotionBlurPass(lastNode, scenePass, param) {
-        WebGPUPostProcessFactory.updateScenePass(scenePass, { velocity });
-        const scenePassVelocity = scenePass.getTextureNode('velocity').mul(param.blurAmount);
-        const scenePassColor = scenePass.getTextureNode('output');
-        const motionBlurPass = motionBlur(scenePassColor, scenePassVelocity);
-        return motionBlurPass;
-    }
+    // static constructMotionBlurPass(lastNode:NodeRepresentation, scenePass: ShaderNodeObject<PassNode>, param:MotionBlurParam): ShaderNodeObject<Node>
+    // {
+    //     WebGPUPostProcessFactory.updateScenePass(scenePass, {velocity})
+    //     const scenePassVelocity = scenePass.getTextureNode( 'velocity' ).mul( param.blurAmount );
+    //     const scenePassColor          = scenePass.getTextureNode('output');
+    //     const motionBlurPass = motionBlur( scenePassColor, scenePassVelocity );
+    //     return motionBlurPass
+    // }
     // ssr
     static constructSSRPass(scenePass, param) {
         WebGPUPostProcessFactory.updateScenePass(scenePass, {
+            output: output,
             normal: transformedNormalView,
-            metalness: metalness,
+            metalness: metalness
         });
-        const scenePassColor = scenePass.getTextureNode('output');
-        const scenePassNormal = scenePass.getTextureNode('normal');
-        const scenePassDepth = scenePass.getTextureNode('depth');
-        const scenePassMetalness = scenePass.getTextureNode('metalness');
-        const ssrPass = ssr(scenePassColor, scenePassDepth, scenePassNormal, scenePassMetalness, scenePass.camera);
-        ssrPass.resolutionScale = 1.0;
-        WebGPUPostProcessFactory.updateSSRPass(ssrPass, param);
+        let ssrPass = null;
+        scenePass.getTextureNode('output');
+        scenePass.getTextureNode('depth');
+        scenePass.getTextureNode('normal');
+        //const scenePassMetalness      = scenePass.getTextureNode('metalness');
+        // const ssrPass                 = ssr(scenePassColor, scenePassDepth, scenePassNormal, scenePassMetalness, scenePass.camera)
+        //       ssrPass.resolutionScale = 1.0;
+        //WebGPUPostProcessFactory.updateSSRPass(ssrPass, param);
         return ssrPass;
     }
     static updateSSRPass(ssrPass, params) {
@@ -1501,19 +1454,21 @@ class WebGPUPostProcessFactory {
     static updateGTAODenoisePass(denoisePass, params) {
         WebGPUPostProcessFactory.updateDenoisePass(denoisePass, params.denoiseParam);
     }
-    static constructLensFlarePass(inputNode, params) {
-        const lensflarePass = lensflare(inputNode, {
-            threshold: uniform(params.threshold),
-            ghostAttenuationFactor: uniform(params.ghostAttenuationFactor),
-            ghostSpacing: uniform(params.ghostSpacing),
-        });
-        return lensflarePass;
-    }
-    static updateLensFlarPass(lensflarePass, params) {
-        lensflarePass.thresholdNode.value = params.threshold;
-        lensflarePass.ghostSpacingNode.value = params.ghostSpacing;
-        lensflarePass.ghostAttenuationFactorNode.value = params.ghostAttenuationFactor;
-    }
+    // static constructLensFlarePass(inputNode: NodeRepresentation, params: LensFlareParam): ShaderNodeObject<LensflareNode>
+    // {
+    //     const lensflarePass = lensflare(inputNode, {
+    //         threshold             : uniform(params.threshold),
+    //         ghostAttenuationFactor: uniform(params.ghostAttenuationFactor),
+    //         ghostSpacing          : uniform(params.ghostSpacing),
+    //     });
+    //     return lensflarePass;
+    // }
+    // static updateLensFlarPass(lensflarePass: ShaderNodeObject<LensflareNode>, params: LensFlareParam)
+    // {
+    //     lensflarePass.thresholdNode.value              = params.threshold
+    //     lensflarePass.ghostSpacingNode.value           = params.ghostSpacing
+    //     lensflarePass.ghostAttenuationFactorNode.value = params.ghostAttenuationFactor
+    // }
     static constructOutlinePass(scene, camera, outlineObjects, param) {
         const outlinePass = outline(scene, camera, {
             selectedObjects: outlineObjects,
@@ -1561,17 +1516,6 @@ class Viewport {
         this._canvas = null;
         this.isRenderStateDirty = true;
         this.postProcessing = null;
-        this.scenePass = null;
-        this.bloomPass = null;
-        this.dofPass = null;
-        this.GTAOPass = null;
-        this.denoiseGTAOPass = null;
-        this.ssrPass = null;
-        this.outlinePass = null;
-        this.fxaaPass = null;
-        this.smaaPass = null;
-        // private motionBlurPass: ShaderNodeObject<Node> | null      = null;
-        // private denoiseOutlinePass: ShaderNodeObject<DenoiseNode> | null = null;
         this.outlineObjects = [];
         this.postProcessParam = Object.assign({}, postProcessParam);
         this._app = app;
@@ -1633,221 +1577,144 @@ class Viewport {
         this.setupPostProcess();
     }
     setupPostProcess() {
-        // 检查各个效果是否启用
-        const isBloomEnabled = this.postProcessParam.bloom.isEnabled;
-        const isDOFEnabled = this.postProcessParam.dof.isEnabled;
-        const isSSREnabled = this.postProcessParam.ssr.isEnabled;
-        const isGTAOEnabled = this.postProcessParam.gtao.isEnabled;
-        const isOutlineEnabled = this.postProcessParam.outline.isEnabled;
-        const isAAEnabled = this.postProcessParam.aa.isEnabled;
-        if (!(isBloomEnabled) && !(isDOFEnabled) && !(isSSREnabled) && !(isGTAOEnabled) && !(isOutlineEnabled) && !(isAAEnabled)) {
+        if (this.postProcessParam.steps.length === 0) {
             this.destroyPostProcess();
-            console.log("Remove post process");
+            this.markRenderStateDirty();
             return;
         }
         if (!this.postProcessing) {
             this.postProcessing = new PostProcessing(this.renderer);
         }
-        if (!this.scenePass) {
-            this.scenePass = WebGPUPostProcessFactory.constructScenePass(this.app.world.scene, this.app.camera);
-        }
-        let finalNode = this.scenePass.getTextureNode('output');
-        // bloom
-        if (isBloomEnabled) {
-            console.log("[PostProcess] Bloom 启用，参数：", this.postProcessParam.bloom);
-            if (!this.bloomPass) {
-                this.bloomPass = WebGPUPostProcessFactory.constructBloomPass(this.scenePass, this.postProcessParam.bloom);
-                console.log("[PostProcess] BloomPass 构建完成");
-            }
-            else {
-                WebGPUPostProcessFactory.updateBloomPass(this.bloomPass, this.postProcessParam.bloom);
-                console.log("[PostProcess] BloomPass 更新完成");
-            }
-            finalNode = finalNode.add(this.bloomPass);
-        }
-        else {
-            if (this.bloomPass) {
-                this.bloomPass.dispose();
-                this.bloomPass = null;
-                console.log("[PostProcess] BloomPass 已销毁");
-            }
-        }
-        // DOF
-        if (isDOFEnabled) {
-            console.log("[PostProcess] DOF 启用，参数：", this.postProcessParam.dof);
-            if (!this.dofPass) {
-                this.dofPass = WebGPUPostProcessFactory.constructDOFPass(this.scenePass, this.postProcessParam.dof);
-                console.log("[PostProcess] DOFPass 构建完成");
-            }
-            else {
-                WebGPUPostProcessFactory.updateDOFPass(this.dofPass, this.postProcessParam.dof);
-                console.log("[PostProcess] DOFPass 更新完成");
-            }
-            finalNode = this.dofPass;
-        }
-        else {
-            if (this.dofPass) {
-                this.dofPass.dispose();
-                this.dofPass = null;
-                console.log("[PostProcess] DOFPass 已销毁");
-            }
-        }
-        // ssr
-        if (isSSREnabled) {
-            console.log("[PostProcess] SSR 启用，参数：", this.postProcessParam.ssr);
-            if (!this.ssrPass) {
-                this.ssrPass = WebGPUPostProcessFactory.constructSSRPass(this.scenePass, this.postProcessParam.ssr);
-                console.log("[PostProcess] SSRPass 构建完成");
-            }
-            else {
-                WebGPUPostProcessFactory.updateSSRPass(this.ssrPass, this.postProcessParam.ssr);
-                console.log("[PostProcess] SSRPass 更新完成");
-            }
-            finalNode = blendColor(finalNode, this.ssrPass);
-        }
-        // GTAO
-        if (isGTAOEnabled) {
-            console.log("[PostProcess] GTAO 启用，参数：", this.postProcessParam.gtao);
-            if (!this.GTAOPass) {
-                this.GTAOPass = WebGPUPostProcessFactory.constructGTAOPass(this.scenePass, this.postProcessParam.gtao);
-                console.log("[PostProcess] GTAOPass 构建完成");
-            }
-            else {
-                WebGPUPostProcessFactory.updateGTAOPass(this.GTAOPass, this.postProcessParam.gtao);
-                console.log("[PostProcess] GTAOPass 更新完成");
-            }
-            if (this.postProcessParam.gtao.denoised) {
-                if (!this.denoiseGTAOPass) {
-                    this.denoiseGTAOPass = WebGPUPostProcessFactory.constructGTAODenoisePass(this.scenePass, this.GTAOPass, this.postProcessParam.gtao);
-                    console.log("[PostProcess] GTAODenoisePass 构建完成");
-                }
-                else {
-                    WebGPUPostProcessFactory.updateGTAOPass(this.GTAOPass, this.postProcessParam.gtao);
-                    console.log("[PostProcess] GTAODenoisePass 更新完成");
-                }
-                finalNode = this.denoiseGTAOPass.mul(finalNode);
-            }
-            else {
-                finalNode = this.GTAOPass.getTextureNode().mul(finalNode);
-                if (this.denoiseGTAOPass) {
-                    this.denoiseGTAOPass.dispose();
-                    this.denoiseGTAOPass = null;
-                    console.log("[PostProcess] GTAODenoisePass 已销毁");
-                }
-            }
-        }
-        else {
-            if (this.GTAOPass) {
-                this.GTAOPass.dispose();
-                this.GTAOPass = null;
-                console.log("[PostProcess] GTAOPass 已销毁");
-            }
-            if (this.denoiseGTAOPass) {
-                this.denoiseGTAOPass.dispose();
-                this.denoiseGTAOPass = null;
-                console.log("[PostProcess] GTAODenoisePass 已销毁");
-            }
-        }
-        // outline
-        if (isOutlineEnabled) {
-            console.log("[PostProcess] Outline 启用，参数：", this.postProcessParam.outline);
-            if (!this.outlinePass) {
-                this.outlinePass = WebGPUPostProcessFactory.constructOutlinePass(this.app.world.scene, this.scenePass.camera, this.outlineObjects, this.postProcessParam.outline);
-                console.log("[PostProcess] OutlinePass 构建完成");
-            }
-            else {
-                WebGPUPostProcessFactory.updateOutlinePass(this.outlinePass, this.outlineObjects, this.postProcessParam.outline);
-                console.log("[PostProcess] OutlinePass 更新完成");
-            }
-            // ... existing code ...
-        }
-        else {
-            if (this.outlinePass) {
-                this.outlinePass.dispose();
-                this.outlinePass = null;
-                console.log("[PostProcess] OutlinePass 已销毁");
-            }
-        }
-        if (isAAEnabled) {
-            console.log("[PostProcess] AA 启用，类型：", this.postProcessParam.aa.type);
-            if (this.postProcessParam.aa.type === "fxaa") {
-                this.fxaaPass = WebGPUPostProcessFactory.constructFXAAPass(finalNode);
-                finalNode = this.fxaaPass;
-                console.log("[PostProcess] FXAAPass 构建完成");
-            }
-            if (this.postProcessParam.aa.type === "smaa") {
-                this.smaaPass = WebGPUPostProcessFactory.constructSMAAPass(finalNode);
-                finalNode = this.smaaPass;
-                console.log("[PostProcess] SMAAPass 构建完成");
-            }
-        }
-        else {
-            if (this.fxaaPass) {
-                this.fxaaPass.dispose();
-                this.fxaaPass = null;
-                console.log("[PostProcess] FXAAPass 已销毁");
-            }
-            if (this.smaaPass) {
-                this.smaaPass.dispose();
-                this.smaaPass = null;
-                console.log("[PostProcess] SMAAPass 已销毁");
+        const scenePass = WebGPUPostProcessFactory.constructScenePass(this.app.world.scene, this.app.camera);
+        let finalNode = scenePass.getTextureNode('output');
+        this.postProcessParam.steps.forEach((step) => {
+            switch (step.type) {
+                case PostProcessStepType.Bloom:
+                    {
+                        const bloomPass = WebGPUPostProcessFactory.constructBloomPass(scenePass, step);
+                        console.log("[PostProcess] BloomPass 构建完成");
+                        finalNode = finalNode.add(bloomPass);
+                        break;
+                    }
+                case PostProcessStepType.DepthOfField:
+                    {
+                        const dofPass = WebGPUPostProcessFactory.constructDOFPass(scenePass, step);
+                        console.log("[PostProcess] DOFPass 构建完成");
+                        finalNode = finalNode.add(dofPass);
+                        break;
+                    }
+                case PostProcessStepType.ScreenSpaceReflection:
+                    {
+                        console.warn("[PostProcess] SSR 目前存在技术问题，暂不支持。");
+                        // const ssrPass = WebGPUPostProcessFactory.constructSSRPass(scenePass, step as SSRParam);
+                        // console.log("[PostProcess] SSRPass 构建完成");
+                        //finalNode = blendColor(finalNode, ssrPass);
+                        break;
+                    }
+                case PostProcessStepType.GroundTruthAmbientOcclusion:
+                    {
+                        console.warn("[PostProcess] AO 目前存在技术问题，暂不支持。");
+                        // const stepParam = step as GTAOParam
+                        // const GTAOPass = WebGPUPostProcessFactory.constructGTAOPass(scenePass, stepParam);
+                        // console.log("[PostProcess] GTAOPass 构建完成");
+                        // if (stepParam.denoised)
+                        // {
+                        //     const denoiseGTAOPass = WebGPUPostProcessFactory.constructGTAODenoisePass(scenePass, GTAOPass, stepParam);
+                        //     console.log("[PostProcess] GTAODenoisePass 构建完成");
+                        //     finalNode = denoiseGTAOPass.mul(finalNode);
+                        // }
+                        // else
+                        // {
+                        //     finalNode = GTAOPass.getTextureNode().mul(finalNode);
+                        // }
+                        break;
+                    }
+                case PostProcessStepType.Outline:
+                    {
+                        const outlineParam = step;
+                        const outlinePass = WebGPUPostProcessFactory.constructOutlinePass(this.app.world.scene, scenePass.camera, this.outlineObjects, outlineParam);
+                        const { visibleEdge, hiddenEdge } = outlinePass;
+                        const pulsePeriod = uniform(outlineParam.pulsePeriod);
+                        const period = time.div(pulsePeriod).mul(2);
+                        const osc = oscSine(period).mul(.5).add(.5);
+                        const outlineColor = visibleEdge.mul(uniform(new Color(outlineParam.visibleEdgeColor))).add(hiddenEdge.mul(uniform(new Color(outlineParam.hiddenEdgeColor)))).mul(outlineParam.edgeStrength);
+                        const outlinePulse = pulsePeriod.greaterThan(0).select(outlineColor.mul(osc), outlineColor);
+                        // if(!this.denoiseOutlinePass)
+                        // {
+                        //     this.denoiseOutlinePass = WebGPUPostProcessFactory.constructDenoisePass(this.scenePass, outlinePulse, DefaultDenoiseParam);
+                        // }
+                        // outlinePulse = this.denoiseOutlinePass.mul(outlinePulse)
+                        // finalNode = this.denoiseOutlinePass.mul(outlinePulse).add(finalNode);
+                        finalNode = outlinePulse.add(finalNode);
+                        console.log("[PostProcess] OutlinePass 构建完成");
+                        break;
+                    }
+                case PostProcessStepType.Antialiasing:
+                    {
+                        const aaParam = step;
+                        if (aaParam.method === "fxaa") {
+                            finalNode = WebGPUPostProcessFactory.constructFXAAPass(finalNode);
+                            console.log("[PostProcess] FXAAPass 构建完成");
+                        }
+                        if (aaParam.method === "smaa") {
+                            finalNode = WebGPUPostProcessFactory.constructSMAAPass(finalNode);
+                            console.log("[PostProcess] SMAAPass 构建完成");
+                        }
+                        break;
+                    }
             }
-        }
+        });
         this.postProcessing.outputNode = finalNode;
+        this.postProcessing.needsUpdate = true;
+        console.log("[PostProcess] setup complete", this.postProcessParam.steps);
         this.markRenderStateDirty();
     }
-    updateBloomPass(params) {
-        this.postProcessParam.bloom = Object.assign({}, params);
-        this.setupPostProcess();
-    }
-    updateGTAOParam(params) {
-        this.postProcessParam.gtao = Object.assign({}, params);
-        this.setupPostProcess();
-    }
-    updateDOFParam(params) {
-        this.postProcessParam.dof = Object.assign({}, params);
-        this.setupPostProcess();
-    }
-    updateSSRParam(params) {
-        this.postProcessParam.ssr = Object.assign({}, params);
-        this.setupPostProcess();
-    }
-    updateOutlineParam(params) {
-        this.postProcessParam.outline = Object.assign({}, params);
-        this.setupPostProcess();
-    }
-    updateAAParam(params) {
-        this.postProcessParam.aa = Object.assign({}, params);
+    updatePostProcess(steps) {
+        this.postProcessParam.steps = steps;
         this.setupPostProcess();
     }
+    // updateBloomPass(params: BloomParam)
+    // {
+    //     this.postProcessParam.bloom = { ...params };
+    //     this.setupPostProcess();
+    // }
+    // updateGTAOParam(params: GTAOParam)
+    // {
+    //     this.postProcessParam.gtao = { ...params };
+    //     this.setupPostProcess();
+    // }
+    // updateDOFParam(params: DOFParam) 
+    // {
+    //     this.postProcessParam.dof = { ...params };
+    //     this.setupPostProcess();
+    // }
+    // updateSSRParam(params: SSRParam)
+    // {
+    //     this.postProcessParam.ssr = { ...params };
+    //     this.setupPostProcess();
+    // }
+    // updateOutlineParam(params: OutlineParams)
+    // {
+    //     this.postProcessParam.outline = { ...params }
+    //     this.setupPostProcess();
+    // }
+    // updateAAParam(params: AAParams)
+    // {
+    //     this.postProcessParam.aa = { ...params };
+    //     this.setupPostProcess();
+    // }
     addOutlineObject(obj) {
         if (!this.outlineObjects.includes(obj)) {
             this.outlineObjects.push(obj);
         }
-        if (!this.postProcessParam.outline) {
-            this.postProcessParam.outline = DefaultOutlineParams;
-            this.setupPostProcess();
-        }
-        else {
-            this.markRenderStateDirty();
-        }
+        this.markRenderStateDirty();
     }
     setOutlineObjects(objects) {
         this.outlineObjects.length = 0;
         this.outlineObjects.push(...objects);
-        if (!this.postProcessParam.outline) {
-            this.postProcessParam.outline = DefaultOutlineParams;
-            this.setupPostProcess();
-        }
-        else {
-            this.markRenderStateDirty();
-        }
+        this.markRenderStateDirty();
     }
     removeOutlineObject(obj) {
-        if (!this.postProcessParam.outline) {
-            this.outlineObjects = [];
-            return;
-        }
         const index = this.outlineObjects.indexOf(obj);
         if (index > -1) {
             this.outlineObjects.splice(index, 1);
@@ -1855,35 +1722,7 @@ class Viewport {
         this.markRenderStateDirty();
     }
     destroyPostProcess() {
-        if (this.bloomPass) {
-            this.bloomPass.dispose();
-            this.bloomPass = null;
-        }
-        if (this.dofPass) {
-            this.dofPass.dispose();
-            this.dofPass = null;
-        }
-        if (this.GTAOPass) {
-            this.GTAOPass.dispose();
-            this.GTAOPass = null;
-        }
-        if (this.denoiseGTAOPass) {
-            this.denoiseGTAOPass.dispose();
-            this.denoiseGTAOPass = null;
-        }
-        if (this.ssrPass) {
-            this.ssrPass.dispose();
-            this.ssrPass = null;
-        }
-        if (this.outlinePass) {
-            this.outlinePass.dispose();
-            this.outlinePass = null;
-        }
         this.outlineObjects = [];
-        if (this.scenePass) {
-            this.scenePass.dispose();
-            this.scenePass = null;
-        }
         if (this.postProcessing) {
             this.postProcessing.dispose();
             this.postProcessing = null;
@@ -3224,6 +3063,59 @@ class LabelComponent extends SceneComponent {
 // labelStyle.style.fontSize        = "10px";
 // labelStyle.style.pointerEvents   = 'auto';
 
+const DefaultBloomParam = {
+    type: PostProcessStepType.Bloom,
+    threshold: 0,
+    strength: 1,
+    radius: 0,
+};
+
+const DefaultDenoiseParam = {
+    denoiseRadius: 5,
+    lumaPhi: 5,
+    depthPhi: 5,
+    normalPhi: 5
+};
+const DefaultGTAOParam = {
+    type: PostProcessStepType.GroundTruthAmbientOcclusion,
+    distanceExponent: 1,
+    distanceFallOff: 1,
+    radius: 0.25,
+    scale: 1,
+    thickness: 1,
+    denoised: true,
+    denoiseParam: DefaultDenoiseParam,
+};
+
+const DefaultDOFParam = {
+    type: PostProcessStepType.DepthOfField,
+    focus: 500.0,
+    aperture: 5,
+    maxblur: 0.01
+};
+
+const DefaultOutlineParams = {
+    type: PostProcessStepType.Outline,
+    edgeStrength: 3.0,
+    edgeGlow: 1.0,
+    edgeThickness: 1.0,
+    pulsePeriod: 0.0,
+    visibleEdgeColor: 0xffffff,
+    hiddenEdgeColor: 0xffffff,
+};
+
+const DefaultSSRParam = {
+    type: PostProcessStepType.ScreenSpaceReflection,
+    maxDistance: 0.5,
+    opacity: 1,
+    thickness: 0.015,
+};
+
+const DefaultAAParams = {
+    type: PostProcessStepType.Antialiasing,
+    method: "fxaa"
+};
+
 class FirstPerson extends Pawn {
     constructor(controller) {
         super(controller);
@@ -3429,4 +3321,4 @@ class TransformGizmo extends Pawn {
     }
 }
 
-export { Actor, AssetManager, AttachmentRules, BoxActor, BoxComponent, Controller, DefaultAAParams, DefaultAppParam, DefaultBloomParam, DefaultCameraParam, DefaultDOFParam, DefaultDenoiseParam, DefaultGTAOParam, DefaultOutlineParams, DefaultPostProcessParam, DefaultRendererParameters, DefaultSSRParam, DefaultSkyParam, DefaultViewportParam, DefaultWorldParam, Delegate, DirectionalLightActor, DirectionalLightComponent, FirstPerson, GeometryAssetPointer, LabelComponent, LevelActor, LevelComponent, MaterialAssetPointer, MeshComponent, Orbital, PlaneActor, PlaneComponent, SceneComponent, SkyActor, SkyComponent, SphereComponent, TAssetPointer, TSmartPointer, TextureAssetPointer, ThreeJsApp, ThreeObjectLibrary, TransformGizmo, Viewport, WebGPUPostProcessFactory, World };
+export { Actor, AssetManager, AttachmentRules, BoxActor, BoxComponent, Controller, DefaultAAParams, DefaultAppParam, DefaultBloomParam, DefaultCameraParam, DefaultDOFParam, DefaultDenoiseParam, DefaultGTAOParam, DefaultOutlineParams, DefaultPostProcessParam, DefaultRendererParameters, DefaultSSRParam, DefaultSkyParam, DefaultViewportParam, DefaultWorldParam, Delegate, DirectionalLightActor, DirectionalLightComponent, FirstPerson, GeometryAssetPointer, LabelComponent, LevelActor, LevelComponent, MaterialAssetPointer, MeshComponent, Orbital, PlaneActor, PlaneComponent, PostProcessStepType, SceneComponent, SkyActor, SkyComponent, SphereComponent, TAssetPointer, TSmartPointer, TextureAssetPointer, ThreeJsApp, ThreeObjectLibrary, TransformGizmo, Viewport, WebGPUPostProcessFactory, World };