three-base 2.0.107 → 2.0.108

package/InstancedMeshBase.d.ts

@@ -18,7 +18,7 @@ export default class InstancedMeshBase extends MeshBase {
     instanceColor: InstancedBufferAttribute;
     reset(...object: Object3D[]): this;
     loadModel(url: string | File | Array<File>, filename?: string): Promise<void>;
-    computeBoundingSphere: import("lodash").DebouncedFuncLeading<() => void>;
+    computeBoundingSphere: import("lodash").DebouncedFunc<() => void>;
     setCount(count?: number): Promise<void>;
     setMatrixAt(index: number, matrix?: Matrix4): Promise<void>;
     setTRS(index: number, { position, rotation, scale, }: {

package/ThreeBase.js

@@ -16,6 +16,7 @@ import { baseTextureToRenderShader, clearShader, copyShader, fullScreenMesh, gau
 import threeLoader from "./threeLoader";
 import threeUtils from "./threeUtils";
 import cover_pass from "./pass/cover_pass";
+import bloom_pass from "./pass/bloom_pass";
 // three.js 的基础对象
 export default class ThreeBase extends EventDispatcher {
     constructor() {
@@ -492,6 +493,8 @@ export default class ThreeBase extends EventDispatcher {
             glow_pass(this.renderer, camera, obj, this.baseDepthTexture);
             cover_pass(this.renderer, camera, obj, this.baseDepthTexture);
         });
+        //后处理发光特效
+        bloom_pass(this.renderer, camera, this.scene, this.baseDepthTexture);
         this.dispatchEvent({ type: "afterRender" });
     }
     renderBindThis = this.render.bind(this);

package/keyContorls.d.ts

@@ -16,7 +16,7 @@ declare class KeyContorls extends EventDispatcher {
     _listeners?: {
         [key: string]: Array<any>;
     };
-    removeEvent: import("lodash").DebouncedFuncLeading<(type: string) => void>;
+    removeEvent: import("lodash").DebouncedFunc<(type: string) => void>;
     addEventListener<T extends string>(type: T, listener: EventListener<{}, T, this>): void;
     addEvent(): void;
     dispose(): void;

package/package.json

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

package/pass/bloom_pass.d.ts

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

package/pass/bloom_pass.js

@@ -0,0 +1,33 @@
+/*
+ * @Author: xiaosihan
+ * @Date: 2024-09-23 21:51:29
+ * @Last Modified by:   xiaosihan
+ * @Last Modified time: 2024-09-23 21:51:29
+ */
+import { DepthTexture, DepthFormat, LinearFilter, RGBAFormat, UnsignedShortType, WebGLRenderTarget, } from "three";
+// 选中对象的深度纹理
+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,
+});
+// 发光后期通道
+export default function bloom_pass(renderer, camera, scene, baseDepthTexture) {
+}

package/pass/cover_pass.js

@@ -10,12 +10,11 @@
  * @Last Modified by: xiaosihan
  * @Last Modified time: 2023-05-09 02:33:28
  */
-import { Color, DepthFormat, DepthTexture, LinearFilter, NoBlending, RGBAFormat, Scene, ShaderChunk, ShaderMaterial, UnsignedShortType, Vector2, WebGLRenderTarget } from "three";
-import copyShader from "../shaders/copyShader";
+import { Color, DepthFormat, DepthTexture, LinearFilter, RGBAFormat, Scene, ShaderChunk, ShaderMaterial, UnsignedShortType, Vector2, WebGLRenderTarget, } from "three";
 import FullScreenQuad from "./FullScreenQuad";
 // 选中对象的深度纹理
 const selectDepthTexture = (() => {
-    const baseDepthTexture = new DepthTexture(4096, 4096);
+    const baseDepthTexture = new DepthTexture(1024, 1024);
     baseDepthTexture.format = DepthFormat;
     baseDepthTexture.type = UnsignedShortType;
     baseDepthTexture.anisotropy = 16;
@@ -47,7 +46,9 @@ const fsQuad = new FullScreenQuad(); // 渲染辅助器
 //深度比对纹理
 const depthTestShader = new ShaderMaterial({
     uniforms: {
-        color: { value: new Color("#000000") },
+        color: { value: new Color("#440000") },
+        opacity: { value: 1 },
+        depthTest: { value: true },
         baseDepth: { value: null },
         selectDepth: { value: null }, // 选中的对象深度纹理
     },
@@ -66,21 +67,31 @@ const depthTestShader = new ShaderMaterial({
     fragmentShader: `
         ${ShaderChunk.logdepthbuf_pars_fragment}
         uniform vec3 color;
+        uniform float opacity;
+        uniform bool depthTest;
         uniform sampler2D baseDepth;
         uniform sampler2D selectDepth;
         varying vec2 vUv;
         void main() {
-            if(texture2D(baseDepth, vUv).r + 0.0001 < texture2D(selectDepth, vUv).r){
-                discard;
+            if( depthTest ){
+                if(texture2D(baseDepth, vUv).r + 0.0001 < texture2D(selectDepth, vUv).r){
+                    discard;
+                }
+                if(texture2D(baseDepth, vUv).r == 1.0){
+                    discard;
+                }
+                gl_FragColor = vec4(color, opacity);
+            }else{
+               if(texture2D(selectDepth, vUv).r < 1.0){
+                    gl_FragColor = vec4(color, opacity);
+               }else{
+                   discard;
+               }
             }
-            if(texture2D(baseDepth, vUv).r == 1.0){
-                discard;
-            }
-            gl_FragColor = vec4(color, 1.0);
+
             ${ShaderChunk.logdepthbuf_fragment}
         }
     `,
-    blending: NoBlending,
     depthTest: true,
     depthWrite: true,
     transparent: true,
@@ -89,7 +100,8 @@ const depthTestShader = new ShaderMaterial({
 const scene = new Scene();
 // 给模型覆盖一层颜色 后处理通道
 export default function cover_pass(renderer, camera, object3d, baseDepthTexture) {
-    const { cover_enable = false, cover_color = "#04fa12", cover_opacity = 1, } = object3d.userData;
+    const { cover_enable = false, cover_color = "#04fa12", cover_opacity = 1, cover_depth_test = true, // 颜色叠加是否开启深度测试
+     } = object3d.userData;
     if (!cover_enable || cover_opacity === 0) {
         return;
     }
@@ -105,23 +117,19 @@ export default function cover_pass(renderer, camera, object3d, baseDepthTexture)
     scene.children = [object3d];
     renderer.clear();
     renderer.render(scene, camera);
-    //深度测试
-    renderer.setRenderTarget(selectDethpTestTextureTarget);
-    renderer.clear();
+    //更具深度测试绘制叠加颜色
+    renderer.setRenderTarget(originRenderTarget);
+    renderer.clearDepth();
     depthTestShader.uniforms.color.value.set(cover_color);
+    depthTestShader.uniforms.opacity.value = cover_opacity;
+    depthTestShader.uniforms.depthTest.value = cover_depth_test;
     depthTestShader.uniforms.baseDepth.value = baseDepthTexture;
     depthTestShader.uniforms.selectDepth.value = selectDepthTexture;
     fsQuad.render(renderer, depthTestShader);
-    // 颜色覆盖绘制到着色器
-    renderer.setRenderTarget(originRenderTarget);
-    renderer.clearDepth();
-    copyShader.uniforms.map.value = selectDethpTestTextureTarget.texture;
-    copyShader.uniforms.opacity.value = cover_opacity;
-    fsQuad.render(renderer, copyShader);
     // 调试代码
     // renderer.setRenderTarget(null);
     // renderer.clearDepth();
-    // copyShader.uniforms.tDiffuse.value = blur2TextureTarget.texture;
+    // copyShader.uniforms.map.value = blur2TextureTarget.texture;
     // fsQuad.render(renderer, copyShader);
     // return;
 }

package/pass/bool_pass.js

@@ -1,7 +0,0 @@
-/*
- * @Author: xiaosihan
- * @Date: 2024-09-23 21:51:29
- * @Last Modified by:   xiaosihan
- * @Last Modified time: 2024-09-23 21:51:29
- */
-// 发光后期通道