three-base 2.0.137 → 2.0.142

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (307) hide show
  1. package/DirectionalLight.d.ts +6 -6
  2. package/DirectionalLight.js +68 -68
  3. package/DirectionalLight.ts +70 -0
  4. package/EventMap.d.ts +103 -0
  5. package/EventMap.js +17 -0
  6. package/EventMap.ts +139 -0
  7. package/EventMesh.d.ts +18 -18
  8. package/EventMesh.js +59 -59
  9. package/EventMesh.ts +60 -0
  10. package/ExtrudeMesh.d.ts +112 -112
  11. package/ExtrudeMesh.js +342 -366
  12. package/ExtrudeMesh.ts +553 -0
  13. package/FPScontrol.d.ts +511 -78
  14. package/FPScontrol.js +1799 -617
  15. package/FPScontrol.ts +1855 -0
  16. package/Fire/Fire.d.ts +28 -28
  17. package/Fire/Fire.js +80 -79
  18. package/Fire/Fire.ts +89 -0
  19. package/Fire/{FireGromtry.d.ts → FireGeometry.d.ts} +9 -9
  20. package/Fire/{FireGromtry.js → FireGeometry.js} +40 -40
  21. package/Fire/FireGeometry.ts +40 -0
  22. package/Fire/FireMaterial.d.ts +28 -28
  23. package/Fire/FireMaterial.js +32 -32
  24. package/Fire/FireMaterial.ts +89 -0
  25. package/Fire/index.d.ts +2 -1
  26. package/Fire/index.js +2 -1
  27. package/Fire/index.ts +2 -0
  28. package/GLTFDracoLoader.d.ts +71 -0
  29. package/GLTFDracoLoader.js +266 -0
  30. package/GLTFDracoLoader.ts +430 -0
  31. package/Grass/Grass.d.ts +8 -8
  32. package/Grass/Grass.js +38 -38
  33. package/Grass/Grass.ts +38 -0
  34. package/Grass/index.d.ts +2 -1
  35. package/Grass/index.js +2 -1
  36. package/Grass/index.ts +2 -0
  37. package/Ground1/Ground1.d.ts +10 -11
  38. package/Ground1/Ground1.js +95 -91
  39. package/Ground1/Ground1.ts +114 -0
  40. package/Ground1/index.d.ts +1 -1
  41. package/Ground1/index.js +1 -1
  42. package/Ground1/index.ts +1 -0
  43. package/MeshBase.d.ts +36 -35
  44. package/MeshBase.js +247 -223
  45. package/MeshBase.ts +253 -0
  46. package/Mirror.d.ts +25 -25
  47. package/Mirror.js +143 -139
  48. package/Mirror.ts +203 -0
  49. package/MktMesh/MktMesh.d.ts +291 -0
  50. package/MktMesh/MktMesh.js +1045 -0
  51. package/MktMesh/MktMesh.ts +1075 -0
  52. package/MktMesh/assetUrl.d.ts +35 -0
  53. package/MktMesh/assetUrl.js +69 -0
  54. package/MktMesh/assetUrl.ts +69 -0
  55. package/MktMesh/mktMappingShader.d.ts +12 -0
  56. package/MktMesh/mktMappingShader.js +139 -0
  57. package/MktMesh/mktMappingShader.ts +139 -0
  58. package/MktMesh/mktShader.d.ts +263 -0
  59. package/MktMesh/mktShader.js +1248 -0
  60. package/MktMesh/mktShader.ts +1344 -0
  61. package/MktMesh/panoBitmapTexture.d.ts +25 -0
  62. package/MktMesh/panoBitmapTexture.js +52 -0
  63. package/MktMesh/panoBitmapTexture.ts +54 -0
  64. package/MktMesh/panoSlotBind.d.ts +29 -0
  65. package/MktMesh/panoSlotBind.js +106 -0
  66. package/MktMesh/panoSlotBind.ts +153 -0
  67. package/MktMesh/panoSlotRoster.d.ts +22 -0
  68. package/MktMesh/panoSlotRoster.js +169 -0
  69. package/MktMesh/panoSlotRoster.ts +168 -0
  70. package/MktMesh/panoTileStitcher.d.ts +119 -0
  71. package/MktMesh/panoTileStitcher.js +533 -0
  72. package/MktMesh/panoTileStitcher.ts +616 -0
  73. package/MktMesh/types.d.ts +75 -0
  74. package/MktMesh/types.js +1 -0
  75. package/MktMesh/types.ts +87 -0
  76. package/MktMesh/wallCapTessellate.d.ts +33 -0
  77. package/MktMesh/wallCapTessellate.js +97 -0
  78. package/MktMesh/wallCapTessellate.ts +68 -0
  79. package/PipeMesh/PathGeometry.d.ts +44 -44
  80. package/PipeMesh/PathGeometry.js +307 -300
  81. package/PipeMesh/PathGeometry.ts +343 -0
  82. package/PipeMesh/PathPoint.d.ts +17 -17
  83. package/PipeMesh/PathPoint.js +31 -31
  84. package/PipeMesh/PathPoint.ts +36 -0
  85. package/PipeMesh/PathPointList.d.ts +31 -31
  86. package/PipeMesh/PathPointList.js +209 -208
  87. package/PipeMesh/PathPointList.ts +227 -0
  88. package/PipeMesh/PathTubeGeometry.d.ts +25 -25
  89. package/PipeMesh/PathTubeGeometry.js +130 -130
  90. package/PipeMesh/PathTubeGeometry.ts +146 -0
  91. package/PipeMesh/PipeMesh.d.ts +25 -25
  92. package/PipeMesh/PipeMesh.js +63 -63
  93. package/PipeMesh/PipeMesh.ts +76 -0
  94. package/PipeMesh/index.d.ts +1 -1
  95. package/PipeMesh/index.js +1 -1
  96. package/PipeMesh/index.ts +1 -0
  97. package/PlaneModal1/PlaneModal1.d.ts +34 -31
  98. package/PlaneModal1/PlaneModal1.js +109 -105
  99. package/PlaneModal1/PlaneModal1.ts +138 -0
  100. package/PlaneModal1/index.d.ts +1 -1
  101. package/PlaneModal1/index.js +1 -1
  102. package/PlaneModal1/index.ts +1 -0
  103. package/PlaneText.d.ts +27 -39
  104. package/PlaneText.js +35 -30
  105. package/PlaneText.ts +55 -0
  106. package/PlaneWithHtml.d.ts +13 -11
  107. package/PlaneWithHtml.js +64 -63
  108. package/PlaneWithHtml.ts +70 -0
  109. package/PointLight/PointLight.d.ts +13 -14
  110. package/PointLight/PointLight.js +64 -70
  111. package/PointLight/PointLight.ts +67 -0
  112. package/PointLight/index.d.ts +1 -1
  113. package/PointLight/index.js +1 -1
  114. package/PointLight/index.ts +1 -0
  115. package/README.md +110 -79
  116. package/Sky/Sky.d.ts +9 -9
  117. package/Sky/Sky.js +22 -22
  118. package/Sky/Sky.ts +22 -0
  119. package/Sky/index.d.ts +1 -1
  120. package/Sky/index.js +1 -1
  121. package/Sky/index.ts +1 -0
  122. package/SpotLight.d.ts +6 -6
  123. package/SpotLight.js +72 -72
  124. package/SpotLight.ts +74 -0
  125. package/SpriteModal1/SpriteModal1.d.ts +33 -30
  126. package/SpriteModal1/SpriteModal1.js +116 -110
  127. package/SpriteModal1/SpriteModal1.ts +146 -0
  128. package/SpriteModal1/index.d.ts +1 -1
  129. package/SpriteModal1/index.js +1 -1
  130. package/SpriteModal1/index.ts +1 -0
  131. package/SpriteText.d.ts +46 -45
  132. package/SpriteText.js +176 -163
  133. package/SpriteText.ts +205 -0
  134. package/SpriteText2.d.ts +48 -47
  135. package/SpriteText2.js +223 -198
  136. package/SpriteText2.ts +258 -0
  137. package/SpriteText3.d.ts +86 -0
  138. package/SpriteText3.js +519 -0
  139. package/SpriteText3.ts +599 -0
  140. package/SpriteWithHtml.d.ts +9 -7
  141. package/SpriteWithHtml.js +44 -44
  142. package/SpriteWithHtml.ts +50 -0
  143. package/Text3D/Text3D.d.ts +20 -20
  144. package/Text3D/Text3D.js +58 -62
  145. package/Text3D/Text3D.ts +77 -0
  146. package/Text3D/fontController.d.ts +60 -59
  147. package/Text3D/fontController.js +166 -199
  148. package/Text3D/fontController.ts +209 -0
  149. package/Text3D/index.d.ts +1 -1
  150. package/Text3D/index.js +1 -1
  151. package/Text3D/index.ts +1 -0
  152. package/ThreeBase.d.ts +248 -111
  153. package/ThreeBase.js +1202 -656
  154. package/ThreeBase.ts +1314 -0
  155. package/ThreeMouse.d.ts +54 -40
  156. package/ThreeMouse.js +453 -407
  157. package/ThreeMouse.ts +472 -0
  158. package/Transition.d.ts +45 -40
  159. package/Transition.js +209 -210
  160. package/Transition.ts +242 -0
  161. package/Water/Water.d.ts +5 -5
  162. package/Water/Water.js +44 -26
  163. package/Water/Water.ts +45 -0
  164. package/Water/index.d.ts +2 -0
  165. package/Water/index.js +2 -0
  166. package/Water/index.ts +2 -0
  167. package/WaterFlow/FloatingDuck.d.ts +88 -0
  168. package/WaterFlow/FloatingDuck.js +307 -0
  169. package/WaterFlow/FloatingDuck.ts +445 -0
  170. package/WaterFlow/GPUFluidSimulation.d.ts +56 -0
  171. package/WaterFlow/GPUFluidSimulation.js +785 -0
  172. package/WaterFlow/GPUFluidSimulation.ts +827 -0
  173. package/WaterFlow/ReservoirSystem.d.ts +106 -0
  174. package/WaterFlow/ReservoirSystem.js +621 -0
  175. package/WaterFlow/ReservoirSystem.ts +754 -0
  176. package/WaterFlow/SPHField.d.ts +35 -0
  177. package/WaterFlow/SPHField.js +204 -0
  178. package/WaterFlow/SPHField.ts +228 -0
  179. package/WaterFlow/ScreenSpaceFluidPass.d.ts +69 -0
  180. package/WaterFlow/ScreenSpaceFluidPass.js +736 -0
  181. package/WaterFlow/ScreenSpaceFluidPass.ts +789 -0
  182. package/WaterFlow/ShallowWaterSurface.d.ts +45 -0
  183. package/WaterFlow/ShallowWaterSurface.js +441 -0
  184. package/WaterFlow/ShallowWaterSurface.ts +510 -0
  185. package/WaterFlow/WaterFlow.d.ts +87 -0
  186. package/WaterFlow/WaterFlow.js +171 -0
  187. package/WaterFlow/WaterFlow.ts +219 -0
  188. package/WaterFlow/types.d.ts +161 -0
  189. package/WaterFlow/types.js +1 -0
  190. package/WaterFlow/types.ts +189 -0
  191. package/WaterFlow/waterFlowPass.d.ts +3 -0
  192. package/WaterFlow/waterFlowPass.js +20 -0
  193. package/WaterFlow/waterFlowPass.ts +40 -0
  194. package/collisionOBB.d.ts +42 -0
  195. package/collisionOBB.js +112 -0
  196. package/collisionOBB.ts +108 -0
  197. package/declare.d.ts +23 -165
  198. package/index.d.ts +1 -1
  199. package/index.js +1 -2
  200. package/index.ts +1 -0
  201. package/instanced/InstancedBatch.d.ts +57 -0
  202. package/instanced/InstancedBatch.js +348 -0
  203. package/instanced/InstancedBatch.ts +406 -0
  204. package/instanced/InstancedChild.d.ts +174 -0
  205. package/instanced/InstancedChild.js +264 -0
  206. package/instanced/InstancedChild.ts +327 -0
  207. package/instanced/InstancedGroup.d.ts +43 -0
  208. package/instanced/InstancedGroup.js +126 -0
  209. package/instanced/InstancedGroup.ts +137 -0
  210. package/{InstancedMeshBase.d.ts → instanced/InstancedMeshBase.d.ts} +38 -39
  211. package/{InstancedMeshBase.js → instanced/InstancedMeshBase.js} +282 -293
  212. package/instanced/InstancedMeshBase.ts +292 -0
  213. package/instanced/InstancedTemplate.d.ts +46 -0
  214. package/instanced/InstancedTemplate.js +125 -0
  215. package/instanced/InstancedTemplate.ts +188 -0
  216. package/keyControls.d.ts +30 -0
  217. package/{keyContorls.js → keyControls.js} +101 -98
  218. package/keyControls.ts +107 -0
  219. package/lensflare/LensFlare.d.ts +39 -0
  220. package/lensflare/LensFlare.js +373 -0
  221. package/lensflare/LensFlare.ts +448 -0
  222. package/lensflare/lensflare0.png +0 -0
  223. package/lensflare/lensflare3.png +0 -0
  224. package/lensflare/lensflare_custom.png +0 -0
  225. package/lensflare/lensflare_hex_ghost.png +0 -0
  226. package/lensflare/lensflare_hex_main.png +0 -0
  227. package/package.json +99 -25
  228. package/pass/bloom_pass.d.ts +2 -2
  229. package/pass/bloom_pass.js +188 -101
  230. package/pass/bloom_pass.ts +243 -0
  231. package/pass/cover_pass.d.ts +2 -2
  232. package/pass/cover_pass.js +122 -99
  233. package/pass/cover_pass.ts +182 -0
  234. package/pass/debugDepthState.d.ts +20 -0
  235. package/pass/debugDepthState.js +9 -0
  236. package/pass/debugDepthState.ts +22 -0
  237. package/pass/depthTestBias.d.ts +12 -0
  238. package/pass/depthTestBias.js +12 -0
  239. package/pass/depthTestBias.ts +12 -0
  240. package/pass/effectUserData.d.ts +27 -0
  241. package/pass/effectUserData.js +1 -0
  242. package/pass/effectUserData.ts +46 -0
  243. package/pass/frosted_glass_pass.d.ts +2 -2
  244. package/pass/frosted_glass_pass.js +167 -186
  245. package/pass/frosted_glass_pass.ts +288 -0
  246. package/pass/fsQuad.d.ts +9 -9
  247. package/pass/fsQuad.js +28 -28
  248. package/pass/fsQuad.ts +34 -0
  249. package/pass/glow_pass.d.ts +2 -2
  250. package/pass/glow_pass.js +449 -233
  251. package/pass/glow_pass.ts +654 -0
  252. package/pass/screen_bloom_pass.d.ts +11 -0
  253. package/pass/screen_bloom_pass.js +235 -0
  254. package/pass/screen_bloom_pass.ts +263 -0
  255. package/pass/ssao_pass.d.ts +88 -13
  256. package/pass/ssao_pass.js +802 -366
  257. package/pass/ssao_pass.ts +918 -0
  258. package/pass/stroke_pass.d.ts +2 -2
  259. package/pass/stroke_pass.js +329 -258
  260. package/pass/stroke_pass.ts +638 -0
  261. package/shaders/FXAAShaderMaterial.d.ts +3 -3
  262. package/shaders/FXAAShaderMaterial.js +23 -66
  263. package/shaders/FXAAShaderMaterial.ts +201 -0
  264. package/shaders/baseDepthVisShader.d.ts +11 -0
  265. package/shaders/baseDepthVisShader.js +36 -0
  266. package/shaders/baseDepthVisShader.ts +36 -0
  267. package/shaders/baseTextureToRenderShader.d.ts +2 -2
  268. package/shaders/baseTextureToRenderShader.js +55 -60
  269. package/shaders/baseTextureToRenderShader.ts +232 -0
  270. package/shaders/copyShader.d.ts +3 -3
  271. package/shaders/copyShader.js +13 -14
  272. package/shaders/copyShader.ts +32 -0
  273. package/shaders/debugDepthCompareShader.d.ts +14 -0
  274. package/shaders/debugDepthCompareShader.js +49 -0
  275. package/shaders/debugDepthCompareShader.ts +50 -0
  276. package/shaders/debugDepthJudgeShader.d.ts +18 -0
  277. package/shaders/debugDepthJudgeShader.js +52 -0
  278. package/shaders/debugDepthJudgeShader.ts +54 -0
  279. package/shaders/debugExcludedShader.d.ts +13 -0
  280. package/shaders/debugExcludedShader.js +46 -0
  281. package/shaders/debugExcludedShader.ts +48 -0
  282. package/spriteTextBg.d.ts +1 -0
  283. package/spriteTextBg.js +20 -0
  284. package/spriteTextBg.ts +20 -0
  285. package/threeLoader.d.ts +35 -34
  286. package/threeLoader.js +518 -527
  287. package/threeLoader.ts +525 -0
  288. package/threeUtils.d.ts +53 -52
  289. package/threeUtils.js +329 -330
  290. package/threeUtils.ts +373 -0
  291. package/types.d.ts +2 -0
  292. package/types.js +6 -0
  293. package/types.ts +8 -0
  294. package/ApngTexture.d.ts +0 -13
  295. package/ApngTexture.js +0 -61
  296. package/ApngTextureManage.d.ts +0 -18
  297. package/ApngTextureManage.js +0 -87
  298. package/KeyFrameAnimation.d.ts +0 -25
  299. package/KeyFrameAnimation.js +0 -78
  300. package/keyContorls.d.ts +0 -25
  301. package/lib/draco/draco_decoder.js +0 -34
  302. package/lib/draco/draco_decoder.wasm +0 -0
  303. package/lib/draco/draco_wasm_wrapper.js +0 -117
  304. package/pass/emissive_ao_pass.d.ts +0 -13
  305. package/pass/emissive_ao_pass.js +0 -370
  306. package/shaders.d.ts +0 -5
  307. package/shaders.js +0 -93
@@ -1,43 +1,58 @@
1
- /*
2
- * @Author: xiaosihan
3
- * @Date: 2024-09-23 21:51:29
4
- * @Last Modified by: xiaosihan
5
- * @Last Modified time: 2025-01-28 05:05:49
6
- */
7
- import { DepthTexture, DepthFormat, LinearFilter, RGBAFormat, UnsignedShortType, WebGLRenderTarget, Scene, Vector2, ShaderChunk, NoBlending, ShaderMaterial, AdditiveBlending } from "three";
8
- import { UnrealBloomPass } from "three/examples/jsm/postprocessing/UnrealBloomPass";
9
- import copyShader from "../shaders/copyShader";
10
- import fsQuad from "./fsQuad";
11
- // 选中对象的深度纹理
12
- const selectDepthTexture = (() => {
13
- const baseDepthTexture = new DepthTexture(4096, 4096);
14
- baseDepthTexture.format = DepthFormat;
15
- baseDepthTexture.type = UnsignedShortType;
16
- baseDepthTexture.anisotropy = 16;
17
- return baseDepthTexture;
18
- })();
19
- // 选中对象的纹理
20
- const selectTextureTarget = new WebGLRenderTarget(512, 512, {
21
- minFilter: LinearFilter,
22
- magFilter: LinearFilter,
23
- format: RGBAFormat,
24
- depthTexture: selectDepthTexture,
25
- anisotropy: 16,
26
- });
27
- // 深度测试后的选中纹理
28
- const selectDethpTestTextureTarget = new WebGLRenderTarget(512, 512, {
29
- minFilter: LinearFilter,
30
- magFilter: LinearFilter,
31
- format: RGBAFormat,
32
- anisotropy: 16,
33
- });
34
- //深度比对纹理
35
- const depthTestShader = new ShaderMaterial({
36
- uniforms: {
37
- map: { value: null }, // 贴图纹理
38
- baseDepth: { value: null }, // 整个场景的深度纹理
39
- selectDepth: { value: null }, // 选中的对象深度纹理
40
- },
1
+ /*
2
+ * @Author: xiaosihan
3
+ * @Date: 2024-09-23 21:51:29
4
+ * @Last Modified by: xiaosihan
5
+ * @Last Modified time: 2025-01-28 05:05:49
6
+ */
7
+ import { DepthTexture, DepthFormat, LinearFilter, RGBAFormat, UnsignedIntType, WebGLRenderTarget, Scene, Vector2, ShaderChunk, NoBlending, ShaderMaterial, AdditiveBlending } from "three";
8
+ import { UnrealBloomPass } from "three/examples/jsm/postprocessing/UnrealBloomPass";
9
+ import copyShader from "../shaders/copyShader";
10
+ import fsQuad from "./fsQuad";
11
+ const selectDepthTexture = (() => {
12
+ const baseDepthTexture = new DepthTexture(1024, 1024);
13
+ baseDepthTexture.format = DepthFormat;
14
+ baseDepthTexture.type = UnsignedIntType;
15
+ baseDepthTexture.anisotropy = 16;
16
+ return baseDepthTexture;
17
+ })();
18
+ const selectTextureTarget = new WebGLRenderTarget(1024, 1024, {
19
+ minFilter: LinearFilter,
20
+ magFilter: LinearFilter,
21
+ format: RGBAFormat,
22
+ anisotropy: 16,
23
+ // 无 MSAA:mask 颜色与下方 selectDepthTextureTarget(深度)必须同为硬边缘,
24
+ // 否则 mask 边缘平滑而深度硬 → depthTest 判定边界与 mask 视觉边缘错位,bloom 边缘锯齿/摩尔纹。
25
+ // 边缘抗锯齿统一由终处理 FXAA 兜底。
26
+ });
27
+ // 无 MSAA 的深度专用目标:仅用于导出对象深度,供 depthTestShader 做遮挡判定(深度无需抗锯齿)
28
+ const selectDepthTextureTarget = new WebGLRenderTarget(1024, 1024, {
29
+ minFilter: LinearFilter,
30
+ magFilter: LinearFilter,
31
+ format: RGBAFormat,
32
+ depthTexture: selectDepthTexture,
33
+ anisotropy: 16,
34
+ });
35
+ const selectDepthTestTextureTarget = new WebGLRenderTarget(1024, 1024, {
36
+ minFilter: LinearFilter,
37
+ magFilter: LinearFilter,
38
+ format: RGBAFormat,
39
+ anisotropy: 16,
40
+ });
41
+ // 独立的 bloom 合成目标:避免 UnrealBloomPass 与 readBuffer 共用同一目标
42
+ // (本版本 UnrealBloomPass 内部把 bloom 叠加回 readBuffer,传入独立 write 目标可规避同目标读写隐患)
43
+ const bloomWriteTarget = new WebGLRenderTarget(1024, 1024, {
44
+ minFilter: LinearFilter,
45
+ magFilter: LinearFilter,
46
+ format: RGBAFormat,
47
+ anisotropy: 16,
48
+ });
49
+ const depthTestShader = new ShaderMaterial({
50
+ uniforms: {
51
+ map: { value: null },
52
+ baseDepth: { value: null },
53
+ selectDepth: { value: null },
54
+ cameraFar: { value: 1000.0 },
55
+ },
41
56
  vertexShader: `
42
57
  ${ShaderChunk.common}
43
58
  ${ShaderChunk.logdepthbuf_pars_vertex}
@@ -47,78 +62,150 @@ const depthTestShader = new ShaderMaterial({
47
62
  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
48
63
  ${ShaderChunk.logdepthbuf_vertex}
49
64
  }
50
- `,
65
+ `,
51
66
  fragmentShader: `
52
67
  ${ShaderChunk.logdepthbuf_pars_fragment}
53
68
  uniform sampler2D map;
54
69
  uniform sampler2D baseDepth;
55
70
  uniform sampler2D selectDepth;
71
+ uniform float cameraFar;
56
72
  varying vec2 vUv;
57
73
  void main() {
58
- if(texture2D(baseDepth, vUv).r < texture2D(selectDepth, vUv).r){
74
+ float baseD = texture2D(baseDepth, vUv).r;
75
+ float selD = texture2D(selectDepth, vUv).r;
76
+ // 对数深度反解为线性视图深度后再比对。
77
+ float zBase = pow(cameraFar + 1.0, baseD) - 1.0;
78
+ float zSel = pow(cameraFar + 1.0, selD) - 1.0;
79
+ float bias = max(zSel, 1.0) * 0.0015;
80
+ // 该像素没有泛光对象(selectDepth 仍是清屏值 1.0 → zSel == cameraFar)→ 不参与合成。
81
+ // ⚠️ 旧实现让背景像素「不参与丢弃」,导致没有对象的像素同样输出 map,
82
+ // 而本 shader 输出后由 AdditiveBlending 叠回主画面 → 整个场景被泛光覆盖
83
+ // (与 frosted_glass_pass 的「整屏模糊」是同一个模板 bug)。
84
+ if (zSel >= cameraFar) {
59
85
  discard;
60
86
  }
61
- if(texture2D(baseDepth, vUv).r == 1.0){
87
+ // 仅丢弃被更近场景几何遮挡的部分(zBase 比 zSel 更近)
88
+ if (zBase < zSel - bias) {
62
89
  discard;
63
90
  }
64
91
  gl_FragColor = texture2D(map, vUv);
65
92
  ${ShaderChunk.logdepthbuf_fragment}
66
93
  }
67
- `,
68
- blending: NoBlending, // 渲染时不与背景融合计算 直接替换
69
- depthTest: true,
70
- depthWrite: true,
71
- transparent: true,
72
- });
73
- const blendMaterial = copyShader.clone();
74
- blendMaterial.blending = AdditiveBlending;
75
- const size = new Vector2();
76
- // 场景对象
77
- const scene = new Scene();
78
- const bloomPass = new UnrealBloomPass(new Vector2(1024, 1024), 1.5, 0.4, 0.85);
79
- // bloomPass.threshold = params.threshold;
80
- // bloomPass.strength = params.strength;
81
- // bloomPass.radius = params.radius;
82
- // 发光后期通道
83
- export default function bloom_pass(renderer, camera, object3d, baseRenderTarget, baseDepthTexture, devicePixelRatio) {
84
- const { bloom_enable = false, bloom_threshold = 1.5, bloom_strength = 0.4, bloom_radius = 0.85, } = object3d.userData;
85
- // 不满足条件就不渲染发光效果
86
- if (!bloom_enable || (bloom_strength === 0) || (bloom_radius === 0)) {
87
- return;
88
- }
89
- bloomPass.threshold = bloom_threshold;
90
- bloomPass.strength = bloom_strength;
91
- bloomPass.radius = bloom_radius;
92
- // 保存原帧缓冲区
93
- const originRenderTarget = renderer.getRenderTarget();
94
- // 设置选中目标的帧缓冲区
95
- renderer.getSize(size);
96
- size.multiplyScalar(devicePixelRatio);
97
- bloomPass.setSize(size.x, size.y);
98
- selectTextureTarget.setSize(size.x, size.y);
99
- selectDethpTestTextureTarget.setSize(size.x, size.y);
100
- renderer.setRenderTarget(selectTextureTarget);
101
- scene.children = [object3d];
102
- renderer.clear();
103
- renderer.render(scene, camera);
104
- //使用深度纹理提取选中的对象未被遮挡的像素点
105
- renderer.setRenderTarget(selectDethpTestTextureTarget);
106
- renderer.clear();
107
- depthTestShader.uniforms.map.value = baseRenderTarget.texture;
108
- depthTestShader.uniforms.baseDepth.value = baseDepthTexture;
109
- depthTestShader.uniforms.selectDepth.value = selectDepthTexture;
110
- fsQuad.render(renderer, depthTestShader);
111
- // 渲染辉光
112
- bloomPass.render(renderer, selectDethpTestTextureTarget, selectDethpTestTextureTarget, 0, false);
113
- // 将发光效果与原始帧缓冲区混合
114
- renderer.setRenderTarget(originRenderTarget);
115
- renderer.clearDepth();
116
- blendMaterial.uniforms.map.value = selectDethpTestTextureTarget.texture;
117
- fsQuad.render(renderer, blendMaterial);
118
- // 调试代码
119
- // renderer.setRenderTarget(null);
120
- // renderer.clearDepth();
121
- // copyShader.uniforms.map.value = blur2TextureTarget.texture;
122
- // fsQuad.render(renderer, copyShader);
123
- // return;
124
- }
94
+ `,
95
+ blending: NoBlending,
96
+ depthTest: true,
97
+ depthWrite: true,
98
+ transparent: true,
99
+ });
100
+ const blendMaterial = copyShader.clone();
101
+ blendMaterial.blending = AdditiveBlending;
102
+ const size = new Vector2();
103
+ const scene = new Scene();
104
+ const bloomPass = new UnrealBloomPass(new Vector2(1024, 1024), 1.5, 0.4, 0.85);
105
+ export default function bloom_pass(renderer, camera, object3d, baseRenderTarget, baseDepthTexture, devicePixelRatio) {
106
+ const { bloom_enable = false, bloom_threshold = 1.5, bloom_strength = 0.4, bloom_radius = 0.85, } = object3d.userData;
107
+ if (!bloom_enable || (bloom_strength === 0) || (bloom_radius === 0)) {
108
+ return;
109
+ }
110
+ bloomPass.threshold = bloom_threshold;
111
+ bloomPass.strength = bloom_strength;
112
+ bloomPass.radius = bloom_radius;
113
+ const originRenderTarget = renderer.getRenderTarget();
114
+ // 灰度图渲染目标跟随主画面尺寸(= width × effectiveRatio),与 baseRenderTarget 完全一致,
115
+ // 消除灰度图与主画面尺寸不一致导致的放大重采样摩尔纹
116
+ renderer.getSize(size);
117
+ size.multiplyScalar(devicePixelRatio);
118
+ bloomPass.setSize(size.x, size.y);
119
+ selectTextureTarget.setSize(size.x, size.y);
120
+ selectDepthTextureTarget.setSize(size.x, size.y);
121
+ // 缺陷②修复:three r167 的 WebGLRenderTarget.setSize 不会同步 depthTexture,
122
+ // 需手动把 selectDepthTexture 的尺寸与全屏 baseDepth 对齐,否则深度比例错位导致 bloom 被全部 discard
123
+ selectDepthTexture.image.width = size.x;
124
+ selectDepthTexture.image.height = size.y;
125
+ selectDepthTexture.needsUpdate = true;
126
+ selectDepthTestTextureTarget.setSize(size.x, size.y);
127
+ bloomWriteTarget.setSize(size.x, size.y);
128
+ // 缺陷①修复:离屏单独渲染 object3d 时临时 scene 没有灯光,
129
+ // 而 Text3D 默认材质 metalness:1 无环境贴图,无光照会渲染成全黑,bloom 提取不到亮度。
130
+ // 做法:① 安全挂载并还原 object3d 的 parent(渲染后放回原 parent,避免影响主场景的 matrixWorld);
131
+ // ② 把材质临时切到"自发光显色"(emissive = color, emissiveIntensity = 1),
132
+ // 让被 bloom 的对象按其可见原色参与 bloom,且不受 MeshStandardMaterial 的 metalness 影响,必定可见。
133
+ const parent = object3d.parent;
134
+ scene.add(object3d);
135
+ // object3d 可能是单 Mesh,也可能是 Group(如 InstancedChild 选择代理含多个代理 Mesh)。
136
+ // 统一遍历其下所有网格子节点,收集材质(数组展开、去重、排除 undefined),
137
+ // 避免 Group 无 material 属性时访问 undefined.emissive 抛错。
138
+ const mats = [];
139
+ object3d.traverse((node) => {
140
+ const nodeMesh = node;
141
+ if (nodeMesh.isMesh) {
142
+ const nodeMat = nodeMesh.material;
143
+ if (Array.isArray(nodeMat)) {
144
+ for (const m of nodeMat)
145
+ if (m)
146
+ mats.push(m);
147
+ }
148
+ else if (nodeMat) {
149
+ mats.push(nodeMat);
150
+ }
151
+ }
152
+ });
153
+ const uniqueMats = Array.from(new Set(mats));
154
+ // 暂存每个材质的原 emissive / emissiveIntensity,渲染后还原
155
+ const emissiveBackup = uniqueMats.map((mat) => {
156
+ const m = mat;
157
+ return {
158
+ material: mat,
159
+ emissive: m.emissive ? m.emissive.clone() : null,
160
+ emissiveIntensity: m.emissiveIntensity ?? 0,
161
+ };
162
+ });
163
+ uniqueMats.forEach((mat) => {
164
+ const m = mat;
165
+ if (m.emissive && m.color) {
166
+ m.emissive.copy(m.color);
167
+ m.emissiveIntensity = 1;
168
+ }
169
+ });
170
+ try {
171
+ renderer.setRenderTarget(selectTextureTarget);
172
+ renderer.clear();
173
+ renderer.render(scene, camera);
174
+ // 单独渲染对象深度到无 MSAA 目标,供 depthTestShader 做遮挡判定(与材质/父节点还原同生命周期)
175
+ renderer.setRenderTarget(selectDepthTextureTarget);
176
+ renderer.clear();
177
+ renderer.render(scene, camera);
178
+ }
179
+ finally {
180
+ // 还原材质 emissive
181
+ emissiveBackup.forEach(({ material, emissive, emissiveIntensity }) => {
182
+ const m = material;
183
+ if (m.emissive) {
184
+ if (emissive) {
185
+ m.emissive.copy(emissive);
186
+ }
187
+ m.emissiveIntensity = emissiveIntensity;
188
+ }
189
+ });
190
+ // 还原 parent,避免影响主场景里该对象的 matrixWorld
191
+ if (parent) {
192
+ parent.add(object3d);
193
+ }
194
+ else {
195
+ scene.remove(object3d);
196
+ }
197
+ }
198
+ renderer.setRenderTarget(selectDepthTestTextureTarget);
199
+ renderer.clear();
200
+ depthTestShader.uniforms.map.value = baseRenderTarget.texture;
201
+ depthTestShader.uniforms.baseDepth.value = baseDepthTexture;
202
+ depthTestShader.uniforms.selectDepth.value = selectDepthTexture;
203
+ depthTestShader.uniforms.cameraFar.value = camera.far;
204
+ fsQuad.render(renderer, depthTestShader);
205
+ // 修复:使用独立 write 目标,避免 UnrealBloomPass 就地读写同一目标导致不出图
206
+ bloomPass.render(renderer, bloomWriteTarget, selectDepthTestTextureTarget, 0, false);
207
+ renderer.setRenderTarget(originRenderTarget);
208
+ renderer.clearDepth();
209
+ blendMaterial.uniforms.map.value = selectDepthTestTextureTarget.texture;
210
+ fsQuad.render(renderer, blendMaterial);
211
+ }
@@ -0,0 +1,243 @@
1
+ /*
2
+ * @Author: xiaosihan
3
+ * @Date: 2024-09-23 21:51:29
4
+ * @Last Modified by: xiaosihan
5
+ * @Last Modified time: 2025-01-28 05:05:49
6
+ */
7
+ import { DepthTexture, DepthFormat, LinearFilter, RGBAFormat, UnsignedIntType, WebGLRenderTarget, Scene, Vector2, ShaderChunk, NoBlending, ShaderMaterial, AdditiveBlending, WebGLRenderer, Camera, PerspectiveCamera, Object3D, Color, Material, Mesh } from "three";
8
+ import { UnrealBloomPass } from "three/examples/jsm/postprocessing/UnrealBloomPass";
9
+ import copyShader from "../shaders/copyShader";
10
+ import fsQuad from "./fsQuad";
11
+ import { EffectUserData } from "./effectUserData";
12
+
13
+ const selectDepthTexture: DepthTexture = (() => {
14
+ const baseDepthTexture = new DepthTexture(1024, 1024);
15
+ baseDepthTexture.format = DepthFormat;
16
+ baseDepthTexture.type = UnsignedIntType;
17
+ baseDepthTexture.anisotropy = 16;
18
+ return baseDepthTexture;
19
+ })();
20
+
21
+ const selectTextureTarget: WebGLRenderTarget = new WebGLRenderTarget(1024, 1024, {
22
+ minFilter: LinearFilter,
23
+ magFilter: LinearFilter,
24
+ format: RGBAFormat,
25
+ anisotropy: 16,
26
+ // 无 MSAA:mask 颜色与下方 selectDepthTextureTarget(深度)必须同为硬边缘,
27
+ // 否则 mask 边缘平滑而深度硬 → depthTest 判定边界与 mask 视觉边缘错位,bloom 边缘锯齿/摩尔纹。
28
+ // 边缘抗锯齿统一由终处理 FXAA 兜底。
29
+ });
30
+
31
+ // 无 MSAA 的深度专用目标:仅用于导出对象深度,供 depthTestShader 做遮挡判定(深度无需抗锯齿)
32
+ const selectDepthTextureTarget: WebGLRenderTarget = new WebGLRenderTarget(1024, 1024, {
33
+ minFilter: LinearFilter,
34
+ magFilter: LinearFilter,
35
+ format: RGBAFormat,
36
+ depthTexture: selectDepthTexture,
37
+ anisotropy: 16,
38
+ });
39
+
40
+ const selectDepthTestTextureTarget: WebGLRenderTarget = new WebGLRenderTarget(1024, 1024, {
41
+ minFilter: LinearFilter,
42
+ magFilter: LinearFilter,
43
+ format: RGBAFormat,
44
+ anisotropy: 16,
45
+ });
46
+
47
+ // 独立的 bloom 合成目标:避免 UnrealBloomPass 与 readBuffer 共用同一目标
48
+ // (本版本 UnrealBloomPass 内部把 bloom 叠加回 readBuffer,传入独立 write 目标可规避同目标读写隐患)
49
+ const bloomWriteTarget: WebGLRenderTarget = new WebGLRenderTarget(1024, 1024, {
50
+ minFilter: LinearFilter,
51
+ magFilter: LinearFilter,
52
+ format: RGBAFormat,
53
+ anisotropy: 16,
54
+ });
55
+
56
+ const depthTestShader: ShaderMaterial = new ShaderMaterial({
57
+ uniforms: {
58
+ map: { value: null },
59
+ baseDepth: { value: null },
60
+ selectDepth: { value: null },
61
+ cameraFar: { value: 1000.0 },
62
+ },
63
+ vertexShader: `
64
+ ${ShaderChunk.common}
65
+ ${ShaderChunk.logdepthbuf_pars_vertex}
66
+ varying vec2 vUv;
67
+ void main() {
68
+ vUv = uv;
69
+ gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
70
+ ${ShaderChunk.logdepthbuf_vertex}
71
+ }
72
+ `,
73
+ fragmentShader: `
74
+ ${ShaderChunk.logdepthbuf_pars_fragment}
75
+ uniform sampler2D map;
76
+ uniform sampler2D baseDepth;
77
+ uniform sampler2D selectDepth;
78
+ uniform float cameraFar;
79
+ varying vec2 vUv;
80
+ void main() {
81
+ float baseD = texture2D(baseDepth, vUv).r;
82
+ float selD = texture2D(selectDepth, vUv).r;
83
+ // 对数深度反解为线性视图深度后再比对。
84
+ float zBase = pow(cameraFar + 1.0, baseD) - 1.0;
85
+ float zSel = pow(cameraFar + 1.0, selD) - 1.0;
86
+ float bias = max(zSel, 1.0) * 0.0015;
87
+ // 该像素没有泛光对象(selectDepth 仍是清屏值 1.0 → zSel == cameraFar)→ 不参与合成。
88
+ // ⚠️ 旧实现让背景像素「不参与丢弃」,导致没有对象的像素同样输出 map,
89
+ // 而本 shader 输出后由 AdditiveBlending 叠回主画面 → 整个场景被泛光覆盖
90
+ // (与 frosted_glass_pass 的「整屏模糊」是同一个模板 bug)。
91
+ if (zSel >= cameraFar) {
92
+ discard;
93
+ }
94
+ // 仅丢弃被更近场景几何遮挡的部分(zBase 比 zSel 更近)
95
+ if (zBase < zSel - bias) {
96
+ discard;
97
+ }
98
+ gl_FragColor = texture2D(map, vUv);
99
+ ${ShaderChunk.logdepthbuf_fragment}
100
+ }
101
+ `,
102
+ blending: NoBlending,
103
+ depthTest: true,
104
+ depthWrite: true,
105
+ transparent: true,
106
+ });
107
+
108
+ const blendMaterial: ShaderMaterial = copyShader.clone();
109
+ blendMaterial.blending = AdditiveBlending;
110
+
111
+ const size: Vector2 = new Vector2();
112
+
113
+ const scene: Scene = new Scene();
114
+
115
+ const bloomPass: UnrealBloomPass = new UnrealBloomPass(new Vector2(1024, 1024), 1.5, 0.4, 0.85);
116
+
117
+ export default function bloom_pass(
118
+ renderer: WebGLRenderer,
119
+ camera: Camera,
120
+ object3d: Object3D,
121
+ baseRenderTarget: WebGLRenderTarget,
122
+ baseDepthTexture: DepthTexture,
123
+ devicePixelRatio: number
124
+ ): void {
125
+ const {
126
+ bloom_enable = false,
127
+ bloom_threshold = 1.5,
128
+ bloom_strength = 0.4,
129
+ bloom_radius = 0.85,
130
+ } = object3d.userData as EffectUserData;
131
+
132
+ if (!bloom_enable || (bloom_strength === 0) || (bloom_radius === 0)) {
133
+ return;
134
+ }
135
+
136
+ bloomPass.threshold = bloom_threshold;
137
+ bloomPass.strength = bloom_strength;
138
+ bloomPass.radius = bloom_radius;
139
+
140
+ const originRenderTarget = renderer.getRenderTarget();
141
+
142
+ // 灰度图渲染目标跟随主画面尺寸(= width × effectiveRatio),与 baseRenderTarget 完全一致,
143
+ // 消除灰度图与主画面尺寸不一致导致的放大重采样摩尔纹
144
+ renderer.getSize(size);
145
+ size.multiplyScalar(devicePixelRatio);
146
+ bloomPass.setSize(size.x, size.y);
147
+ selectTextureTarget.setSize(size.x, size.y);
148
+ selectDepthTextureTarget.setSize(size.x, size.y);
149
+ // 缺陷②修复:three r167 的 WebGLRenderTarget.setSize 不会同步 depthTexture,
150
+ // 需手动把 selectDepthTexture 的尺寸与全屏 baseDepth 对齐,否则深度比例错位导致 bloom 被全部 discard
151
+ selectDepthTexture.image.width = size.x;
152
+ selectDepthTexture.image.height = size.y;
153
+ selectDepthTexture.needsUpdate = true;
154
+ selectDepthTestTextureTarget.setSize(size.x, size.y);
155
+ bloomWriteTarget.setSize(size.x, size.y);
156
+
157
+ // 缺陷①修复:离屏单独渲染 object3d 时临时 scene 没有灯光,
158
+ // 而 Text3D 默认材质 metalness:1 无环境贴图,无光照会渲染成全黑,bloom 提取不到亮度。
159
+ // 做法:① 安全挂载并还原 object3d 的 parent(渲染后放回原 parent,避免影响主场景的 matrixWorld);
160
+ // ② 把材质临时切到"自发光显色"(emissive = color, emissiveIntensity = 1),
161
+ // 让被 bloom 的对象按其可见原色参与 bloom,且不受 MeshStandardMaterial 的 metalness 影响,必定可见。
162
+ const parent = object3d.parent;
163
+ scene.add(object3d);
164
+
165
+ // object3d 可能是单 Mesh,也可能是 Group(如 InstancedChild 选择代理含多个代理 Mesh)。
166
+ // 统一遍历其下所有网格子节点,收集材质(数组展开、去重、排除 undefined),
167
+ // 避免 Group 无 material 属性时访问 undefined.emissive 抛错。
168
+ const mats: Material[] = [];
169
+ object3d.traverse((node: Object3D) => {
170
+ const nodeMesh = node as Mesh;
171
+ if (nodeMesh.isMesh) {
172
+ const nodeMat = nodeMesh.material;
173
+ if (Array.isArray(nodeMat)) {
174
+ for (const m of nodeMat) if (m) mats.push(m);
175
+ } else if (nodeMat) {
176
+ mats.push(nodeMat);
177
+ }
178
+ }
179
+ });
180
+ const uniqueMats = Array.from(new Set(mats));
181
+
182
+ // 暂存每个材质的原 emissive / emissiveIntensity,渲染后还原
183
+ const emissiveBackup = uniqueMats.map((mat) => {
184
+ const m = mat as unknown as { emissive?: Color; emissiveIntensity?: number };
185
+ return {
186
+ material: mat,
187
+ emissive: m.emissive ? m.emissive.clone() : null,
188
+ emissiveIntensity: m.emissiveIntensity ?? 0,
189
+ };
190
+ });
191
+
192
+ uniqueMats.forEach((mat) => {
193
+ const m = mat as unknown as { color?: Color; emissive?: Color; emissiveIntensity?: number };
194
+ if (m.emissive && m.color) {
195
+ m.emissive.copy(m.color);
196
+ m.emissiveIntensity = 1;
197
+ }
198
+ });
199
+
200
+ try {
201
+ renderer.setRenderTarget(selectTextureTarget);
202
+ renderer.clear();
203
+ renderer.render(scene, camera);
204
+
205
+ // 单独渲染对象深度到无 MSAA 目标,供 depthTestShader 做遮挡判定(与材质/父节点还原同生命周期)
206
+ renderer.setRenderTarget(selectDepthTextureTarget);
207
+ renderer.clear();
208
+ renderer.render(scene, camera);
209
+ } finally {
210
+ // 还原材质 emissive
211
+ emissiveBackup.forEach(({ material, emissive, emissiveIntensity }) => {
212
+ const m = material as unknown as { emissive?: Color; emissiveIntensity?: number };
213
+ if (m.emissive) {
214
+ if (emissive) {
215
+ m.emissive.copy(emissive);
216
+ }
217
+ m.emissiveIntensity = emissiveIntensity;
218
+ }
219
+ });
220
+ // 还原 parent,避免影响主场景里该对象的 matrixWorld
221
+ if (parent) {
222
+ parent.add(object3d);
223
+ } else {
224
+ scene.remove(object3d);
225
+ }
226
+ }
227
+
228
+ renderer.setRenderTarget(selectDepthTestTextureTarget);
229
+ renderer.clear();
230
+ depthTestShader.uniforms.map.value = baseRenderTarget.texture;
231
+ depthTestShader.uniforms.baseDepth.value = baseDepthTexture;
232
+ depthTestShader.uniforms.selectDepth.value = selectDepthTexture;
233
+ depthTestShader.uniforms.cameraFar.value = (camera as PerspectiveCamera).far;
234
+ fsQuad.render(renderer, depthTestShader);
235
+
236
+ // 修复:使用独立 write 目标,避免 UnrealBloomPass 就地读写同一目标导致不出图
237
+ bloomPass.render(renderer, bloomWriteTarget, selectDepthTestTextureTarget, 0, false);
238
+
239
+ renderer.setRenderTarget(originRenderTarget);
240
+ renderer.clearDepth();
241
+ blendMaterial.uniforms.map.value = selectDepthTestTextureTarget.texture;
242
+ fsQuad.render(renderer, blendMaterial);
243
+ }
@@ -1,2 +1,2 @@
1
- import { Camera, DepthTexture, Object3D, WebGLRenderer } from "three";
2
- export default function cover_pass(renderer: WebGLRenderer, camera: Camera, object3d: Object3D, baseDepthTexture: DepthTexture, devicePixelRatio: number): void;
1
+ import { DepthTexture, WebGLRenderer, Camera, Object3D } from "three";
2
+ export default function cover_pass(renderer: WebGLRenderer, camera: Camera, object3d: Object3D, baseDepthTexture: DepthTexture, devicePixelRatio: number): void;