three-base 2.0.22 → 2.0.24

package/Mirror.js

@@ -2,7 +2,7 @@
  * @Author: xiaosihan
  * @Date: 2023-08-04 17:17:15
  * @Last Modified by: xiaosihan
- * @Last Modified time: 2023-08-04 20:54:29
+ * @Last Modified time: 2024-01-20 05:33:51
  */
 import { Color, DoubleSide, HalfFloatType, Matrix4, Mesh, PerspectiveCamera, Plane, PlaneGeometry, ShaderMaterial, Vector3, Vector4, WebGLRenderTarget } from "three";
 // 镜子模型
@@ -180,7 +180,6 @@ export default class Mirror extends Mesh {
         //@ts-ignore
         const viewport = this.camera.viewport;
         if (viewport !== undefined) {
-            debugger;
             renderer.state.viewport(viewport);
         }
         this.visible = true;

package/Mirror.ts

@@ -2,7 +2,7 @@
  * @Author: xiaosihan 
  * @Date: 2023-08-04 17:17:15 
  * @Last Modified by: xiaosihan
- * @Last Modified time: 2023-08-04 20:54:29
+ * @Last Modified time: 2024-01-20 05:33:51
  */
 
 import { BufferGeometry, Camera, Color, DoubleSide, Group, HalfFloatType, Material, Matrix4, Mesh, PerspectiveCamera, Plane, PlaneGeometry, Scene, ShaderMaterial, Vector3, Vector4, WebGLRenderTarget, WebGLRenderer } from "three";
@@ -233,7 +233,6 @@ export default class Mirror extends Mesh {
         //@ts-ignore
         const viewport = this.camera.viewport;
         if (viewport !== undefined) {
-            debugger;
             renderer.state.viewport(viewport);
         }
 

package/README.md

@@ -4,6 +4,7 @@ import { AmbientLight, BoxGeometry, Mesh, MeshLambertMaterial, PointLight } from
 import ThreeBase from "three-base";
 import Transition from "three-base/Transition";
 
+// 仅支持vite编译的项目安装 
 // 做项目找我 qq:389652405
 class HomeRender extends ThreeBase {
 

package/ThreeBase.d.ts

@@ -23,6 +23,7 @@ export default class ThreeBase extends EventDispatcher {
     controlsPosition: Transition;
     gridHelper: GridHelper;
     axesHelper: AxesHelper;
+    frame: number;
     init(): void;
     resetLookAt({ position, center, }: {
         position: Vector3;
@@ -45,6 +46,7 @@ export default class ThreeBase extends EventDispatcher {
     autoRender: boolean;
     needRender: boolean;
     stopRender(): void;
+    hasStrokeOrPass(): boolean;
     render(): void;
     private renderBindThis;
     download(fileName?: string): void;

package/ThreeBase.js

@@ -2,10 +2,10 @@
  * @Author: xiaosihan
  * @Date: 2021-12-20 13:38:22
  * @Last Modified by: xiaosihan
- * @Last Modified time: 2023-05-23 23:54:13
+ * @Last Modified time: 2024-01-20 05:33:28
  */
 import { round } from "lodash";
-import { AxesHelper, DepthFormat, DepthTexture, EventDispatcher, GridHelper, LinearFilter, Mesh, MOUSE, NoBlending, NoColorSpace, NormalBlending, PerspectiveCamera, RGBAFormat, Scene, TOUCH, UnsignedShortType, Vector2, Vector3, WebGLRenderer, WebGLRenderTarget } from "three";
+import { AxesHelper, DepthFormat, DepthTexture, EventDispatcher, GridHelper, LinearFilter, LinearSRGBColorSpace, Mesh, MOUSE, NoBlending, NormalBlending, PerspectiveCamera, RGBAFormat, Scene, TOUCH, UnsignedShortType, Vector2, Vector3, WebGLRenderer, WebGLRenderTarget } from "three";
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 import { generateUUID } from "three/src/math/MathUtils";
 import glow_pass from "./pass/glow_pass";
@@ -15,6 +15,7 @@ import threeLoader from "./threeLoader";
 import ThreeMouse from "./ThreeMouse";
 import threeUtils from "./threeUtils";
 import Transition from "./Transition";
+import FXAAShaderMaterial from "./shaders/FXAAShaderMaterial";
 // three.js 的基础对象
 export default class ThreeBase extends EventDispatcher {
     constructor() {
@@ -29,7 +30,6 @@ export default class ThreeBase extends EventDispatcher {
         baseDepthTexture.anisotropy = 16;
         return baseDepthTexture;
     })();
-    // TODO 渲染目标的颜色空间问题 还没有处理好
     // 基础纹理渲染对象
     baseRenderTarget = (() => {
         const baseRenderTarget = new WebGLRenderTarget(128, 128, {
@@ -64,7 +64,7 @@ export default class ThreeBase extends EventDispatcher {
         });
         renderer.domElement.id = generateUUID();
         renderer.localClippingEnabled = true;
-        renderer.outputColorSpace = NoColorSpace;
+        renderer.outputColorSpace = LinearSRGBColorSpace;
         renderer.setPixelRatio(window.devicePixelRatio);
         renderer.autoClear = false;
         renderer.clear();
@@ -183,6 +183,8 @@ export default class ThreeBase extends EventDispatcher {
         }
         return axesHelper;
     })();
+    //TODO 设置帧频率 默认50帧
+    frame = 50;
     init() {
         // 资源加载进度有更新时, 需要渲染
         threeLoader.addEventListener("progress", () => {
@@ -238,7 +240,7 @@ export default class ThreeBase extends EventDispatcher {
         return {
             center: new Vector3(...center),
             position: new Vector3(...position),
-            centerPosition: `position: new Vector3(${position.join(",")}),center: new Vector3(${center.join(",")})`
+            centerPosition: `center: new Vector3(${center.join(",")}),position: new Vector3(${position.join(",")})`
         };
     }
     // 三维向量转化成屏幕上的2维向量
@@ -279,10 +281,21 @@ export default class ThreeBase extends EventDispatcher {
         this.setSize(100, 100);
         this.renderer.domElement.style.opacity = "0";
     }
+    // 判断是否有 发光和描边的对象 以便判断是否需要 渲染深度纹理
+    hasStrokeOrPass() {
+        let has_stroke_or_pass = false;
+        this.scene.traverse(obj => {
+            const { stroke_enable = false, stroke_width = 1, glow_enable = false, glow_width = 1 } = obj.userData;
+            if ((stroke_enable && stroke_width > 0) || (glow_enable && glow_width > 0)) {
+                has_stroke_or_pass = true;
+            }
+        });
+        return has_stroke_or_pass;
+    }
     // 渲染场景
     render() {
         // 控制器在移动时鼠标不能操作
-        // this.controls.enabled = (this.controlsPosition.isDone() || this.controlsCenter.isDone());
+        this.renderer.domElement.style.pointerEvents = (!this.controlsPosition.isDone() || !this.controlsCenter.isDone()) ? "none" : "all";
         // canvas 没有在页面上面的话 就跳过渲染
         if (!threeUtils.inDocument(this.renderer.domElement)) {
             this.stopRender();
@@ -305,23 +318,24 @@ export default class ThreeBase extends EventDispatcher {
         }
         // 渲染场景
         this.dispatchEvent({ type: "beforeRender" });
-        // 把基础场景渲染到 帧缓冲区 在后期通道中会用到
-        this.renderer.setRenderTarget(this.baseRenderTarget);
-        this.renderer.clear();
-        this.renderer.render(this.scene, this.camera);
+        const has_stroke_or_pass = this.hasStrokeOrPass();
+        if (has_stroke_or_pass) {
+            // 把基础场景渲染到 帧缓冲区 在后期通道中会用到
+            this.renderer.setRenderTarget(this.baseRenderTarget);
+            this.renderer.clear();
+            this.renderer.render(this.scene, this.camera);
+            this.renderer.setRenderTarget(null);
+        }
         // 清空主画布
-        this.renderer.setRenderTarget(null);
         this.renderer.clear();
-        // this.renderer.setScissorTest(false);
-        this.renderRendererTarget(this.baseRenderTarget);
-        // this.renderer.setScissorTest(true);
-        // this.renderer.setScissor(0, 0, 800, 1000);
-        // this.renderer.render(this.scene, this.camera);
-        // 查找需要绘制描边的对象,并且绘制描边
-        this.scene.traverse(obj => {
-            stroke_pass(this.renderer, this.camera, obj, this.baseDepthTexture);
-            glow_pass(this.renderer, this.camera, obj, this.baseDepthTexture);
-        });
+        this.renderer.render(this.scene, this.camera);
+        if (has_stroke_or_pass) {
+            // 查找需要绘制描边的对象,并且绘制描边
+            this.scene.traverse(obj => {
+                stroke_pass(this.renderer, this.camera, obj, this.baseDepthTexture);
+                glow_pass(this.renderer, this.camera, obj, this.baseDepthTexture);
+            });
+        }
         this.dispatchEvent({ type: "afterRender" });
     }
     renderBindThis = this.render.bind(this);
@@ -445,13 +459,21 @@ export default class ThreeBase extends EventDispatcher {
         this.renderTargetgaussBlur(renderTarget, 1, 1);
         this.renderTargetgaussBlur(renderTarget, 1, 1);
     }
-    // TODO 需要做康锯齿处理 渲染 渲染目标
+    // 需要做康锯齿处理 渲染 渲染目标
     renderRendererTarget(renderTarget, alpha = false) {
-        coptyShader.uniforms.map.value = renderTarget.texture;
-        coptyShader.uniforms.opacity.value = 1.0;
-        fullScreenMesh.material = coptyShader;
-        coptyShader.blending = alpha ? NoBlending : NormalBlending;
+        FXAAShaderMaterial.uniforms.tDiffuse.value = renderTarget.texture;
+        fullScreenMesh.material = FXAAShaderMaterial;
         fullScreenMesh.render(this.renderer);
+        // const FXAAShaderMaterial = new ShaderMaterial({
+        //     uniforms: {
+        //         tDiffuse: { value: null }, // 贴图纹理
+        //         resolution: { value: new Vector2(1 / 1024, 1 / 1024) }
+        //     },
+        // coptyShader.uniforms.map.value = renderTarget.texture;
+        // coptyShader.uniforms.opacity.value = 1.0;
+        // fullScreenMesh.material = coptyShader;
+        // coptyShader.blending = alpha ? NoBlending : NormalBlending;
+        // fullScreenMesh.render(this.renderer);
     }
     // 渲染纹理
     renderTexture(texture, alpha = false) {

package/ThreeBase.ts

@@ -2,11 +2,11 @@
  * @Author: xiaosihan 
  * @Date: 2021-12-20 13:38:22 
  * @Last Modified by: xiaosihan
- * @Last Modified time: 2023-05-23 23:54:13
+ * @Last Modified time: 2024-01-20 05:33:28
  */
 
 import { round } from "lodash";
-import { AxesHelper, BufferGeometry, Camera, DepthFormat, DepthTexture, DisplayP3ColorSpace, EventDispatcher, GridHelper, LinearDisplayP3ColorSpace, LinearFilter, LinearSRGBColorSpace, Mesh, MeshBasicMaterial, MOUSE, NoBlending, NoColorSpace, NormalBlending, Object3D, PerspectiveCamera, RGBAFormat, Scene, SRGBColorSpace, Texture, TOUCH, UnsignedShortType, Vector2, Vector3, WebGLRenderer, WebGLRenderTarget } from "three";
+import { AxesHelper, BufferGeometry, Camera, DepthFormat, DepthTexture, EventDispatcher, GridHelper, LinearFilter, LinearSRGBColorSpace, Mesh, MeshBasicMaterial, MOUSE, NoBlending, NormalBlending, Object3D, PerspectiveCamera, RGBAFormat, Scene, Texture, TOUCH, UnsignedShortType, Vector2, Vector3, WebGLRenderer, WebGLRenderTarget } from "three";
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 import { generateUUID } from "three/src/math/MathUtils";
 import glow_pass from "./pass/glow_pass";
@@ -16,6 +16,7 @@ import threeLoader from "./threeLoader";
 import ThreeMouse from "./ThreeMouse";
 import threeUtils from "./threeUtils";
 import Transition from "./Transition";
+import FXAAShaderMaterial from "./shaders/FXAAShaderMaterial";
 
 // three.js 的基础对象
 export default class ThreeBase extends EventDispatcher {
@@ -34,7 +35,6 @@ export default class ThreeBase extends EventDispatcher {
         return baseDepthTexture;
     })();
 
-    // TODO 渲染目标的颜色空间问题 还没有处理好
     // 基础纹理渲染对象
     baseRenderTarget = (() => {
         const baseRenderTarget = new WebGLRenderTarget(128, 128, {
@@ -69,14 +69,14 @@ export default class ThreeBase extends EventDispatcher {
             alpha: true,// 透明背景
             antialias: true, // 阴影抗锯齿
             precision: "highp", //precision:highp/mediump/lowp着色精度选择
-            logarithmicDepthBuffer: true, // 对数深度缓冲区 避免当2个面完全重合时闪烁
+            logarithmicDepthBuffer: true, // 对数深度缓冲区 避免当2个面挨的很近时闪烁
             preserveDrawingBuffer: true, // 是否保存绘图缓冲
             stencil: false, // 模版
         });
 
         renderer.domElement.id = generateUUID();
         renderer.localClippingEnabled = true;
-        renderer.outputColorSpace = NoColorSpace;
+        renderer.outputColorSpace = LinearSRGBColorSpace;
         renderer.setPixelRatio(window.devicePixelRatio);
         renderer.autoClear = false;
         renderer.clear();
@@ -174,9 +174,9 @@ export default class ThreeBase extends EventDispatcher {
         controlsPosition.onChange(({ x, y, z }) => {
             // const distance = this.controlsDistance.get("distance");
             this.camera.position.set(x + 0.01, y, z + 0.01)
-                // .sub(this.controls.target)
-                // .setLength(distance)
-                // .add(this.controls.target);
+            // .sub(this.controls.target)
+            // .setLength(distance)
+            // .add(this.controls.target);
 
             // // 创建初始方向向量
             // const directionVecA = new THREE.Vector3(1, 0, 0); // 需要旋转的初始方向向量
@@ -222,6 +222,9 @@ export default class ThreeBase extends EventDispatcher {
         return axesHelper;
     })();
 
+    //TODO 设置帧频率 默认50帧
+    frame = 50;
+
     init() {
         // 资源加载进度有更新时, 需要渲染
         threeLoader.addEventListener("progress", () => {
@@ -294,7 +297,7 @@ export default class ThreeBase extends EventDispatcher {
         return {
             center: new Vector3(...center),
             position: new Vector3(...position),
-            centerPosition: `position: new Vector3(${position.join(",")}),center: new Vector3(${center.join(",")})`
+            centerPosition: `center: new Vector3(${center.join(",")}),position: new Vector3(${position.join(",")})`
         }
     }
 
@@ -344,11 +347,24 @@ export default class ThreeBase extends EventDispatcher {
         this.renderer.domElement.style.opacity = "0";
     }
 
+    // 判断是否有 发光和描边的对象 以便判断是否需要 渲染深度纹理
+    hasStrokeOrPass() {
+        let has_stroke_or_pass = false;
+
+        this.scene.traverse(obj => {
+            const { stroke_enable = false, stroke_width = 1, glow_enable = false, glow_width = 1 } = obj.userData;
+            if ((stroke_enable && stroke_width > 0) || (glow_enable && glow_width > 0)) {
+                has_stroke_or_pass = true;
+            }
+        });
+
+        return has_stroke_or_pass;
+    }
+
     // 渲染场景
     render() {
-
         // 控制器在移动时鼠标不能操作
-        // this.controls.enabled = (this.controlsPosition.isDone() || this.controlsCenter.isDone());
+        this.renderer.domElement.style.pointerEvents = (!this.controlsPosition.isDone() || !this.controlsCenter.isDone()) ? "none" : "all";
 
         // canvas 没有在页面上面的话 就跳过渲染
         if (!threeUtils.inDocument(this.renderer.domElement)) {
@@ -378,26 +394,27 @@ export default class ThreeBase extends EventDispatcher {
         // 渲染场景
         this.dispatchEvent({ type: "beforeRender" } as never);
 
-        // 把基础场景渲染到 帧缓冲区 在后期通道中会用到
-        this.renderer.setRenderTarget(this.baseRenderTarget);
-        this.renderer.clear();
-        this.renderer.render(this.scene, this.camera);
+        const has_stroke_or_pass = this.hasStrokeOrPass();
+
+        if (has_stroke_or_pass) {
+            // 把基础场景渲染到 帧缓冲区 在后期通道中会用到
+            this.renderer.setRenderTarget(this.baseRenderTarget);
+            this.renderer.clear();
+            this.renderer.render(this.scene, this.camera);
+            this.renderer.setRenderTarget(null);
+        }
 
         // 清空主画布
-        this.renderer.setRenderTarget(null);
         this.renderer.clear();
+        this.renderer.render(this.scene, this.camera);
 
-        // this.renderer.setScissorTest(false);
-        this.renderRendererTarget(this.baseRenderTarget);
-        // this.renderer.setScissorTest(true);
-        // this.renderer.setScissor(0, 0, 800, 1000);
-        // this.renderer.render(this.scene, this.camera);
-
-        // 查找需要绘制描边的对象,并且绘制描边
-        this.scene.traverse(obj => {
-            stroke_pass(this.renderer, this.camera, obj, this.baseDepthTexture);
-            glow_pass(this.renderer, this.camera, obj, this.baseDepthTexture);
-        });
+        if (has_stroke_or_pass) {
+            // 查找需要绘制描边的对象,并且绘制描边
+            this.scene.traverse(obj => {
+                stroke_pass(this.renderer, this.camera, obj, this.baseDepthTexture);
+                glow_pass(this.renderer, this.camera, obj, this.baseDepthTexture);
+            });
+        }
 
         this.dispatchEvent({ type: "afterRender" } as never);
     }
@@ -546,13 +563,23 @@ export default class ThreeBase extends EventDispatcher {
         this.renderTargetgaussBlur(renderTarget, 1, 1);
     }
 
-    // TODO 需要做康锯齿处理 渲染 渲染目标
+    // 需要做康锯齿处理 渲染 渲染目标
     renderRendererTarget(renderTarget: WebGLRenderTarget, alpha: boolean = false) {
-        coptyShader.uniforms.map.value = renderTarget.texture;
-        coptyShader.uniforms.opacity.value = 1.0;
-        fullScreenMesh.material = coptyShader;
-        coptyShader.blending = alpha ? NoBlending : NormalBlending;
+
+        FXAAShaderMaterial.uniforms.tDiffuse.value = renderTarget.texture;
+        fullScreenMesh.material = FXAAShaderMaterial;
         fullScreenMesh.render(this.renderer);
+
+        // const FXAAShaderMaterial = new ShaderMaterial({
+        //     uniforms: {
+        //         tDiffuse: { value: null }, // 贴图纹理
+        //         resolution: { value: new Vector2(1 / 1024, 1 / 1024) }
+        //     },
+        // coptyShader.uniforms.map.value = renderTarget.texture;
+        // coptyShader.uniforms.opacity.value = 1.0;
+        // fullScreenMesh.material = coptyShader;
+        // coptyShader.blending = alpha ? NoBlending : NormalBlending;
+        // fullScreenMesh.render(this.renderer);
     }
 
     // 渲染纹理

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "three-base",
-    "version": "2.0.22",
+    "version": "2.0.24",
     "description": "three 3d three-base",
     "publishConfig": {
         "registry": "https://registry.npmjs.org/"

package/pass/glow_pass.js

@@ -482,7 +482,7 @@ export default function glow_pass(renderer, camera, object3d, baseDepthTexture)
     renderer.setRenderTarget(selectTextureTarget);
     scene.children = [object3d];
     renderer.clear();
-    renderer.render(object3d, camera);
+    renderer.render(scene, camera);
     // 设置描边着色器的分辨率
     blurShader.uniforms.resolution.value.set(1 / size.x, 1 / size.y);
     // 设置抗锯齿着色器的分辨率

package/pass/glow_pass.ts

@@ -504,7 +504,7 @@ export default function glow_pass(renderer: WebGLRenderer, camera: Camera, objec
     renderer.setRenderTarget(selectTextureTarget);
     scene.children = [object3d];
     renderer.clear();
-    renderer.render(object3d, camera);
+    renderer.render(scene, camera);
 
     // 设置描边着色器的分辨率
     blurShader.uniforms.resolution.value.set(1 / size.x, 1 / size.y);

package/pass/stroke_pass.js

@@ -478,7 +478,7 @@ export default function stroke_pass(renderer, camera, object3d, baseDepthTexture
     renderer.setRenderTarget(selectTextureTarget);
     scene.children = [object3d];
     renderer.clear();
-    renderer.render(object3d, camera);
+    renderer.render(scene, camera);
     // 设置描边着色器的分辨率
     blurShader.uniforms.resolution.value.set(1 / size.x, 1 / size.y);
     // 设置抗锯齿着色器的分辨率

package/pass/stroke_pass.ts

@@ -497,7 +497,7 @@ export default function stroke_pass(renderer: WebGLRenderer, camera: Camera, obj
     renderer.setRenderTarget(selectTextureTarget);
     scene.children = [object3d];
     renderer.clear();
-    renderer.render(object3d, camera);
+    renderer.render(scene, camera);
 
     // 设置描边着色器的分辨率
     blurShader.uniforms.resolution.value.set(1 / size.x, 1 / size.y);

package/shaders/FXAAShaderMaterial.d.ts

@@ -0,0 +1,3 @@
+import { ShaderMaterial } from "three";
+declare const FXAAShaderMaterial: ShaderMaterial;
+export default FXAAShaderMaterial;

package/shaders/FXAAShaderMaterial.js

@@ -0,0 +1,244 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2024-01-20 05:10:37
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2024-01-20 05:10:57
+ */
+import { NoBlending, ShaderChunk, ShaderMaterial, Vector2 } from "three";
+// 抗锯齿着色器
+const FXAAShaderMaterial = new ShaderMaterial({
+    uniforms: {
+        tDiffuse: { value: null },
+        resolution: { value: new Vector2(1 / 1024, 1 / 1024) }
+    },
+    vertexShader: `
+        ${ShaderChunk.common}
+        ${ShaderChunk.logdepthbuf_pars_vertex}
+        varying vec2 vUv;
+        void main() {
+            vUv = uv;
+            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+            ${ShaderChunk.logdepthbuf_vertex}
+        }
+    `,
+    fragmentShader: `
+        ${ShaderChunk.logdepthbuf_pars_fragment}
+        precision highp float;
+
+        uniform sampler2D tDiffuse;
+    
+        uniform vec2 resolution;
+    
+        varying vec2 vUv;
+    
+        #ifndef FXAA_DISCARD
+                //
+                // Only valid for PC OpenGL currently.
+                // Probably will not work when FXAA_GREEN_AS_LUMA = 1.
+                //
+                // 1 = Use discard on pixels which don't need AA.
+                //     For APIs which enable concurrent TEX+ROP from same surface.
+                // 0 = Return unchanged color on pixels which don't need AA.
+                //
+                #define FXAA_DISCARD 0
+        #endif
+    
+        /*--------------------------------------------------------------------------*/
+        #define FxaaTexTop(t, p) texture2D(t, p, -100.0)
+        #define FxaaTexOff(t, p, o, r) texture2D(t, p + (o * r), -100.0)
+        /*--------------------------------------------------------------------------*/
+    
+        #define NUM_SAMPLES 5
+    
+        // assumes colors have premultipliedAlpha, so that the calculated color contrast is scaled by alpha
+        float contrast( vec4 a, vec4 b ) {
+                vec4 diff = abs( a - b );
+                return max( max( max( diff.r, diff.g ), diff.b ), diff.a );
+        }
+    
+        /*============================================================================
+    
+                                        FXAA3 QUALITY - PC
+    
+        ============================================================================*/
+    
+        /*--------------------------------------------------------------------------*/
+        vec4 FxaaPixelShader(
+                vec2 posM,
+                sampler2D tex,
+                vec2 fxaaQualityRcpFrame,
+                float fxaaQualityEdgeThreshold,
+                float fxaaQualityinvEdgeThreshold
+        ) {
+                vec4 rgbaM = FxaaTexTop(tex, posM);
+                vec4 rgbaS = FxaaTexOff(tex, posM, vec2( 0.0, 1.0), fxaaQualityRcpFrame.xy);
+                vec4 rgbaE = FxaaTexOff(tex, posM, vec2( 1.0, 0.0), fxaaQualityRcpFrame.xy);
+                vec4 rgbaN = FxaaTexOff(tex, posM, vec2( 0.0,-1.0), fxaaQualityRcpFrame.xy);
+                vec4 rgbaW = FxaaTexOff(tex, posM, vec2(-1.0, 0.0), fxaaQualityRcpFrame.xy);
+                // . S .
+                // W M E
+                // . N .
+    
+                bool earlyExit = max( max( max(
+                        contrast( rgbaM, rgbaN ),
+                        contrast( rgbaM, rgbaS ) ),
+                        contrast( rgbaM, rgbaE ) ),
+                        contrast( rgbaM, rgbaW ) )
+                        < fxaaQualityEdgeThreshold;
+                // . 0 .
+                // 0 0 0
+                // . 0 .
+    
+                #if (FXAA_DISCARD == 1)
+                        if(earlyExit) FxaaDiscard;
+                #else
+                        if(earlyExit) return rgbaM;
+                #endif
+    
+                float contrastN = contrast( rgbaM, rgbaN );
+                float contrastS = contrast( rgbaM, rgbaS );
+                float contrastE = contrast( rgbaM, rgbaE );
+                float contrastW = contrast( rgbaM, rgbaW );
+    
+                float relativeVContrast = ( contrastN + contrastS ) - ( contrastE + contrastW );
+                relativeVContrast *= fxaaQualityinvEdgeThreshold;
+    
+                bool horzSpan = relativeVContrast > 0.;
+                // . 1 .
+                // 0 0 0
+                // . 1 .
+    
+                // 45 deg edge detection and corners of objects, aka V/H contrast is too similar
+                if( abs( relativeVContrast ) < .3 ) {
+                        // locate the edge
+                        vec2 dirToEdge;
+                        dirToEdge.x = contrastE > contrastW ? 1. : -1.;
+                        dirToEdge.y = contrastS > contrastN ? 1. : -1.;
+                        // . 2 .      . 1 .
+                        // 1 0 2  ~=  0 0 1
+                        // . 1 .      . 0 .
+    
+                        // tap 2 pixels and see which ones are "outside" the edge, to
+                        // determine if the edge is vertical or horizontal
+    
+                        vec4 rgbaAlongH = FxaaTexOff(tex, posM, vec2( dirToEdge.x, -dirToEdge.y ), fxaaQualityRcpFrame.xy);
+                        float matchAlongH = contrast( rgbaM, rgbaAlongH );
+                        // . 1 .
+                        // 0 0 1
+                        // . 0 H
+    
+                        vec4 rgbaAlongV = FxaaTexOff(tex, posM, vec2( -dirToEdge.x, dirToEdge.y ), fxaaQualityRcpFrame.xy);
+                        float matchAlongV = contrast( rgbaM, rgbaAlongV );
+                        // V 1 .
+                        // 0 0 1
+                        // . 0 .
+    
+                        relativeVContrast = matchAlongV - matchAlongH;
+                        relativeVContrast *= fxaaQualityinvEdgeThreshold;
+    
+                        if( abs( relativeVContrast ) < .3 ) { // 45 deg edge
+                                // 1 1 .
+                                // 0 0 1
+                                // . 0 1
+    
+                                // do a simple blur
+                                return mix(
+                                        rgbaM,
+                                        (rgbaN + rgbaS + rgbaE + rgbaW) * .25,
+                                        .4
+                                );
+                        }
+    
+                        horzSpan = relativeVContrast > 0.;
+                }
+    
+                if(!horzSpan) rgbaN = rgbaW;
+                if(!horzSpan) rgbaS = rgbaE;
+                // . 0 .      1
+                // 1 0 1  ->  0
+                // . 0 .      1
+    
+                bool pairN = contrast( rgbaM, rgbaN ) > contrast( rgbaM, rgbaS );
+                if(!pairN) rgbaN = rgbaS;
+    
+                vec2 offNP;
+                offNP.x = (!horzSpan) ? 0.0 : fxaaQualityRcpFrame.x;
+                offNP.y = ( horzSpan) ? 0.0 : fxaaQualityRcpFrame.y;
+    
+                bool doneN = false;
+                bool doneP = false;
+    
+                float nDist = 0.;
+                float pDist = 0.;
+    
+                vec2 posN = posM;
+                vec2 posP = posM;
+    
+                int iterationsUsed = 0;
+                int iterationsUsedN = 0;
+                int iterationsUsedP = 0;
+                for( int i = 0; i < NUM_SAMPLES; i++ ) {
+                        iterationsUsed = i;
+    
+                        float increment = float(i + 1);
+    
+                        if(!doneN) {
+                                nDist += increment;
+                                posN = posM + offNP * nDist;
+                                vec4 rgbaEndN = FxaaTexTop(tex, posN.xy);
+                                doneN = contrast( rgbaEndN, rgbaM ) > contrast( rgbaEndN, rgbaN );
+                                iterationsUsedN = i;
+                        }
+    
+                        if(!doneP) {
+                                pDist += increment;
+                                posP = posM - offNP * pDist;
+                                vec4 rgbaEndP = FxaaTexTop(tex, posP.xy);
+                                doneP = contrast( rgbaEndP, rgbaM ) > contrast( rgbaEndP, rgbaN );
+                                iterationsUsedP = i;
+                        }
+    
+                        if(doneN || doneP) break;
+                }
+    
+    
+                if ( !doneP && !doneN ) return rgbaM; // failed to find end of edge
+    
+                float dist = min(
+                        doneN ? float( iterationsUsedN ) / float( NUM_SAMPLES - 1 ) : 1.,
+                        doneP ? float( iterationsUsedP ) / float( NUM_SAMPLES - 1 ) : 1.
+                );
+    
+                // hacky way of reduces blurriness of mostly diagonal edges
+                // but reduces AA quality
+                dist = pow(dist, .5);
+    
+                dist = 1. - dist;
+    
+                return mix(
+                        rgbaM,
+                        rgbaN,
+                        dist * .5
+                );
+        }
+    
+        void main() {
+                const float edgeDetectionQuality = .2;
+                const float invEdgeDetectionQuality = 1. / edgeDetectionQuality;
+    
+                gl_FragColor = FxaaPixelShader(
+                        vUv,
+                        tDiffuse,
+                        resolution,
+                        edgeDetectionQuality, // [0,1] contrast needed, otherwise early discard
+                        invEdgeDetectionQuality
+                );
+            ${ShaderChunk.logdepthbuf_fragment}
+        }
+    `,
+    blending: NoBlending,
+    depthTest: false,
+    depthWrite: false,
+    transparent: true
+});
+export default FXAAShaderMaterial;

package/shaders/FXAAShaderMaterial.ts

@@ -0,0 +1,248 @@
+/*
+ * @Author: xiaosihan 
+ * @Date: 2024-01-20 05:10:37 
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2024-01-20 05:10:57
+ */
+import { NoBlending, ShaderChunk, ShaderMaterial, Vector2 } from "three";
+
+
+
+// 抗锯齿着色器
+const FXAAShaderMaterial = new ShaderMaterial({
+    uniforms: {
+        tDiffuse: { value: null }, // 贴图纹理
+        resolution: { value: new Vector2(1 / 1024, 1 / 1024) }
+    },
+    vertexShader: `
+        ${ShaderChunk.common}
+        ${ShaderChunk.logdepthbuf_pars_vertex}
+        varying vec2 vUv;
+        void main() {
+            vUv = uv;
+            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+            ${ShaderChunk.logdepthbuf_vertex}
+        }
+    `,
+    fragmentShader: `
+        ${ShaderChunk.logdepthbuf_pars_fragment}
+        precision highp float;
+
+        uniform sampler2D tDiffuse;
+    
+        uniform vec2 resolution;
+    
+        varying vec2 vUv;
+    
+        #ifndef FXAA_DISCARD
+                //
+                // Only valid for PC OpenGL currently.
+                // Probably will not work when FXAA_GREEN_AS_LUMA = 1.
+                //
+                // 1 = Use discard on pixels which don't need AA.
+                //     For APIs which enable concurrent TEX+ROP from same surface.
+                // 0 = Return unchanged color on pixels which don't need AA.
+                //
+                #define FXAA_DISCARD 0
+        #endif
+    
+        /*--------------------------------------------------------------------------*/
+        #define FxaaTexTop(t, p) texture2D(t, p, -100.0)
+        #define FxaaTexOff(t, p, o, r) texture2D(t, p + (o * r), -100.0)
+        /*--------------------------------------------------------------------------*/
+    
+        #define NUM_SAMPLES 5
+    
+        // assumes colors have premultipliedAlpha, so that the calculated color contrast is scaled by alpha
+        float contrast( vec4 a, vec4 b ) {
+                vec4 diff = abs( a - b );
+                return max( max( max( diff.r, diff.g ), diff.b ), diff.a );
+        }
+    
+        /*============================================================================
+    
+                                        FXAA3 QUALITY - PC
+    
+        ============================================================================*/
+    
+        /*--------------------------------------------------------------------------*/
+        vec4 FxaaPixelShader(
+                vec2 posM,
+                sampler2D tex,
+                vec2 fxaaQualityRcpFrame,
+                float fxaaQualityEdgeThreshold,
+                float fxaaQualityinvEdgeThreshold
+        ) {
+                vec4 rgbaM = FxaaTexTop(tex, posM);
+                vec4 rgbaS = FxaaTexOff(tex, posM, vec2( 0.0, 1.0), fxaaQualityRcpFrame.xy);
+                vec4 rgbaE = FxaaTexOff(tex, posM, vec2( 1.0, 0.0), fxaaQualityRcpFrame.xy);
+                vec4 rgbaN = FxaaTexOff(tex, posM, vec2( 0.0,-1.0), fxaaQualityRcpFrame.xy);
+                vec4 rgbaW = FxaaTexOff(tex, posM, vec2(-1.0, 0.0), fxaaQualityRcpFrame.xy);
+                // . S .
+                // W M E
+                // . N .
+    
+                bool earlyExit = max( max( max(
+                        contrast( rgbaM, rgbaN ),
+                        contrast( rgbaM, rgbaS ) ),
+                        contrast( rgbaM, rgbaE ) ),
+                        contrast( rgbaM, rgbaW ) )
+                        < fxaaQualityEdgeThreshold;
+                // . 0 .
+                // 0 0 0
+                // . 0 .
+    
+                #if (FXAA_DISCARD == 1)
+                        if(earlyExit) FxaaDiscard;
+                #else
+                        if(earlyExit) return rgbaM;
+                #endif
+    
+                float contrastN = contrast( rgbaM, rgbaN );
+                float contrastS = contrast( rgbaM, rgbaS );
+                float contrastE = contrast( rgbaM, rgbaE );
+                float contrastW = contrast( rgbaM, rgbaW );
+    
+                float relativeVContrast = ( contrastN + contrastS ) - ( contrastE + contrastW );
+                relativeVContrast *= fxaaQualityinvEdgeThreshold;
+    
+                bool horzSpan = relativeVContrast > 0.;
+                // . 1 .
+                // 0 0 0
+                // . 1 .
+    
+                // 45 deg edge detection and corners of objects, aka V/H contrast is too similar
+                if( abs( relativeVContrast ) < .3 ) {
+                        // locate the edge
+                        vec2 dirToEdge;
+                        dirToEdge.x = contrastE > contrastW ? 1. : -1.;
+                        dirToEdge.y = contrastS > contrastN ? 1. : -1.;
+                        // . 2 .      . 1 .
+                        // 1 0 2  ~=  0 0 1
+                        // . 1 .      . 0 .
+    
+                        // tap 2 pixels and see which ones are "outside" the edge, to
+                        // determine if the edge is vertical or horizontal
+    
+                        vec4 rgbaAlongH = FxaaTexOff(tex, posM, vec2( dirToEdge.x, -dirToEdge.y ), fxaaQualityRcpFrame.xy);
+                        float matchAlongH = contrast( rgbaM, rgbaAlongH );
+                        // . 1 .
+                        // 0 0 1
+                        // . 0 H
+    
+                        vec4 rgbaAlongV = FxaaTexOff(tex, posM, vec2( -dirToEdge.x, dirToEdge.y ), fxaaQualityRcpFrame.xy);
+                        float matchAlongV = contrast( rgbaM, rgbaAlongV );
+                        // V 1 .
+                        // 0 0 1
+                        // . 0 .
+    
+                        relativeVContrast = matchAlongV - matchAlongH;
+                        relativeVContrast *= fxaaQualityinvEdgeThreshold;
+    
+                        if( abs( relativeVContrast ) < .3 ) { // 45 deg edge
+                                // 1 1 .
+                                // 0 0 1
+                                // . 0 1
+    
+                                // do a simple blur
+                                return mix(
+                                        rgbaM,
+                                        (rgbaN + rgbaS + rgbaE + rgbaW) * .25,
+                                        .4
+                                );
+                        }
+    
+                        horzSpan = relativeVContrast > 0.;
+                }
+    
+                if(!horzSpan) rgbaN = rgbaW;
+                if(!horzSpan) rgbaS = rgbaE;
+                // . 0 .      1
+                // 1 0 1  ->  0
+                // . 0 .      1
+    
+                bool pairN = contrast( rgbaM, rgbaN ) > contrast( rgbaM, rgbaS );
+                if(!pairN) rgbaN = rgbaS;
+    
+                vec2 offNP;
+                offNP.x = (!horzSpan) ? 0.0 : fxaaQualityRcpFrame.x;
+                offNP.y = ( horzSpan) ? 0.0 : fxaaQualityRcpFrame.y;
+    
+                bool doneN = false;
+                bool doneP = false;
+    
+                float nDist = 0.;
+                float pDist = 0.;
+    
+                vec2 posN = posM;
+                vec2 posP = posM;
+    
+                int iterationsUsed = 0;
+                int iterationsUsedN = 0;
+                int iterationsUsedP = 0;
+                for( int i = 0; i < NUM_SAMPLES; i++ ) {
+                        iterationsUsed = i;
+    
+                        float increment = float(i + 1);
+    
+                        if(!doneN) {
+                                nDist += increment;
+                                posN = posM + offNP * nDist;
+                                vec4 rgbaEndN = FxaaTexTop(tex, posN.xy);
+                                doneN = contrast( rgbaEndN, rgbaM ) > contrast( rgbaEndN, rgbaN );
+                                iterationsUsedN = i;
+                        }
+    
+                        if(!doneP) {
+                                pDist += increment;
+                                posP = posM - offNP * pDist;
+                                vec4 rgbaEndP = FxaaTexTop(tex, posP.xy);
+                                doneP = contrast( rgbaEndP, rgbaM ) > contrast( rgbaEndP, rgbaN );
+                                iterationsUsedP = i;
+                        }
+    
+                        if(doneN || doneP) break;
+                }
+    
+    
+                if ( !doneP && !doneN ) return rgbaM; // failed to find end of edge
+    
+                float dist = min(
+                        doneN ? float( iterationsUsedN ) / float( NUM_SAMPLES - 1 ) : 1.,
+                        doneP ? float( iterationsUsedP ) / float( NUM_SAMPLES - 1 ) : 1.
+                );
+    
+                // hacky way of reduces blurriness of mostly diagonal edges
+                // but reduces AA quality
+                dist = pow(dist, .5);
+    
+                dist = 1. - dist;
+    
+                return mix(
+                        rgbaM,
+                        rgbaN,
+                        dist * .5
+                );
+        }
+    
+        void main() {
+                const float edgeDetectionQuality = .2;
+                const float invEdgeDetectionQuality = 1. / edgeDetectionQuality;
+    
+                gl_FragColor = FxaaPixelShader(
+                        vUv,
+                        tDiffuse,
+                        resolution,
+                        edgeDetectionQuality, // [0,1] contrast needed, otherwise early discard
+                        invEdgeDetectionQuality
+                );
+            ${ShaderChunk.logdepthbuf_fragment}
+        }
+    `,
+    blending: NoBlending, // 渲染时不与背景融合计算 直接替换
+    depthTest: false,
+    depthWrite: false,
+    transparent: true
+});
+
+export default FXAAShaderMaterial;