three-base 2.0.13 → 2.0.15

package/PlaneModal1/PlaneModal1.d.ts

@@ -1,4 +1,4 @@
-import { MeshBasicMaterial, Mesh, CanvasTexture, PlaneGeometry } from "three";
+import { Mesh, MeshBasicMaterial, PlaneGeometry } from "three";
 export type PlaneModal1Config = {
     size?: number;
     title?: string;
@@ -16,7 +16,7 @@ export default class PlaneModal1 extends Mesh {
     static img: HTMLImageElement;
     canvas: HTMLCanvasElement;
     context: CanvasRenderingContext2D;
-    texture: CanvasTexture | import("three").Texture;
+    texture: import("three").CanvasTexture | import("three").Texture;
     _config: {
         size: number;
         title: string;

package/PlaneModal1/PlaneModal1.js

@@ -4,9 +4,9 @@
  * @Last Modified by: xiaosihan
  * @Last Modified time: 2023-03-09 19:15:35
  */
-import { MeshBasicMaterial, Mesh, DoubleSide, Vector2, PlaneGeometry } from "three";
-import planeModalPNG from "./planeModal.png";
+import { DoubleSide, Mesh, MeshBasicMaterial, PlaneGeometry, Vector2 } from "three";
 import threeLoader from "../threeLoader";
+import planeModalPNG from "./planeModal.png";
 // 平面模型弹窗
 export default class PlaneModal1 extends Mesh {
     constructor(config = {}) {

package/PlaneModal1/PlaneModal1.ts

@@ -5,9 +5,9 @@
  * @Last Modified time: 2023-03-09 19:15:35
  */
 
-import { MeshBasicMaterial, Mesh, DoubleSide, CanvasTexture, Vector2, BufferGeometry, PlaneGeometry, SRGBColorSpace } from "three";
-import planeModalPNG from "./planeModal.png";
+import { DoubleSide, Mesh, MeshBasicMaterial, PlaneGeometry, Vector2 } from "three";
 import threeLoader from "../threeLoader";
+import planeModalPNG from "./planeModal.png";
 
 
 export type PlaneModal1Config = {

package/PointLight/PointLight.js

@@ -23,6 +23,7 @@ export default class PointLight extends THREEPointLight {
     pointLinghtHelper = threeUtils.isDev && (() => {
         const pointLinghtHelper = new Sprite();
         pointLinghtHelper.scale.set(0.05, 0.05, 0.05);
+        pointLinghtHelper.material.alphaTest = 0.1;
         pointLinghtHelper.material.color = this.color;
         pointLinghtHelper.material.map = threeLoader.getTexture(pointLight_mapPNG);
         pointLinghtHelper.material.sizeAttenuation = false;
@@ -54,7 +55,7 @@ export default class PointLight extends THREEPointLight {
         label.position.set(0, 0, 0);
         label.visible = false;
         label.material.color = this.color;
-        label.material.depthTest = false;
+        // label.material.depthTest = false;
         label.material.sizeAttenuation = false;
         label.scale.multiplyScalar(0.002);
         this.add(label);

package/PointLight/PointLight.ts

@@ -28,6 +28,7 @@ export default class PointLight extends THREEPointLight {
     pointLinghtHelper = threeUtils.isDev && (() => {
         const pointLinghtHelper = new Sprite();
         pointLinghtHelper.scale.set(0.05, 0.05, 0.05);
+        pointLinghtHelper.material.alphaTest = 0.1;
         pointLinghtHelper.material.color = this.color;
         pointLinghtHelper.material.map = threeLoader.getTexture(pointLight_mapPNG);
         pointLinghtHelper.material.sizeAttenuation = false;
@@ -64,7 +65,7 @@ export default class PointLight extends THREEPointLight {
         label.position.set(0, 0, 0);
         label.visible = false;
         label.material.color = this.color;
-        label.material.depthTest = false;
+        // label.material.depthTest = false;
         label.material.sizeAttenuation = false;
         label.scale.multiplyScalar(0.002);
         this.add(label);

package/SpriteText.js

@@ -8,6 +8,7 @@ import { Sprite, SpriteMaterial, Texture, LinearFilter } from "three";
 export default class SpriteText extends Sprite {
     constructor(text = '', textHeight = 10, color = 'rgba(255, 255, 255, 1)') {
         super(new SpriteMaterial());
+        this.material.alphaTest = 0.1;
         this._text = `${text}`;
         this._textHeight = textHeight;
         this._color = color;

package/SpriteText.ts

@@ -12,6 +12,7 @@ export default class SpriteText extends Sprite {
     constructor(text = '', textHeight = 10, color: `#${string}` | `rgba(${string})` = 'rgba(255, 255, 255, 1)') {
         super(new SpriteMaterial());
 
+        this.material.alphaTest = 0.1;
         this._text = `${text}`;
         this._textHeight = textHeight;
         this._color = color;

package/SpriteText2.js

@@ -9,6 +9,7 @@ import { LinearFilter, Sprite, Texture } from 'three';
 export default class SpriteText2 extends Sprite {
     constructor(text = '', textHeight = 10, color = 'rgba(255, 255, 255, 1)') {
         super();
+        this.material.alphaTest = 0.1;
         this._text = `${text}`;
         this._textHeight = textHeight;
         this._color = color;

package/SpriteText2.ts

@@ -13,6 +13,7 @@ export default class SpriteText2 extends Sprite {
     constructor(text = '', textHeight = 10, color: `rgb(${string})` | `rgba(${string})` | `#${string}` = 'rgba(255, 255, 255, 1)') {
         super();
 
+        this.material.alphaTest = 0.1;
         this._text = `${text}`;
         this._textHeight = textHeight;
         this._color = color;

package/ThreeBase.d.ts

@@ -1,11 +1,13 @@
-import { AxesHelper, BufferGeometry, Camera, EventDispatcher, GridHelper, Object3D, Scene, Texture, Vector2, Vector3, WebGLRenderer, WebGLRenderTarget } from "three";
+import { AxesHelper, BufferGeometry, Camera, DepthTexture, EventDispatcher, GridHelper, Object3D, Scene, Texture, Vector2, Vector3, WebGLRenderer, WebGLRenderTarget } from "three";
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 import ThreeMouse from "./ThreeMouse";
 import Transition from "./Transition";
 export default class ThreeBase extends EventDispatcher {
     constructor();
-    renderTarget: WebGLRenderTarget;
-    renderTarget2: WebGLRenderTarget;
+    baseDepthTexture: DepthTexture;
+    baseRenderTarget: WebGLRenderTarget<Texture>;
+    renderTarget: WebGLRenderTarget<Texture>;
+    renderTarget2: WebGLRenderTarget<Texture>;
     tempVector2: Vector2;
     tempVector3: Vector3;
     size: Vector2;
@@ -58,4 +60,5 @@ export default class ThreeBase extends EventDispatcher {
     renderTargetgaussBlur(rendererTarget: WebGLRenderTarget, radius: number, opacity: number): void;
     renderTargetAddGlow(renderTarget: WebGLRenderTarget, width: number, color: string): void;
     renderRendererTarget(renderTarget: WebGLRenderTarget, alpha?: boolean): void;
+    renderTexture(texture: Texture, alpha?: boolean): void;
 }

package/ThreeBase.js

@@ -5,7 +5,7 @@
  * @Last Modified time: 2023-05-23 23:54:13
  */
 import { round } from "lodash";
-import { AxesHelper, EventDispatcher, GridHelper, LinearFilter, Mesh, MOUSE, NoBlending, NormalBlending, PerspectiveCamera, RGBAFormat, Scene, TOUCH, Vector2, Vector3, WebGLRenderer, WebGLRenderTarget } from "three";
+import { AxesHelper, DepthFormat, DepthTexture, EventDispatcher, GridHelper, LinearFilter, Mesh, MOUSE, NoBlending, NormalBlending, PerspectiveCamera, RGBAFormat, Scene, SRGBColorSpace, 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 { clearShader, coptyShader, fullScreenMesh, gaussBlurShader, strokeShader } from "./shaders";
@@ -21,6 +21,31 @@ export default class ThreeBase extends EventDispatcher {
         super();
         this.init();
     }
+    // 基础深度纹理
+    baseDepthTexture = (() => {
+        const baseDepthTexture = new DepthTexture(4096, 4096);
+        baseDepthTexture.format = DepthFormat;
+        baseDepthTexture.type = UnsignedShortType;
+        baseDepthTexture.anisotropy = 16;
+        return baseDepthTexture;
+    })();
+    // TODO 渲染目标的颜色空间问题 还没有处理好
+    // 基础纹理渲染对象
+    baseRenderTarget = new WebGLRenderTarget(128, 128, {
+        minFilter: LinearFilter,
+        magFilter: LinearFilter,
+        format: RGBAFormat,
+        stencilBuffer: false,
+        depthTexture: this.baseDepthTexture,
+        anisotropy: 16,
+        colorSpace: SRGBColorSpace,
+        // | typeof NoColorSpace
+        // | typeof SRGBColorSpace
+        // | typeof LinearSRGBColorSpace
+        // | typeof DisplayP3ColorSpace;
+        // encoding: sRGBEncoding
+        // LinearEncoding | typeof sRGBEncoding;
+    });
     // 公用渲染目标1
     renderTarget = new WebGLRenderTarget(128, 128, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
     // 渲染目标2
@@ -100,10 +125,11 @@ export default class ThreeBase extends EventDispatcher {
         }
         this.renderer.setPixelRatio(window.devicePixelRatio);
         this.renderer.setSize(width, height);
+        this.baseRenderTarget.setSize(width, height);
         this.size.set(width, height);
         // 渲染场景
-        this.renderer.clear();
-        this.renderer.render(this.scene, this.camera);
+        // this.renderer.clear();
+        // this.renderer.render(this.scene, this.camera);
     }
     // 控制器的位置缓动的计算的顶点对象
     controlsPosition = (() => {
@@ -261,14 +287,20 @@ export default class ThreeBase extends EventDispatcher {
         if (this.controls.enabled) {
             this.controls.update();
         }
-        this.renderer.clear();
         // 渲染场景
         this.dispatchEvent({ type: "beforeRender" });
+        //TODO 渲染了2次, 还有优化空间
+        this.renderer.setRenderTarget(this.baseRenderTarget);
+        this.renderer.clear();
         this.renderer.render(this.scene, this.camera);
+        this.renderer.setRenderTarget(null);
+        this.renderer.clear();
+        this.renderRendererTarget(this.baseRenderTarget);
+        // this.renderer.render(this.scene, this.camera);
         // 查找需要绘制描边的对象,并且绘制描边
         this.scene.traverse(obj => {
-            stroke_pass(this.renderer, this.camera, obj);
-            glow_pass(this.renderer, this.camera, obj);
+            stroke_pass(this.renderer, this.camera, obj, this.baseDepthTexture);
+            glow_pass(this.renderer, this.camera, obj, this.baseDepthTexture);
         });
         this.dispatchEvent({ type: "afterRender" });
     }
@@ -401,4 +433,12 @@ export default class ThreeBase extends EventDispatcher {
         coptyShader.blending = alpha ? NoBlending : NormalBlending;
         fullScreenMesh.render(this.renderer);
     }
+    // 渲染纹理
+    renderTexture(texture, alpha = false) {
+        coptyShader.uniforms.map.value = texture;
+        coptyShader.uniforms.opacity.value = 1.0;
+        fullScreenMesh.material = coptyShader;
+        coptyShader.blending = alpha ? NoBlending : NormalBlending;
+        fullScreenMesh.render(this.renderer);
+    }
 }

package/ThreeBase.ts

@@ -6,7 +6,7 @@
  */
 
 import { round } from "lodash";
-import { AxesHelper, BufferGeometry, Camera, EventDispatcher, GridHelper, LinearFilter, Mesh, MeshBasicMaterial, MOUSE, NoBlending, NormalBlending, Object3D, PerspectiveCamera, RGBAFormat, Scene, Texture, TOUCH, Vector2, Vector3, WebGLRenderer, WebGLRenderTarget } from "three";
+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 { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 import { generateUUID } from "three/src/math/MathUtils";
 import { clearShader, coptyShader, fullScreenMesh, gaussBlurShader, strokeShader } from "./shaders";
@@ -25,6 +25,33 @@ export default class ThreeBase extends EventDispatcher {
         this.init();
     }
 
+    // 基础深度纹理
+    baseDepthTexture = (() => {
+        const baseDepthTexture = new DepthTexture(4096, 4096);
+        baseDepthTexture.format = DepthFormat;
+        baseDepthTexture.type = UnsignedShortType;
+        baseDepthTexture.anisotropy = 16;
+        return baseDepthTexture;
+    })();
+
+    // TODO 渲染目标的颜色空间问题 还没有处理好
+    // 基础纹理渲染对象
+    baseRenderTarget = new WebGLRenderTarget(128, 128, {
+        minFilter: LinearFilter,
+        magFilter: LinearFilter,
+        format: RGBAFormat,
+        stencilBuffer: false,
+        depthTexture: this.baseDepthTexture,
+        anisotropy: 16,
+        colorSpace: SRGBColorSpace,
+        // | typeof NoColorSpace
+        // | typeof SRGBColorSpace
+        // | typeof LinearSRGBColorSpace
+        // | typeof DisplayP3ColorSpace;
+        // encoding: sRGBEncoding
+        // LinearEncoding | typeof sRGBEncoding;
+    });
+
     // 公用渲染目标1
     renderTarget = new WebGLRenderTarget(128, 128, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
 
@@ -121,10 +148,13 @@ export default class ThreeBase extends EventDispatcher {
 
         this.renderer.setPixelRatio(window.devicePixelRatio);
         this.renderer.setSize(width, height);
+
+        this.baseRenderTarget.setSize(width, height);
+
         this.size.set(width, height);
         // 渲染场景
-        this.renderer.clear();
-        this.renderer.render(this.scene, this.camera);
+        // this.renderer.clear();
+        // this.renderer.render(this.scene, this.camera);
     }
 
     // 控制器的位置缓动的计算的顶点对象
@@ -314,16 +344,23 @@ export default class ThreeBase extends EventDispatcher {
             this.controls.update();
         }
 
-        this.renderer.clear();
-
         // 渲染场景
         this.dispatchEvent({ type: "beforeRender" });
+
+        //TODO 渲染了2次, 还有优化空间
+        this.renderer.setRenderTarget(this.baseRenderTarget);
+        this.renderer.clear();
         this.renderer.render(this.scene, this.camera);
 
+        this.renderer.setRenderTarget(null);
+        this.renderer.clear();
+        this.renderRendererTarget(this.baseRenderTarget);
+        // this.renderer.render(this.scene, this.camera);
+
         // 查找需要绘制描边的对象,并且绘制描边
         this.scene.traverse(obj => {
-            stroke_pass(this.renderer, this.camera, obj);
-            glow_pass(this.renderer, this.camera, obj);
+            stroke_pass(this.renderer, this.camera, obj, this.baseDepthTexture);
+            glow_pass(this.renderer, this.camera, obj, this.baseDepthTexture);
         });
 
         this.dispatchEvent({ type: "afterRender" });
@@ -482,4 +519,13 @@ export default class ThreeBase extends EventDispatcher {
         fullScreenMesh.render(this.renderer);
     }
 
+    // 渲染纹理
+    renderTexture(texture: Texture, alpha: boolean = false) {
+        coptyShader.uniforms.map.value = 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.13",
+    "version": "2.0.15",
     "description": "three 3d three-base",
     "repository": {
         "type": "git",
@@ -35,7 +35,7 @@
     "dependencies": {
         "apng-js": "^1",
         "lodash": "^4",
-        "three": "^0.152.0",
+        "three": "^0.154.0",
         "dexie": "^3",
         "vite": "*",
         "html2canvas": "^1.4.1"

package/pass/glow_pass.d.ts

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

package/pass/glow_pass.js

@@ -4,10 +4,31 @@
  * @Last Modified by: xiaosihan
  * @Last Modified time: 2023-05-09 02:33:28
  */
-import { LinearFilter, RGBAFormat, Vector2, WebGLRenderTarget, ShaderMaterial, NoBlending, Scene, RawShaderMaterial, Color, NormalBlending, ShaderChunk } from "three";
+import { LinearFilter, RGBAFormat, Vector2, WebGLRenderTarget, ShaderMaterial, NoBlending, Scene, RawShaderMaterial, Color, NormalBlending, ShaderChunk, DepthTexture, DepthFormat, UnsignedShortType } from "three";
 import FullScreenQuad from "./FullScreenQuad";
+// 选中对象的深度纹理
+const selectDepthTexture = (() => {
+    const baseDepthTexture = new DepthTexture(4096, 4096);
+    baseDepthTexture.format = DepthFormat;
+    baseDepthTexture.type = UnsignedShortType;
+    baseDepthTexture.anisotropy = 16;
+    return baseDepthTexture;
+})();
 // 选中对象的纹理
-const selectTextureTarget = new WebGLRenderTarget(512, 512, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
+const selectTextureTarget = new WebGLRenderTarget(512, 512, {
+    minFilter: LinearFilter,
+    magFilter: LinearFilter,
+    format: RGBAFormat,
+    depthTexture: selectDepthTexture,
+    anisotropy: 16,
+});
+// 深度测试后的选中纹理
+const selectDethpTestTextureTarget = new WebGLRenderTarget(512, 512, {
+    minFilter: LinearFilter,
+    magFilter: LinearFilter,
+    format: RGBAFormat,
+    anisotropy: 16,
+});
 // 由于不能同时读写自己的纹理 
 const blur1TextureTarget = new WebGLRenderTarget(512, 512, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
 // 所以需要用2个模糊纹理相互读写
@@ -15,6 +36,44 @@ const blur2TextureTarget = new WebGLRenderTarget(512, 512, { minFilter: LinearFi
 const size = new Vector2();
 // 创建一个渲染工具 用于处理纹理
 const fsQuad = new FullScreenQuad(); // 渲染辅助器
+//深度比对纹理
+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 = vec4(position, 1.0);
+            // gl_Position = projectionMatrix * modelViewMatrix * instanceMatrix * vec4(position, 1.0);
+            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;
+            }
+            gl_FragColor = texture2D(map, vUv);
+            ${ShaderChunk.logdepthbuf_fragment}
+        }
+    `,
+    blending: NoBlending,
+    depthTest: true,
+    depthWrite: true,
+    transparent: true
+});
 // 抗锯齿着色器
 const FXAAShaderMaterial = new ShaderMaterial({
     uniforms: {
@@ -374,10 +433,39 @@ const filterSelectShader = new RawShaderMaterial({
     depthWrite: false,
     transparent: true
 });
+const copyShader = new ShaderMaterial({
+    uniforms: {
+        map: { value: null }, // 贴图纹理
+    },
+    vertexShader: `
+        ${ShaderChunk.common}
+        ${ShaderChunk.logdepthbuf_pars_vertex}
+        varying vec2 vUv;
+        void main() {
+            vUv = uv;
+            // gl_Position = vec4(position, 1.0);
+            // gl_Position = projectionMatrix * modelViewMatrix * instanceMatrix * vec4(position, 1.0);
+            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+            ${ShaderChunk.logdepthbuf_vertex}
+        }
+    `,
+    fragmentShader: `
+        ${ShaderChunk.logdepthbuf_pars_fragment}
+        uniform sampler2D map;
+        varying vec2 vUv;
+        void main() {
+            gl_FragColor = texture2D(map, vUv);
+            ${ShaderChunk.logdepthbuf_fragment}
+        }
+    `,
+    depthTest: true,
+    depthWrite: true,
+    transparent: true
+});
 // 场景对象
 const scene = new Scene();
 // 对象发光
-export default function glow_pass(renderer, camera, object3d) {
+export default function glow_pass(renderer, camera, object3d, baseDepthTexture) {
     const { glow_enable = false, glow_color = "#04fa12", glow_width = 1, glow_opacity = 1 } = object3d.userData;
     if (!glow_enable || glow_width === 0) {
         return;
@@ -387,6 +475,7 @@ export default function glow_pass(renderer, camera, object3d) {
     // 设置选中目标的帧缓冲区
     renderer.getSize(size);
     selectTextureTarget.setSize(size.x, size.y);
+    selectDethpTestTextureTarget.setSize(size.x, size.y);
     blur1TextureTarget.setSize(size.x, size.y);
     blur2TextureTarget.setSize(size.x, size.y);
     renderer.setRenderTarget(selectTextureTarget);
@@ -400,9 +489,16 @@ export default function glow_pass(renderer, camera, object3d) {
     //描边颜色
     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;
+    depthTestShader.uniforms.baseDepth.value = baseDepthTexture;
+    depthTestShader.uniforms.selectDepth.value = selectDepthTexture;
+    fsQuad.render(renderer, depthTestShader);
     //一次描边
     renderer.setRenderTarget(blur1TextureTarget);
-    blurShader.uniforms.tDiffuse.value = selectTextureTarget.texture;
+    blurShader.uniforms.tDiffuse.value = selectDethpTestTextureTarget.texture;
     blurShader.uniforms.opacity.value = 1.0;
     fsQuad.render(renderer, blurShader);
     //二次描边
@@ -456,7 +552,7 @@ export default function glow_pass(renderer, camera, object3d) {
     fsQuad.render(renderer, FXAAShaderMaterial);
     // 还原帧缓冲区 减去原始纹理保留描边
     renderer.setRenderTarget(originRenderTarget);
-    filterSelectShader.uniforms.selectTexture.value = selectTextureTarget.texture;
+    filterSelectShader.uniforms.selectTexture.value = selectDethpTestTextureTarget.texture;
     filterSelectShader.uniforms.blurTexture.value = blur1TextureTarget.texture;
     filterSelectShader.uniforms.opacity.value = glow_opacity;
     filterSelectShader.blending = NormalBlending; // 与有的纹理融合计算 保留前面通道传递下来的纹理

package/pass/glow_pass.ts

@@ -5,11 +5,35 @@
  * @Last Modified time: 2023-05-09 02:33:28
  */
 
-import { Camera, LinearFilter, Object3D, RGBAFormat, Vector2, WebGLRenderTarget, WebGLRenderer, ShaderMaterial, NoBlending, Scene, RawShaderMaterial, Color, NormalBlending, ShaderChunk } from "three";
+import { Camera, LinearFilter, Object3D, RGBAFormat, Vector2, WebGLRenderTarget, WebGLRenderer, ShaderMaterial, NoBlending, Scene, RawShaderMaterial, Color, NormalBlending, ShaderChunk, DepthTexture, DepthFormat, UnsignedShortType } from "three";
 import FullScreenQuad from "./FullScreenQuad";
 
+
+// 选中对象的深度纹理
+const selectDepthTexture = (() => {
+    const baseDepthTexture = new DepthTexture(4096, 4096);
+    baseDepthTexture.format = DepthFormat;
+    baseDepthTexture.type = UnsignedShortType;
+    baseDepthTexture.anisotropy = 16;
+    return baseDepthTexture;
+})();
+
 // 选中对象的纹理
-const selectTextureTarget = new WebGLRenderTarget(512, 512, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
+const selectTextureTarget = new WebGLRenderTarget(512, 512, {
+    minFilter: LinearFilter,
+    magFilter: LinearFilter,
+    format: RGBAFormat,
+    depthTexture: selectDepthTexture,
+    anisotropy: 16,
+});
+
+// 深度测试后的选中纹理
+const selectDethpTestTextureTarget = new WebGLRenderTarget(512, 512, {
+    minFilter: LinearFilter,
+    magFilter: LinearFilter,
+    format: RGBAFormat,
+    anisotropy: 16,
+});
 
 // 由于不能同时读写自己的纹理 
 const blur1TextureTarget = new WebGLRenderTarget(512, 512, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
@@ -22,6 +46,46 @@ const size = new Vector2();
 // 创建一个渲染工具 用于处理纹理
 const fsQuad = new FullScreenQuad(); // 渲染辅助器
 
+
+//深度比对纹理
+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 = vec4(position, 1.0);
+            // gl_Position = projectionMatrix * modelViewMatrix * instanceMatrix * vec4(position, 1.0);
+            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;
+            }
+            gl_FragColor = texture2D(map, vUv);
+            ${ShaderChunk.logdepthbuf_fragment}
+        }
+    `,
+    blending: NoBlending, // 渲染时不与背景融合计算 直接替换
+    depthTest: true,
+    depthWrite: true,
+    transparent: true
+});
+
 // 抗锯齿着色器
 const FXAAShaderMaterial = new ShaderMaterial({
     uniforms: {
@@ -384,11 +448,41 @@ const filterSelectShader = new RawShaderMaterial({
     transparent: true
 });
 
+const copyShader = new ShaderMaterial({
+    uniforms: {
+        map: { value: null }, // 贴图纹理
+    },
+    vertexShader: `
+        ${ShaderChunk.common}
+        ${ShaderChunk.logdepthbuf_pars_vertex}
+        varying vec2 vUv;
+        void main() {
+            vUv = uv;
+            // gl_Position = vec4(position, 1.0);
+            // gl_Position = projectionMatrix * modelViewMatrix * instanceMatrix * vec4(position, 1.0);
+            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+            ${ShaderChunk.logdepthbuf_vertex}
+        }
+    `,
+    fragmentShader: `
+        ${ShaderChunk.logdepthbuf_pars_fragment}
+        uniform sampler2D map;
+        varying vec2 vUv;
+        void main() {
+            gl_FragColor = texture2D(map, vUv);
+            ${ShaderChunk.logdepthbuf_fragment}
+        }
+    `,
+    depthTest: true,
+    depthWrite: true,
+    transparent: true
+});
+
 // 场景对象
 const scene = new Scene();
 
 // 对象发光
-export default function glow_pass(renderer: WebGLRenderer, camera: Camera, object3d: Object3D) {
+export default function glow_pass(renderer: WebGLRenderer, camera: Camera, object3d: Object3D, baseDepthTexture: DepthTexture) {
 
     const { glow_enable = false, glow_color = "#04fa12", glow_width = 1, glow_opacity = 1 } = object3d.userData;
 
@@ -402,6 +496,7 @@ export default function glow_pass(renderer: WebGLRenderer, camera: Camera, objec
     // 设置选中目标的帧缓冲区
     renderer.getSize(size);
     selectTextureTarget.setSize(size.x, size.y);
+    selectDethpTestTextureTarget.setSize(size.x, size.y);
     blur1TextureTarget.setSize(size.x, size.y);
     blur2TextureTarget.setSize(size.x, size.y);
 
@@ -418,12 +513,22 @@ export default function glow_pass(renderer: WebGLRenderer, camera: Camera, objec
     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;
+    depthTestShader.uniforms.baseDepth.value = baseDepthTexture;
+    depthTestShader.uniforms.selectDepth.value = selectDepthTexture;
+    fsQuad.render(renderer, depthTestShader);
+
     //一次描边
     renderer.setRenderTarget(blur1TextureTarget);
-    blurShader.uniforms.tDiffuse.value = selectTextureTarget.texture;
+    blurShader.uniforms.tDiffuse.value = selectDethpTestTextureTarget.texture;
     blurShader.uniforms.opacity.value = 1.0;
     fsQuad.render(renderer, blurShader);
 
+
+
     //二次描边
     renderer.setRenderTarget(blur2TextureTarget);
     blurShader.uniforms.tDiffuse.value = blur1TextureTarget.texture;
@@ -485,7 +590,7 @@ export default function glow_pass(renderer: WebGLRenderer, camera: Camera, objec
 
     // 还原帧缓冲区 减去原始纹理保留描边
     renderer.setRenderTarget(originRenderTarget);
-    filterSelectShader.uniforms.selectTexture.value = selectTextureTarget.texture;
+    filterSelectShader.uniforms.selectTexture.value = selectDethpTestTextureTarget.texture;
     filterSelectShader.uniforms.blurTexture.value = blur1TextureTarget.texture;
     filterSelectShader.uniforms.opacity.value = glow_opacity;
     filterSelectShader.blending = NormalBlending; // 与有的纹理融合计算 保留前面通道传递下来的纹理

package/pass/stroke_pass.d.ts

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

package/pass/stroke_pass.js

@@ -4,10 +4,31 @@
  * @Last Modified by: xiaosihan
  * @Last Modified time: 2023-05-09 02:33:28
  */
-import { LinearFilter, RGBAFormat, Vector2, WebGLRenderTarget, ShaderMaterial, NoBlending, Scene, RawShaderMaterial, Color, NormalBlending, ShaderChunk } from "three";
+import { LinearFilter, RGBAFormat, Vector2, WebGLRenderTarget, ShaderMaterial, NoBlending, Scene, RawShaderMaterial, Color, NormalBlending, ShaderChunk, DepthTexture, DepthFormat, UnsignedShortType } from "three";
 import FullScreenQuad from "./FullScreenQuad";
+// 选中对象的深度纹理
+const selectDepthTexture = (() => {
+    const baseDepthTexture = new DepthTexture(4096, 4096);
+    baseDepthTexture.format = DepthFormat;
+    baseDepthTexture.type = UnsignedShortType;
+    baseDepthTexture.anisotropy = 16;
+    return baseDepthTexture;
+})();
 // 选中对象的纹理
-const selectTextureTarget = new WebGLRenderTarget(512, 512, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
+const selectTextureTarget = new WebGLRenderTarget(512, 512, {
+    minFilter: LinearFilter,
+    magFilter: LinearFilter,
+    format: RGBAFormat,
+    depthTexture: selectDepthTexture,
+    anisotropy: 16,
+});
+// 深度测试后的选中纹理
+const selectDethpTestTextureTarget = new WebGLRenderTarget(512, 512, {
+    minFilter: LinearFilter,
+    magFilter: LinearFilter,
+    format: RGBAFormat,
+    anisotropy: 16,
+});
 // 由于不能同时读写自己的纹理 
 const blur1TextureTarget = new WebGLRenderTarget(512, 512, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
 // 所以需要用2个模糊纹理相互读写
@@ -15,6 +36,44 @@ const blur2TextureTarget = new WebGLRenderTarget(512, 512, { minFilter: LinearFi
 const size = new Vector2();
 // 创建一个渲染工具 用于处理纹理
 const fsQuad = new FullScreenQuad(); // 渲染辅助器
+//深度比对纹理
+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 = vec4(position, 1.0);
+            // gl_Position = projectionMatrix * modelViewMatrix * instanceMatrix * vec4(position, 1.0);
+            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;
+            }
+            gl_FragColor = texture2D(map, vUv);
+            ${ShaderChunk.logdepthbuf_fragment}
+        }
+    `,
+    blending: NoBlending,
+    depthTest: true,
+    depthWrite: true,
+    transparent: true
+});
 // 抗锯齿着色器
 const FXAAShaderMaterial = new ShaderMaterial({
     uniforms: {
@@ -371,10 +430,39 @@ const filterSelectShader = new RawShaderMaterial({
     depthWrite: false,
     transparent: true
 });
+const copyShader = new ShaderMaterial({
+    uniforms: {
+        map: { value: null }, // 贴图纹理
+    },
+    vertexShader: `
+        ${ShaderChunk.common}
+        ${ShaderChunk.logdepthbuf_pars_vertex}
+        varying vec2 vUv;
+        void main() {
+            vUv = uv;
+            // gl_Position = vec4(position, 1.0);
+            // gl_Position = projectionMatrix * modelViewMatrix * instanceMatrix * vec4(position, 1.0);
+            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+            ${ShaderChunk.logdepthbuf_vertex}
+        }
+    `,
+    fragmentShader: `
+        ${ShaderChunk.logdepthbuf_pars_fragment}
+        uniform sampler2D map;
+        varying vec2 vUv;
+        void main() {
+            gl_FragColor = texture2D(map, vUv);
+            ${ShaderChunk.logdepthbuf_fragment}
+        }
+    `,
+    depthTest: true,
+    depthWrite: true,
+    transparent: true
+});
 // 场景对象
 const scene = new Scene();
 // 对象描边
-export default function stroke_pass(renderer, camera, object3d) {
+export default function stroke_pass(renderer, camera, object3d, baseDepthTexture) {
     const { stroke_enable = false, stroke_color = "#04fa12", stroke_width = 1 } = object3d.userData;
     if (!stroke_enable || stroke_width === 0) {
         return;
@@ -384,6 +472,7 @@ export default function stroke_pass(renderer, camera, object3d) {
     // 设置选中目标的帧缓冲区
     renderer.getSize(size);
     selectTextureTarget.setSize(size.x, size.y);
+    selectDethpTestTextureTarget.setSize(size.x, size.y);
     blur1TextureTarget.setSize(size.x, size.y);
     blur2TextureTarget.setSize(size.x, size.y);
     renderer.setRenderTarget(selectTextureTarget);
@@ -397,9 +486,16 @@ export default function stroke_pass(renderer, camera, object3d) {
     //描边颜色
     blurShader.uniforms.color.value.set(stroke_color);
     blurShader.uniforms.width.value = stroke_width / 4;
+    //深度测试
+    renderer.setRenderTarget(selectDethpTestTextureTarget);
+    renderer.clear();
+    depthTestShader.uniforms.map.value = selectTextureTarget.texture;
+    depthTestShader.uniforms.baseDepth.value = baseDepthTexture;
+    depthTestShader.uniforms.selectDepth.value = selectDepthTexture;
+    fsQuad.render(renderer, depthTestShader);
     //一次描边
     renderer.setRenderTarget(blur1TextureTarget);
-    blurShader.uniforms.tDiffuse.value = selectTextureTarget.texture;
+    blurShader.uniforms.tDiffuse.value = selectDethpTestTextureTarget.texture;
     fsQuad.render(renderer, blurShader);
     //二次描边
     renderer.setRenderTarget(blur2TextureTarget);
@@ -419,7 +515,7 @@ export default function stroke_pass(renderer, camera, object3d) {
     fsQuad.render(renderer, FXAAShaderMaterial);
     // 还原帧缓冲区 减去原始纹理保留描边
     renderer.setRenderTarget(originRenderTarget);
-    filterSelectShader.uniforms.selectTexture.value = selectTextureTarget.texture;
+    filterSelectShader.uniforms.selectTexture.value = selectDethpTestTextureTarget.texture;
     filterSelectShader.uniforms.blurTexture.value = blur1TextureTarget.texture;
     filterSelectShader.blending = NormalBlending; // 与有的纹理融合计算 保留前面通道传递下来的纹理
     fsQuad.render(renderer, filterSelectShader);

package/pass/stroke_pass.ts

@@ -5,11 +5,35 @@
  * @Last Modified time: 2023-05-09 02:33:28
  */
 
-import { Camera, LinearFilter, Object3D, RGBAFormat, Vector2, WebGLRenderTarget, WebGLRenderer, ShaderMaterial, NoBlending, Scene, RawShaderMaterial, Color, NormalBlending, ShaderChunk } from "three";
+import { Camera, LinearFilter, Object3D, RGBAFormat, Vector2, WebGLRenderTarget, WebGLRenderer, ShaderMaterial, NoBlending, Scene, RawShaderMaterial, Color, NormalBlending, ShaderChunk, DepthTexture, DepthFormat, UnsignedShortType } from "three";
 import FullScreenQuad from "./FullScreenQuad";
 
+
+// 选中对象的深度纹理
+const selectDepthTexture = (() => {
+    const baseDepthTexture = new DepthTexture(4096, 4096);
+    baseDepthTexture.format = DepthFormat;
+    baseDepthTexture.type = UnsignedShortType;
+    baseDepthTexture.anisotropy = 16;
+    return baseDepthTexture;
+})();
+
 // 选中对象的纹理
-const selectTextureTarget = new WebGLRenderTarget(512, 512, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
+const selectTextureTarget = new WebGLRenderTarget(512, 512, {
+    minFilter: LinearFilter,
+    magFilter: LinearFilter,
+    format: RGBAFormat,
+    depthTexture: selectDepthTexture,
+    anisotropy: 16,
+});
+
+// 深度测试后的选中纹理
+const selectDethpTestTextureTarget = new WebGLRenderTarget(512, 512, {
+    minFilter: LinearFilter,
+    magFilter: LinearFilter,
+    format: RGBAFormat,
+    anisotropy: 16,
+});
 
 // 由于不能同时读写自己的纹理 
 const blur1TextureTarget = new WebGLRenderTarget(512, 512, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
@@ -22,6 +46,45 @@ const size = new Vector2();
 // 创建一个渲染工具 用于处理纹理
 const fsQuad = new FullScreenQuad(); // 渲染辅助器
 
+//深度比对纹理
+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 = vec4(position, 1.0);
+            // gl_Position = projectionMatrix * modelViewMatrix * instanceMatrix * vec4(position, 1.0);
+            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;
+            }
+            gl_FragColor = texture2D(map, vUv);
+            ${ShaderChunk.logdepthbuf_fragment}
+        }
+    `,
+    blending: NoBlending, // 渲染时不与背景融合计算 直接替换
+    depthTest: true,
+    depthWrite: true,
+    transparent: true
+});
+
 // 抗锯齿着色器
 const FXAAShaderMaterial = new ShaderMaterial({
     uniforms: {
@@ -381,11 +444,41 @@ const filterSelectShader = new RawShaderMaterial({
     transparent: true
 });
 
+const copyShader = new ShaderMaterial({
+    uniforms: {
+        map: { value: null }, // 贴图纹理
+    },
+    vertexShader: `
+        ${ShaderChunk.common}
+        ${ShaderChunk.logdepthbuf_pars_vertex}
+        varying vec2 vUv;
+        void main() {
+            vUv = uv;
+            // gl_Position = vec4(position, 1.0);
+            // gl_Position = projectionMatrix * modelViewMatrix * instanceMatrix * vec4(position, 1.0);
+            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+            ${ShaderChunk.logdepthbuf_vertex}
+        }
+    `,
+    fragmentShader: `
+        ${ShaderChunk.logdepthbuf_pars_fragment}
+        uniform sampler2D map;
+        varying vec2 vUv;
+        void main() {
+            gl_FragColor = texture2D(map, vUv);
+            ${ShaderChunk.logdepthbuf_fragment}
+        }
+    `,
+    depthTest: true,
+    depthWrite: true,
+    transparent: true
+});
+
 // 场景对象
 const scene = new Scene();
 
 // 对象描边
-export default function stroke_pass(renderer: WebGLRenderer, camera: Camera, object3d: Object3D) {
+export default function stroke_pass(renderer: WebGLRenderer, camera: Camera, object3d: Object3D, baseDepthTexture: DepthTexture) {
 
     const { stroke_enable = false, stroke_color = "#04fa12", stroke_width = 1 } = object3d.userData;
     if (!stroke_enable || stroke_width === 0) {
@@ -398,6 +491,7 @@ export default function stroke_pass(renderer: WebGLRenderer, camera: Camera, obj
     // 设置选中目标的帧缓冲区
     renderer.getSize(size);
     selectTextureTarget.setSize(size.x, size.y);
+    selectDethpTestTextureTarget.setSize(size.x, size.y);
     blur1TextureTarget.setSize(size.x, size.y);
     blur2TextureTarget.setSize(size.x, size.y);
     renderer.setRenderTarget(selectTextureTarget);
@@ -413,9 +507,19 @@ export default function stroke_pass(renderer: WebGLRenderer, camera: Camera, obj
     blurShader.uniforms.color.value.set(stroke_color);
     blurShader.uniforms.width.value = stroke_width / 4;
 
+
+    //深度测试
+    renderer.setRenderTarget(selectDethpTestTextureTarget);
+    renderer.clear();
+    depthTestShader.uniforms.map.value = selectTextureTarget.texture;
+    depthTestShader.uniforms.baseDepth.value = baseDepthTexture;
+    depthTestShader.uniforms.selectDepth.value = selectDepthTexture;
+    fsQuad.render(renderer, depthTestShader);
+
+
     //一次描边
     renderer.setRenderTarget(blur1TextureTarget);
-    blurShader.uniforms.tDiffuse.value = selectTextureTarget.texture;
+    blurShader.uniforms.tDiffuse.value = selectDethpTestTextureTarget.texture;
     fsQuad.render(renderer, blurShader);
 
     //二次描边
@@ -440,7 +544,7 @@ export default function stroke_pass(renderer: WebGLRenderer, camera: Camera, obj
 
     // 还原帧缓冲区 减去原始纹理保留描边
     renderer.setRenderTarget(originRenderTarget);
-    filterSelectShader.uniforms.selectTexture.value = selectTextureTarget.texture;
+    filterSelectShader.uniforms.selectTexture.value = selectDethpTestTextureTarget.texture;
     filterSelectShader.uniforms.blurTexture.value = blur1TextureTarget.texture;
     filterSelectShader.blending = NormalBlending; // 与有的纹理融合计算 保留前面通道传递下来的纹理
     fsQuad.render(renderer, filterSelectShader);

package/tsconfig.json

@@ -10,9 +10,6 @@
             "vite/client",
             "node"
         ],
-        "typeRoots": [
-            "./",
-        ],
         "sourceMap": false,
         "declaration": true,
         "declarationDir": "./",
@@ -28,7 +25,6 @@
         "isolatedModules": false,
         "noEmit": false,
         "noImplicitAny": false,
-        "locale": "zh-cn",
     },
     "include": [
         "./",