lythreeframe 1.0.0

package/lythreeFrame/src/PostProcess/Param/Outline.ts

@@ -0,0 +1,20 @@
+import { ColorRepresentation} from "three";
+
+export interface OutlineParams
+{
+    edgeStrength    : number;
+    edgeGlow        : number;
+    edgeThickness   : number;
+    pulsePeriod     : number;
+    visibleEdgeColor: ColorRepresentation;
+    hiddenEdgeColor : ColorRepresentation;
+}
+
+export const DefaultOutlineParams = {
+    edgeStrength    : 3.0,
+    edgeGlow        : 1.0,
+    edgeThickness   : 1.0,
+    pulsePeriod     : 0.0,
+    visibleEdgeColor: 0xffffff,
+    hiddenEdgeColor : 0xffffff ,
+}

package/lythreeFrame/src/PostProcess/Param/SSR.ts

@@ -0,0 +1,11 @@
+export interface SSRParam {
+  maxDistance: number;
+  opacity    : number;
+  thickness  : number;
+}
+
+export const DefaultSSRParam: SSRParam = {
+  maxDistance: 0.5,
+  opacity    : 1,
+  thickness  : 0.015,
+};

package/lythreeFrame/src/PostProcess/Param/ToneMapping.ts

@@ -0,0 +1,31 @@
+import {
+    ACESFilmicToneMapping,
+    AgXToneMapping,
+    CineonToneMapping,
+    LinearToneMapping, NeutralToneMapping,
+    NoToneMapping,
+    ReinhardToneMapping
+} from "three";
+
+export interface ToneMappingParams
+{
+    exposure:number,
+    toneMapping:string
+}
+
+export const DefaultToneMappingParams = {
+    exposure: 1.0,
+    toneMapping: 'AgX',
+}
+
+export const ToneMappingOptions = new Map([
+    ["None", NoToneMapping],
+    ["Linear", LinearToneMapping],
+    ["Reinhard", ReinhardToneMapping],
+    ["Cineon", CineonToneMapping],
+    ["ACESFilmic", ACESFilmicToneMapping],
+    ["AgX", AgXToneMapping],
+    ["Neutral", NeutralToneMapping]
+])
+    
+

package/lythreeFrame/src/PostProcess/PostProcessParam.ts

@@ -0,0 +1,26 @@
+
+import { SSRParam } from './Param/SSR';
+import {GTAOParam} from "./Param/GTAO.ts";
+import {BloomParam} from "./Param/Bloom.ts";
+import {ToneMappingParams} from "./Param/ToneMapping.ts";
+import {DOFParam} from "./Param/DOF.ts";
+import { OutlineParams } from './Param/Outline.ts';
+
+export interface PostProcessParam
+{
+    toneMapping?: ToneMappingParams,
+    bloom      ?: BloomParam|null,
+    dof        ?: DOFParam|null,
+    // motionBlur ?: MotionBlurParam,
+    ssr        ?: SSRParam|null,
+    gtao       ?: GTAOParam|null,
+    outline    ?: OutlineParams|null,
+    aa         ?: "fxaa"|"smaa"|null
+}
+
+export const DefaultPostProcessParam:PostProcessParam = {
+    toneMapping: {
+        exposure: 1,
+        toneMapping:"AgX"
+    }
+}

package/lythreeFrame/src/PostProcess/WebGPUPostProcessFactory.ts

@@ -0,0 +1,217 @@
+import { OutlineParams } from './Param/Outline';
+import { Scene, Camera, Object3D } from "three";
+import BloomNode, { bloom } from "three/examples/jsm/tsl/display/BloomNode.js";
+import DenoiseNode, { denoise } from "three/examples/jsm/tsl/display/DenoiseNode.js";
+import DepthOfFieldNode, { dof } from "three/examples/jsm/tsl/display/DepthOfFieldNode.js";
+import GTAONode, { ao } from "three/examples/jsm/tsl/display/GTAONode.js";
+import { ShaderNodeObject, pass, mrt, output, uniform, metalness, transformedNormalView, NodeRepresentation, normalView, depth, velocity } from "three/tsl";
+import { PassNode, Node } from "three/webgpu";
+import { BloomParam } from "./Param/Bloom";
+import { DOFParam } from "./Param/DOF";
+import { GTAOParam } from "./Param/GTAO";
+
+import SSRNode, { ssr } from "three/examples/jsm/tsl/display/SSRNode.js";
+import { SSRParam } from "./Param/SSR";
+import {  LensFlareParam } from "./Param/LensFlare";
+import LensflareNode, { lensflare } from "three/examples/jsm/tsl/display/LensflareNode.js";
+import OutlineNode, { outline } from "three/examples/jsm/tsl/display/OutlineNode.js";
+import { motionBlur } from 'three/examples/jsm/tsl/display/MotionBlur.js';
+import { MotionBlurParam } from './Param/MotionBlur';
+import { fxaa } from 'three/examples/jsm/tsl/display/FXAANode.js';
+import { smaa } from 'three/examples/jsm/tsl/display/SMAANode.js';
+import { DenoiseParam } from './Param/Denoise';
+
+export class WebGPUPostProcessFactory
+{
+    // scene pass
+    static constructScenePass(scene: Scene, camera: Camera): ShaderNodeObject<PassNode>
+    {
+        const scenePass = pass(scene, camera);
+        scenePass.setMRT(mrt({
+            output: output,
+        }));
+        return scenePass;
+    }
+
+    static updateScenePass(scenePass: ShaderNodeObject<PassNode>, outputNodes: { [name: string]: Node })
+    {
+
+        let oldMRT = scenePass.getMRT();
+        let newMRT = mrt(outputNodes)
+        if (oldMRT)
+        {
+            scenePass.setMRT(oldMRT.merge(newMRT));
+        }
+        else
+        {
+            scenePass.setMRT(newMRT);
+        }
+        console.log(scenePass.getMRT(), "MRTTTTTTT");
+    }
+
+    // bloom pass
+    static constructBloomPass(scenePass: ShaderNodeObject<PassNode>, params: BloomParam): ShaderNodeObject<BloomNode>
+    {
+        const scenePassColor = scenePass.getTextureNode('output');
+        const bloomPass      = bloom(scenePassColor);
+        WebGPUPostProcessFactory.updateBloomPass(bloomPass, params);
+        return bloomPass;
+    }
+
+    static updateBloomPass(bloomPass: ShaderNodeObject<BloomNode>, params: BloomParam)
+    {
+        bloomPass.threshold.value = params.threshold;
+        bloomPass.strength.value  = params.strength;
+        bloomPass.radius.value    = params.radius;
+    }
+
+    // DOF pass
+    static constructDOFPass(scenePass: ShaderNodeObject<PassNode>, params: DOFParam): ShaderNodeObject<DepthOfFieldNode>
+    {
+        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));
+    }
+
+    static updateDOFPass(dofPass: ShaderNodeObject<DepthOfFieldNode>, params: DOFParam)
+    {
+        dofPass.focus.value    = params.focus;
+        dofPass.aperture.value = params.aperture * 0.00001;
+        dofPass.maxblur.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: ShaderNodeObject<PassNode>, param: SSRParam): ShaderNodeObject<SSRNode>
+    {
+        WebGPUPostProcessFactory.updateScenePass(scenePass, {
+            normal   : transformedNormalView,
+            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);
+        return ssrPass;
+    }
+
+    static updateSSRPass(ssrPass: ShaderNodeObject<SSRNode>, params: SSRParam)
+    {
+        ssrPass.maxDistance.value = params.maxDistance;
+        ssrPass.opacity.value     = params.opacity;
+        ssrPass.thickness.value   = params.thickness;
+    }
+
+    // GTAO
+    static constructGTAOPass(scenePass: ShaderNodeObject<PassNode>, params: GTAOParam): ShaderNodeObject<GTAONode>
+    {
+        WebGPUPostProcessFactory.updateScenePass(scenePass, {
+            normal: transformedNormalView,
+        })
+        const scenePassNormal        = scenePass.getTextureNode('normal');
+        const scenePassDepth         = scenePass.getTextureNode('depth');
+        const aoPass                 = ao(scenePassDepth, scenePassNormal, scenePass.camera);
+              aoPass.resolutionScale = 0.5;
+        WebGPUPostProcessFactory.updateGTAOPass(aoPass, params);
+        return aoPass;
+    }
+
+    static updateGTAOPass(gtaoPass: ShaderNodeObject<GTAONode>, params: GTAOParam)
+    {
+        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: ShaderNodeObject<PassNode>, inputNode: NodeRepresentation, params: DenoiseParam): ShaderNodeObject<DenoiseNode>
+    {
+        WebGPUPostProcessFactory.updateScenePass(scenePass, {
+            normal: transformedNormalView,
+        })
+        const scenePassNormal = scenePass.getTextureNode('normal');
+        const scenePassDepth  = scenePass.getTextureNode('depth');
+        const denoisePass     = denoise(inputNode, scenePassDepth, scenePassNormal, scenePass.camera);
+        WebGPUPostProcessFactory.updateDenoisePass(denoisePass, params);
+        return denoisePass
+
+    }
+    static updateDenoisePass(denoisePass: ShaderNodeObject<DenoiseNode>, params: DenoiseParam)
+    {
+        denoisePass.radius.value    = params.denoiseRadius;
+        denoisePass.lumaPhi.value   = params.lumaPhi;
+        denoisePass.depthPhi.value  = params.depthPhi;
+        denoisePass.normalPhi.value = params.normalPhi;
+    }
+
+    static constructGTAODenoisePass(scenePass: ShaderNodeObject<PassNode>, gtaoPass: ShaderNodeObject<GTAONode>, params: GTAOParam): ShaderNodeObject<DenoiseNode>
+    {
+        return WebGPUPostProcessFactory.constructDenoisePass(scenePass, gtaoPass.getTextureNode(), params.denoiseParam);
+    }
+
+    static updateGTAODenoisePass(denoisePass: ShaderNodeObject<DenoiseNode>, params: GTAOParam)
+    {
+        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: Scene, camera: Camera, outlineObjects:Object3D[], param:OutlineParams): ShaderNodeObject<OutlineNode>
+    {
+        const outlinePass = outline( scene, camera, {
+            selectedObjects: outlineObjects,
+            edgeGlow       : param.edgeGlow,
+            edgeThickness  : param.edgeThickness
+        } );
+        return outlinePass;
+    }
+
+    static updateOutlinePass(outlinePass: ShaderNodeObject<OutlineNode>, outlineObjects:Object3D[],params: OutlineParams)
+    {
+        outlinePass.edgeGlowNode.value      = params.edgeGlow
+        outlinePass.edgeThicknessNode.value = params.edgeThickness
+        outlinePass.selectedObjects         = outlineObjects
+    }
+    
+      // fxaa 
+    static constructFXAAPass(inputNode: NodeRepresentation)
+    {
+        return fxaa(inputNode)
+    }
+
+      // smaa
+    static constructSMAAPass(inputNode: NodeRepresentation)
+    {
+        return smaa(inputNode)
+    }
+
+
+}

package/lythreeFrame/src/Shader/Postprocess/ColorShader.ts

@@ -0,0 +1,49 @@
+/**
+ * Brightness and contrast adjustment
+ * https://github.com/evanw/glfx.js
+ * brightness: -1 to 1 (-1 is solid black, 0 is no change, and 1 is solid white)
+ * contrast: -1 to 1 (-1 is solid gray, 0 is no change, and 1 is maximum contrast)
+ */
+
+const ColorShader = {
+
+    name: 'ColorShader',
+
+    uniforms: {
+        'tDiffuse'  : {value: null},
+        'brightness': {value: 0.0},
+        'contrast'  : {value: 0},
+        'saturation': {value: 1},
+        'exposure'  : {value: 1.0} // 新增的曝光uniform
+    },
+
+    vertexShader: /* glsl */`
+		varying vec2 vUv;
+		void main() {
+			vUv = uv;
+			gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+		}`,
+
+    fragmentShader: /* glsl */`
+
+		uniform sampler2D tDiffuse;
+		uniform float brightness;
+		uniform float contrast;
+        uniform float saturation;
+        uniform float exposure; // 新增的曝光uniform
+		varying vec2 vUv;
+
+		void main() {
+			gl_FragColor = texture2D( tDiffuse, vUv );
+            gl_FragColor.rgb *= exposure;
+			gl_FragColor.rgb += brightness;
+			
+			gl_FragColor.rgb = (gl_FragColor.rgb - 0.5) * (1.0 + contrast) + 0.5;
+            vec3 grey = vec3(0.2126 * gl_FragColor.r + 0.7152 * gl_FragColor.g + 0.0722 * gl_FragColor.b); // 计算亮度（灰度）
+            gl_FragColor.rgb = mix(grey, gl_FragColor.rgb, saturation);;
+            
+		}`
+
+};
+
+export {ColorShader};

package/lythreeFrame/src/ThreeJsApp.ts

@@ -0,0 +1,124 @@
+
+import { DefaultPostProcessParam, PostProcessParam } from './PostProcess/PostProcessParam';
+import {World} from "./Frame/World.ts";
+import {Viewport} from "./Frame/Viewport.ts";
+import {Controller} from "./Frame/Controller.ts";
+import { Clock, OrthographicCamera, PerspectiveCamera} from "three";
+import {CameraFactory, CameraParam} from "./Factory/CameraFactory.ts";
+import { WebGPURendererParameters } from 'three/src/renderers/webgpu/WebGPURenderer.js';
+
+export interface AppParam
+{
+    renderParam     ?: WebGPURendererParameters,
+    cameraParam     ?: CameraParam,
+    postProcessParam?: PostProcessParam,
+}
+
+export const DefaultRenderParam:WebGPURendererParameters = {
+    antialias: true,
+}
+export const DefaultCameraParam:CameraParam = {
+    near : 0.1,
+    far  : 1000,
+    param: {
+        fov   : 50,
+        aspect: 1,
+    }
+}
+export const DefaultAppParam:AppParam = {
+    renderParam     : DefaultRenderParam,
+    cameraParam     : DefaultCameraParam,
+    postProcessParam: DefaultPostProcessParam,
+}
+export class ThreeJsApp
+{
+    get camera(): PerspectiveCamera | OrthographicCamera
+    {
+        return this._camera;
+    }
+    get clock(): Clock
+    {
+        return this._clock;
+    }
+    get world(): World
+    {
+        return this._world;
+    }
+    get viewport(): Viewport
+    {
+        return this._viewport;
+    }
+    get controller(): Controller
+    {
+        return this._controller;
+    }
+
+    get worldClass()
+    {
+        return World
+    }
+    get viewportClass()
+    {
+        return Viewport
+    }
+    get controllerClass()
+    {
+        return Controller
+    }
+    protected _clock : Clock
+    protected _camera: PerspectiveCamera | OrthographicCamera
+    protected _world : World;
+    protected _viewport: Viewport;
+    protected _controller: Controller;
+
+    constructor(elementId:string, appParam:AppParam = DefaultAppParam)
+    {
+        this._clock      = new Clock()
+        this._camera     = CameraFactory.createCamera(appParam.cameraParam ? appParam.cameraParam : DefaultCameraParam)
+        this._world      = new this.worldClass(this);
+        this._viewport   = new this.viewportClass(this, elementId, appParam.renderParam ? appParam.renderParam:DefaultRenderParam,  appParam.postProcessParam? appParam.postProcessParam:DefaultPostProcessParam);
+        this._controller = new this.controllerClass(this);
+        
+        this.viewport.renderer.setAnimationLoop(()=>{
+            this.tick();
+        });
+
+        this.init();
+    }
+
+    init()
+    {
+        this.controller.init();
+        this.world.init();
+        this.viewport.init();
+    }
+
+    tick()
+    {
+        const delta = this._clock.getDelta();
+        this._controller.tick(delta);
+        this.world.tick(delta);
+        this.viewport.render();
+    }
+
+
+
+    onWindowResize(width:number, height:number)
+    {
+        if(this.camera instanceof PerspectiveCamera)
+        {
+            this.camera.aspect = width / height;
+        }
+                                                                                                                                                                                                                                                                                  // if(this.camera instanceof OrthographicCamera)
+                                                                                                                                                                                                                                                                                  // {
+                                                                                                                                                                                                                                                                                  //     // to do
+                                                                                                                                                                                                                                                                                  // }
+        this.camera.updateProjectionMatrix();
+    }
+    destroy()
+    {
+        this.world.destroy();
+        this.controller.destroy();
+        this.viewport.destroy();
+    }
+}

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "lythreeframe",
+  "version": "1.0.0",
+  "description": "my custom three ",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "@types/three": "^0.173.0",
+    "gsap": "^3.12.7",
+    "three": "^0.173.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.13.8",
+    "globals": "^16.0.0",
+    "typescript": "~5.6.2"
+  },
+  "author": "noegip",
+  "license": "ISC"
+}