three-base 2.0.65 → 2.0.67

package/pass/stroke_pass.js

@@ -1,48 +1,48 @@
-/*
- * @Author: xiaosihan
- * @Date: 2023-05-09 00:35:17
- * @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, 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,
-    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个模糊纹理相互读写
-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: {
-        map: { value: null },
-        baseDepth: { value: null },
-        selectDepth: { value: null }, // 选中的对象深度纹理
-    },
+/*
+ * @Author: xiaosihan
+ * @Date: 2023-05-09 00:35:17
+ * @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, 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,
+    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个模糊纹理相互读写
+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: {
+        map: { value: null }, // 贴图纹理
+        baseDepth: { value: null }, // 整个场景的深度纹理
+        selectDepth: { value: null }, // 选中的对象深度纹理
+    },
     vertexShader: `
         ${ShaderChunk.common}
         ${ShaderChunk.logdepthbuf_pars_vertex}
@@ -54,7 +54,7 @@ const depthTestShader = new ShaderMaterial({
             gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
             ${ShaderChunk.logdepthbuf_vertex}
         }
-    `,
+    `,
     fragmentShader: `
         ${ShaderChunk.logdepthbuf_pars_fragment}
         uniform sampler2D map;
@@ -68,18 +68,18 @@ const depthTestShader = new ShaderMaterial({
             gl_FragColor = texture2D(map, vUv);
             ${ShaderChunk.logdepthbuf_fragment}
         }
-    `,
-    blending: NoBlending,
-    depthTest: true,
-    depthWrite: true,
-    transparent: true
-});
-// 抗锯齿着色器
-const FXAAShaderMaterial = new ShaderMaterial({
-    uniforms: {
-        tDiffuse: { value: null },
-        resolution: { value: new Vector2(1 / 1024, 1 / 1024) }
-    },
+    `,
+    blending: NoBlending, // 渲染时不与背景融合计算 直接替换
+    depthTest: true,
+    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}
@@ -89,7 +89,7 @@ const FXAAShaderMaterial = new ShaderMaterial({
             gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
             ${ShaderChunk.logdepthbuf_vertex}
         }
-    `,
+    `,
     fragmentShader: `
         ${ShaderChunk.logdepthbuf_pars_fragment}
         precision highp float;
@@ -304,49 +304,49 @@ const FXAAShaderMaterial = new ShaderMaterial({
                 );
             ${ShaderChunk.logdepthbuf_fragment}
         }
-    `,
-    blending: NoBlending,
-    depthTest: false,
-    depthWrite: false,
-    transparent: true
-});
-// 描边着色器
-const blurShader = new RawShaderMaterial({
-    uniforms: {
-        tDiffuse: { value: null },
-        color: { value: new Color("#0f0") },
-        width: { value: 1.0 },
-        opacity: { value: 1.0 },
-        resolution: { value: new Vector2(1 / 512, 1 / 512) },
-        offset: {
-            value: [
-                new Vector2(0.000, 1.000),
-                new Vector2(0.259, 0.966),
-                new Vector2(0.500, 0.866),
-                new Vector2(0.707, 0.707),
-                new Vector2(0.866, 0.500),
-                new Vector2(0.966, 0.259),
-                new Vector2(1.000, 0.000),
-                new Vector2(0.966, -0.259),
-                new Vector2(0.866, -0.500),
-                new Vector2(0.707, -0.707),
-                new Vector2(0.500, -0.866),
-                new Vector2(0.259, -0.966),
-                new Vector2(0.000, -1.000),
-                new Vector2(-0.259, -0.966),
-                new Vector2(-0.500, -0.866),
-                new Vector2(-0.707, -0.707),
-                new Vector2(-0.866, -0.500),
-                new Vector2(-0.966, -0.259),
-                new Vector2(-1.000, -0.000),
-                new Vector2(-0.966, 0.259),
-                new Vector2(-0.866, 0.500),
-                new Vector2(-0.707, 0.707),
-                new Vector2(-0.500, 0.866),
-                new Vector2(-0.259, 0.966)
-            ]
-        }
-    },
+    `,
+    blending: NoBlending, // 渲染时不与背景融合计算 直接替换
+    depthTest: false,
+    depthWrite: false,
+    transparent: true
+});
+// 描边着色器
+const blurShader = new RawShaderMaterial({
+    uniforms: {
+        tDiffuse: { value: null },
+        color: { value: new Color("#0f0") }, // 没有被挡住的地方的颜色绿色
+        width: { value: 1.0 },
+        opacity: { value: 1.0 },
+        resolution: { value: new Vector2(1 / 512, 1 / 512) }, // 渲染器的分辨率
+        offset: {
+            value: [
+                new Vector2(0.000, 1.000),
+                new Vector2(0.259, 0.966),
+                new Vector2(0.500, 0.866),
+                new Vector2(0.707, 0.707),
+                new Vector2(0.866, 0.500),
+                new Vector2(0.966, 0.259),
+                new Vector2(1.000, 0.000),
+                new Vector2(0.966, -0.259),
+                new Vector2(0.866, -0.500),
+                new Vector2(0.707, -0.707),
+                new Vector2(0.500, -0.866),
+                new Vector2(0.259, -0.966),
+                new Vector2(0.000, -1.000),
+                new Vector2(-0.259, -0.966),
+                new Vector2(-0.500, -0.866),
+                new Vector2(-0.707, -0.707),
+                new Vector2(-0.866, -0.500),
+                new Vector2(-0.966, -0.259),
+                new Vector2(-1.000, -0.000),
+                new Vector2(-0.966, 0.259),
+                new Vector2(-0.866, 0.500),
+                new Vector2(-0.707, 0.707),
+                new Vector2(-0.500, 0.866),
+                new Vector2(-0.259, 0.966)
+            ]
+        }
+    },
     vertexShader: `
 		attribute vec3 position;
 		attribute vec2 uv;
@@ -354,7 +354,7 @@ const blurShader = new RawShaderMaterial({
 		void main() {
 			vUv = uv;
 			gl_Position = vec4(position, 1.0);
-		}`,
+		}`,
     fragmentShader: `
 		#ifdef GL_ES
 			precision highp float;
@@ -390,18 +390,18 @@ const blurShader = new RawShaderMaterial({
 			} else {
 				gl_FragColor = stroke();
 			}
-		}`,
-    blending: NoBlending,
-    depthTest: false,
-    depthWrite: false,
-    transparent: true
-});
-// 过滤着色器
-const filterSelectShader = new RawShaderMaterial({
-    uniforms: {
-        selectTexture: { value: null },
-        blurTexture: { value: null }
-    },
+		}`,
+    blending: NoBlending, // 渲染时不与背景融合计算 直接替换
+    depthTest: false,
+    depthWrite: false,
+    transparent: true
+});
+// 过滤着色器
+const filterSelectShader = new RawShaderMaterial({
+    uniforms: {
+        selectTexture: { value: null },
+        blurTexture: { value: null }
+    },
     vertexShader: `
 		attribute vec3 position;
 		attribute vec2 uv;
@@ -410,7 +410,7 @@ const filterSelectShader = new RawShaderMaterial({
 			vUv = uv;
 			gl_Position = vec4(position, 1.0);
 		}
-	`,
+	`,
     fragmentShader: `
 		#ifdef GL_ES
 			precision highp float;
@@ -423,16 +423,16 @@ const filterSelectShader = new RawShaderMaterial({
 			gl_FragColor = texture2D(blurTexture, vUv);
 			gl_FragColor.a -= (texture2D(selectTexture, vUv).a);
 		}
-	`,
-    blending: NoBlending,
-    depthTest: false,
-    depthWrite: false,
-    transparent: true
-});
-const copyShader = new ShaderMaterial({
-    uniforms: {
-        map: { value: null }, // 贴图纹理
-    },
+	`,
+    blending: NoBlending, // 渲染时不与背景融合计算 直接替换
+    depthTest: false,
+    depthWrite: false,
+    transparent: true
+});
+const copyShader = new ShaderMaterial({
+    uniforms: {
+        map: { value: null }, // 贴图纹理
+    },
     vertexShader: `
         ${ShaderChunk.common}
         ${ShaderChunk.logdepthbuf_pars_vertex}
@@ -444,7 +444,7 @@ const copyShader = new ShaderMaterial({
             gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
             ${ShaderChunk.logdepthbuf_vertex}
         }
-    `,
+    `,
     fragmentShader: `
         ${ShaderChunk.logdepthbuf_pars_fragment}
         uniform sampler2D map;
@@ -453,78 +453,78 @@ const copyShader = new ShaderMaterial({
             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, baseDepthTexture) {
-    const { stroke_enable = false, stroke_color = "#04fa12", stroke_width = 1 } = object3d.userData;
-    if (!stroke_enable || stroke_width === 0) {
-        return;
-    }
-    // 保存原帧缓冲区
-    const originRenderTarget = renderer.getRenderTarget();
-    // 设置选中目标的帧缓冲区
-    renderer.getSize(size);
-    size.multiplyScalar(window.devicePixelRatio);
-    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);
-    scene.children = [object3d];
-    renderer.clear();
-    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(stroke_color);
-    blurShader.uniforms.width.value = 1;
-    //深度测试
-    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 = selectDethpTestTextureTarget.texture;
-    fsQuad.render(renderer, blurShader);
-    //二次描边
-    renderer.setRenderTarget(blur2TextureTarget);
-    blurShader.uniforms.tDiffuse.value = blur1TextureTarget.texture;
-    fsQuad.render(renderer, blurShader);
-    for (let i = 0; i < stroke_width - 2; i++) {
-        //一次描边
-        renderer.setRenderTarget(blur1TextureTarget);
-        blurShader.uniforms.tDiffuse.value = blur2TextureTarget.texture;
-        fsQuad.render(renderer, blurShader);
-        //二次描边
-        renderer.setRenderTarget(blur2TextureTarget);
-        blurShader.uniforms.tDiffuse.value = blur1TextureTarget.texture;
-        fsQuad.render(renderer, blurShader);
-    }
-    //最后抗锯齿
-    renderer.setRenderTarget(blur1TextureTarget);
-    FXAAShaderMaterial.uniforms.tDiffuse.value = blur2TextureTarget.texture;
-    fsQuad.render(renderer, FXAAShaderMaterial);
-    // 还原帧缓冲区 减去原始纹理保留描边
-    renderer.setRenderTarget(originRenderTarget);
-    filterSelectShader.uniforms.selectTexture.value = selectDethpTestTextureTarget.texture;
-    filterSelectShader.uniforms.blurTexture.value = blur1TextureTarget.texture;
-    filterSelectShader.blending = NormalBlending; // 与有的纹理融合计算 保留前面通道传递下来的纹理
-    fsQuad.render(renderer, filterSelectShader);
-    // 调试代码
-    // renderer.setRenderTarget(null);
-    // renderer.clearDepth();
-    // copyShader.uniforms.tDiffuse.value = blur2TextureTarget.texture;
-    // fsQuad.render(renderer, copyShader);
-    // return;
-}
+    `,
+    depthTest: true,
+    depthWrite: true,
+    transparent: true
+});
+// 场景对象
+const scene = new Scene();
+// 对象描边
+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;
+    }
+    // 保存原帧缓冲区
+    const originRenderTarget = renderer.getRenderTarget();
+    // 设置选中目标的帧缓冲区
+    renderer.getSize(size);
+    size.multiplyScalar(window.devicePixelRatio);
+    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);
+    scene.children = [object3d];
+    renderer.clear();
+    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(stroke_color);
+    blurShader.uniforms.width.value = 1;
+    //深度测试
+    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 = selectDethpTestTextureTarget.texture;
+    fsQuad.render(renderer, blurShader);
+    //二次描边
+    renderer.setRenderTarget(blur2TextureTarget);
+    blurShader.uniforms.tDiffuse.value = blur1TextureTarget.texture;
+    fsQuad.render(renderer, blurShader);
+    for (let i = 0; i < stroke_width - 2; i++) {
+        //一次描边
+        renderer.setRenderTarget(blur1TextureTarget);
+        blurShader.uniforms.tDiffuse.value = blur2TextureTarget.texture;
+        fsQuad.render(renderer, blurShader);
+        //二次描边
+        renderer.setRenderTarget(blur2TextureTarget);
+        blurShader.uniforms.tDiffuse.value = blur1TextureTarget.texture;
+        fsQuad.render(renderer, blurShader);
+    }
+    //最后抗锯齿
+    renderer.setRenderTarget(blur1TextureTarget);
+    FXAAShaderMaterial.uniforms.tDiffuse.value = blur2TextureTarget.texture;
+    fsQuad.render(renderer, FXAAShaderMaterial);
+    // 还原帧缓冲区 减去原始纹理保留描边
+    renderer.setRenderTarget(originRenderTarget);
+    filterSelectShader.uniforms.selectTexture.value = selectDethpTestTextureTarget.texture;
+    filterSelectShader.uniforms.blurTexture.value = blur1TextureTarget.texture;
+    filterSelectShader.blending = NormalBlending; // 与有的纹理融合计算 保留前面通道传递下来的纹理
+    fsQuad.render(renderer, filterSelectShader);
+    // 调试代码
+    // renderer.setRenderTarget(null);
+    // renderer.clearDepth();
+    // copyShader.uniforms.tDiffuse.value = blur2TextureTarget.texture;
+    // fsQuad.render(renderer, copyShader);
+    // return;
+}

package/shaders/FXAAShaderMaterial.d.ts

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

package/shaders/FXAAShaderMaterial.js

@@ -1,16 +1,16 @@
-/*
- * @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) }
-    },
+/*
+ * @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}
@@ -20,7 +20,7 @@ const FXAAShaderMaterial = new ShaderMaterial({
             gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
             ${ShaderChunk.logdepthbuf_vertex}
         }
-    `,
+    `,
     fragmentShader: `
         ${ShaderChunk.logdepthbuf_pars_fragment}
         precision highp float;
@@ -235,10 +235,10 @@ const FXAAShaderMaterial = new ShaderMaterial({
                 );
             ${ShaderChunk.logdepthbuf_fragment}
         }
-    `,
-    blending: NoBlending,
-    depthTest: false,
-    depthWrite: false,
-    transparent: true
-});
-export default FXAAShaderMaterial;
+    `,
+    blending: NoBlending, // 渲染时不与背景融合计算 直接替换
+    depthTest: false,
+    depthWrite: false,
+    transparent: true
+});
+export default FXAAShaderMaterial;

package/shaders.d.ts

@@ -1,17 +1,17 @@
-import { Mesh, OrthographicCamera, ShaderMaterial, WebGLRenderer } from "three";
-declare class FullScreenQuad {
-    constructor();
-    _mesh: Mesh;
-    dispose(): void;
-    render(renderer: WebGLRenderer): void;
-    get material(): import("three").Material | import("three").Material[];
-    set material(value: import("three").Material | import("three").Material[]);
-}
-export declare const fullScreenMesh: FullScreenQuad;
-export declare const orthographicCamera: OrthographicCamera;
-export declare const clearShader: ShaderMaterial;
-export declare const intersectionShader: ShaderMaterial;
-export declare const coptyShader: ShaderMaterial;
-export declare const strokeShader: ShaderMaterial;
-export declare const gaussBlurShader: ShaderMaterial;
-export {};
+import { Mesh, OrthographicCamera, ShaderMaterial, WebGLRenderer } from "three";
+declare class FullScreenQuad {
+    constructor();
+    _mesh: Mesh;
+    dispose(): void;
+    render(renderer: WebGLRenderer): void;
+    get material(): import("three").Material | import("three").Material[];
+    set material(value: import("three").Material | import("three").Material[]);
+}
+export declare const fullScreenMesh: FullScreenQuad;
+export declare const orthographicCamera: OrthographicCamera;
+export declare const clearShader: ShaderMaterial;
+export declare const intersectionShader: ShaderMaterial;
+export declare const coptyShader: ShaderMaterial;
+export declare const strokeShader: ShaderMaterial;
+export declare const gaussBlurShader: ShaderMaterial;
+export {};