lythreeframe 1.0.5 → 1.0.7

package/src/lythreeframe/Frame/Viewport.ts

@@ -1,516 +0,0 @@
-
-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/src/lythreeframe/Frame/World.ts

@@ -1,59 +0,0 @@
-import {Scene} from "three";
-import {ThreeJsApp} from "../ThreeJsApp";
-import { Viewport } from "./Viewport";
-import { Controller } from "./Controller";
-import { Actor } from "../Object/Actor";
-
-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()
-    {
-
-    }
-}