three-base 2.0.117 → 2.0.119

package/FPScontrol.js

@@ -124,7 +124,6 @@ export default class FPScontrol extends EventDispatcher {
         this.playerCollider.translate(deltaPosition);
         this.playerCollisions();
         this.camera.position.copy(this.playerCollider.end);
-        this.camera.position.y += 1;
         this.camera.rotation.x = clamp(this.camera.rotation.x, degToRad(-20), degToRad(20));
     };
     // 玩家的碰撞检测

package/PipeMesh/PathGeometry.d.ts

@@ -25,8 +25,6 @@ declare class PathGeometry extends BufferGeometry {
      * @param {Boolean} [generateUv2=false]
      */
     constructor(initData: PathGeometryParam, generateUv2?: boolean);
-    computeBoundsTree: any;
-    disposeBoundsTree: any;
     _initByMaxVertex(maxVertex: number, generateUv2: boolean): void;
     _initByData(pathPointList: PathPointList, options: Options, usage: Usage, generateUv2: boolean): void;
     /**

package/PipeMesh/PathGeometry.js

@@ -3,7 +3,6 @@ import { PathPoint } from './PathPoint.js';
 import { BufferGeometry } from 'three/src/core/BufferGeometry.js';
 import { BufferAttribute } from 'three/src/core/BufferAttribute.js';
 import { Vector3 } from 'three/src/math/Vector3.js';
-import { computeBoundsTree, disposeBoundsTree } from 'three-mesh-bvh';
 /**
  * PathGeometry
  */
@@ -16,8 +15,6 @@ class PathGeometry extends BufferGeometry {
         super();
         this._initByData(initData.pathPointList, initData.options, initData.usage, generateUv2);
     }
-    computeBoundsTree = computeBoundsTree.bind(this);
-    disposeBoundsTree = disposeBoundsTree.bind(this);
     _initByMaxVertex(maxVertex, generateUv2) {
         this.setAttribute('position', new BufferAttribute(new Float32Array(maxVertex * 3), 3).setUsage(DynamicDrawUsage));
         this.setAttribute('normal', new BufferAttribute(new Float32Array(maxVertex * 3), 3).setUsage(DynamicDrawUsage));

package/ThreeBase.d.ts

@@ -4,6 +4,7 @@ import ThreeMouse from "./ThreeMouse";
 import Transition from "./Transition";
 export default class ThreeBase extends EventDispatcher {
     constructor();
+    devicePixelRatio: number;
     baseDepthTexture: DepthTexture;
     baseRenderTarget: WebGLRenderTarget<Texture>;
     renderTarget: WebGLRenderTarget<Texture>;
@@ -69,7 +70,6 @@ export default class ThreeBase extends EventDispatcher {
     autoRender: boolean;
     needRender: boolean;
     stopRender(): void;
-    hasPass(): boolean;
     render(): void;
     private renderBindThis;
     getThumbBlob(): Promise<Blob>;

package/ThreeBase.js

@@ -2,7 +2,7 @@
  * @Author: xiaosihan
  * @Date: 2021-12-20 13:38:22
  * @Last Modified by: xiaosihan
- * @Last Modified time: 2025-01-17 11:07:38
+ * @Last Modified time: 2025-01-28 04:26:41
  */
 import { round } from "lodash";
 import { AxesHelper, Box3, DepthFormat, DepthTexture, EventDispatcher, GridHelper, LinearFilter, MOUSE, NoBlending, NormalBlending, OrthographicCamera, PerspectiveCamera, RGBAFormat, ReinhardToneMapping, SRGBColorSpace, Scene, TOUCH, UnsignedShortType, Vector2, Vector3, WebGLRenderTarget, WebGLRenderer, } from "three";
@@ -14,10 +14,11 @@ import bloom_pass from "./pass/bloom_pass";
 import cover_pass from "./pass/cover_pass";
 import glow_pass from "./pass/glow_pass";
 import stroke_pass from "./pass/stroke_pass";
-import { copyShader, fullScreenMesh } from "./shaders";
+import { copyShader } from "./shaders";
 import { baseTextureToRenderShader } from "./shaders/baseTextureToRenderShader";
 import threeLoader from "./threeLoader";
 import threeUtils from "./threeUtils";
+import fsQuad from "./pass/fsQuad";
 // three.js 的基础对象
 export default class ThreeBase extends EventDispatcher {
     constructor() {
@@ -37,6 +38,8 @@ export default class ThreeBase extends EventDispatcher {
         });
         this.init();
     }
+    // 设置分辨率
+    devicePixelRatio = Math.max(window.devicePixelRatio, 2);
     // 基础深度纹理
     baseDepthTexture = (() => {
         const baseDepthTexture = new DepthTexture(4096, 4096);
@@ -98,7 +101,7 @@ export default class ThreeBase extends EventDispatcher {
             this.rendererLost = false;
         }, false);
         renderer.localClippingEnabled = true;
-        renderer.setPixelRatio(window.devicePixelRatio);
+        renderer.setPixelRatio(this.devicePixelRatio);
         renderer.autoClear = false;
         renderer.clear();
         renderer.outputColorSpace = SRGBColorSpace;
@@ -191,13 +194,13 @@ export default class ThreeBase extends EventDispatcher {
         // this.orthographicCamera.bottom = -height / width;
         this.orthographicCamera.left = -width / height;
         this.orthographicCamera.right = width / height;
-        this.renderer.setPixelRatio(window.devicePixelRatio);
+        this.renderer.setPixelRatio(this.devicePixelRatio);
         this.renderer.setSize(width, height);
         // 设置帧缓存区的尺寸
-        this.baseRenderTarget.setSize(width * window.devicePixelRatio, height * window.devicePixelRatio);
+        this.baseRenderTarget.setSize(width * this.devicePixelRatio, height * this.devicePixelRatio);
         // 设置深度纹理的尺寸
-        this.baseDepthTexture.image.width = width * window.devicePixelRatio;
-        this.baseDepthTexture.image.height = height * window.devicePixelRatio;
+        this.baseDepthTexture.image.width = width * this.devicePixelRatio;
+        this.baseDepthTexture.image.height = height * this.devicePixelRatio;
         this.size.set(width, height);
         setTimeout(() => {
             this.needRender = true;
@@ -428,23 +431,6 @@ export default class ThreeBase extends EventDispatcher {
             this.renderer.domElement.style.opacity = "0";
         }
     }
-    //判断是否有特效
-    hasPass() {
-        let hasPass = false;
-        this.scene.traverseVisible((obj) => {
-            const { stroke_enable = false, stroke_width = 1, glow_enable = false, glow_width = 1, cover_enable = false, cover_opacity = 1, } = obj.userData;
-            if (stroke_enable && stroke_width > 0) {
-                hasPass = true;
-            }
-            if (glow_enable && glow_width > 0) {
-                hasPass = true;
-            }
-            if (cover_enable && cover_opacity > 0) {
-                hasPass = true;
-            }
-        });
-        return hasPass;
-    }
     // 渲染场景
     render() {
         // canvas 没有在页面上面的话 就停止渲染
@@ -497,31 +483,22 @@ export default class ThreeBase extends EventDispatcher {
         }
         // 渲染场景
         this.dispatchEvent({ type: "beforeRender" });
-        const hasPass = this.hasPass();
         // 把基础场景渲染到 帧缓冲区 在后期通道中会用到
-        if (hasPass) {
-            this.renderer.setRenderTarget(this.baseRenderTarget);
-            this.renderer.clear();
-            this.renderer.render(this.scene, camera);
-            // 后处理特效渲染(描边,发光,颜色覆盖,磨砂玻璃,bloom)
-            this.scene.traverseVisible((obj) => {
-                stroke_pass(this.renderer, camera, obj, this.baseDepthTexture);
-                glow_pass(this.renderer, camera, obj, this.baseDepthTexture);
-            });
-            this.renderer.setRenderTarget(null);
-            this.renderer.clear();
-            this.renderRendererTarget(this.baseRenderTarget);
-            this.scene.traverseVisible((obj) => {
-                cover_pass(this.renderer, camera, obj, this.baseDepthTexture);
-            });
-            //后处理发光特效
-            bloom_pass(this.renderer, camera, this.scene, this.baseDepthTexture);
-        }
-        else {
-            this.renderer.setRenderTarget(null);
-            this.renderer.clear();
-            this.renderer.render(this.scene, camera);
-        }
+        this.renderer.setRenderTarget(this.baseRenderTarget);
+        this.renderer.clear();
+        this.renderer.render(this.scene, camera);
+        // 后处理特效渲染(描边,发光,颜色覆盖,bloom,磨砂玻璃)
+        this.scene.traverseVisible((obj) => {
+            stroke_pass(this.renderer, camera, obj, this.baseDepthTexture, this.devicePixelRatio);
+            glow_pass(this.renderer, camera, obj, this.baseDepthTexture, this.devicePixelRatio);
+            bloom_pass(this.renderer, camera, obj, this.baseRenderTarget, this.baseDepthTexture, this.devicePixelRatio);
+        });
+        this.renderer.setRenderTarget(null);
+        this.renderer.clear();
+        this.renderRendererTarget(this.baseRenderTarget);
+        this.scene.traverseVisible((obj) => {
+            cover_pass(this.renderer, camera, obj, this.baseDepthTexture, this.devicePixelRatio);
+        });
         this.dispatchEvent({ type: "afterRender" });
     }
     renderBindThis = this.render.bind(this);
@@ -570,13 +547,13 @@ export default class ThreeBase extends EventDispatcher {
     renderRendererTarget(renderTarget) {
         baseTextureToRenderShader.uniforms.resolution.value.set(1 / this.size.x, 1 / this.size.y);
         baseTextureToRenderShader.uniforms.tDiffuse.value = renderTarget.texture;
-        fullScreenMesh.render(this.renderer, baseTextureToRenderShader);
+        fsQuad.render(this.renderer, baseTextureToRenderShader);
     }
     // 渲染纹理
     renderTexture(texture, alpha = false) {
         copyShader.uniforms.map.value = texture;
         copyShader.uniforms.opacity.value = 1.0;
         copyShader.blending = alpha ? NoBlending : NormalBlending;
-        fullScreenMesh.render(this.renderer, copyShader);
+        fsQuad.render(this.renderer, copyShader);
     }
 }

package/ThreeMouse.js

@@ -7,7 +7,7 @@
 import { Raycaster, Vector2 } from "three";
 import { Mesh } from "three";
 import { debounce } from "lodash";
-import { computeBoundsTree, disposeBoundsTree, acceleratedRaycast, } from "three-mesh-bvh";
+import { computeBoundsTree, acceleratedRaycast, } from "three-mesh-bvh";
 // Add the extension functions
 Mesh.prototype.raycast = acceleratedRaycast;
 /**
@@ -115,9 +115,12 @@ export default class ThreeMouse {
                     "mousedown",
                     "mouseup",
                 ])) {
-                if (mesh.isMesh && !mesh.geometry.boundsTree) {
+                if (mesh.isMesh &&
+                    !mesh.geometry.boundsTree &&
+                    mesh.geometry.attributes.position &&
+                    mesh.geometry.attributes.position.count > 0) {
                     computeBoundsTree.apply(mesh.geometry);
-                    disposeBoundsTree.apply(mesh.geometry);
+                    //   disposeBoundsTree.apply((mesh as Mesh).geometry);
                 }
                 meshs.push(mesh);
             }

package/package.json

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

package/pass/bloom_pass.d.ts

@@ -1,2 +1,2 @@
-import { WebGLRenderer, Camera, DepthTexture, Scene } from "three";
-export default function bloom_pass(renderer: WebGLRenderer, camera: Camera, scene: Scene, baseDepthTexture: DepthTexture): void;
+import { WebGLRenderer, Camera, Object3D, DepthTexture, WebGLRenderTarget } from "three";
+export default function bloom_pass(renderer: WebGLRenderer, camera: Camera, object3d: Object3D, baseRenderTarget: WebGLRenderTarget, baseDepthTexture: DepthTexture, devicePixelRatio: number): void;

package/pass/bloom_pass.js

@@ -1,10 +1,13 @@
 /*
  * @Author: xiaosihan
  * @Date: 2024-09-23 21:51:29
- * @Last Modified by:   xiaosihan
- * @Last Modified time: 2024-09-23 21:51:29
+ * @Last Modified by: xiaosihan
+ * @Last Modified time: 2025-01-28 05:05:49
  */
-import { DepthTexture, DepthFormat, LinearFilter, RGBAFormat, UnsignedShortType, WebGLRenderTarget, } from "three";
+import { DepthTexture, DepthFormat, LinearFilter, RGBAFormat, UnsignedShortType, WebGLRenderTarget, Scene, Vector2, ShaderChunk, NoBlending, ShaderMaterial, AdditiveBlending, } from "three";
+import { UnrealBloomPass } from "three/examples/jsm/postprocessing/UnrealBloomPass";
+import copyShader from "../shaders/copyShader";
+import fsQuad from "./fsQuad";
 // 选中对象的深度纹理
 const selectDepthTexture = (() => {
     const baseDepthTexture = new DepthTexture(4096, 4096);
@@ -28,6 +31,95 @@ const selectDethpTestTextureTarget = new WebGLRenderTarget(512, 512, {
     format: RGBAFormat,
     anisotropy: 16,
 });
+//深度比对纹理
+const depthTestShader = new ShaderMaterial({
+    uniforms: {
+        map: { value: null },
+        baseDepth: { value: null },
+        selectDepth: { value: null }, // 选中的对象深度纹理
+    },
+    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}
+        uniform sampler2D map;
+        uniform sampler2D baseDepth;
+        uniform sampler2D selectDepth;
+        varying vec2 vUv;
+        void main() {
+            if(texture2D(baseDepth, vUv).r < texture2D(selectDepth, vUv).r){
+                discard;
+            }
+            if(texture2D(baseDepth, vUv).r == 1.0){
+                discard;
+            }
+            gl_FragColor = texture2D(map, vUv);
+            ${ShaderChunk.logdepthbuf_fragment}
+        }
+    `,
+    blending: NoBlending,
+    depthTest: true,
+    depthWrite: true,
+    transparent: true,
+});
+const blendMaterial = copyShader.clone();
+blendMaterial.blending = AdditiveBlending;
+const size = new Vector2();
+// 场景对象
+const scene = new Scene();
+const bloomPass = new UnrealBloomPass(new Vector2(1024, 1024), 1.5, 0.4, 0.85);
+// bloomPass.threshold = params.threshold;
+// bloomPass.strength = params.strength;
+// bloomPass.radius = params.radius;
 // 发光后期通道
-export default function bloom_pass(renderer, camera, scene, baseDepthTexture) {
+export default function bloom_pass(renderer, camera, object3d, baseRenderTarget, baseDepthTexture, devicePixelRatio) {
+    const { bloom_enable = false, bloom_threshold = 1.5, bloom_strength = 0.4, bloom_radius = 0.85, } = object3d.userData;
+    // 不满足条件就不渲染发光效果
+    if (!bloom_enable || (bloom_strength === 0) || (bloom_radius === 0)) {
+        return;
+    }
+    bloomPass.threshold = bloom_threshold;
+    bloomPass.strength = bloom_strength;
+    bloomPass.radius = bloom_radius;
+    debugger;
+    // 保存原帧缓冲区
+    const originRenderTarget = renderer.getRenderTarget();
+    // 设置选中目标的帧缓冲区
+    renderer.getSize(size);
+    size.multiplyScalar(devicePixelRatio);
+    bloomPass.setSize(size.x, size.y);
+    selectTextureTarget.setSize(size.x, size.y);
+    selectDethpTestTextureTarget.setSize(size.x, size.y);
+    renderer.setRenderTarget(selectTextureTarget);
+    scene.children = [object3d];
+    renderer.clear();
+    renderer.render(scene, camera);
+    //使用深度纹理提取选中的对象未被遮挡的像素点
+    renderer.setRenderTarget(selectDethpTestTextureTarget);
+    renderer.clear();
+    depthTestShader.uniforms.map.value = baseRenderTarget.texture;
+    depthTestShader.uniforms.baseDepth.value = baseDepthTexture;
+    depthTestShader.uniforms.selectDepth.value = selectDepthTexture;
+    fsQuad.render(renderer, depthTestShader);
+    // 渲染辉光
+    bloomPass.render(renderer, selectDethpTestTextureTarget, selectDethpTestTextureTarget, 0, false);
+    // 将发光效果与原始帧缓冲区混合
+    renderer.setRenderTarget(originRenderTarget);
+    renderer.clearDepth();
+    blendMaterial.uniforms.map.value = selectDethpTestTextureTarget.texture;
+    fsQuad.render(renderer, blendMaterial);
+    // 调试代码
+    // renderer.setRenderTarget(null);
+    // renderer.clearDepth();
+    // copyShader.uniforms.map.value = blur2TextureTarget.texture;
+    // fsQuad.render(renderer, copyShader);
+    // return;
 }

package/pass/cover_pass.d.ts

@@ -1,2 +1,2 @@
 import { Camera, DepthTexture, Object3D, WebGLRenderer } from "three";
-export default function cover_pass(renderer: WebGLRenderer, camera: Camera, object3d: Object3D, baseDepthTexture: DepthTexture): void;
+export default function cover_pass(renderer: WebGLRenderer, camera: Camera, object3d: Object3D, baseDepthTexture: DepthTexture, devicePixelRatio: number): void;

package/pass/cover_pass.js

@@ -2,7 +2,7 @@
  * @Author: xiaosihan
  * @Date: 2024-09-23 21:07:06
  * @Last Modified by: xiaosihan
- * @Last Modified time: 2024-09-23 21:53:12
+ * @Last Modified time: 2025-01-28 04:01:58
  */
 /*
  * @Author: xiaosihan
@@ -11,7 +11,7 @@
  * @Last Modified time: 2023-05-09 02:33:28
  */
 import { Color, DepthFormat, DepthTexture, LinearFilter, RGBAFormat, Scene, ShaderChunk, ShaderMaterial, UnsignedShortType, Vector2, WebGLRenderTarget, } from "three";
-import FullScreenQuad from "./FullScreenQuad";
+import fsQuad from "./fsQuad";
 // 选中对象的深度纹理
 const selectDepthTexture = (() => {
     const baseDepthTexture = new DepthTexture(1024, 1024);
@@ -41,8 +41,6 @@ const blur1TextureTarget = new WebGLRenderTarget(512, 512, {
     format: RGBAFormat,
 });
 const size = new Vector2();
-// 创建一个渲染工具 用于处理纹理
-const fsQuad = new FullScreenQuad(); // 渲染辅助器
 //深度比对纹理
 const depthTestShader = new ShaderMaterial({
     uniforms: {
@@ -99,7 +97,7 @@ const depthTestShader = new ShaderMaterial({
 // 场景对象
 const scene = new Scene();
 // 给模型覆盖一层颜色 后处理通道
-export default function cover_pass(renderer, camera, object3d, baseDepthTexture) {
+export default function cover_pass(renderer, camera, object3d, baseDepthTexture, devicePixelRatio) {
     const { cover_enable = false, cover_color = "#04fa12", cover_opacity = 1, cover_depth_test = true, // 颜色叠加是否开启深度测试
      } = object3d.userData;
     if (!cover_enable || cover_opacity === 0) {
@@ -109,7 +107,7 @@ export default function cover_pass(renderer, camera, object3d, baseDepthTexture)
     const originRenderTarget = renderer.getRenderTarget();
     // 设置选中目标的帧缓冲区
     renderer.getSize(size);
-    size.multiplyScalar(window.devicePixelRatio);
+    size.multiplyScalar(devicePixelRatio);
     selectTextureTarget.setSize(size.x, size.y);
     selectDethpTestTextureTarget.setSize(size.x, size.y);
     blur1TextureTarget.setSize(size.x, size.y);

package/pass/{FullScreenQuad.d.ts → fsQuad.d.ts}

@@ -1,7 +1,9 @@
 import { BufferGeometry, Material, Mesh, OrthographicCamera, Scene, WebGLRenderer } from "three";
-export default class FullScreenQuad extends Scene {
+declare class FullScreenQuad extends Scene {
     constructor();
     mesh: Mesh<BufferGeometry<import("three").NormalBufferAttributes>, Material, import("three").Object3DEventMap>;
     orthographicCamera: OrthographicCamera;
     render(renderer: WebGLRenderer, material: Material): void;
 }
+declare const fsQuad: FullScreenQuad;
+export default fsQuad;

package/pass/{FullScreenQuad.js → fsQuad.js}

@@ -2,10 +2,10 @@
  * @Author: xiaosihan
  * @Date: 2023-05-09 01:36:35
  * @Last Modified by: xiaosihan
- * @Last Modified time: 2023-05-09 01:47:07
+ * @Last Modified time: 2025-01-28 04:04:33
  */
 import { BufferGeometry, Float32BufferAttribute, Mesh, MeshBasicMaterial, OrthographicCamera, Scene } from "three";
-export default class FullScreenQuad extends Scene {
+class FullScreenQuad extends Scene {
     constructor() {
         super();
     }
@@ -23,3 +23,6 @@ export default class FullScreenQuad extends Scene {
         renderer.render(this, this.orthographicCamera);
     }
 }
+// 创建一个渲染工具 用于处理纹理
+const fsQuad = new FullScreenQuad(); // 渲染辅助器
+export default fsQuad;

package/pass/glow_pass.d.ts

@@ -1,2 +1,2 @@
 import { Camera, DepthTexture, Object3D, WebGLRenderer } from "three";
-export default function glow_pass(renderer: WebGLRenderer, camera: Camera, object3d: Object3D, baseDepthTexture: DepthTexture): void;
+export default function glow_pass(renderer: WebGLRenderer, camera: Camera, object3d: Object3D, baseDepthTexture: DepthTexture, devicePixelRatio: number): void;

package/pass/glow_pass.js

@@ -2,10 +2,10 @@
  * @Author: xiaosihan
  * @Date: 2023-05-09 00:35:17
  * @Last Modified by: xiaosihan
- * @Last Modified time: 2024-09-23 22:00:48
+ * @Last Modified time: 2025-01-28 04:13:16
  */
 import { Color, DepthFormat, DepthTexture, LinearFilter, NoBlending, NormalBlending, RGBAFormat, RawShaderMaterial, Scene, ShaderChunk, ShaderMaterial, UnsignedShortType, Vector2, WebGLRenderTarget, } from "three";
-import FullScreenQuad from "./FullScreenQuad";
+import fsQuad from "./fsQuad";
 // 选中对象的深度纹理
 const selectDepthTexture = (() => {
     const baseDepthTexture = new DepthTexture(4096, 4096);
@@ -42,8 +42,6 @@ const blur2TextureTarget = new WebGLRenderTarget(512, 512, {
     format: RGBAFormat,
 });
 const size = new Vector2();
-// 创建一个渲染工具 用于处理纹理
-const fsQuad = new FullScreenQuad(); // 渲染辅助器
 //深度比对纹理
 const depthTestShader = new ShaderMaterial({
     uniforms: {
@@ -83,242 +81,6 @@ const depthTestShader = new ShaderMaterial({
     depthWrite: true,
     transparent: true,
 });
-// 抗锯齿着色器
-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,
-});
 // 描边着色器
 const blurShader = new RawShaderMaterial({
     uniforms: {
@@ -474,7 +236,7 @@ const copyShader = new ShaderMaterial({
 // 场景对象
 const scene = new Scene();
 // 对象发光
-export default function glow_pass(renderer, camera, object3d, baseDepthTexture) {
+export default function glow_pass(renderer, camera, object3d, baseDepthTexture, devicePixelRatio) {
     const { glow_enable = false, glow_color = "#04fa12", glow_width = 1, glow_opacity = 1, } = object3d.userData;
     if (!glow_enable || glow_width === 0) {
         return;
@@ -483,7 +245,7 @@ export default function glow_pass(renderer, camera, object3d, baseDepthTexture)
     const originRenderTarget = renderer.getRenderTarget();
     // 设置选中目标的帧缓冲区
     renderer.getSize(size);
-    size.multiplyScalar(window.devicePixelRatio);
+    size.multiplyScalar(devicePixelRatio);
     selectTextureTarget.setSize(size.x, size.y);
     selectDethpTestTextureTarget.setSize(size.x, size.y);
     blur1TextureTarget.setSize(size.x, size.y);
@@ -494,12 +256,10 @@ export default function glow_pass(renderer, camera, object3d, baseDepthTexture)
     renderer.render(scene, camera);
     // 设置描边着色器的分辨率
     blurShader.uniforms.resolution.value.set(1 / size.x, 1 / size.y);
-    // 设置抗锯齿着色器的分辨率
-    FXAAShaderMaterial.uniforms.resolution.value.set(1 / size.x, 1 / size.y);
     //描边颜色
     blurShader.uniforms.color.value.set(glow_color);
     blurShader.uniforms.width.value = glow_width / 10;
-    //深度测试
+    //使用深度纹理提取选中的对象未被遮挡的像素点
     renderer.setRenderTarget(selectDethpTestTextureTarget);
     renderer.clear();
     depthTestShader.uniforms.map.value = selectTextureTarget.texture;

package/pass/stroke_pass.d.ts

@@ -1,2 +1,2 @@
 import { Camera, DepthTexture, Object3D, WebGLRenderer } from "three";
-export default function stroke_pass(renderer: WebGLRenderer, camera: Camera, object3d: Object3D, baseDepthTexture: DepthTexture): void;
+export default function stroke_pass(renderer: WebGLRenderer, camera: Camera, object3d: Object3D, baseDepthTexture: DepthTexture, devicePixelRatio: number): void;

package/pass/stroke_pass.js

@@ -2,13 +2,13 @@
  * @Author: xiaosihan
  * @Date: 2023-05-09 00:35:17
  * @Last Modified by: xiaosihan
- * @Last Modified time: 2024-09-23 22:00:54
+ * @Last Modified time: 2025-01-28 04:02:16
  */
 import { Color, DepthFormat, DepthTexture, LinearFilter, NoBlending, NormalBlending, RGBAFormat, RawShaderMaterial, Scene, ShaderChunk, ShaderMaterial, UnsignedShortType, Vector2, WebGLRenderTarget } from "three";
-import FullScreenQuad from "./FullScreenQuad";
+import fsQuad from "./fsQuad";
 // 选中对象的深度纹理
 const selectDepthTexture = (() => {
-    const baseDepthTexture = new DepthTexture(4096, 4096);
+    const baseDepthTexture = new DepthTexture(1024, 1024);
     baseDepthTexture.format = DepthFormat;
     baseDepthTexture.type = UnsignedShortType;
     baseDepthTexture.anisotropy = 16;
@@ -34,8 +34,6 @@ const blur1TextureTarget = new WebGLRenderTarget(512, 512, { minFilter: LinearFi
 // 所以需要用2个模糊纹理相互读写
 const blur2TextureTarget = new WebGLRenderTarget(512, 512, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
 const size = new Vector2();
-// 创建一个渲染工具 用于处理纹理
-const fsQuad = new FullScreenQuad(); // 渲染辅助器
 //深度比对纹理
 const depthTestShader = new ShaderMaterial({
     uniforms: {
@@ -464,7 +462,7 @@ const copyShader = new ShaderMaterial({
 // 场景对象
 const scene = new Scene();
 // 对象描边
-export default function stroke_pass(renderer, camera, object3d, baseDepthTexture) {
+export default function stroke_pass(renderer, camera, object3d, baseDepthTexture, devicePixelRatio) {
     const { stroke_enable = false, stroke_color = "#04fa12", stroke_width = 1 } = object3d.userData;
     if (!stroke_enable || stroke_width === 0) {
         return;
@@ -473,7 +471,7 @@ export default function stroke_pass(renderer, camera, object3d, baseDepthTexture
     const originRenderTarget = renderer.getRenderTarget();
     // 设置选中目标的帧缓冲区
     renderer.getSize(size);
-    size.multiplyScalar(window.devicePixelRatio);
+    size.multiplyScalar(devicePixelRatio);
     selectTextureTarget.setSize(size.x, size.y);
     selectDethpTestTextureTarget.setSize(size.x, size.y);
     blur1TextureTarget.setSize(size.x, size.y);

package/shaders.d.ts

@@ -1,6 +1,4 @@
 import { OrthographicCamera, ShaderMaterial } from "three";
-import FullScreenQuad from "./pass/FullScreenQuad";
-export declare const fullScreenMesh: FullScreenQuad;
 export declare const orthographicCamera: OrthographicCamera;
 export declare const clearShader: ShaderMaterial;
 export declare const intersectionShader: ShaderMaterial;

package/shaders.js

@@ -2,13 +2,9 @@
  * @Author: xiaosihan
  * @Date: 2022-03-24 16:38:35
  * @Last Modified by: xiaosihan
- * @Last Modified time: 2022-04-02 18:28:38
+ * @Last Modified time: 2025-01-28 04:03:20
  */
 import { NoBlending, OrthographicCamera, ShaderChunk, ShaderMaterial } from "three";
-import FullScreenQuad from "./pass/FullScreenQuad";
-// 常用着色器及工具
-// 全屏渲染模型
-export const fullScreenMesh = new FullScreenQuad();
 export const orthographicCamera = new OrthographicCamera(-1, 1, 1, -1, 0, 1);
 // 清理着色器
 export const clearShader = new ShaderMaterial({