three-base 2.0.130 → 2.0.137

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 (125) hide show
  1. package/ApngTexture.d.ts +13 -13
  2. package/ApngTexture.js +61 -61
  3. package/ApngTextureManage.d.ts +18 -18
  4. package/ApngTextureManage.js +87 -87
  5. package/DirectionalLight.d.ts +6 -0
  6. package/DirectionalLight.js +68 -0
  7. package/EventMesh.d.ts +18 -18
  8. package/EventMesh.js +59 -59
  9. package/ExtrudeMesh.d.ts +112 -112
  10. package/ExtrudeMesh.js +366 -366
  11. package/FPScontrol.d.ts +78 -50
  12. package/FPScontrol.js +617 -232
  13. package/Fire/Fire.d.ts +28 -28
  14. package/Fire/Fire.js +79 -79
  15. package/Fire/FireGromtry.d.ts +9 -9
  16. package/Fire/FireGromtry.js +40 -40
  17. package/Fire/FireMaterial.d.ts +28 -28
  18. package/Fire/FireMaterial.js +32 -32
  19. package/Fire/index.d.ts +1 -1
  20. package/Fire/index.js +1 -1
  21. package/Grass/Grass.d.ts +8 -8
  22. package/Grass/Grass.js +38 -38
  23. package/Grass/index.d.ts +1 -1
  24. package/Grass/index.js +1 -1
  25. package/Ground1/Ground1.d.ts +11 -11
  26. package/Ground1/Ground1.js +54 -54
  27. package/Ground1/index.d.ts +1 -1
  28. package/Ground1/index.js +1 -1
  29. package/InstancedMeshBase.d.ts +39 -39
  30. package/InstancedMeshBase.js +293 -293
  31. package/KeyFrameAnimation.d.ts +25 -25
  32. package/KeyFrameAnimation.js +78 -78
  33. package/MeshBase.d.ts +35 -35
  34. package/MeshBase.js +223 -223
  35. package/Mirror.d.ts +25 -25
  36. package/Mirror.js +139 -139
  37. package/PipeMesh/PathGeometry.d.ts +44 -44
  38. package/PipeMesh/PathGeometry.js +300 -300
  39. package/PipeMesh/PathPoint.d.ts +17 -17
  40. package/PipeMesh/PathPoint.js +31 -31
  41. package/PipeMesh/PathPointList.d.ts +31 -31
  42. package/PipeMesh/PathPointList.js +208 -208
  43. package/PipeMesh/PathTubeGeometry.d.ts +25 -25
  44. package/PipeMesh/PathTubeGeometry.js +130 -130
  45. package/PipeMesh/PipeMesh.d.ts +25 -25
  46. package/PipeMesh/PipeMesh.js +63 -63
  47. package/PipeMesh/index.d.ts +1 -1
  48. package/PipeMesh/index.js +1 -1
  49. package/PlaneModal1/PlaneModal1.d.ts +31 -31
  50. package/PlaneModal1/PlaneModal1.js +105 -105
  51. package/PlaneModal1/index.d.ts +1 -1
  52. package/PlaneModal1/index.js +1 -1
  53. package/PlaneText.d.ts +39 -39
  54. package/PlaneText.js +30 -30
  55. package/PlaneWithHtml.d.ts +11 -11
  56. package/PlaneWithHtml.js +63 -68
  57. package/PointLight/PointLight.d.ts +14 -13
  58. package/PointLight/PointLight.js +70 -64
  59. package/PointLight/index.d.ts +1 -1
  60. package/PointLight/index.js +1 -1
  61. package/Sky/Sky.d.ts +9 -9
  62. package/Sky/Sky.js +22 -22
  63. package/Sky/index.d.ts +1 -1
  64. package/Sky/index.js +1 -1
  65. package/SpotLight.d.ts +6 -0
  66. package/SpotLight.js +72 -0
  67. package/SpriteModal1/SpriteModal1.d.ts +30 -30
  68. package/SpriteModal1/SpriteModal1.js +110 -110
  69. package/SpriteModal1/index.d.ts +1 -1
  70. package/SpriteModal1/index.js +1 -1
  71. package/SpriteText.d.ts +45 -45
  72. package/SpriteText.js +163 -163
  73. package/SpriteText2.d.ts +47 -47
  74. package/SpriteText2.js +198 -198
  75. package/SpriteWithHtml.d.ts +7 -7
  76. package/SpriteWithHtml.js +44 -49
  77. package/Text3D/Text3D.d.ts +20 -20
  78. package/Text3D/Text3D.js +62 -62
  79. package/Text3D/fontController.d.ts +59 -59
  80. package/Text3D/fontController.js +199 -199
  81. package/Text3D/index.d.ts +1 -1
  82. package/Text3D/index.js +1 -1
  83. package/ThreeBase.d.ts +111 -81
  84. package/ThreeBase.js +656 -560
  85. package/ThreeMouse.d.ts +40 -40
  86. package/ThreeMouse.js +407 -407
  87. package/Transition.d.ts +40 -40
  88. package/Transition.js +210 -210
  89. package/Water/Water.d.ts +5 -0
  90. package/Water/Water.js +26 -0
  91. package/Water/waternormals.jpg +0 -0
  92. package/declare.d.ts +167 -0
  93. package/index.d.ts +1 -1
  94. package/index.js +2 -2
  95. package/keyContorls.d.ts +25 -25
  96. package/keyContorls.js +98 -98
  97. package/package.json +3 -2
  98. package/pass/bloom_pass.d.ts +2 -2
  99. package/pass/bloom_pass.js +99 -99
  100. package/pass/cover_pass.d.ts +2 -2
  101. package/pass/cover_pass.js +95 -95
  102. package/pass/emissive_ao_pass.d.ts +13 -0
  103. package/pass/emissive_ao_pass.js +370 -0
  104. package/pass/frosted_glass_pass.d.ts +2 -0
  105. package/pass/frosted_glass_pass.js +275 -0
  106. package/pass/fsQuad.d.ts +9 -9
  107. package/pass/fsQuad.js +28 -28
  108. package/pass/glow_pass.d.ts +2 -2
  109. package/pass/glow_pass.js +310 -254
  110. package/pass/ssao_pass.d.ts +13 -0
  111. package/pass/ssao_pass.js +372 -0
  112. package/pass/stroke_pass.d.ts +2 -2
  113. package/pass/stroke_pass.js +199 -199
  114. package/shaders/FXAAShaderMaterial.d.ts +3 -3
  115. package/shaders/FXAAShaderMaterial.js +21 -21
  116. package/shaders/baseTextureToRenderShader.d.ts +2 -2
  117. package/shaders/baseTextureToRenderShader.js +14 -14
  118. package/shaders/copyShader.d.ts +3 -3
  119. package/shaders/copyShader.js +14 -14
  120. package/shaders.d.ts +5 -5
  121. package/shaders.js +42 -42
  122. package/threeLoader.d.ts +34 -34
  123. package/threeLoader.js +527 -527
  124. package/threeUtils.d.ts +52 -52
  125. package/threeUtils.js +330 -330
@@ -1,46 +1,46 @@
1
- /*
2
- * @Author: xiaosihan
3
- * @Date: 2023-05-09 00:35:17
4
- * @Last Modified by: xiaosihan
5
- * @Last Modified time: 2025-01-28 04:02:16
6
- */
7
- import { Color, DepthFormat, DepthTexture, LinearFilter, NoBlending, NormalBlending, RGBAFormat, RawShaderMaterial, Scene, ShaderChunk, ShaderMaterial, UnsignedShortType, Vector2, WebGLRenderTarget } from "three";
8
- import fsQuad from "./fsQuad";
9
- // 选中对象的深度纹理
10
- const selectDepthTexture = (() => {
11
- const baseDepthTexture = new DepthTexture(1024, 1024);
12
- baseDepthTexture.format = DepthFormat;
13
- baseDepthTexture.type = UnsignedShortType;
14
- baseDepthTexture.anisotropy = 16;
15
- return baseDepthTexture;
16
- })();
17
- // 选中对象的纹理
18
- const selectTextureTarget = new WebGLRenderTarget(512, 512, {
19
- minFilter: LinearFilter,
20
- magFilter: LinearFilter,
21
- format: RGBAFormat,
22
- depthTexture: selectDepthTexture,
23
- anisotropy: 16,
24
- });
25
- // 深度测试后的选中纹理
26
- const selectDethpTestTextureTarget = new WebGLRenderTarget(512, 512, {
27
- minFilter: LinearFilter,
28
- magFilter: LinearFilter,
29
- format: RGBAFormat,
30
- anisotropy: 16,
31
- });
32
- // 由于不能同时读写自己的纹理
33
- const blur1TextureTarget = new WebGLRenderTarget(512, 512, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
34
- // 所以需要用2个模糊纹理相互读写
35
- const blur2TextureTarget = new WebGLRenderTarget(512, 512, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
36
- const size = new Vector2();
37
- //深度比对纹理
38
- const depthTestShader = new ShaderMaterial({
39
- uniforms: {
40
- map: { value: null },
41
- baseDepth: { value: null },
42
- selectDepth: { value: null }, // 选中的对象深度纹理
43
- },
1
+ /*
2
+ * @Author: xiaosihan
3
+ * @Date: 2023-05-09 00:35:17
4
+ * @Last Modified by: xiaosihan
5
+ * @Last Modified time: 2025-01-28 04:02:16
6
+ */
7
+ import { Color, DepthFormat, DepthTexture, LinearFilter, NoBlending, NormalBlending, RGBAFormat, RawShaderMaterial, Scene, ShaderChunk, ShaderMaterial, UnsignedShortType, Vector2, WebGLRenderTarget } from "three";
8
+ import fsQuad from "./fsQuad";
9
+ // 选中对象的深度纹理
10
+ const selectDepthTexture = (() => {
11
+ const baseDepthTexture = new DepthTexture(1024, 1024);
12
+ baseDepthTexture.format = DepthFormat;
13
+ baseDepthTexture.type = UnsignedShortType;
14
+ baseDepthTexture.anisotropy = 16;
15
+ return baseDepthTexture;
16
+ })();
17
+ // 选中对象的纹理
18
+ const selectTextureTarget = new WebGLRenderTarget(512, 512, {
19
+ minFilter: LinearFilter,
20
+ magFilter: LinearFilter,
21
+ format: RGBAFormat,
22
+ depthTexture: selectDepthTexture,
23
+ anisotropy: 16,
24
+ });
25
+ // 深度测试后的选中纹理
26
+ const selectDethpTestTextureTarget = new WebGLRenderTarget(512, 512, {
27
+ minFilter: LinearFilter,
28
+ magFilter: LinearFilter,
29
+ format: RGBAFormat,
30
+ anisotropy: 16,
31
+ });
32
+ // 由于不能同时读写自己的纹理
33
+ const blur1TextureTarget = new WebGLRenderTarget(512, 512, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
34
+ // 所以需要用2个模糊纹理相互读写
35
+ const blur2TextureTarget = new WebGLRenderTarget(512, 512, { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat });
36
+ const size = new Vector2();
37
+ //深度比对纹理
38
+ const depthTestShader = new ShaderMaterial({
39
+ uniforms: {
40
+ map: { value: null }, // 贴图纹理
41
+ baseDepth: { value: null }, // 整个场景的深度纹理
42
+ selectDepth: { value: null }, // 选中的对象深度纹理
43
+ },
44
44
  vertexShader: `
45
45
  ${ShaderChunk.common}
46
46
  ${ShaderChunk.logdepthbuf_pars_vertex}
@@ -52,7 +52,7 @@ const depthTestShader = new ShaderMaterial({
52
52
  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
53
53
  ${ShaderChunk.logdepthbuf_vertex}
54
54
  }
55
- `,
55
+ `,
56
56
  fragmentShader: `
57
57
  ${ShaderChunk.logdepthbuf_pars_fragment}
58
58
  uniform sampler2D map;
@@ -69,18 +69,18 @@ const depthTestShader = new ShaderMaterial({
69
69
  gl_FragColor = texture2D(map, vUv);
70
70
  ${ShaderChunk.logdepthbuf_fragment}
71
71
  }
72
- `,
73
- blending: NoBlending,
74
- depthTest: true,
75
- depthWrite: true,
76
- transparent: true
77
- });
78
- // 抗锯齿着色器
79
- const FXAAShaderMaterial = new ShaderMaterial({
80
- uniforms: {
81
- tDiffuse: { value: null },
82
- resolution: { value: new Vector2(1 / 1024, 1 / 1024) }
83
- },
72
+ `,
73
+ blending: NoBlending, // 渲染时不与背景融合计算 直接替换
74
+ depthTest: true,
75
+ depthWrite: true,
76
+ transparent: true
77
+ });
78
+ // 抗锯齿着色器
79
+ const FXAAShaderMaterial = new ShaderMaterial({
80
+ uniforms: {
81
+ tDiffuse: { value: null }, // 贴图纹理
82
+ resolution: { value: new Vector2(1 / 1024, 1 / 1024) }
83
+ },
84
84
  vertexShader: `
85
85
  ${ShaderChunk.common}
86
86
  ${ShaderChunk.logdepthbuf_pars_vertex}
@@ -90,7 +90,7 @@ const FXAAShaderMaterial = new ShaderMaterial({
90
90
  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
91
91
  ${ShaderChunk.logdepthbuf_vertex}
92
92
  }
93
- `,
93
+ `,
94
94
  fragmentShader: `
95
95
  ${ShaderChunk.logdepthbuf_pars_fragment}
96
96
  precision highp float;
@@ -305,49 +305,49 @@ const FXAAShaderMaterial = new ShaderMaterial({
305
305
  );
306
306
  ${ShaderChunk.logdepthbuf_fragment}
307
307
  }
308
- `,
309
- blending: NoBlending,
310
- depthTest: false,
311
- depthWrite: false,
312
- transparent: true
313
- });
314
- // 描边着色器
315
- const strokeShader = new RawShaderMaterial({
316
- uniforms: {
317
- tDiffuse: { value: null },
318
- color: { value: new Color("#0f0") },
319
- width: { value: 1.0 },
320
- opacity: { value: 1.0 },
321
- resolution: { value: new Vector2(1 / 512, 1 / 512) },
322
- offset: {
323
- value: [
324
- new Vector2(0.000, 1.000),
325
- new Vector2(0.259, 0.966),
326
- new Vector2(0.500, 0.866),
327
- new Vector2(0.707, 0.707),
328
- new Vector2(0.866, 0.500),
329
- new Vector2(0.966, 0.259),
330
- new Vector2(1.000, 0.000),
331
- new Vector2(0.966, -0.259),
332
- new Vector2(0.866, -0.500),
333
- new Vector2(0.707, -0.707),
334
- new Vector2(0.500, -0.866),
335
- new Vector2(0.259, -0.966),
336
- new Vector2(0.000, -1.000),
337
- new Vector2(-0.259, -0.966),
338
- new Vector2(-0.500, -0.866),
339
- new Vector2(-0.707, -0.707),
340
- new Vector2(-0.866, -0.500),
341
- new Vector2(-0.966, -0.259),
342
- new Vector2(-1.000, -0.000),
343
- new Vector2(-0.966, 0.259),
344
- new Vector2(-0.866, 0.500),
345
- new Vector2(-0.707, 0.707),
346
- new Vector2(-0.500, 0.866),
347
- new Vector2(-0.259, 0.966)
348
- ]
349
- }
350
- },
308
+ `,
309
+ blending: NoBlending, // 渲染时不与背景融合计算 直接替换
310
+ depthTest: false,
311
+ depthWrite: false,
312
+ transparent: true
313
+ });
314
+ // 描边着色器
315
+ const strokeShader = new RawShaderMaterial({
316
+ uniforms: {
317
+ tDiffuse: { value: null },
318
+ color: { value: new Color("#0f0") }, // 没有被挡住的地方的颜色绿色
319
+ width: { value: 1.0 },
320
+ opacity: { value: 1.0 },
321
+ resolution: { value: new Vector2(1 / 512, 1 / 512) }, // 渲染器的分辨率
322
+ offset: {
323
+ value: [
324
+ new Vector2(0.000, 1.000),
325
+ new Vector2(0.259, 0.966),
326
+ new Vector2(0.500, 0.866),
327
+ new Vector2(0.707, 0.707),
328
+ new Vector2(0.866, 0.500),
329
+ new Vector2(0.966, 0.259),
330
+ new Vector2(1.000, 0.000),
331
+ new Vector2(0.966, -0.259),
332
+ new Vector2(0.866, -0.500),
333
+ new Vector2(0.707, -0.707),
334
+ new Vector2(0.500, -0.866),
335
+ new Vector2(0.259, -0.966),
336
+ new Vector2(0.000, -1.000),
337
+ new Vector2(-0.259, -0.966),
338
+ new Vector2(-0.500, -0.866),
339
+ new Vector2(-0.707, -0.707),
340
+ new Vector2(-0.866, -0.500),
341
+ new Vector2(-0.966, -0.259),
342
+ new Vector2(-1.000, -0.000),
343
+ new Vector2(-0.966, 0.259),
344
+ new Vector2(-0.866, 0.500),
345
+ new Vector2(-0.707, 0.707),
346
+ new Vector2(-0.500, 0.866),
347
+ new Vector2(-0.259, 0.966)
348
+ ]
349
+ }
350
+ },
351
351
  vertexShader: `
352
352
  attribute vec3 position;
353
353
  attribute vec2 uv;
@@ -355,7 +355,7 @@ const strokeShader = new RawShaderMaterial({
355
355
  void main() {
356
356
  vUv = uv;
357
357
  gl_Position = vec4(position, 1.0);
358
- }`,
358
+ }`,
359
359
  fragmentShader: `
360
360
  #ifdef GL_ES
361
361
  precision highp float;
@@ -391,18 +391,18 @@ const strokeShader = new RawShaderMaterial({
391
391
  } else {
392
392
  gl_FragColor = stroke();
393
393
  }
394
- }`,
395
- blending: NoBlending,
396
- depthTest: false,
397
- depthWrite: false,
398
- transparent: true
399
- });
400
- // 过滤着色器
401
- const filterSelectShader = new RawShaderMaterial({
402
- uniforms: {
403
- selectTexture: { value: null },
404
- blurTexture: { value: null }
405
- },
394
+ }`,
395
+ blending: NoBlending, // 渲染时不与背景融合计算 直接替换
396
+ depthTest: false,
397
+ depthWrite: false,
398
+ transparent: true
399
+ });
400
+ // 过滤着色器
401
+ const filterSelectShader = new RawShaderMaterial({
402
+ uniforms: {
403
+ selectTexture: { value: null },
404
+ blurTexture: { value: null }
405
+ },
406
406
  vertexShader: `
407
407
  attribute vec3 position;
408
408
  attribute vec2 uv;
@@ -411,7 +411,7 @@ const filterSelectShader = new RawShaderMaterial({
411
411
  vUv = uv;
412
412
  gl_Position = vec4(position, 1.0);
413
413
  }
414
- `,
414
+ `,
415
415
  fragmentShader: `
416
416
  #ifdef GL_ES
417
417
  precision highp float;
@@ -424,16 +424,16 @@ const filterSelectShader = new RawShaderMaterial({
424
424
  gl_FragColor = texture2D(blurTexture, vUv);
425
425
  gl_FragColor.a -= (texture2D(selectTexture, vUv).a);
426
426
  }
427
- `,
428
- blending: NoBlending,
429
- depthTest: false,
430
- depthWrite: false,
431
- transparent: true
432
- });
433
- const copyShader = new ShaderMaterial({
434
- uniforms: {
435
- map: { value: null }, // 贴图纹理
436
- },
427
+ `,
428
+ blending: NoBlending, // 渲染时不与背景融合计算 直接替换
429
+ depthTest: false,
430
+ depthWrite: false,
431
+ transparent: true
432
+ });
433
+ const copyShader = new ShaderMaterial({
434
+ uniforms: {
435
+ map: { value: null }, // 贴图纹理
436
+ },
437
437
  vertexShader: `
438
438
  ${ShaderChunk.common}
439
439
  ${ShaderChunk.logdepthbuf_pars_vertex}
@@ -445,7 +445,7 @@ const copyShader = new ShaderMaterial({
445
445
  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
446
446
  ${ShaderChunk.logdepthbuf_vertex}
447
447
  }
448
- `,
448
+ `,
449
449
  fragmentShader: `
450
450
  ${ShaderChunk.logdepthbuf_pars_fragment}
451
451
  uniform sampler2D map;
@@ -454,77 +454,77 @@ const copyShader = new ShaderMaterial({
454
454
  gl_FragColor = texture2D(map, vUv);
455
455
  ${ShaderChunk.logdepthbuf_fragment}
456
456
  }
457
- `,
458
- depthTest: true,
459
- depthWrite: true,
460
- transparent: true
461
- });
462
- // 场景对象
463
- const scene = new Scene();
464
- // 对象描边
465
- export default function stroke_pass(renderer, camera, object3d, baseDepthTexture, devicePixelRatio) {
466
- const { stroke_enable = false, stroke_color = "#04fa12", stroke_width = 1 } = object3d.userData;
467
- if (!stroke_enable || stroke_width === 0) {
468
- return;
469
- }
470
- // 保存原帧缓冲区
471
- const originRenderTarget = renderer.getRenderTarget();
472
- // 设置选中目标的帧缓冲区
473
- renderer.getSize(size);
474
- size.multiplyScalar(devicePixelRatio);
475
- selectTextureTarget.setSize(size.x, size.y);
476
- selectDethpTestTextureTarget.setSize(size.x, size.y);
477
- blur1TextureTarget.setSize(size.x, size.y);
478
- blur2TextureTarget.setSize(size.x, size.y);
479
- renderer.setRenderTarget(selectTextureTarget);
480
- scene.children = [object3d];
481
- renderer.clear();
482
- renderer.render(scene, camera);
483
- // 设置描边着色器的分辨率
484
- strokeShader.uniforms.resolution.value.set(1 / size.x, 1 / size.y);
485
- // 设置抗锯齿着色器的分辨率
486
- FXAAShaderMaterial.uniforms.resolution.value.set(1 / size.x, 1 / size.y);
487
- //描边颜色
488
- strokeShader.uniforms.color.value.set(stroke_color);
489
- strokeShader.uniforms.width.value = 1;
490
- //深度测试
491
- renderer.setRenderTarget(selectDethpTestTextureTarget);
492
- renderer.clear();
493
- depthTestShader.uniforms.map.value = selectTextureTarget.texture;
494
- depthTestShader.uniforms.baseDepth.value = baseDepthTexture;
495
- depthTestShader.uniforms.selectDepth.value = selectDepthTexture;
496
- fsQuad.render(renderer, depthTestShader);
497
- //一次描边
498
- renderer.setRenderTarget(blur1TextureTarget);
499
- strokeShader.uniforms.tDiffuse.value = selectDethpTestTextureTarget.texture;
500
- fsQuad.render(renderer, strokeShader);
501
- //二次描边
502
- renderer.setRenderTarget(blur2TextureTarget);
503
- strokeShader.uniforms.tDiffuse.value = blur1TextureTarget.texture;
504
- fsQuad.render(renderer, strokeShader);
505
- for (let i = 0; i < stroke_width - 2; i++) {
506
- //一次描边
507
- renderer.setRenderTarget(blur1TextureTarget);
508
- strokeShader.uniforms.tDiffuse.value = blur2TextureTarget.texture;
509
- fsQuad.render(renderer, strokeShader);
510
- //二次描边
511
- renderer.setRenderTarget(blur2TextureTarget);
512
- strokeShader.uniforms.tDiffuse.value = blur1TextureTarget.texture;
513
- fsQuad.render(renderer, strokeShader);
514
- }
515
- renderer.setRenderTarget(blur1TextureTarget);
516
- copyShader.uniforms.map.value = blur2TextureTarget.texture;
517
- fsQuad.render(renderer, copyShader);
518
- // 还原帧缓冲区 减去原始纹理保留描边
519
- renderer.setRenderTarget(originRenderTarget);
520
- filterSelectShader.uniforms.selectTexture.value = selectDethpTestTextureTarget.texture;
521
- filterSelectShader.uniforms.blurTexture.value = blur1TextureTarget.texture;
522
- filterSelectShader.blending = NormalBlending; // 与有的纹理融合计算 保留前面通道传递下来的纹理
523
- fsQuad.render(renderer, filterSelectShader);
524
- // 调试代码
525
- // renderer.setRenderTarget(null);
526
- // renderer.clearDepth();
527
- // copyShader.uniforms.tDiffuse.value = blur2TextureTarget.texture;
528
- // fsQuad.render(renderer, copyShader);
529
- // return;
530
- }
457
+ `,
458
+ depthTest: true,
459
+ depthWrite: true,
460
+ transparent: true
461
+ });
462
+ // 场景对象
463
+ const scene = new Scene();
464
+ // 对象描边
465
+ export default function stroke_pass(renderer, camera, object3d, baseDepthTexture, devicePixelRatio) {
466
+ const { stroke_enable = false, stroke_color = "#04fa12", stroke_width = 1 } = object3d.userData;
467
+ if (!stroke_enable || stroke_width === 0) {
468
+ return;
469
+ }
470
+ // 保存原帧缓冲区
471
+ const originRenderTarget = renderer.getRenderTarget();
472
+ // 设置选中目标的帧缓冲区
473
+ renderer.getSize(size);
474
+ size.multiplyScalar(devicePixelRatio);
475
+ selectTextureTarget.setSize(size.x, size.y);
476
+ selectDethpTestTextureTarget.setSize(size.x, size.y);
477
+ blur1TextureTarget.setSize(size.x, size.y);
478
+ blur2TextureTarget.setSize(size.x, size.y);
479
+ renderer.setRenderTarget(selectTextureTarget);
480
+ scene.children = [object3d];
481
+ renderer.clear();
482
+ renderer.render(scene, camera);
483
+ // 设置描边着色器的分辨率
484
+ strokeShader.uniforms.resolution.value.set(1 / size.x, 1 / size.y);
485
+ // 设置抗锯齿着色器的分辨率
486
+ FXAAShaderMaterial.uniforms.resolution.value.set(1 / size.x, 1 / size.y);
487
+ //描边颜色
488
+ strokeShader.uniforms.color.value.set(stroke_color);
489
+ strokeShader.uniforms.width.value = 1;
490
+ //深度测试
491
+ renderer.setRenderTarget(selectDethpTestTextureTarget);
492
+ renderer.clear();
493
+ depthTestShader.uniforms.map.value = selectTextureTarget.texture;
494
+ depthTestShader.uniforms.baseDepth.value = baseDepthTexture;
495
+ depthTestShader.uniforms.selectDepth.value = selectDepthTexture;
496
+ fsQuad.render(renderer, depthTestShader);
497
+ //一次描边
498
+ renderer.setRenderTarget(blur1TextureTarget);
499
+ strokeShader.uniforms.tDiffuse.value = selectDethpTestTextureTarget.texture;
500
+ fsQuad.render(renderer, strokeShader);
501
+ //二次描边
502
+ renderer.setRenderTarget(blur2TextureTarget);
503
+ strokeShader.uniforms.tDiffuse.value = blur1TextureTarget.texture;
504
+ fsQuad.render(renderer, strokeShader);
505
+ for (let i = 0; i < stroke_width - 2; i++) {
506
+ //一次描边
507
+ renderer.setRenderTarget(blur1TextureTarget);
508
+ strokeShader.uniforms.tDiffuse.value = blur2TextureTarget.texture;
509
+ fsQuad.render(renderer, strokeShader);
510
+ //二次描边
511
+ renderer.setRenderTarget(blur2TextureTarget);
512
+ strokeShader.uniforms.tDiffuse.value = blur1TextureTarget.texture;
513
+ fsQuad.render(renderer, strokeShader);
514
+ }
515
+ renderer.setRenderTarget(blur1TextureTarget);
516
+ copyShader.uniforms.map.value = blur2TextureTarget.texture;
517
+ fsQuad.render(renderer, copyShader);
518
+ // 还原帧缓冲区 减去原始纹理保留描边
519
+ renderer.setRenderTarget(originRenderTarget);
520
+ filterSelectShader.uniforms.selectTexture.value = selectDethpTestTextureTarget.texture;
521
+ filterSelectShader.uniforms.blurTexture.value = blur1TextureTarget.texture;
522
+ filterSelectShader.blending = NormalBlending; // 与有的纹理融合计算 保留前面通道传递下来的纹理
523
+ fsQuad.render(renderer, filterSelectShader);
524
+ // 调试代码
525
+ // renderer.setRenderTarget(null);
526
+ // renderer.clearDepth();
527
+ // copyShader.uniforms.tDiffuse.value = blur2TextureTarget.texture;
528
+ // fsQuad.render(renderer, copyShader);
529
+ // return;
530
+ }
@@ -1,3 +1,3 @@
1
- import { ShaderMaterial } from "three";
2
- declare const FXAAShaderMaterial: ShaderMaterial;
3
- export default FXAAShaderMaterial;
1
+ import { ShaderMaterial } from "three";
2
+ declare const FXAAShaderMaterial: ShaderMaterial;
3
+ export default FXAAShaderMaterial;
@@ -1,16 +1,16 @@
1
- /*
2
- * @Author: xiaosihan
3
- * @Date: 2024-01-20 05:10:37
4
- * @Last Modified by: xiaosihan
5
- * @Last Modified time: 2024-01-20 05:10:57
6
- */
7
- import { NoBlending, ShaderChunk, ShaderMaterial, Vector2 } from "three";
8
- // 抗锯齿着色器
9
- const FXAAShaderMaterial = new ShaderMaterial({
10
- uniforms: {
11
- tDiffuse: { value: null },
12
- resolution: { value: new Vector2(1 / 1024, 1 / 1024) }
13
- },
1
+ /*
2
+ * @Author: xiaosihan
3
+ * @Date: 2024-01-20 05:10:37
4
+ * @Last Modified by: xiaosihan
5
+ * @Last Modified time: 2024-01-20 05:10:57
6
+ */
7
+ import { NoBlending, ShaderChunk, ShaderMaterial, Vector2 } from "three";
8
+ // 抗锯齿着色器
9
+ const FXAAShaderMaterial = new ShaderMaterial({
10
+ uniforms: {
11
+ tDiffuse: { value: null }, // 贴图纹理
12
+ resolution: { value: new Vector2(1 / 1024, 1 / 1024) }
13
+ },
14
14
  vertexShader: `
15
15
  ${ShaderChunk.common}
16
16
  ${ShaderChunk.logdepthbuf_pars_vertex}
@@ -20,7 +20,7 @@ const FXAAShaderMaterial = new ShaderMaterial({
20
20
  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
21
21
  ${ShaderChunk.logdepthbuf_vertex}
22
22
  }
23
- `,
23
+ `,
24
24
  fragmentShader: `
25
25
  ${ShaderChunk.logdepthbuf_pars_fragment}
26
26
  precision highp float;
@@ -235,10 +235,10 @@ const FXAAShaderMaterial = new ShaderMaterial({
235
235
  );
236
236
  ${ShaderChunk.logdepthbuf_fragment}
237
237
  }
238
- `,
239
- blending: NoBlending,
240
- depthTest: false,
241
- depthWrite: false,
242
- transparent: true
243
- });
244
- export default FXAAShaderMaterial;
238
+ `,
239
+ blending: NoBlending, // 渲染时不与背景融合计算 直接替换
240
+ depthTest: false,
241
+ depthWrite: false,
242
+ transparent: true
243
+ });
244
+ export default FXAAShaderMaterial;
@@ -1,2 +1,2 @@
1
- import { ShaderMaterial } from "three";
2
- export declare const baseTextureToRenderShader: ShaderMaterial;
1
+ import { ShaderMaterial } from "three";
2
+ export declare const baseTextureToRenderShader: ShaderMaterial;
@@ -1,10 +1,10 @@
1
- import { ShaderMaterial, Vector2, ShaderChunk, NoBlending } from "three";
2
- // 渲染目标绘制到渲染器着色器
3
- export const baseTextureToRenderShader = new ShaderMaterial({
4
- uniforms: {
5
- tDiffuse: { value: null },
6
- resolution: { value: new Vector2(1 / 1024, 1 / 1024) }
7
- },
1
+ import { ShaderMaterial, Vector2, ShaderChunk, NoBlending } from "three";
2
+ // 渲染目标绘制到渲染器着色器
3
+ export const baseTextureToRenderShader = new ShaderMaterial({
4
+ uniforms: {
5
+ tDiffuse: { value: null }, // 贴图纹理
6
+ resolution: { value: new Vector2(1 / 1024, 1 / 1024) }
7
+ },
8
8
  vertexShader: `
9
9
  ${ShaderChunk.common}
10
10
  ${ShaderChunk.logdepthbuf_pars_vertex}
@@ -14,7 +14,7 @@ export const baseTextureToRenderShader = new ShaderMaterial({
14
14
  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
15
15
  ${ShaderChunk.logdepthbuf_vertex}
16
16
  }
17
- `,
17
+ `,
18
18
  fragmentShader: `
19
19
  ${ShaderChunk.logdepthbuf_pars_fragment}
20
20
  precision highp float;
@@ -229,9 +229,9 @@ export const baseTextureToRenderShader = new ShaderMaterial({
229
229
  ));
230
230
  ${ShaderChunk.logdepthbuf_fragment}
231
231
  }
232
- `,
233
- blending: NoBlending,
234
- depthTest: false,
235
- depthWrite: false,
236
- transparent: true
237
- });
232
+ `,
233
+ blending: NoBlending, // 渲染时不与背景融合计算 直接替换
234
+ depthTest: false,
235
+ depthWrite: false,
236
+ transparent: true
237
+ });
@@ -1,3 +1,3 @@
1
- import { ShaderMaterial } from "three";
2
- declare const copyShader: ShaderMaterial;
3
- export default copyShader;
1
+ import { ShaderMaterial } from "three";
2
+ declare const copyShader: ShaderMaterial;
3
+ export default copyShader;
@@ -1,10 +1,10 @@
1
- import { ShaderChunk, ShaderMaterial } from "three";
2
- // 拷贝着色器
3
- const copyShader = new ShaderMaterial({
4
- uniforms: {
5
- map: { value: null },
6
- opacity: { value: 1 }, // 透明度
7
- },
1
+ import { ShaderChunk, ShaderMaterial } from "three";
2
+ // 拷贝着色器
3
+ const copyShader = new ShaderMaterial({
4
+ uniforms: {
5
+ map: { value: null }, // 贴图纹理
6
+ opacity: { value: 1 }, // 透明度
7
+ },
8
8
  vertexShader: `
9
9
  ${ShaderChunk.common}
10
10
  ${ShaderChunk.logdepthbuf_pars_vertex}
@@ -14,7 +14,7 @@ const copyShader = new ShaderMaterial({
14
14
  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
15
15
  ${ShaderChunk.logdepthbuf_vertex}
16
16
  }
17
- `,
17
+ `,
18
18
  fragmentShader: `
19
19
  ${ShaderChunk.logdepthbuf_pars_fragment}
20
20
  uniform float opacity;
@@ -25,9 +25,9 @@ const copyShader = new ShaderMaterial({
25
25
  gl_FragColor.a *= opacity;
26
26
  ${ShaderChunk.logdepthbuf_fragment}
27
27
  }
28
- `,
29
- depthTest: true,
30
- depthWrite: true,
31
- transparent: true,
32
- });
33
- export default copyShader;
28
+ `,
29
+ depthTest: true,
30
+ depthWrite: true,
31
+ transparent: true,
32
+ });
33
+ export default copyShader;
package/shaders.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { OrthographicCamera, ShaderMaterial } from "three";
2
- export declare const orthographicCamera: OrthographicCamera;
3
- export declare const clearShader: ShaderMaterial;
4
- export declare const intersectionShader: ShaderMaterial;
5
- export declare const copyShader: ShaderMaterial;
1
+ import { OrthographicCamera, ShaderMaterial } from "three";
2
+ export declare const orthographicCamera: OrthographicCamera;
3
+ export declare const clearShader: ShaderMaterial;
4
+ export declare const intersectionShader: ShaderMaterial;
5
+ export declare const copyShader: ShaderMaterial;