lythreeframe 1.3.0 → 1.3.2

package/dist/bundle.cjs.js

@@ -5,12 +5,12 @@ var Addons_js = require('three/examples/jsm/Addons.js');
 var tsl = require('three/tsl');
 var DepthOfFieldNode_js = require('three/examples/jsm/tsl/display/DepthOfFieldNode.js');
 var BloomNode_js = require('three/examples/jsm/tsl/display/BloomNode.js');
-var DenoiseNode_js = require('three/examples/jsm/tsl/display/DenoiseNode.js');
 var FXAANode_js = require('three/examples/jsm/tsl/display/FXAANode.js');
 var GTAONode_js = require('three/examples/jsm/tsl/display/GTAONode.js');
 var OutlineNode_js = require('three/examples/jsm/tsl/display/OutlineNode.js');
 var SMAANode_js = require('three/examples/jsm/tsl/display/SMAANode.js');
-var SSRNode_js = require('three/examples/jsm/tsl/display/SSRNode.js');
+var TRAANode_js = require('three/examples/jsm/tsl/display/TRAANode.js');
+var LensflareNode_js = require('three/examples/jsm/tsl/display/LensflareNode.js');
 var gsap = require('gsap');
 var three = require('three');
 var SkyMesh_js = require('three/examples/jsm/objects/SkyMesh.js');
@@ -1364,6 +1364,7 @@ exports.PostProcessStepType = void 0;
     PostProcessStepType[PostProcessStepType["GroundTruthAmbientOcclusion"] = 3] = "GroundTruthAmbientOcclusion";
     PostProcessStepType[PostProcessStepType["Outline"] = 4] = "Outline";
     PostProcessStepType[PostProcessStepType["Antialiasing"] = 5] = "Antialiasing";
+    PostProcessStepType[PostProcessStepType["LensFlare"] = 6] = "LensFlare";
 })(exports.PostProcessStepType || (exports.PostProcessStepType = {}));
 
 class World {
@@ -1450,168 +1451,63 @@ class World {
     }
 }
 
-class WebGPUPostProcessFactory {
-    // scene pass
-    static constructScenePass(scene, camera) {
-        const scenePass = tsl.pass(scene, camera, { minFilter: webgpu.NearestFilter, magFilter: webgpu.NearestFilter });
-        // scenePass.setMRT(mrt({
-        //     output: output,
-        // }));
-        scenePass.setMRT(tsl.mrt({
-            output: tsl.output,
-        }));
-        return scenePass;
-    }
-    static updateScenePass(scenePass, outputNodes) {
-        let oldMRT = scenePass.getMRT();
-        let newMRT = tsl.mrt(outputNodes);
-        if (oldMRT) {
-            let merge = oldMRT.merge(newMRT);
-            scenePass.setMRT(merge);
-        }
-        else {
-            scenePass.setMRT(newMRT);
-        }
-    }
-    // bloom pass
-    static constructBloomPass(scenePass, params) {
-        const scenePassColor = scenePass.getTextureNode('output');
-        const bloomPass = BloomNode_js.bloom(scenePassColor);
-        WebGPUPostProcessFactory.updateBloomPass(bloomPass, params);
-        return bloomPass;
-    }
-    static updateBloomPass(bloomPass, params) {
-        bloomPass.threshold.value = params.threshold;
-        bloomPass.strength.value = params.strength;
-        bloomPass.radius.value = params.radius;
-    }
-    // DOF pass
-    static constructDOFPass(scenePass, params) {
-        const scenePassColor = scenePass.getTextureNode('output');
-        const scenePassViewZ = scenePass.getViewZNode();
-        const dofPass = DepthOfFieldNode_js.dof(scenePassColor, scenePassViewZ, tsl.uniform(1), tsl.uniform(0.01), tsl.uniform(0.01));
-        WebGPUPostProcessFactory.updateDOFPass(dofPass, params);
-        return dofPass;
-    }
-    static updateDOFPass(dofPass, params) {
-        dofPass.focusDistanceNode.value = params.focus;
-        dofPass.focalLengthNode.value = params.aperture;
-        dofPass.bokehScaleNode.value = params.maxblur;
-    }
-    // motion blur
-    // 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, params) {
-        WebGPUPostProcessFactory.updateScenePass(scenePass, {
-            output: tsl.output,
-            normal: tsl.transformedNormalView,
-            metalness: tsl.metalness
-        });
-        const scenePassColor = scenePass.getTextureNode('output');
-        const scenePassDepth = scenePass.getTextureNode('depth');
-        const scenePassNormal = scenePass.getTextureNode('normal');
-        const scenePassMetalness = scenePass.getTextureNode('metalness');
-        const ssrPass = SSRNode_js.ssr(scenePassColor, scenePassDepth, scenePassNormal, scenePassMetalness, scenePass.camera);
-        ssrPass.resolutionScale = 1.0;
-        WebGPUPostProcessFactory.updateSSRPass(ssrPass, params);
-        return ssrPass;
-    }
-    static updateSSRPass(ssrPass, params) {
-        ssrPass.maxDistance.value = params.maxDistance;
-        ssrPass.opacity.value = params.opacity;
-        ssrPass.thickness.value = params.thickness;
-    }
-    // GTAO
-    static constructGTAOPass(scenePass, params) {
-        WebGPUPostProcessFactory.updateScenePass(scenePass, {
-            normal: tsl.transformedNormalView,
-        });
-        const scenePassNormal = scenePass.getTextureNode('normal');
-        const scenePassDepth = scenePass.getTextureNode('depth');
-        const aoPass = GTAONode_js.ao(scenePassDepth, scenePassNormal, scenePass.camera);
-        aoPass.resolutionScale = 0.5;
-        WebGPUPostProcessFactory.updateGTAOPass(aoPass, params);
-        return aoPass;
-    }
-    static updateGTAOPass(gtaoPass, params) {
-        gtaoPass.distanceExponent.value = params.distanceExponent;
-        gtaoPass.distanceFallOff.value = params.distanceFallOff;
-        gtaoPass.radius.value = params.radius;
-        gtaoPass.scale.value = params.scale;
-        gtaoPass.thickness.value = params.thickness;
-    }
-    static constructDenoisePass(scenePass, inputNode, params) {
-        WebGPUPostProcessFactory.updateScenePass(scenePass, {
-            normal: tsl.transformedNormalView,
-        });
-        const scenePassNormal = scenePass.getTextureNode('normal');
-        const scenePassDepth = scenePass.getTextureNode('depth');
-        const denoisePass = DenoiseNode_js.denoise(inputNode, scenePassDepth, scenePassNormal, scenePass.camera);
-        WebGPUPostProcessFactory.updateDenoisePass(denoisePass, params);
-        return denoisePass;
-    }
-    static updateDenoisePass(denoisePass, params) {
-        denoisePass.radius.value = params.denoiseRadius;
-        denoisePass.lumaPhi.value = params.lumaPhi;
-        denoisePass.depthPhi.value = params.depthPhi;
-        denoisePass.normalPhi.value = params.normalPhi;
-    }
-    static constructGTAODenoisePass(scenePass, gtaoPass, params) {
-        return WebGPUPostProcessFactory.constructDenoisePass(scenePass, gtaoPass.getTextureNode(), params.denoiseParam);
-    }
-    static updateGTAODenoisePass(denoisePass, params) {
-        WebGPUPostProcessFactory.updateDenoisePass(denoisePass, params.denoiseParam);
-    }
-    // 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 = OutlineNode_js.outline(scene, camera, {
-            selectedObjects: outlineObjects,
-            edgeGlow: tsl.uniform(1),
-            edgeThickness: tsl.uniform(1)
-        });
-        WebGPUPostProcessFactory.updateOutlinePass(outlinePass, outlineObjects, param);
-        return outlinePass;
-    }
-    static updateOutlinePass(outlinePass, outlineObjects, params) {
-        outlinePass.edgeGlowNode.value = params.edgeGlow;
-        outlinePass.edgeThicknessNode.value = params.edgeThickness;
-        outlinePass.selectedObjects = outlineObjects;
-    }
-    // fxaa 
-    static constructFXAAPass(inputNode) {
-        return FXAANode_js.fxaa(inputNode);
-    }
-    // smaa
-    static constructSMAAPass(inputNode) {
-        return SMAANode_js.smaa(inputNode);
-    }
-}
+const DefaultBloomParam = {
+    type: exports.PostProcessStepType.Bloom,
+    threshold: 0,
+    strength: 1,
+    radius: 0,
+};
+
+const DefaultDOFParam = {
+    type: exports.PostProcessStepType.DepthOfField,
+    focus: 500.0,
+    aperture: 5,
+    maxblur: 0.01
+};
+
+const DefaultGTAOParam = {
+    type: exports.PostProcessStepType.GroundTruthAmbientOcclusion,
+    distanceExponent: 1,
+    distanceFallOff: 1,
+    radius: 0.25,
+    scale: 1,
+    thickness: 1,
+    samples: 16,
+    useTemporalFiltering: false
+};
+
+const DefaultOutlineParams = {
+    type: exports.PostProcessStepType.Outline,
+    edgeStrength: 3.0,
+    edgeGlow: 1.0,
+    edgeThickness: 1.0,
+    pulsePeriod: 0.0,
+    visibleEdgeColor: 0xffffff,
+    hiddenEdgeColor: 0xffffff,
+};
+
+const DefaultLensFlareParam = {
+    type: exports.PostProcessStepType.LensFlare,
+    threshold: 0.5,
+    ghostSamples: 4,
+    ghostSpacing: 0.25,
+    ghostAttenuationFactor: 25,
+    ghostTint: [1, 1, 1],
+    downSampleRatio: 4,
+};
 
 class PostProcessManager {
     constructor(renderer, scene, camera, postProcessParam, onDirtyCallback) {
         this.postProcessing = null;
         this.outlineObjects = [];
+        this.effectUniforms = null;
+        this.outlinePass = null;
+        this.bloomPass = null;
+        this.dofPass = null;
+        this.gtaoPass = null;
+        this.traaPass = null;
+        this.lensflarePass = null;
+        this.lut3dTexture = null;
         this.onDirtyCallback = null;
         this.renderer = renderer;
         this.scene = scene;
@@ -1624,116 +1520,301 @@ class PostProcessManager {
     }
     updateCamera(camera) {
         this.camera = camera;
-        if (this.postProcessing) {
-            this.setup();
+        if (!this.postProcessing || !this.effectUniforms) {
+            this.buildPipeline();
+            this.updateAllUniforms();
+            this.markDirty();
         }
     }
     setup() {
-        if (this.postProcessParam.steps.length === 0) {
-            this.destroy();
-            this.markDirty();
-            return;
+        if (!this.postProcessing || !this.effectUniforms) {
+            this.buildPipeline();
         }
+        this.updateAllUniforms();
+        this.markDirty();
+    }
+    buildPipeline() {
+        var _a, _b, _c, _d, _e;
         if (this.postProcessing) {
             this.postProcessing.dispose();
         }
         this.postProcessing = new webgpu.PostProcessing(this.renderer);
-        const scenePass = WebGPUPostProcessFactory.constructScenePass(this.scene, this.camera);
-        let finalNode = scenePass.getTextureNode('output');
-        this.postProcessParam.steps.forEach((step) => {
-            switch (step.type) {
-                case exports.PostProcessStepType.Bloom:
-                    {
-                        const bloomPass = WebGPUPostProcessFactory.constructBloomPass(scenePass, step);
-                        finalNode = finalNode.add(bloomPass);
-                        break;
-                    }
-                case exports.PostProcessStepType.DepthOfField:
-                    {
-                        finalNode = WebGPUPostProcessFactory.constructDOFPass(scenePass, step);
-                        break;
-                    }
-                case exports.PostProcessStepType.ScreenSpaceReflection:
-                    {
-                        const ssrParam = step;
-                        const ssrPass = WebGPUPostProcessFactory.constructSSRPass(scenePass, ssrParam);
-                        if (ssrPass) {
-                            finalNode = finalNode.add(ssrPass);
-                        }
-                        else {
-                            console.warn("[PostProcess] SSR 目前存在技术问题，暂不支持。");
-                        }
-                        break;
-                    }
-                case exports.PostProcessStepType.GroundTruthAmbientOcclusion:
-                    {
-                        const gtaoParam = step;
-                        const gtaoPass = WebGPUPostProcessFactory.constructGTAOPass(scenePass, gtaoParam);
-                        if (gtaoParam.denoised) {
-                            const denoisePass = WebGPUPostProcessFactory.constructGTAODenoisePass(scenePass, gtaoPass, gtaoParam);
-                            finalNode = finalNode.mul(denoisePass);
-                        }
-                        else {
-                            finalNode = finalNode.mul(gtaoPass);
-                        }
-                        break;
-                    }
-                case exports.PostProcessStepType.Outline:
-                    {
-                        const outlineParam = step;
-                        const outlinePass = WebGPUPostProcessFactory.constructOutlinePass(this.scene, scenePass.camera, this.outlineObjects, outlineParam);
-                        const { visibleEdge, hiddenEdge } = outlinePass;
-                        const pulsePeriod = tsl.uniform(outlineParam.pulsePeriod);
-                        const safePulsePeriod = pulsePeriod.greaterThan(0).select(pulsePeriod, tsl.uniform(1));
-                        const period = tsl.time.div(safePulsePeriod).mul(2);
-                        const osc = tsl.oscSine(period).mul(.5).add(.5);
-                        const outlineColor = visibleEdge
-                            .mul(tsl.uniform(new webgpu.Color(outlineParam.visibleEdgeColor)))
-                            .add(hiddenEdge.mul(tsl.uniform(new webgpu.Color(outlineParam.hiddenEdgeColor))))
-                            .mul(outlineParam.edgeStrength);
-                        const outlinePulse = pulsePeriod.greaterThan(0).select(outlineColor.mul(osc), outlineColor);
-                        finalNode = outlinePulse.add(finalNode);
-                        break;
-                    }
-                case exports.PostProcessStepType.Antialiasing:
-                    {
-                        const aaParam = step;
-                        if (aaParam.method === "fxaa") {
-                            finalNode = WebGPUPostProcessFactory.constructFXAAPass(finalNode);
-                        }
-                        if (aaParam.method === "smaa") {
-                            finalNode = WebGPUPostProcessFactory.constructSMAAPass(finalNode);
-                        }
-                        break;
-                    }
-            }
+        // Create uniforms
+        this.effectUniforms = this.createEffectUniforms();
+        // Build scene pass
+        const scenePass = tsl.pass(this.scene, this.camera);
+        scenePass.setMRT(tsl.mrt({
+            output: tsl.output,
+            normal: tsl.normalView,
+            velocity: tsl.velocity
+        }));
+        const sceneColor = scenePass.getTextureNode('output');
+        const sceneNormal = scenePass.getTextureNode('normal');
+        const sceneDepth = scenePass.getTextureNode('depth');
+        const sceneVelocity = scenePass.getTextureNode('velocity');
+        const sceneViewZ = scenePass.getViewZNode();
+        const u = this.effectUniforms;
+        // Build Bloom - create with defaults, update via pass properties
+        const bloomInitParam = (_a = this.getStepParam(exports.PostProcessStepType.Bloom)) !== null && _a !== void 0 ? _a : DefaultBloomParam;
+        this.bloomPass = BloomNode_js.bloom(sceneColor);
+        this.bloomPass.threshold.value = bloomInitParam.threshold;
+        this.bloomPass.strength.value = bloomInitParam.strength;
+        this.bloomPass.radius.value = bloomInitParam.radius;
+        const bloomResult = sceneColor.add(this.bloomPass.mul(u.bloomStrength));
+        const afterBloom = u.bloomEnabled.greaterThan(0.5).select(bloomResult, sceneColor);
+        // Build LensFlare - requires bloom texture as input
+        const lensflareInitParam = (_b = this.getStepParam(exports.PostProcessStepType.LensFlare)) !== null && _b !== void 0 ? _b : DefaultLensFlareParam;
+        this.lensflarePass = LensflareNode_js.lensflare(this.bloomPass.getTextureNode(), {
+            ghostTint: tsl.vec3(lensflareInitParam.ghostTint[0], lensflareInitParam.ghostTint[1], lensflareInitParam.ghostTint[2]),
+            threshold: tsl.float(lensflareInitParam.threshold),
+            ghostSamples: tsl.float(lensflareInitParam.ghostSamples),
+            ghostSpacing: tsl.float(lensflareInitParam.ghostSpacing),
+            ghostAttenuationFactor: tsl.float(lensflareInitParam.ghostAttenuationFactor),
+            downSampleRatio: lensflareInitParam.downSampleRatio
+        });
+        const lensflareResult = afterBloom.add(this.lensflarePass.getTextureNode());
+        const afterLensflare = u.lensflareEnabled.greaterThan(0.5).select(lensflareResult, afterBloom);
+        // Build DOF - create with uniform nodes
+        const dofInitParam = (_c = this.getStepParam(exports.PostProcessStepType.DepthOfField)) !== null && _c !== void 0 ? _c : DefaultDOFParam;
+        this.dofPass = DepthOfFieldNode_js.dof(afterLensflare, sceneViewZ, tsl.uniform(dofInitParam.focus), tsl.uniform(dofInitParam.aperture), tsl.uniform(dofInitParam.maxblur));
+        const afterDOF = u.dofEnabled.greaterThan(0.5).select(this.dofPass, afterLensflare);
+        // Build GTAO
+        const gtaoInitParam = (_d = this.getStepParam(exports.PostProcessStepType.GroundTruthAmbientOcclusion)) !== null && _d !== void 0 ? _d : DefaultGTAOParam;
+        this.gtaoPass = GTAONode_js.ao(sceneDepth, sceneNormal, this.camera);
+        this.gtaoPass.resolutionScale = 0.5;
+        this.gtaoPass.distanceExponent.value = gtaoInitParam.distanceExponent;
+        this.gtaoPass.distanceFallOff.value = gtaoInitParam.distanceFallOff;
+        this.gtaoPass.radius.value = gtaoInitParam.radius;
+        this.gtaoPass.scale.value = gtaoInitParam.scale;
+        this.gtaoPass.thickness.value = gtaoInitParam.thickness;
+        this.gtaoPass.samples.value = gtaoInitParam.samples;
+        // 官方推荐使用 useTemporalFiltering 而不是 denoise
+        this.gtaoPass.useTemporalFiltering = gtaoInitParam.useTemporalFiltering;
+        // 获取 AO 纹理，使用 .r 获取单通道值
+        const aoTexture = this.gtaoPass.getTextureNode();
+        const aoValue = aoTexture.r;
+        const gtaoResult = afterDOF.mul(aoValue);
+        const afterGTAO = u.gtaoEnabled.greaterThan(0.5).select(gtaoResult, afterDOF);
+        // Build Outline
+        const outlineInitParam = (_e = this.getStepParam(exports.PostProcessStepType.Outline)) !== null && _e !== void 0 ? _e : DefaultOutlineParams;
+        this.outlinePass = OutlineNode_js.outline(this.scene, this.camera, {
+            selectedObjects: this.outlineObjects,
+            edgeGlow: tsl.uniform(outlineInitParam.edgeGlow),
+            edgeThickness: tsl.uniform(outlineInitParam.edgeThickness)
         });
+        const { visibleEdge, hiddenEdge } = this.outlinePass;
+        const safePulsePeriod = u.outlinePulsePeriod.greaterThan(0).select(u.outlinePulsePeriod, tsl.uniform(1));
+        const period = tsl.time.div(safePulsePeriod).mul(2);
+        const osc = tsl.oscSine(period).mul(0.5).add(0.5);
+        const outlineColor = visibleEdge
+            .mul(u.outlineVisibleEdgeColor)
+            .add(hiddenEdge.mul(u.outlineHiddenEdgeColor))
+            .mul(u.outlineEdgeStrength);
+        const outlinePulse = u.outlinePulsePeriod.greaterThan(0).select(outlineColor.mul(osc), outlineColor);
+        const outlineResult = outlinePulse.add(afterGTAO);
+        const afterOutline = u.outlineEnabled.greaterThan(0.5).select(outlineResult, afterGTAO);
+        // Build AA
+        const fxaaResult = FXAANode_js.fxaa(afterOutline);
+        const afterFXAA = u.fxaaEnabled.greaterThan(0.5).select(fxaaResult, afterOutline);
+        const smaaResult = SMAANode_js.smaa(afterFXAA);
+        const afterSMAA = u.smaaEnabled.greaterThan(0.5).select(smaaResult, afterFXAA);
+        // Build TRAA - 仅在启用时创建，避免 depth texture sample count mismatch
+        const aaParam = this.getStepParam(exports.PostProcessStepType.Antialiasing);
+        let finalNode = afterSMAA;
+        if (aaParam && aaParam.method === "traa") {
+            this.traaPass = TRAANode_js.traa(afterSMAA, sceneDepth, sceneVelocity, this.camera);
+            finalNode = this.traaPass.getTextureNode();
+        }
+        // Allow subclasses to modify the final node
+        finalNode = this.onBuildFinalNode(finalNode);
         this.postProcessing.outputNode = finalNode;
         this.postProcessing.needsUpdate = true;
-        this.markDirty();
+    }
+    /** Hook for subclasses to modify the final output node. Override to add custom effects. */
+    onBuildFinalNode(node) {
+        return node;
+    }
+    createEffectUniforms() {
+        var _a, _b, _c, _d;
+        const bloomParam = (_a = this.getStepParam(exports.PostProcessStepType.Bloom)) !== null && _a !== void 0 ? _a : DefaultBloomParam;
+        const dofParam = (_b = this.getStepParam(exports.PostProcessStepType.DepthOfField)) !== null && _b !== void 0 ? _b : DefaultDOFParam;
+        const gtaoParam = (_c = this.getStepParam(exports.PostProcessStepType.GroundTruthAmbientOcclusion)) !== null && _c !== void 0 ? _c : DefaultGTAOParam;
+        const outlineParam = (_d = this.getStepParam(exports.PostProcessStepType.Outline)) !== null && _d !== void 0 ? _d : DefaultOutlineParams;
+        return {
+            bloomEnabled: tsl.uniform(0),
+            bloomStrength: tsl.uniform(bloomParam.strength),
+            bloomThreshold: tsl.uniform(bloomParam.threshold),
+            bloomRadius: tsl.uniform(bloomParam.radius),
+            dofEnabled: tsl.uniform(0),
+            dofFocus: tsl.uniform(dofParam.focus),
+            dofAperture: tsl.uniform(dofParam.aperture),
+            dofMaxBlur: tsl.uniform(dofParam.maxblur),
+            gtaoEnabled: tsl.uniform(0),
+            gtaoScale: tsl.uniform(gtaoParam.scale),
+            gtaoDistanceExponent: tsl.uniform(gtaoParam.distanceExponent),
+            gtaoDistanceFallOff: tsl.uniform(gtaoParam.distanceFallOff),
+            gtaoRadius: tsl.uniform(gtaoParam.radius),
+            gtaoThickness: tsl.uniform(gtaoParam.thickness),
+            gtaoSamples: tsl.uniform(gtaoParam.samples),
+            outlineEnabled: tsl.uniform(0),
+            outlineEdgeStrength: tsl.uniform(outlineParam.edgeStrength),
+            outlineEdgeGlow: tsl.uniform(outlineParam.edgeGlow),
+            outlineEdgeThickness: tsl.uniform(outlineParam.edgeThickness),
+            outlinePulsePeriod: tsl.uniform(outlineParam.pulsePeriod),
+            outlineVisibleEdgeColor: tsl.uniform(new webgpu.Color(outlineParam.visibleEdgeColor)),
+            outlineHiddenEdgeColor: tsl.uniform(new webgpu.Color(outlineParam.hiddenEdgeColor)),
+            fxaaEnabled: tsl.uniform(0),
+            smaaEnabled: tsl.uniform(0),
+            lensflareEnabled: tsl.uniform(0),
+        };
+    }
+    getStepParam(type) {
+        var _a;
+        return (_a = this.postProcessParam.steps.find(step => step.type === type)) !== null && _a !== void 0 ? _a : null;
+    }
+    updateAllUniforms() {
+        if (!this.effectUniforms)
+            return;
+        const u = this.effectUniforms;
+        const activeTypes = new Set(this.postProcessParam.steps.map(step => step.type));
+        // Update enable/disable
+        u.bloomEnabled.value = activeTypes.has(exports.PostProcessStepType.Bloom) ? 1 : 0;
+        u.dofEnabled.value = activeTypes.has(exports.PostProcessStepType.DepthOfField) ? 1 : 0;
+        u.gtaoEnabled.value = activeTypes.has(exports.PostProcessStepType.GroundTruthAmbientOcclusion) ? 1 : 0;
+        u.outlineEnabled.value = activeTypes.has(exports.PostProcessStepType.Outline) ? 1 : 0;
+        u.lensflareEnabled.value = activeTypes.has(exports.PostProcessStepType.LensFlare) ? 1 : 0;
+        // Update AA
+        const aaParam = this.getStepParam(exports.PostProcessStepType.Antialiasing);
+        if (aaParam) {
+            u.fxaaEnabled.value = aaParam.method === "fxaa" ? 1 : 0;
+            u.smaaEnabled.value = aaParam.method === "smaa" ? 1 : 0;
+        }
+        else {
+            u.fxaaEnabled.value = 0;
+            u.smaaEnabled.value = 0;
+        }
+        // Update Bloom parameters
+        const bloomParam = this.getStepParam(exports.PostProcessStepType.Bloom);
+        if (bloomParam) {
+            u.bloomStrength.value = bloomParam.strength;
+            u.bloomThreshold.value = bloomParam.threshold;
+            u.bloomRadius.value = bloomParam.radius;
+            // Update Bloom pass properties
+            if (this.bloomPass) {
+                this.bloomPass.threshold.value = bloomParam.threshold;
+                this.bloomPass.strength.value = bloomParam.strength;
+                this.bloomPass.radius.value = bloomParam.radius;
+            }
+        }
+        // Update LensFlare parameters - requires pipeline rebuild for parameter changes
+        const lensflareParam = this.getStepParam(exports.PostProcessStepType.LensFlare);
+        if (lensflareParam && this.lensflarePass) ;
+        // Update DOF parameters
+        const dofParam = this.getStepParam(exports.PostProcessStepType.DepthOfField);
+        if (dofParam) {
+            u.dofFocus.value = dofParam.focus;
+            u.dofAperture.value = dofParam.aperture;
+            u.dofMaxBlur.value = dofParam.maxblur;
+            // Update DOF pass properties
+            if (this.dofPass) {
+                this.dofPass.focusDistanceNode.value = dofParam.focus;
+                this.dofPass.focalLengthNode.value = dofParam.aperture;
+                this.dofPass.bokehScaleNode.value = dofParam.maxblur;
+            }
+        }
+        // Update GTAO parameters
+        const gtaoParam = this.getStepParam(exports.PostProcessStepType.GroundTruthAmbientOcclusion);
+        if (gtaoParam) {
+            u.gtaoScale.value = gtaoParam.scale;
+            u.gtaoDistanceExponent.value = gtaoParam.distanceExponent;
+            u.gtaoDistanceFallOff.value = gtaoParam.distanceFallOff;
+            u.gtaoRadius.value = gtaoParam.radius;
+            u.gtaoThickness.value = gtaoParam.thickness;
+            u.gtaoSamples.value = gtaoParam.samples;
+            // Update GTAO pass properties
+            if (this.gtaoPass) {
+                this.gtaoPass.distanceExponent.value = gtaoParam.distanceExponent;
+                this.gtaoPass.distanceFallOff.value = gtaoParam.distanceFallOff;
+                this.gtaoPass.radius.value = gtaoParam.radius;
+                this.gtaoPass.scale.value = gtaoParam.scale;
+                this.gtaoPass.thickness.value = gtaoParam.thickness;
+                this.gtaoPass.samples.value = gtaoParam.samples;
+                this.gtaoPass.useTemporalFiltering = gtaoParam.useTemporalFiltering;
+            }
+        }
+        // Update Outline parameters
+        const outlineParam = this.getStepParam(exports.PostProcessStepType.Outline);
+        if (outlineParam) {
+            u.outlineEdgeStrength.value = outlineParam.edgeStrength;
+            u.outlineEdgeGlow.value = outlineParam.edgeGlow;
+            u.outlineEdgeThickness.value = outlineParam.edgeThickness;
+            u.outlinePulsePeriod.value = outlineParam.pulsePeriod;
+            u.outlineVisibleEdgeColor.value.set(outlineParam.visibleEdgeColor);
+            u.outlineHiddenEdgeColor.value.set(outlineParam.hiddenEdgeColor);
+            // Update outline pass
+            if (this.outlinePass) {
+                this.outlinePass.edgeGlowNode.value = outlineParam.edgeGlow;
+                this.outlinePass.edgeThicknessNode.value = outlineParam.edgeThickness;
+                this.outlinePass.selectedObjects = this.outlineObjects;
+            }
+        }
     }
     updateSteps(steps) {
+        console.log("[PostProcessManager] updateSteps called", steps);
+        console.trace("[PostProcessManager] updateSteps call stack");
         this.postProcessParam.steps = steps;
-        this.setup();
+        console.log("updateSteps", steps);
+        if (!this.effectUniforms || !this.postProcessing) {
+            console.log("[PostProcessManager] Building pipeline because effectUniforms or postProcessing is null");
+            this.buildPipeline();
+        }
+        this.updateAllUniforms();
+        this.markDirty();
     }
     addOutlineObject(obj) {
         if (!this.outlineObjects.includes(obj)) {
             this.outlineObjects.push(obj);
+            if (this.outlinePass) {
+                this.outlinePass.selectedObjects = this.outlineObjects;
+            }
         }
         this.markDirty();
     }
     setOutlineObjects(objects) {
         this.outlineObjects.length = 0;
         this.outlineObjects.push(...objects);
+        if (this.outlinePass) {
+            this.outlinePass.selectedObjects = this.outlineObjects;
+        }
         this.markDirty();
     }
     removeOutlineObject(obj) {
         const index = this.outlineObjects.indexOf(obj);
         if (index > -1) {
             this.outlineObjects.splice(index, 1);
+            if (this.outlinePass) {
+                this.outlinePass.selectedObjects = this.outlineObjects;
+            }
         }
         this.markDirty();
     }
+    /**
+     * 设置 3D LUT 纹理
+     * @param lutTexture 3D LUT 纹理，传 null 清除
+     */
+    setLUT3DTexture(lutTexture) {
+        this.lut3dTexture = lutTexture;
+        // 需要重建管线以应用新的 LUT 纹理
+        this.buildPipeline();
+        this.updateAllUniforms();
+        this.markDirty();
+    }
+    /**
+     * 获取当前 3D LUT 纹理
+     */
+    getLUT3DTexture() {
+        return this.lut3dTexture;
+    }
     render() {
         if (this.postProcessing) {
             this.postProcessing.render();
@@ -1741,15 +1822,16 @@ class PostProcessManager {
         }
         return false;
     }
-    async renderAsync() {
-        if (this.postProcessing) {
-            await this.postProcessing.renderAsync();
-            return true;
-        }
-        return false;
-    }
     destroy() {
         this.outlineObjects = [];
+        this.effectUniforms = null;
+        this.outlinePass = null;
+        this.bloomPass = null;
+        this.dofPass = null;
+        this.gtaoPass = null;
+        this.traaPass = null;
+        this.lensflarePass = null;
+        this.lut3dTexture = null;
         if (this.postProcessing) {
             this.postProcessing.dispose();
             this.postProcessing = null;
@@ -1824,7 +1906,8 @@ class Viewport {
         });
     }
     createRenderer(rendererParam) {
-        if (this._outerContainer) {
+        // 只在首次创建 canvasContainer，避免重复创建导致 DOM 泄漏
+        if (this._outerContainer && !this._canvasContainer) {
             this._canvasContainer = document.createElement("div");
             this._canvasContainer.style.left = "0px";
             this._canvasContainer.style.top = "0px";
@@ -1833,6 +1916,7 @@ class Viewport {
             this._outerContainer.appendChild(this._canvasContainer);
         }
         const element = this._canvasContainer;
+        // 销毁旧渲染器
         if (this._renderer) {
             if (element) {
                 element.removeChild(this._renderer.domElement);
@@ -1849,7 +1933,7 @@ class Viewport {
         renderP.alpha = rendererParam.alpha;
         renderP.logarithmicDepthBuffer = rendererParam.logarithmicDepthBuffer;
         renderP.samples = rendererParam.samples;
-        renderP.colorBufferType = rendererParam.colorBufferType;
+        renderP.outputBufferType = rendererParam.outputBufferType;
         this._renderer = new webgpu.WebGPURenderer(renderP);
         this._renderer.setPixelRatio(window.devicePixelRatio);
         this._renderer.setSize(width, height);
@@ -1857,6 +1941,7 @@ class Viewport {
         this._renderer.shadowMap.type = rendererParam.shadowMapType;
         this._renderer.toneMapping = rendererParam.toneMapping;
         this._renderer.toneMappingExposure = rendererParam.toneMappingExposure;
+        this._renderer.setClearAlpha(0);
         if (element) {
             element.appendChild(this._renderer.domElement);
         }
@@ -1906,10 +1991,14 @@ class Viewport {
     }
     setupPostProcess() {
         if (!this.postProcessManager) {
-            this.postProcessManager = new PostProcessManager(this.renderer, this.app.world.scene, this.app.camera, this.postProcessParam, () => this.markRenderStateDirty());
+            this.postProcessManager = this.createPostProcessManager();
         }
         this.postProcessManager.setup();
     }
+    /** Create the PostProcessManager instance. Override in subclass to use custom manager. */
+    createPostProcessManager() {
+        return new PostProcessManager(this.renderer, this.app.world.scene, this.app.camera, this.postProcessParam, () => this.markRenderStateDirty());
+    }
     updatePostProcess(steps) {
         if (this.postProcessManager) {
             this.postProcessManager.updateSteps(steps);
@@ -1963,14 +2052,20 @@ class Viewport {
         else {
             this.renderer.render(this.app.world.scene, this.app.camera);
         }
+        // Hook for subclasses to render additional content after post-processing
+        this.onAfterPostProcessRender();
         if (this.labelRenderer) {
             this.labelRenderer.render(this.app.world.scene, this.app.camera);
         }
         this.isRenderStateDirty = false;
     }
+    /** Called after post-processing render, before label renderer. Override in subclass to render additional content. */
+    onAfterPostProcessRender() {
+        // Override in subclass
+    }
     async renderAsImage(width = 1024, height = 1024) {
         try {
-            if (this.postProcessManager && await this.postProcessManager.renderAsync()) {
+            if (this.postProcessManager && this.postProcessManager.render()) {
                 // Post processing rendered
             }
             else {
@@ -2095,14 +2190,14 @@ class Pawn {
         this.isTickEnabled = false;
         this.controller = controller;
     }
-    tick(deltaTime) {
+    tick(_deltaTime) {
         return;
     }
     possess() {
     }
     unpossess() {
     }
-    focusTo(targetPos, targetQuat, distance, time, onGoing = null, onFinished = null) {
+    focusTo(_targetPos, _targetQuat, _distance, _time, _onGoing = null, _onFinished = null) {
     }
     stopFocusing() {
     }
@@ -2513,7 +2608,6 @@ class Controller {
         this.fireComponentClick(component, hit, isDoubleClick);
         // Actor level
         const actor = component.parentActor;
-        //console.log("[Controller]fireClickEvents", actor, actor?.isClickEnabled)
         if (actor && actor.isClickEnabled) {
             this.fireActorClick(actor, component, hit, isDoubleClick);
         }
@@ -2680,9 +2774,9 @@ const DefaultRendererParameters = {
     depth: true,
     stencil: false,
     antialias: false,
-    samples: 4,
+    samples: 1,
     forceWebGL: false,
-    colorBufferType: 1016,
+    outputBufferType: 1016,
     toneMapping: 0,
     toneMappingExposure: 1,
     shadowMapEnabled: true,
@@ -3572,10 +3666,10 @@ class LabelComponent extends SceneComponent {
         this.obj = new CSS2DRenderer_js.CSS2DObject(domElement);
         this.obj.center.copy(center);
     }
-    set isHoverEnabled(bCanHorver) {
+    set isHoverEnabled(_bCanHorver) {
         return;
     }
-    set isClickEnabled(bCanClick) {
+    set isClickEnabled(_bCanClick) {
         return;
     }
     setVisible(bVisible) {
@@ -3599,47 +3693,6 @@ class LabelComponent extends SceneComponent {
 // labelStyle.style.fontSize        = "10px";
 // labelStyle.style.pointerEvents   = 'auto';
 
-const DefaultBloomParam = {
-    type: exports.PostProcessStepType.Bloom,
-    threshold: 0,
-    strength: 1,
-    radius: 0,
-};
-
-const DefaultDenoiseParam = {
-    denoiseRadius: 5,
-    lumaPhi: 5,
-    depthPhi: 5,
-    normalPhi: 5
-};
-const DefaultGTAOParam = {
-    type: exports.PostProcessStepType.GroundTruthAmbientOcclusion,
-    distanceExponent: 1,
-    distanceFallOff: 1,
-    radius: 0.25,
-    scale: 1,
-    thickness: 1,
-    denoised: true,
-    denoiseParam: DefaultDenoiseParam,
-};
-
-const DefaultDOFParam = {
-    type: exports.PostProcessStepType.DepthOfField,
-    focus: 500.0,
-    aperture: 5,
-    maxblur: 0.01
-};
-
-const DefaultOutlineParams = {
-    type: exports.PostProcessStepType.Outline,
-    edgeStrength: 3.0,
-    edgeGlow: 1.0,
-    edgeThickness: 1.0,
-    pulsePeriod: 0.0,
-    visibleEdgeColor: 0xffffff,
-    hiddenEdgeColor: 0xffffff,
-};
-
 const DefaultSSRParam = {
     type: exports.PostProcessStepType.ScreenSpaceReflection,
     maxDistance: 0.5,
@@ -3682,13 +3735,16 @@ class TransformGizmo extends Pawn {
         }
         return this._control;
     }
-    constructor(controller) {
+    constructor(controller, options) {
+        var _a;
         super(controller);
         this._control = null;
         this.helperObject = new webgpu.Object3D();
         this.targets = [];
         this.primaryTarget = null;
         this.targetMatrixMap = new Map();
+        /** Scene where gizmo is rendered (can be separate from main scene to avoid post-processing) */
+        this.gizmoScene = null;
         this.onDraggingChangedEvent = (param) => { this.onDraggingChanged(param); };
         this.onObjectChangeEvent = () => { this.onObjectChanged(); };
         this.onChangeEvent = () => { this.onChange(); };
@@ -3703,35 +3759,43 @@ class TransformGizmo extends Pawn {
             elem.userData["rayIgnored"] = true;
         });
         this.helperObject.name = "TransformHelperObject";
+        this.gizmoScene = (_a = options === null || options === void 0 ? void 0 : options.helperScene) !== null && _a !== void 0 ? _a : null;
     }
-    possess() {
+    /** Get the scene where gizmo should be added */
+    getTargetScene() {
         var _a;
-        (_a = this.controller.world.scene) === null || _a === void 0 ? void 0 : _a.add(this.helperObject);
+        return (_a = this.gizmoScene) !== null && _a !== void 0 ? _a : this.controller.world.scene;
+    }
+    possess() {
+        const targetScene = this.getTargetScene();
+        targetScene.add(this.helperObject);
+        targetScene.add(this.control.getHelper());
         this.control.attach(this.helperObject);
         this.control.addEventListener('change', this.onChangeEvent);
         this.control.addEventListener('dragging-changed', this.onDraggingChangedEvent);
         this.control.addEventListener('objectChange', this.onObjectChangeEvent);
     }
     unpossess() {
-        var _a;
         this.control.removeEventListener('change', this.onChangeEvent);
         this.control.removeEventListener('dragging-changed', this.onDraggingChangedEvent);
         this.control.removeEventListener('objectChange', this.onObjectChangeEvent);
         this.control.detach();
-        (_a = this.controller.world.scene) === null || _a === void 0 ? void 0 : _a.remove(this.helperObject);
+        const targetScene = this.getTargetScene();
+        targetScene.remove(this.helperObject);
+        targetScene.remove(this.control.getHelper());
     }
     refresh() {
-        var _a, _b, _c;
         if (!this.primaryTarget) {
             return;
         }
         this.control.detach();
-        (_a = this.controller.world.scene) === null || _a === void 0 ? void 0 : _a.remove(this.helperObject);
+        const targetScene = this.getTargetScene();
+        targetScene.remove(this.helperObject);
         this.targetMatrixMap.clear();
         let tMatrix = this.primaryTarget.getMatrixInWorld();
         tMatrix.decompose(this.helperObject.position, this.helperObject.quaternion, this.helperObject.scale);
-        (_b = this.controller.world.scene) === null || _b === void 0 ? void 0 : _b.add(this.control.getHelper());
-        (_c = this.controller.world.scene) === null || _c === void 0 ? void 0 : _c.add(this.helperObject);
+        targetScene.add(this.control.getHelper());
+        targetScene.add(this.helperObject);
         this.control.attach(this.helperObject);
         this.targets.forEach((elem) => {
             const tarMatrix = elem.getMatrixInWorld();
@@ -3757,7 +3821,7 @@ class TransformGizmo extends Pawn {
             const TA2 = this.helperObject.matrixWorld.clone();
             this.primaryTarget.onTransforming(TA2);
             // Apply transform to all additional targets
-            this.targets.forEach((tar, index) => {
+            this.targets.forEach((tar) => {
                 const relativeMatrix = this.targetMatrixMap.get(tar);
                 if (relativeMatrix) {
                     const TB2 = new webgpu.Matrix4().multiplyMatrices(TA2, relativeMatrix);
@@ -3773,11 +3837,11 @@ class TransformGizmo extends Pawn {
         this.control.enabled = newEnable;
     }
     setTarget(primaryTarget, multiTargets, onUpdate = null, onDragging = null) {
-        var _a;
         this.targetMatrixMap.clear();
         let tMatrix = primaryTarget.getMatrixInWorld();
         tMatrix.decompose(this.helperObject.position, this.helperObject.quaternion, this.helperObject.scale);
-        (_a = this.controller.world.scene) === null || _a === void 0 ? void 0 : _a.add(this.control.getHelper());
+        const targetScene = this.getTargetScene();
+        targetScene.add(this.control.getHelper());
         // this.control.attach(this.helperObject);
         this.primaryTarget = primaryTarget;
         this.targets = multiTargets;
@@ -3857,8 +3921,8 @@ exports.DefaultAppParam = DefaultAppParam;
 exports.DefaultBloomParam = DefaultBloomParam;
 exports.DefaultCameraParam = DefaultCameraParam;
 exports.DefaultDOFParam = DefaultDOFParam;
-exports.DefaultDenoiseParam = DefaultDenoiseParam;
 exports.DefaultGTAOParam = DefaultGTAOParam;
+exports.DefaultLensFlareParam = DefaultLensFlareParam;
 exports.DefaultOrthographicCameraParam = DefaultOrthographicCameraParam;
 exports.DefaultOutlineParams = DefaultOutlineParams;
 exports.DefaultPerspectiveCameraParam = DefaultPerspectiveCameraParam;
@@ -3882,6 +3946,7 @@ exports.MeshComponent = MeshComponent;
 exports.Orbital = Orbital;
 exports.PlaneActor = PlaneActor;
 exports.PlaneComponent = PlaneComponent;
+exports.PostProcessManager = PostProcessManager;
 exports.SceneComponent = SceneComponent;
 exports.SkyActor = SkyActor;
 exports.SkyComponent = SkyComponent;
@@ -3893,5 +3958,5 @@ exports.ThreeJsApp = ThreeJsApp;
 exports.ThreeObjectLibrary = ThreeObjectLibrary;
 exports.TransformGizmo = TransformGizmo;
 exports.Viewport = Viewport;
-exports.WebGPUPostProcessFactory = WebGPUPostProcessFactory;
 exports.World = World;
+//# sourceMappingURL=bundle.cjs.js.map