three-base 2.0.21 → 2.0.23

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/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;

package/ThreeBase.js

@@ -2,19 +2,20 @@
  * @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, 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";
+import stroke_pass from "./pass/stroke_pass";
 import { clearShader, coptyShader, fullScreenMesh, gaussBlurShader, strokeShader } from "./shaders";
 import threeLoader from "./threeLoader";
 import ThreeMouse from "./ThreeMouse";
 import threeUtils from "./threeUtils";
 import Transition from "./Transition";
-import stroke_pass from "./pass/stroke_pass";
-import glow_pass from "./pass/glow_pass";
+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,6 +64,7 @@ export default class ThreeBase extends EventDispatcher {
         });
         renderer.domElement.id = generateUUID();
         renderer.localClippingEnabled = true;
+        renderer.outputColorSpace = LinearSRGBColorSpace;
         renderer.setPixelRatio(window.devicePixelRatio);
         renderer.autoClear = false;
         renderer.clear();
@@ -95,9 +96,6 @@ export default class ThreeBase extends EventDispatcher {
             div.style.overflow = "hidden";
             div.innerHTML = "";
             div.append(this.renderer.domElement);
-            // this.renderer.forceContextLoss();
-            // await new Promise(resolve => requestAnimationFrame(resolve));
-            // await new Promise(resolve => requestAnimationFrame(resolve));
             this.renderer.forceContextRestore();
             this.renderer.domElement.style.opacity = "1";
             this.setSize(div.clientWidth, div.clientHeight);
@@ -114,7 +112,11 @@ export default class ThreeBase extends EventDispatcher {
         }
         this.renderer.setPixelRatio(window.devicePixelRatio);
         this.renderer.setSize(width, height);
+        // 设置帧缓存区的尺寸
         this.baseRenderTarget.setSize(width * window.devicePixelRatio, height * window.devicePixelRatio);
+        // 设置深度纹理的尺寸
+        this.baseDepthTexture.image.width = width * window.devicePixelRatio;
+        this.baseDepthTexture.image.height = height * window.devicePixelRatio;
         this.size.set(width, height);
         // 渲染场景
         // this.renderer.clear();
@@ -142,11 +144,11 @@ export default class ThreeBase extends EventDispatcher {
         const controlsPosition = new Transition({ x: 100, y: 100, z: 100 });
         controlsPosition.setDuration(1000);
         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);
+            // 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);
             // // 创建初始方向向量
             // const directionVecA = new THREE.Vector3(1, 0, 0); // 需要旋转的初始方向向量
             // const referenceVecB = new THREE.Vector3(0, 1, 0); // 参考方向向量，用于确定旋转轴
@@ -181,6 +183,8 @@ export default class ThreeBase extends EventDispatcher {
         }
         return axesHelper;
     })();
+    //TODO 设置帧频率 默认50帧
+    frame = 50;
     init() {
         // 资源加载进度有更新时, 需要渲染
         threeLoader.addEventListener("progress", () => {
@@ -236,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维向量
@@ -280,7 +284,7 @@ export default class ThreeBase extends EventDispatcher {
     // 渲染场景
     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();
@@ -303,14 +307,15 @@ export default class ThreeBase extends EventDispatcher {
         }
         // 渲染场景
         this.dispatchEvent({ type: "beforeRender" });
-        // this.renderer.setRenderTarget(this.baseRenderTarget);
+        // 把基础场景渲染到 帧缓冲区 在后期通道中会用到
+        this.renderer.setRenderTarget(this.baseRenderTarget);
         this.renderer.clear();
         this.renderer.render(this.scene, this.camera);
-        // this.renderer.setRenderTarget(null);
-        // this.renderer.clear();
-        //TODO 渲染了2次, 还有优化空间
+        // 清空主画布
+        this.renderer.setRenderTarget(null);
+        this.renderer.clear();
         // this.renderer.setScissorTest(false);
-        // this.renderRendererTarget(this.baseRenderTarget);
+        this.renderRendererTarget(this.baseRenderTarget);
         // this.renderer.setScissorTest(true);
         // this.renderer.setScissor(0, 0, 800, 1000);
         // this.renderer.render(this.scene, this.camera);
@@ -442,13 +447,21 @@ export default class ThreeBase extends EventDispatcher {
         this.renderTargetgaussBlur(renderTarget, 1, 1);
         this.renderTargetgaussBlur(renderTarget, 1, 1);
     }
-    // 渲染 渲染目标
+    // 需要做康锯齿处理 渲染 渲染目标
     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,20 +2,21 @@
  * @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, LinearEncoding, LinearFilter, LinearSRGBColorSpace, Mesh, MeshBasicMaterial, MOUSE, NoBlending, NoColorSpace, NormalBlending, Object3D, PerspectiveCamera, RGBAFormat, Scene, SRGBColorSpace, sRGBEncoding, 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";
+import stroke_pass from "./pass/stroke_pass";
 import { clearShader, coptyShader, fullScreenMesh, gaussBlurShader, strokeShader } from "./shaders";
 import threeLoader from "./threeLoader";
 import ThreeMouse from "./ThreeMouse";
 import threeUtils from "./threeUtils";
 import Transition from "./Transition";
-import stroke_pass from "./pass/stroke_pass";
-import glow_pass from "./pass/glow_pass";
+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,13 +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 = LinearSRGBColorSpace;
         renderer.setPixelRatio(window.devicePixelRatio);
         renderer.autoClear = false;
         renderer.clear();
@@ -113,9 +114,6 @@ export default class ThreeBase extends EventDispatcher {
             div.innerHTML = "";
             div.append(this.renderer.domElement);
 
-            // this.renderer.forceContextLoss();
-            // await new Promise(resolve => requestAnimationFrame(resolve));
-            // await new Promise(resolve => requestAnimationFrame(resolve));
             this.renderer.forceContextRestore();
             this.renderer.domElement.style.opacity = "1";
 
@@ -137,8 +135,13 @@ export default class ThreeBase extends EventDispatcher {
         this.renderer.setPixelRatio(window.devicePixelRatio);
         this.renderer.setSize(width, height);
 
+        // 设置帧缓存区的尺寸
         this.baseRenderTarget.setSize(width * window.devicePixelRatio, height * window.devicePixelRatio);
 
+        // 设置深度纹理的尺寸
+        this.baseDepthTexture.image.width = width * window.devicePixelRatio;
+        this.baseDepthTexture.image.height = height * window.devicePixelRatio;
+
         this.size.set(width, height);
         // 渲染场景
         // this.renderer.clear();
@@ -169,11 +172,11 @@ export default class ThreeBase extends EventDispatcher {
         const controlsPosition = new Transition({ x: 100, y: 100, z: 100 });
         controlsPosition.setDuration(1000);
         controlsPosition.onChange(({ x, y, z }) => {
-            const distance = this.controlsDistance.get("distance");
+            // 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); // 需要旋转的初始方向向量
@@ -219,6 +222,9 @@ export default class ThreeBase extends EventDispatcher {
         return axesHelper;
     })();
 
+    //TODO 设置帧频率 默认50帧
+    frame = 50;
+
     init() {
         // 资源加载进度有更新时, 需要渲染
         threeLoader.addEventListener("progress", () => {
@@ -291,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(",")})`
         }
     }
 
@@ -343,9 +349,8 @@ export default class ThreeBase extends EventDispatcher {
 
     // 渲染场景
     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)) {
@@ -375,16 +380,19 @@ export default class ThreeBase extends EventDispatcher {
         // 渲染场景
         this.dispatchEvent({ type: "beforeRender" } as never);
 
-        // this.renderer.setRenderTarget(this.baseRenderTarget);
+        // 把基础场景渲染到 帧缓冲区 在后期通道中会用到
+        this.renderer.setRenderTarget(this.baseRenderTarget);
         this.renderer.clear();
         this.renderer.render(this.scene, this.camera);
 
-        // this.renderer.setRenderTarget(null);
-        // this.renderer.clear();
+        // 清空主画布
+        this.renderer.setRenderTarget(null);
+        this.renderer.clear();
 
-        //TODO 渲染了2次, 还有优化空间
         // this.renderer.setScissorTest(false);
-        // this.renderRendererTarget(this.baseRenderTarget);
+
+        this.renderRendererTarget(this.baseRenderTarget);
+
         // this.renderer.setScissorTest(true);
         // this.renderer.setScissor(0, 0, 800, 1000);
         // this.renderer.render(this.scene, this.camera);
@@ -542,13 +550,23 @@ export default class ThreeBase extends EventDispatcher {
         this.renderTargetgaussBlur(renderTarget, 1, 1);
     }
 
-    // 渲染 渲染目标
+    // 需要做康锯齿处理 渲染 渲染目标
     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.21",
+    "version": "2.0.23",
     "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;