lythreeframe 1.0.0

package/lythreeFrame/src/Frame/Viewport.ts

@@ -0,0 +1,516 @@
+
+import { PostProcessParam } from './../PostProcess/PostProcessParam';
+import OutlineNode from 'three/examples/jsm/tsl/display/OutlineNode.js';
+import { CSS2DRenderer } from "three/examples/jsm/Addons.js";
+import BloomNode from "three/examples/jsm/tsl/display/BloomNode.js";
+import DenoiseNode from "three/examples/jsm/tsl/display/DenoiseNode.js";
+import DepthOfFieldNode from "three/examples/jsm/tsl/display/DepthOfFieldNode.js";
+import GTAONode from "three/examples/jsm/tsl/display/GTAONode.js";
+import { WebGPURendererParameters } from "three/src/renderers/webgpu/WebGPURenderer.js";
+import { blendColor, oscSine, ShaderNodeObject, time, uniform } from "three/tsl";
+import { WebGPURenderer, PostProcessing, PassNode, Color, Node } from "three/webgpu";
+import { BloomParam } from "../PostProcess/Param/Bloom";
+import { GTAOParam } from "../PostProcess/Param/GTAO";
+import { ToneMappingParams, ToneMappingOptions } from "../PostProcess/Param/ToneMapping";
+import { WebGPUPostProcessFactory } from "../PostProcess/WebGPUPostProcessFactory";
+import { ThreeJsApp } from "../ThreeJsApp";
+import SSRNode from "three/examples/jsm/tsl/display/SSRNode.js";
+import { SSRParam } from "../PostProcess/Param/SSR";
+import { DefaultOutlineParams, OutlineParams } from '../PostProcess/Param/Outline';
+import { Object3D } from 'three/src/Three.WebGPU.Nodes.js';
+import { DOFParam } from '../PostProcess/Param/DOF';
+import FXAANode from 'three/examples/jsm/tsl/display/FXAANode.js';
+import { SMAANode } from 'three/examples/jsm/tsl/display/SMAANode.js';
+
+
+export class Viewport
+{
+    get canvas(): HTMLElement
+    {
+        if (!this._canvas)
+        {
+            throw Error("Canvas is not initialized");
+        }
+        return this._canvas;
+    }
+    get renderer(): WebGPURenderer
+    {
+        if (!this._renderer)
+        {
+            throw Error("Renderer is not initialized");
+        }
+        return this._renderer;
+    }
+    get app(): ThreeJsApp
+    {
+        if (!this._app)
+        {
+            throw Error("App is not initialized");
+        }
+        return this._app;
+    }
+
+    private _renderer: WebGPURenderer | null = null;
+    private labelRenderer: CSS2DRenderer | null = null;
+
+    protected _app: ThreeJsApp | null = null;
+    private resizeObserver: ResizeObserver | null = null;
+    private _canvas: HTMLElement | null = null;
+    private isRenderStateDirty: boolean = true;
+
+    private postProcessParam: PostProcessParam                       = {};
+    private postProcessing: PostProcessing | null                    = null;
+    private scenePass: ShaderNodeObject<PassNode> | null             = null;
+    private bloomPass: ShaderNodeObject<BloomNode> | null            = null;
+    private dofPass: ShaderNodeObject<DepthOfFieldNode> | null       = null;
+    private GTAOPass: ShaderNodeObject<GTAONode> | null              = null;
+    private denoiseGTAOPass: ShaderNodeObject<DenoiseNode> | null    = null;
+    // private denoiseOutlinePass: ShaderNodeObject<DenoiseNode> | null = null;
+    private ssrPass: ShaderNodeObject<SSRNode> | null                = null;
+    private outlinePass: ShaderNodeObject<OutlineNode> | null        = null;
+        // private motionBlurPass: ShaderNodeObject<Node> | null      = null;
+    private fxaaPass: ShaderNodeObject<FXAANode> | null = null;
+    private smaaPass: ShaderNodeObject<SMAANode> | null = null;
+
+    private outlineObjects: Object3D[] = [];
+    constructor(app: ThreeJsApp, elementId: string, rendererParam: WebGPURendererParameters = { antialias: true }, postProcessParam: PostProcessParam = {})
+    {
+            this.postProcessParam = postProcessParam
+            this._app             = app;
+        let element               = document.getElementById(elementId);
+        if (!element)
+        {
+            throw Error(`Can not find domElement which id is ${elementId}`);
+        }
+        this._renderer = new WebGPURenderer(rendererParam);
+        this._renderer.setPixelRatio(window.devicePixelRatio);
+        this._renderer.setSize(element.clientWidth, element.clientHeight);
+        this._renderer.shadowMap.enabled = true;
+        this.labelRenderer = new CSS2DRenderer();
+        this.labelRenderer.setSize(element.clientWidth, element.clientHeight);
+        this.labelRenderer.domElement.style.pointerEvents = 'none';
+        this.labelRenderer.domElement.style.position = 'absolute';
+        this.labelRenderer.domElement.style.top = '0px';
+        this.labelRenderer.domElement.className = 'scene-labelRenderer';
+
+        element.appendChild(this.labelRenderer.domElement);
+        element.appendChild(this._renderer.domElement);
+        this._canvas = element;
+
+        this.resizeObserver = new ResizeObserver((entries) =>
+        {
+            for (let entry of entries)
+            {
+                if (entry.contentBoxSize)
+                {
+                    this.onWindowResize();
+                }
+            }
+        });
+        this.resizeObserver.observe(this._canvas);
+
+        this.setupPostProcess();
+    }
+
+    init()
+    {
+        
+    }
+
+    setupPostProcess()
+    {
+        if (this.postProcessParam.toneMapping)
+        {
+            let toneMapping = ToneMappingOptions.get(this.postProcessParam.toneMapping.toneMapping);
+            if (toneMapping)
+            {
+                this.renderer.toneMapping = toneMapping;
+            }
+            this.renderer.toneMappingExposure = this.postProcessParam.toneMapping.exposure;
+        }
+        if (!(Object.keys(this.postProcessParam).some(key => ['bloom', 'dof', 'gtao', 'ssr', "outline"].includes(key))))
+        {
+            this.destroyPostProcess();
+            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 (this.postProcessParam.bloom)
+        {
+            if (!this.bloomPass)
+            {
+                this.bloomPass = WebGPUPostProcessFactory.constructBloomPass(this.scenePass, this.postProcessParam.bloom);
+            }
+            else
+            {
+                WebGPUPostProcessFactory.updateBloomPass(this.bloomPass, this.postProcessParam.bloom);
+            }
+            finalNode = finalNode.add(this.bloomPass);
+        }
+        else
+        {
+            if (this.bloomPass)
+            {
+                this.bloomPass.dispose();
+                this.bloomPass = null;
+            }
+        }
+        // DOF
+        if (this.postProcessParam.dof)
+        {
+            if (!this.dofPass)
+            {
+                this.dofPass = WebGPUPostProcessFactory.constructDOFPass(this.scenePass, this.postProcessParam.dof);
+            }
+            else
+            {
+                WebGPUPostProcessFactory.updateDOFPass(this.dofPass, this.postProcessParam.dof);
+            }
+            finalNode = this.dofPass;
+        }
+        else
+        {
+            if (this.dofPass)
+            {
+                this.dofPass.dispose();
+                this.dofPass = null;
+            }
+        }
+
+        // motion blur
+        // if (this.postProcessParam.motionBlur)
+        // {
+        //     if (!this.motionBlurPass)
+        //     {
+        //         this.motionBlurPass = WebGPUPostProcessFactory.constructMotionBlurPass(finalNode, this.scenePass, this.postProcessParam.motionBlur);
+        //     }
+        //     const vignette  = screenUV.distance(.5).remap(.6, 1).mul(2).clamp().oneMinus();
+        //           finalNode = mix(this.motionBlurPass, this.scenePass.getTextureNode("velocity"), 0).mul(vignette);
+        // }
+        // else
+        // {
+        //     if (this.motionBlurPass)
+        //     {
+        //         this.motionBlurPass.dispose();
+        //         this.motionBlurPass = null;
+        //     }
+        // }
+
+        // ssr
+        if (this.postProcessParam.ssr)
+        {
+            if (!this.ssrPass)
+            {
+                this.ssrPass = WebGPUPostProcessFactory.constructSSRPass(this.scenePass, this.postProcessParam.ssr);
+            }
+            else
+            {
+                WebGPUPostProcessFactory.updateSSRPass(this.ssrPass, this.postProcessParam.ssr);
+            }
+            finalNode = blendColor(finalNode, this.ssrPass)
+        }
+        // GTAO
+        if (this.postProcessParam.gtao)
+        {
+            if (!this.GTAOPass)
+            {
+                this.GTAOPass = WebGPUPostProcessFactory.constructGTAOPass(this.scenePass, this.postProcessParam.gtao);
+            }
+            else
+            {
+                WebGPUPostProcessFactory.updateGTAOPass(this.GTAOPass, this.postProcessParam.gtao);
+            }
+            if (this.postProcessParam.gtao.denoised)
+            {
+                if (!this.denoiseGTAOPass)
+                {
+                    this.denoiseGTAOPass = WebGPUPostProcessFactory.constructGTAODenoisePass(this.scenePass, this.GTAOPass, this.postProcessParam.gtao);
+                }
+                else
+                {
+                    WebGPUPostProcessFactory.updateGTAOPass(this.GTAOPass, this.postProcessParam.gtao);
+                }
+                finalNode = this.denoiseGTAOPass.mul(finalNode);
+            }
+            else
+            {
+                finalNode = this.GTAOPass.getTextureNode().mul(finalNode);
+                if (this.denoiseGTAOPass)
+                {
+                    this.denoiseGTAOPass.dispose();
+                    this.denoiseGTAOPass = null;
+                }
+            }
+        }
+        else
+        {
+            if (this.GTAOPass)
+            {
+                this.GTAOPass.dispose();
+                this.GTAOPass = null;
+            }
+            if (this.denoiseGTAOPass)
+            {
+                this.denoiseGTAOPass.dispose();
+                this.denoiseGTAOPass = null;
+            }
+        }
+        // outline
+        if (this.postProcessParam.outline)
+        {
+            if (!this.outlinePass)
+            {
+                this.outlinePass        = WebGPUPostProcessFactory.constructOutlinePass(this.app.world.scene, this.scenePass.camera, this.outlineObjects, this.postProcessParam.outline);
+            }
+            else
+            {
+                WebGPUPostProcessFactory.updateOutlinePass(this.outlinePass, this.outlineObjects, this.postProcessParam.outline);
+            }
+            const { visibleEdge, hiddenEdge } = this.outlinePass;
+            const pulsePeriod = uniform(this.postProcessParam.outline.pulsePeriod);
+            const period = time.div(pulsePeriod).mul(2);
+            const osc = oscSine(period).mul(.5).add(.5);
+
+            const outlineColor = visibleEdge.mul(uniform(new Color(this.postProcessParam.outline.visibleEdgeColor))).add(hiddenEdge.mul(uniform(new Color(this.postProcessParam.outline.hiddenEdgeColor)))).mul(this.postProcessParam.outline.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);
+            // finalNode = this.denoiseOutlinePass.mul(outlinePulse).add(finalNode);
+        }
+        else
+        {
+            if (this.outlinePass)
+            {
+                this.outlinePass.dispose();
+                this.outlinePass = null;
+            }
+        }
+
+        if (this.postProcessParam.aa)
+        {
+            if (this.postProcessParam.aa === "fxaa")
+            {
+                this.fxaaPass = WebGPUPostProcessFactory.constructFXAAPass(finalNode)
+                finalNode = this.fxaaPass;
+            }
+            if (this.postProcessParam.aa === "smaa")
+            {
+                this.smaaPass = WebGPUPostProcessFactory.constructSMAAPass(finalNode)
+                finalNode = this.smaaPass;
+            }
+        }
+        else
+        {
+            if (this.fxaaPass)
+            {
+                this.fxaaPass.dispose();
+                this.fxaaPass = null;
+            }
+            if (this.smaaPass)
+            {
+                this.smaaPass.dispose();
+                this.smaaPass = null;
+            }
+        }
+        console.log(this.postProcessParam, "sssssssssssssssssssss")
+        this.postProcessing.outputNode = finalNode;
+        this.markRenderStateDirty()
+    }
+
+    updateToneMappingParam(params: ToneMappingParams)
+    {
+        this.postProcessParam.toneMapping = params;
+        this.setupPostProcess();
+        this.markRenderStateDirty();
+    }
+
+    updateBloomPass(params: BloomParam)
+    {
+        this.postProcessParam.bloom = params;
+        this.setupPostProcess();
+    }
+
+    updateGTAOParam(params: GTAOParam | null)
+    {
+        this.postProcessParam.gtao = params;
+        this.setupPostProcess();
+    }
+
+    updateDOFParam(params: DOFParam | null) 
+    {
+        this.postProcessParam.dof = params;
+        this.setupPostProcess();
+    }
+
+    updateSSRParam(params: SSRParam | null)
+    {
+        this.postProcessParam.ssr = params;
+        this.setupPostProcess();
+    }
+
+    updateOutlineParam(params: OutlineParams | null)
+    {
+        this.postProcessParam.outline = params
+        this.setupPostProcess();
+    }
+
+    addOutlineObject(obj: Object3D)
+    {
+        if(!this.outlineObjects.includes(obj))
+        {
+            this.outlineObjects.push(obj);
+        }
+
+        if (!this.postProcessParam.outline)
+        {
+            this.postProcessParam.outline = DefaultOutlineParams
+            this.setupPostProcess();
+        }
+        else
+        {
+            this.markRenderStateDirty();
+        }
+    }
+
+    removeOutlineObject(obj: Object3D)
+    {
+        if (!this.postProcessParam.outline)
+        {
+            this.outlineObjects = [];
+            return
+        }
+        const index = this.outlineObjects.indexOf(obj);
+        if(index > -1)
+        {
+            this.outlineObjects.splice(index, 1);
+        }
+        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;
+        }
+    }
+
+    onWindowResize()
+    {
+        console.log("resize")
+        let ele = this._canvas;
+        if (!ele)
+        {
+            return;
+        }
+        this.app.onWindowResize(ele.clientWidth, ele.clientHeight);
+        this.renderer.setSize(ele.clientWidth, ele.clientHeight);
+        if(this.labelRenderer)
+            this.labelRenderer.setSize(ele.clientWidth, ele.clientHeight);
+        this.markRenderStateDirty();
+    }
+
+    markRenderStateDirty()
+    {
+        this.isRenderStateDirty = true;
+    }
+
+    render()
+    {
+        if(!this.isRenderStateDirty)
+        {
+            return
+        }
+        if (this.postProcessing)
+        {
+            this.postProcessing.render();
+        }
+        else
+        {                                                                                                                                                                                                                                            //console.log("render renderer");
+            this.renderer.render(this.app.world.scene, this.app.camera);
+        }
+        this.isRenderStateDirty = false;
+    }
+
+    destroy()
+    {
+        this.destroyPostProcess();
+        this.renderer.setAnimationLoop(null);
+        if (this.resizeObserver)
+        {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+        if (this.labelRenderer)
+        {
+            this.labelRenderer.domElement.remove();
+            this.labelRenderer = null;
+        }
+        if (this._renderer)
+        {
+            this.renderer.domElement.remove();
+            this._renderer.dispose();
+            this._renderer = null;
+        }
+
+
+        this.postProcessing?.dispose();
+        this._canvas = null;
+        this._app = null;
+        this._renderer = null;
+        this.outlineObjects = [];
+    }
+}

package/lythreeFrame/src/Frame/World.ts

@@ -0,0 +1,59 @@
+import {Scene} from "three";
+import {ThreeJsApp} from "../ThreeJsApp.ts";
+import { Viewport } from "./Viewport.ts";
+import { Controller } from "./Controller.ts";
+import { Actor } from "../Object/Actor.ts";
+
+export class World
+{
+    get scene():Scene
+    {
+        return this._scene;
+    }
+    get viewport(): Viewport
+    {
+        return this.app.viewport
+    }
+    get controller(): Controller
+    {
+        return this.app.controller
+    }
+    protected _scene:Scene
+    protected app:ThreeJsApp
+    protected actors:Set<Actor> = new Set()
+    constructor(app:ThreeJsApp,)
+    {
+        this.app = app
+        this._scene = new Scene();
+    }
+
+    init()
+    {
+        
+    }
+    
+    tick(deltaTime:number)
+    {
+        this.actors.forEach((elem)=>{
+            elem.tick(deltaTime)
+        })
+    }
+
+    addActor(actor:Actor)
+    {
+        if(!actor.rootComponent.threeObject)
+        {
+            throw   Error("actor.threeObject is null")
+        }
+        actor.removeFromParent();
+        this.scene.add(actor.rootComponent.threeObject)
+        this.actors.add(actor)
+        actor.onAddedToWorld(this)
+        this.viewport.markRenderStateDirty()
+    }
+    
+    destroy()
+    {
+
+    }
+}