super-three 0.169.1 → 0.170.0

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 (193) hide show
  1. package/build/three.cjs +974 -562
  2. package/build/three.module.js +975 -559
  3. package/build/three.module.min.js +1 -1
  4. package/build/three.webgpu.js +8398 -9842
  5. package/build/three.webgpu.min.js +1 -1
  6. package/build/three.webgpu.nodes.js +8398 -9842
  7. package/build/three.webgpu.nodes.min.js +1 -1
  8. package/examples/jsm/Addons.js +3 -3
  9. package/examples/jsm/animation/MMDAnimationHelper.js +2 -0
  10. package/examples/jsm/animation/MMDPhysics.js +2 -0
  11. package/examples/jsm/controls/TransformControls.js +22 -6
  12. package/examples/jsm/csm/CSM.js +2 -2
  13. package/examples/jsm/csm/CSMFrustum.js +7 -4
  14. package/examples/jsm/csm/CSMHelper.js +2 -0
  15. package/examples/jsm/csm/CSMShadowNode.js +435 -0
  16. package/examples/jsm/curves/NURBSCurve.js +34 -3
  17. package/examples/jsm/exporters/GLTFExporter.js +138 -71
  18. package/examples/jsm/exporters/KTX2Exporter.js +35 -12
  19. package/examples/jsm/exporters/MMDExporter.js +6 -0
  20. package/examples/jsm/exporters/USDZExporter.js +21 -3
  21. package/examples/jsm/geometries/DecalGeometry.js +65 -20
  22. package/examples/jsm/geometries/InstancedPointsGeometry.js +2 -0
  23. package/examples/jsm/helpers/TextureHelperGPU.js +175 -0
  24. package/examples/jsm/interactive/HTMLMesh.js +1 -0
  25. package/examples/jsm/lighting/TiledLighting.js +18 -0
  26. package/examples/jsm/lights/RectAreaLightTexturesLib.js +1 -1
  27. package/examples/jsm/lines/LineMaterial.js +7 -2
  28. package/examples/jsm/lines/LineSegmentsGeometry.js +2 -0
  29. package/examples/jsm/lines/webgpu/LineSegments2.js +0 -15
  30. package/examples/jsm/lines/webgpu/Wireframe.js +56 -0
  31. package/examples/jsm/loaders/3DMLoader.js +1 -0
  32. package/examples/jsm/loaders/3MFLoader.js +91 -0
  33. package/examples/jsm/loaders/FBXLoader.js +12 -2
  34. package/examples/jsm/loaders/GLTFLoader.js +2 -0
  35. package/examples/jsm/loaders/KTX2Loader.js +140 -49
  36. package/examples/jsm/loaders/LDrawLoader.js +22 -136
  37. package/examples/jsm/loaders/LottieLoader.js +1 -0
  38. package/examples/jsm/loaders/MMDLoader.js +9 -2
  39. package/examples/jsm/materials/LDrawConditionalLineMaterial.js +143 -0
  40. package/examples/jsm/materials/LDrawConditionalLineNodeMaterial.js +114 -0
  41. package/examples/jsm/materials/MeshGouraudMaterial.js +6 -2
  42. package/examples/jsm/math/ColorSpaces.js +76 -0
  43. package/examples/jsm/misc/ProgressiveLightMap.js +52 -40
  44. package/examples/jsm/misc/ProgressiveLightMapGPU.js +293 -0
  45. package/examples/jsm/misc/VolumeSlice.js +1 -0
  46. package/examples/jsm/objects/WaterMesh.js +8 -8
  47. package/examples/jsm/postprocessing/AfterimagePass.js +14 -3
  48. package/examples/jsm/postprocessing/SSRPass.js +6 -0
  49. package/examples/jsm/renderers/CSS2DRenderer.js +6 -3
  50. package/examples/jsm/renderers/CSS3DRenderer.js +7 -4
  51. package/examples/jsm/shaders/FXAAShader.js +225 -224
  52. package/examples/jsm/transpiler/ShaderToyDecoder.js +1 -1
  53. package/{src/nodes → examples/jsm/tsl}/display/AfterImageNode.js +17 -20
  54. package/{src/nodes → examples/jsm/tsl}/display/AnaglyphPassNode.js +2 -6
  55. package/{src/nodes → examples/jsm/tsl}/display/AnamorphicNode.js +12 -18
  56. package/{src/nodes → examples/jsm/tsl}/display/BleachBypass.js +1 -3
  57. package/{src/nodes → examples/jsm/tsl}/display/BloomNode.js +11 -40
  58. package/{src/nodes → examples/jsm/tsl}/display/DenoiseNode.js +18 -41
  59. package/{src/nodes → examples/jsm/tsl}/display/DepthOfFieldNode.js +2 -8
  60. package/{src/nodes → examples/jsm/tsl}/display/DotScreenNode.js +2 -9
  61. package/examples/jsm/tsl/display/FXAANode.js +316 -0
  62. package/{src/nodes → examples/jsm/tsl}/display/FilmNode.js +2 -6
  63. package/{src/nodes → examples/jsm/tsl}/display/GTAONode.js +30 -70
  64. package/{src/nodes → examples/jsm/tsl}/display/GaussianBlurNode.js +74 -36
  65. package/examples/jsm/tsl/display/LensflareNode.js +161 -0
  66. package/{src/nodes → examples/jsm/tsl}/display/Lut3DNode.js +1 -4
  67. package/{src/nodes → examples/jsm/tsl}/display/MotionBlur.js +2 -3
  68. package/examples/jsm/tsl/display/OutlineNode.js +434 -0
  69. package/{src/nodes → examples/jsm/tsl}/display/ParallaxBarrierPassNode.js +1 -5
  70. package/{src/nodes → examples/jsm/tsl}/display/PixelationPassNode.js +3 -15
  71. package/{src/nodes → examples/jsm/tsl}/display/RGBShiftNode.js +1 -6
  72. package/examples/jsm/tsl/display/SMAANode.js +620 -0
  73. package/{src/nodes → examples/jsm/tsl}/display/SSAAPassNode.js +10 -25
  74. package/examples/jsm/tsl/display/SSRNode.js +343 -0
  75. package/{src/nodes → examples/jsm/tsl}/display/Sepia.js +1 -2
  76. package/{src/nodes → examples/jsm/tsl}/display/SobelOperatorNode.js +3 -11
  77. package/{src/nodes → examples/jsm/tsl}/display/StereoCompositePassNode.js +9 -11
  78. package/{src/nodes → examples/jsm/tsl}/display/StereoPassNode.js +10 -11
  79. package/examples/jsm/tsl/display/TRAAPassNode.js +355 -0
  80. package/{src/nodes → examples/jsm/tsl}/display/TransitionNode.js +1 -6
  81. package/examples/jsm/tsl/display/hashBlur.js +24 -0
  82. package/examples/jsm/tsl/lighting/TiledLightsNode.js +392 -0
  83. package/examples/jsm/utils/{TextureUtilsGPU.js → WebGPUTextureUtils.js} +2 -1
  84. package/examples/jsm/webxr/OculusHandPointerModel.js +21 -21
  85. package/examples/jsm/webxr/Text2D.js +6 -6
  86. package/package.json +2 -2
  87. package/src/Three.WebGPU.Nodes.js +4 -0
  88. package/src/Three.WebGPU.js +4 -0
  89. package/src/constants.js +1 -6
  90. package/src/core/BufferGeometry.js +44 -6
  91. package/src/geometries/CylinderGeometry.js +2 -2
  92. package/src/materials/LineBasicMaterial.js +6 -2
  93. package/src/materials/LineDashedMaterial.js +6 -2
  94. package/src/materials/Material.js +14 -1
  95. package/src/materials/MeshBasicMaterial.js +6 -2
  96. package/src/materials/MeshDepthMaterial.js +6 -2
  97. package/src/materials/MeshDistanceMaterial.js +6 -2
  98. package/src/materials/MeshLambertMaterial.js +6 -2
  99. package/src/materials/MeshMatcapMaterial.js +6 -2
  100. package/src/materials/MeshNormalMaterial.js +6 -2
  101. package/src/materials/MeshPhongMaterial.js +6 -2
  102. package/src/materials/MeshPhysicalMaterial.js +6 -2
  103. package/src/materials/MeshStandardMaterial.js +6 -2
  104. package/src/materials/MeshToonMaterial.js +6 -2
  105. package/src/materials/PointsMaterial.js +6 -2
  106. package/src/materials/RawShaderMaterial.js +6 -2
  107. package/src/materials/ShaderMaterial.js +6 -2
  108. package/src/materials/ShadowMaterial.js +6 -2
  109. package/src/materials/SpriteMaterial.js +6 -2
  110. package/src/materials/nodes/NodeMaterial.js +31 -9
  111. package/src/materials/nodes/SpriteNodeMaterial.js +11 -2
  112. package/src/materials/nodes/manager/NodeMaterialObserver.js +111 -2
  113. package/src/math/ColorManagement.js +118 -85
  114. package/src/math/Vector4.js +11 -0
  115. package/src/nodes/Nodes.js +1 -21
  116. package/src/nodes/TSL.js +6 -24
  117. package/src/nodes/accessors/Camera.js +0 -1
  118. package/src/nodes/accessors/SceneNode.js +35 -1
  119. package/src/nodes/accessors/StorageBufferNode.js +32 -10
  120. package/src/nodes/accessors/VelocityNode.js +13 -3
  121. package/src/nodes/code/FunctionCallNode.js +16 -5
  122. package/src/nodes/code/ScriptableNode.js +4 -4
  123. package/src/nodes/core/Node.js +1 -0
  124. package/src/nodes/core/NodeBuilder.js +29 -5
  125. package/src/nodes/core/VarNode.js +15 -3
  126. package/src/nodes/display/ColorAdjustment.js +53 -4
  127. package/src/nodes/display/ColorSpaceFunctions.js +5 -5
  128. package/src/nodes/display/ColorSpaceNode.js +27 -39
  129. package/src/nodes/display/PassNode.js +6 -4
  130. package/src/nodes/display/ToneMappingNode.js +1 -1
  131. package/src/nodes/display/ViewportDepthNode.js +33 -1
  132. package/src/nodes/functions/PhysicalLightingModel.js +21 -15
  133. package/src/nodes/functions/material/getAlphaHashThreshold.js +64 -0
  134. package/src/nodes/functions/material/getGeometryRoughness.js +8 -2
  135. package/src/nodes/functions/material/getParallaxCorrectNormal.js +22 -0
  136. package/src/nodes/gpgpu/ComputeNode.js +9 -1
  137. package/src/nodes/lighting/AnalyticLightNode.js +12 -416
  138. package/src/nodes/lighting/LightsNode.js +24 -12
  139. package/src/nodes/lighting/PointLightNode.js +36 -26
  140. package/src/nodes/lighting/RectAreaLightNode.js +3 -0
  141. package/src/nodes/lighting/ShadowNode.js +484 -0
  142. package/src/nodes/utils/LoopNode.js +2 -2
  143. package/src/nodes/utils/Oscillators.js +6 -0
  144. package/src/nodes/utils/PostProcessingUtils.js +89 -0
  145. package/src/nodes/utils/ReflectorNode.js +101 -15
  146. package/src/nodes/utils/Timer.js +29 -0
  147. package/src/objects/BatchedMesh.js +458 -241
  148. package/src/renderers/WebGLRenderer.js +120 -117
  149. package/src/renderers/common/Attributes.js +4 -0
  150. package/src/renderers/common/Backend.js +2 -0
  151. package/src/renderers/common/Background.js +14 -4
  152. package/src/renderers/common/Bindings.js +3 -2
  153. package/src/renderers/common/Constants.js +2 -1
  154. package/src/renderers/common/Geometries.js +20 -0
  155. package/src/renderers/common/IndirectStorageBufferAttribute.js +15 -0
  156. package/src/renderers/common/Lighting.js +45 -0
  157. package/src/renderers/common/PostProcessingUtils.js +86 -0
  158. package/src/renderers/common/RenderList.js +39 -11
  159. package/src/renderers/common/RenderLists.js +4 -2
  160. package/src/renderers/common/RenderObject.js +18 -1
  161. package/src/renderers/common/Renderer.js +165 -26
  162. package/src/renderers/common/Textures.js +30 -14
  163. package/src/renderers/common/nodes/NodeLibrary.js +1 -14
  164. package/src/renderers/common/nodes/Nodes.js +2 -2
  165. package/src/renderers/shaders/ShaderChunk/colorspace_pars_fragment.glsl.js +4 -24
  166. package/src/renderers/shaders/ShaderChunk/emissivemap_fragment.glsl.js +8 -0
  167. package/src/renderers/shaders/ShaderChunk/map_fragment.glsl.js +2 -2
  168. package/src/renderers/webgl/WebGLBufferRenderer.js +2 -6
  169. package/src/renderers/webgl/WebGLCapabilities.js +0 -7
  170. package/src/renderers/webgl/WebGLIndexedBufferRenderer.js +2 -6
  171. package/src/renderers/webgl/WebGLProgram.js +24 -28
  172. package/src/renderers/webgl/WebGLPrograms.js +5 -2
  173. package/src/renderers/webgl/WebGLState.js +37 -1
  174. package/src/renderers/webgl/WebGLTextures.js +29 -12
  175. package/src/renderers/webgl-fallback/WebGLBackend.js +98 -31
  176. package/src/renderers/webgl-fallback/WebGLBufferRenderer.js +2 -7
  177. package/src/renderers/webgl-fallback/utils/WebGLTextureUtils.js +33 -8
  178. package/src/renderers/webgpu/WebGPUBackend.js +105 -25
  179. package/src/renderers/webgpu/WebGPURenderer.Nodes.js +1 -1
  180. package/src/renderers/webgpu/WebGPURenderer.js +1 -1
  181. package/src/renderers/webgpu/nodes/BasicNodeLibrary.js +0 -8
  182. package/src/renderers/webgpu/nodes/StandardNodeLibrary.js +0 -8
  183. package/src/renderers/webgpu/nodes/WGSLNodeBuilder.js +10 -20
  184. package/src/renderers/webgpu/nodes/WGSLNodeFunction.js +12 -4
  185. package/src/renderers/webgpu/utils/WebGPUPipelineUtils.js +29 -9
  186. package/src/renderers/webgpu/utils/WebGPUTextureUtils.js +24 -6
  187. package/src/renderers/webgpu/utils/WebGPUUtils.js +0 -1
  188. package/src/renderers/webxr/WebXRManager.js +4 -4
  189. package/examples/jsm/cameras/CinematicCamera.js +0 -208
  190. package/src/nodes/display/FXAANode.js +0 -332
  191. package/src/nodes/utils/OscNode.js +0 -85
  192. package/src/nodes/utils/TimerNode.js +0 -97
  193. /package/examples/jsm/utils/{TextureUtils.js → WebGLTextureUtils.js} +0 -0
@@ -1,6 +1,4 @@
1
- import { float, Fn, vec3, vec4 } from '../tsl/TSLBase.js';
2
- import { min, max, mix } from '../math/MathNode.js';
3
- import { luminance } from './ColorAdjustment.js';
1
+ import { float, Fn, vec3, vec4, min, max, mix, luminance } from 'three/tsl';
4
2
 
5
3
  export const bleach = /*@__PURE__*/ Fn( ( [ color, opacity = 1 ] ) => {
6
4
 
@@ -1,32 +1,14 @@
1
- import TempNode from '../core/TempNode.js';
2
- import { Fn, nodeObject, float, vec4, int } from '../tsl/TSLBase.js';
3
- import { mix, smoothstep } from '../math/MathNode.js';
4
- import { luminance } from './ColorAdjustment.js';
5
- import { uniform } from '../core/UniformNode.js';
6
- import { uniformArray } from '../accessors/UniformArrayNode.js';
7
- import { uv } from '../accessors/UV.js';
8
- import { Color } from '../../math/Color.js';
9
- import { passTexture } from './PassNode.js';
10
- import { RenderTarget } from '../../core/RenderTarget.js';
11
- import { HalfFloatType } from '../../constants.js';
12
- import { NodeUpdateType } from '../core/constants.js';
13
- import { Vector2 } from '../../math/Vector2.js';
14
- import { Loop } from '../utils/LoopNode.js';
15
- import { add } from '../math/OperatorNode.js';
16
- import QuadMesh from '../../renderers/common/QuadMesh.js';
17
- import { texture } from '../accessors/TextureNode.js';
18
- import { Vector3 } from '../../math/Vector3.js';
19
- import NodeMaterial from '../../materials/nodes/NodeMaterial.js';
1
+ import { HalfFloatType, RenderTarget, Vector2, Vector3, PostProcessingUtils } from 'three';
2
+ import { TempNode, nodeObject, Fn, float, NodeUpdateType, uv, passTexture, uniform, QuadMesh, NodeMaterial, Loop, texture, luminance, smoothstep, mix, vec4, uniformArray, add, int } from 'three/tsl';
20
3
 
21
4
  const _quadMesh = /*@__PURE__*/ new QuadMesh();
22
-
23
- const _clearColor = /*@__PURE__*/ new Color( 0, 0, 0 );
24
- const _currentClearColor = /*@__PURE__*/ new Color();
25
5
  const _size = /*@__PURE__*/ new Vector2();
26
6
 
27
7
  const _BlurDirectionX = /*@__PURE__*/ new Vector2( 1.0, 0.0 );
28
8
  const _BlurDirectionY = /*@__PURE__*/ new Vector2( 0.0, 1.0 );
29
9
 
10
+ let _rendererState;
11
+
30
12
  class BloomNode extends TempNode {
31
13
 
32
14
  static get type() {
@@ -54,20 +36,20 @@ class BloomNode extends TempNode {
54
36
 
55
37
  // render targets
56
38
 
57
- this._renderTargetBright = new RenderTarget( 1, 1, { type: HalfFloatType } );
39
+ this._renderTargetBright = new RenderTarget( 1, 1, { depthBuffer: false, type: HalfFloatType } );
58
40
  this._renderTargetBright.texture.name = 'UnrealBloomPass.bright';
59
41
  this._renderTargetBright.texture.generateMipmaps = false;
60
42
 
61
43
  for ( let i = 0; i < this._nMips; i ++ ) {
62
44
 
63
- const renderTargetHorizontal = new RenderTarget( 1, 1, { type: HalfFloatType } );
45
+ const renderTargetHorizontal = new RenderTarget( 1, 1, { depthBuffer: false, type: HalfFloatType } );
64
46
 
65
47
  renderTargetHorizontal.texture.name = 'UnrealBloomPass.h' + i;
66
48
  renderTargetHorizontal.texture.generateMipmaps = false;
67
49
 
68
50
  this._renderTargetsHorizontal.push( renderTargetHorizontal );
69
51
 
70
- const renderTargetVertical = new RenderTarget( 1, 1, { type: HalfFloatType } );
52
+ const renderTargetVertical = new RenderTarget( 1, 1, { depthBuffer: false, type: HalfFloatType } );
71
53
 
72
54
  renderTargetVertical.texture.name = 'UnrealBloomPass.v' + i;
73
55
  renderTargetVertical.texture.generateMipmaps = false;
@@ -128,19 +110,13 @@ class BloomNode extends TempNode {
128
110
 
129
111
  const { renderer } = frame;
130
112
 
131
- const size = renderer.getDrawingBufferSize( _size );
132
- this.setSize( size.width, size.height );
113
+ _rendererState = PostProcessingUtils.resetRendererState( renderer, _rendererState );
133
114
 
134
- const currentRenderTarget = renderer.getRenderTarget();
135
- const currentMRT = renderer.getMRT();
136
- renderer.getClearColor( _currentClearColor );
137
- const currentClearAlpha = renderer.getClearAlpha();
115
+ //
138
116
 
117
+ const size = renderer.getDrawingBufferSize( _size );
139
118
  this.setSize( size.width, size.height );
140
119
 
141
- renderer.setMRT( null );
142
- renderer.setClearColor( _clearColor, 0 );
143
-
144
120
  // 1. Extract Bright Areas
145
121
 
146
122
  renderer.setRenderTarget( this._renderTargetBright );
@@ -158,13 +134,11 @@ class BloomNode extends TempNode {
158
134
  this._separableBlurMaterials[ i ].colorTexture.value = inputRenderTarget.texture;
159
135
  this._separableBlurMaterials[ i ].direction.value = _BlurDirectionX;
160
136
  renderer.setRenderTarget( this._renderTargetsHorizontal[ i ] );
161
- renderer.clear();
162
137
  _quadMesh.render( renderer );
163
138
 
164
139
  this._separableBlurMaterials[ i ].colorTexture.value = this._renderTargetsHorizontal[ i ].texture;
165
140
  this._separableBlurMaterials[ i ].direction.value = _BlurDirectionY;
166
141
  renderer.setRenderTarget( this._renderTargetsVertical[ i ] );
167
- renderer.clear();
168
142
  _quadMesh.render( renderer );
169
143
 
170
144
  inputRenderTarget = this._renderTargetsVertical[ i ];
@@ -174,15 +148,12 @@ class BloomNode extends TempNode {
174
148
  // 3. Composite All the mips
175
149
 
176
150
  renderer.setRenderTarget( this._renderTargetsHorizontal[ 0 ] );
177
- renderer.clear();
178
151
  _quadMesh.material = this._compositeMaterial;
179
152
  _quadMesh.render( renderer );
180
153
 
181
154
  // restore
182
155
 
183
- renderer.setRenderTarget( currentRenderTarget );
184
- renderer.setMRT( currentMRT );
185
- renderer.setClearColor( _currentClearColor, currentClearAlpha );
156
+ PostProcessingUtils.restoreRendererState( renderer, _rendererState );
186
157
 
187
158
  }
188
159
 
@@ -1,17 +1,5 @@
1
- import TempNode from '../core/TempNode.js';
2
- import { uv } from '../accessors/UV.js';
3
- import { Fn, nodeObject, float, int, vec2, vec3, vec4, mat2, If } from '../tsl/TSLBase.js';
4
- import { NodeUpdateType } from '../core/constants.js';
5
- import { uniform } from '../core/UniformNode.js';
6
- import { uniformArray } from '../accessors/UniformArrayNode.js';
7
- import { abs, dot, sin, cos, PI, pow, max } from '../math/MathNode.js';
8
- import { Loop } from '../utils/LoopNode.js';
9
- import { luminance } from './ColorAdjustment.js';
10
- import { textureSize } from '../accessors/TextureSizeNode.js';
11
- import { convertToTexture } from '../utils/RTTNode.js';
12
-
13
- import { Vector2 } from '../../math/Vector2.js';
14
- import { Vector3 } from '../../math/Vector3.js';
1
+ import { Vector2, Vector3 } from 'three';
2
+ import { getNormalFromDepth, getViewPosition, convertToTexture, TempNode, nodeObject, Fn, float, NodeUpdateType, uv, uniform, Loop, luminance, vec2, vec3, vec4, uniformArray, int, dot, max, pow, abs, If, textureSize, sin, cos, mat2, PI } from 'three/tsl';
15
3
 
16
4
  class DenoiseNode extends TempNode {
17
5
 
@@ -40,7 +28,7 @@ class DenoiseNode extends TempNode {
40
28
  this._resolution = uniform( new Vector2() );
41
29
  this._sampleVectors = uniformArray( generatePdSamplePointInitializer( 16, 2, 1 ) );
42
30
 
43
- this.updateBeforeType = NodeUpdateType.RENDER;
31
+ this.updateBeforeType = NodeUpdateType.FRAME;
44
32
 
45
33
  }
46
34
 
@@ -58,27 +46,16 @@ class DenoiseNode extends TempNode {
58
46
 
59
47
  const sampleTexture = ( uv ) => this.textureNode.uv( uv );
60
48
  const sampleDepth = ( uv ) => this.depthNode.uv( uv ).x;
61
- const sampleNormal = ( uv ) => this.normalNode.uv( uv );
49
+ const sampleNormal = ( uv ) => ( this.normalNode !== null ) ? this.normalNode.uv( uv ).rgb.normalize() : getNormalFromDepth( uv, this.depthNode.value, this.cameraProjectionMatrixInverse );
62
50
  const sampleNoise = ( uv ) => this.noiseNode.uv( uv );
63
51
 
64
- const getViewPosition = Fn( ( [ screenPosition, depth ] ) => {
65
-
66
- screenPosition = vec2( screenPosition.x, screenPosition.y.oneMinus() ).mul( 2.0 ).sub( 1.0 );
67
-
68
- const clipSpacePosition = vec4( vec3( screenPosition, depth ), 1.0 );
69
- const viewSpacePosition = vec4( this.cameraProjectionMatrixInverse.mul( clipSpacePosition ) );
70
-
71
- return viewSpacePosition.xyz.div( viewSpacePosition.w );
72
-
73
- } );
74
-
75
52
  const denoiseSample = Fn( ( [ center, viewNormal, viewPosition, sampleUv ] ) => {
76
53
 
77
- const texel = sampleTexture( sampleUv );
78
- const depth = sampleDepth( sampleUv );
79
- const normal = sampleNormal( sampleUv ).rgb.normalize();
54
+ const texel = sampleTexture( sampleUv ).toVar();
55
+ const depth = sampleDepth( sampleUv ).toVar();
56
+ const normal = sampleNormal( sampleUv ).toVar();
80
57
  const neighborColor = texel.rgb;
81
- const viewPos = getViewPosition( sampleUv, depth );
58
+ const viewPos = getViewPosition( sampleUv, depth, this.cameraProjectionMatrixInverse ).toVar();
82
59
 
83
60
  const normalDiff = dot( viewNormal, normal ).toVar();
84
61
  const normalSimilarity = pow( max( normalDiff, 0 ), this.normalPhi ).toVar();
@@ -94,10 +71,10 @@ class DenoiseNode extends TempNode {
94
71
 
95
72
  const denoise = Fn( ( [ uvNode ] ) => {
96
73
 
97
- const depth = sampleDepth( uvNode );
98
- const viewNormal = sampleNormal( uvNode ).rgb.normalize();
74
+ const depth = sampleDepth( uvNode ).toVar();
75
+ const viewNormal = sampleNormal( uvNode ).toVar();
99
76
 
100
- const texel = sampleTexture( uvNode );
77
+ const texel = sampleTexture( uvNode ).toVar();
101
78
 
102
79
  If( depth.greaterThanEqual( 1.0 ).or( dot( viewNormal, viewNormal ).equal( 0.0 ) ), () => {
103
80
 
@@ -105,20 +82,20 @@ class DenoiseNode extends TempNode {
105
82
 
106
83
  } );
107
84
 
108
- const center = vec3( texel.rgb );
85
+ const center = vec3( texel.rgb ).toVar();
109
86
 
110
- const viewPosition = getViewPosition( uvNode, depth );
87
+ const viewPosition = getViewPosition( uvNode, depth, this.cameraProjectionMatrixInverse ).toVar();
111
88
 
112
89
  const noiseResolution = textureSize( this.noiseNode, 0 );
113
90
  let noiseUv = vec2( uvNode.x, uvNode.y.oneMinus() );
114
91
  noiseUv = noiseUv.mul( this._resolution.div( noiseResolution ) );
115
- const noiseTexel = sampleNoise( noiseUv );
92
+ const noiseTexel = sampleNoise( noiseUv ).toVar();
116
93
 
117
- const x = sin( noiseTexel.element( this.index.mod( 4 ).mul( 2 ).mul( PI ) ) );
118
- const y = cos( noiseTexel.element( this.index.mod( 4 ).mul( 2 ).mul( PI ) ) );
94
+ const x = sin( noiseTexel.element( this.index.mod( 4 ).mul( 2 ).mul( PI ) ) ).toVar();
95
+ const y = cos( noiseTexel.element( this.index.mod( 4 ).mul( 2 ).mul( PI ) ) ).toVar();
119
96
 
120
- const noiseVec = vec2( x, y );
121
- const rotationMatrix = mat2( noiseVec.x, noiseVec.y.negate(), noiseVec.x, noiseVec.y );
97
+ const noiseVec = vec2( x, y ).toVar();
98
+ const rotationMatrix = mat2( noiseVec.x, noiseVec.y.negate(), noiseVec.x, noiseVec.y ).toVar();
122
99
 
123
100
  const totalWeight = float( 1.0 ).toVar();
124
101
  const denoised = vec3( texel.rgb ).toVar();
@@ -1,10 +1,4 @@
1
- import TempNode from '../core/TempNode.js';
2
- import { uv } from '../accessors/UV.js';
3
- import { Fn, nodeObject, vec2, vec4 } from '../tsl/TSLBase.js';
4
- import { NodeUpdateType } from '../core/constants.js';
5
- import { uniform } from '../core/UniformNode.js';
6
- import { clamp } from '../math/MathNode.js';
7
- import { convertToTexture } from '../utils/RTTNode.js';
1
+ import { convertToTexture, TempNode, nodeObject, Fn, NodeUpdateType, uv, uniform, vec2, vec4, clamp } from 'three/tsl';
8
2
 
9
3
  class DepthOfFieldNode extends TempNode {
10
4
 
@@ -27,7 +21,7 @@ class DepthOfFieldNode extends TempNode {
27
21
 
28
22
  this._aspect = uniform( 0 );
29
23
 
30
- this.updateBeforeType = NodeUpdateType.RENDER;
24
+ this.updateBeforeType = NodeUpdateType.FRAME;
31
25
 
32
26
  }
33
27
 
@@ -1,12 +1,5 @@
1
- import TempNode from '../core/TempNode.js';
2
- import { nodeObject, Fn, vec2, vec3, vec4 } from '../tsl/TSLBase.js';
3
- import { uniform } from '../core/UniformNode.js';
4
- import { uv } from '../accessors/UV.js';
5
- import { sin, cos } from '../math/MathNode.js';
6
- import { add } from '../math/OperatorNode.js';
7
- import { screenSize } from './ScreenNode.js';
8
-
9
- import { Vector2 } from '../../math/Vector2.js';
1
+ import { Vector2 } from 'three';
2
+ import { TempNode, nodeObject, Fn, uv, uniform, vec2, vec3, sin, cos, add, vec4, screenSize } from 'three/tsl';
10
3
 
11
4
  class DotScreenNode extends TempNode {
12
5
 
@@ -0,0 +1,316 @@
1
+ import { Vector2 } from 'three';
2
+ import { TempNode, nodeObject, Fn, uniformArray, select, float, NodeUpdateType, uv, dot, clamp, uniform, convertToTexture, smoothstep, bool, vec2, vec3, If, Loop, max, min, Break, abs } from 'three/tsl';
3
+
4
+ class FXAANode extends TempNode {
5
+
6
+ static get type() {
7
+
8
+ return 'FXAANode';
9
+
10
+ }
11
+
12
+ constructor( textureNode ) {
13
+
14
+ super();
15
+
16
+ this.textureNode = textureNode;
17
+
18
+ this.updateBeforeType = NodeUpdateType.FRAME;
19
+
20
+ this._invSize = uniform( new Vector2() );
21
+
22
+ }
23
+
24
+ updateBefore() {
25
+
26
+ const map = this.textureNode.value;
27
+
28
+ this._invSize.value.set( 1 / map.image.width, 1 / map.image.height );
29
+
30
+ }
31
+
32
+ setup() {
33
+
34
+ const textureNode = this.textureNode.bias( - 100 );
35
+ const uvNode = textureNode.uvNode || uv();
36
+
37
+ const EDGE_STEP_COUNT = float( 6 );
38
+ const EDGE_GUESS = float( 8.0 );
39
+ const EDGE_STEPS = uniformArray( [ 1.0, 1.5, 2.0, 2.0, 2.0, 4.0 ] );
40
+
41
+ const _ContrastThreshold = float( 0.0312 );
42
+ const _RelativeThreshold = float( 0.063 );
43
+ const _SubpixelBlending = float( 1.0 );
44
+
45
+ const Sample = Fn( ( [ uv ] ) => {
46
+
47
+ return textureNode.uv( uv );
48
+
49
+ } );
50
+
51
+ const SampleLuminance = Fn( ( [ uv ] ) => {
52
+
53
+ return dot( Sample( uv ).rgb, vec3( 0.3, 0.59, 0.11 ) );
54
+
55
+ } );
56
+
57
+ const SampleLuminanceOffset = Fn( ( [ texSize, uv, uOffset, vOffset ] ) => {
58
+
59
+ const shiftedUv = uv.add( texSize.mul( vec2( uOffset, vOffset ) ) );
60
+ return SampleLuminance( shiftedUv );
61
+
62
+ } );
63
+
64
+ const ShouldSkipPixel = ( l ) => {
65
+
66
+ const threshold = max( _ContrastThreshold, _RelativeThreshold.mul( l.highest ) );
67
+ return l.contrast.lessThan( threshold );
68
+
69
+ };
70
+
71
+ const SampleLuminanceNeighborhood = ( texSize, uv ) => {
72
+
73
+ const m = SampleLuminance( uv );
74
+
75
+ const n = SampleLuminanceOffset( texSize, uv, 0.0, - 1.0 );
76
+ const e = SampleLuminanceOffset( texSize, uv, 1.0, 0.0 );
77
+ const s = SampleLuminanceOffset( texSize, uv, 0.0, 1.0 );
78
+ const w = SampleLuminanceOffset( texSize, uv, - 1.0, 0.0 );
79
+
80
+ const ne = SampleLuminanceOffset( texSize, uv, 1.0, - 1.0 );
81
+ const nw = SampleLuminanceOffset( texSize, uv, - 1.0, - 1.0 );
82
+ const se = SampleLuminanceOffset( texSize, uv, 1.0, 1.0 );
83
+ const sw = SampleLuminanceOffset( texSize, uv, - 1.0, 1.0 );
84
+
85
+ const highest = max( max( max( max( s, e ), n ), w ), m );
86
+ const lowest = min( min( min( min( s, e ), n ), w ), m );
87
+ const contrast = highest.sub( lowest );
88
+
89
+ return { m, n, e, s, w, ne, nw, se, sw, highest, lowest, contrast };
90
+
91
+ };
92
+
93
+ const DeterminePixelBlendFactor = ( l ) => {
94
+
95
+ let f = float( 2.0 ).mul( l.s.add( l.e ).add( l.n ).add( l.w ) );
96
+ f = f.add( l.se.add( l.sw ).add( l.ne ).add( l.nw ) );
97
+ f = f.mul( 1.0 / 12.0 );
98
+ f = abs( f.sub( l.m ) );
99
+ f = clamp( f.div( max( l.contrast, 0 ) ), 0.0, 1.0 );
100
+
101
+ const blendFactor = smoothstep( 0.0, 1.0, f );
102
+ return blendFactor.mul( blendFactor ).mul( _SubpixelBlending );
103
+
104
+ };
105
+
106
+ const DetermineEdge = ( texSize, l ) => {
107
+
108
+ const horizontal =
109
+ abs( l.s.add( l.n ).sub( l.m.mul( 2.0 ) ) ).mul( 2.0 ).add(
110
+ abs( l.se.add( l.ne ).sub( l.e.mul( 2.0 ) ) ).add(
111
+ abs( l.sw.add( l.nw ).sub( l.w.mul( 2.0 ) ) )
112
+ )
113
+ );
114
+
115
+ const vertical =
116
+ abs( l.e.add( l.w ).sub( l.m.mul( 2.0 ) ) ).mul( 2.0 ).add(
117
+ abs( l.se.add( l.sw ).sub( l.s.mul( 2.0 ) ) ).add(
118
+ abs( l.ne.add( l.nw ).sub( l.n.mul( 2.0 ) ) )
119
+ )
120
+ );
121
+
122
+ const isHorizontal = horizontal.greaterThanEqual( vertical );
123
+
124
+ const pLuminance = select( isHorizontal, l.s, l.e );
125
+ const nLuminance = select( isHorizontal, l.n, l.w );
126
+ const pGradient = abs( pLuminance.sub( l.m ) );
127
+ const nGradient = abs( nLuminance.sub( l.m ) );
128
+
129
+ const pixelStep = select( isHorizontal, texSize.y, texSize.x ).toVar();
130
+ const oppositeLuminance = float().toVar();
131
+ const gradient = float().toVar();
132
+
133
+ If( pGradient.lessThan( nGradient ), () => {
134
+
135
+ pixelStep.assign( pixelStep.negate() );
136
+ oppositeLuminance.assign( nLuminance );
137
+ gradient.assign( nGradient );
138
+
139
+ } ).Else( () => {
140
+
141
+ oppositeLuminance.assign( pLuminance );
142
+ gradient.assign( pGradient );
143
+
144
+ } );
145
+
146
+ return { isHorizontal, pixelStep, oppositeLuminance, gradient };
147
+
148
+ };
149
+
150
+ const DetermineEdgeBlendFactor = ( texSize, l, e, uv ) => {
151
+
152
+ const uvEdge = uv.toVar();
153
+ const edgeStep = vec2().toVar();
154
+ If( e.isHorizontal, () => {
155
+
156
+ uvEdge.y.addAssign( e.pixelStep.mul( 0.5 ) );
157
+ edgeStep.assign( vec2( texSize.x, 0.0 ) );
158
+
159
+ } ).Else( () => {
160
+
161
+ uvEdge.x.addAssign( e.pixelStep.mul( 0.5 ) );
162
+ edgeStep.assign( vec2( 0.0, texSize.y ) );
163
+
164
+ } );
165
+
166
+ const edgeLuminance = l.m.add( e.oppositeLuminance ).mul( 0.5 );
167
+ const gradientThreshold = e.gradient.mul( 0.25 );
168
+
169
+ const puv = uvEdge.add( edgeStep.mul( EDGE_STEPS.element( 0 ) ) ).toVar();
170
+ const pLuminanceDelta = SampleLuminance( puv ).sub( edgeLuminance ).toVar();
171
+ const pAtEnd = abs( pLuminanceDelta ).greaterThanEqual( gradientThreshold ).toVar();
172
+
173
+ Loop( { start: 1, end: EDGE_STEP_COUNT }, ( { i } ) => {
174
+
175
+ If( pAtEnd, () => {
176
+
177
+ Break();
178
+
179
+ } );
180
+
181
+ puv.addAssign( edgeStep.mul( EDGE_STEPS.element( i ) ) );
182
+ pLuminanceDelta.assign( SampleLuminance( puv ).sub( edgeLuminance ) );
183
+ pAtEnd.assign( abs( pLuminanceDelta ).greaterThanEqual( gradientThreshold ) );
184
+
185
+ } );
186
+
187
+ If( pAtEnd.not(), () => {
188
+
189
+ puv.addAssign( edgeStep.mul( EDGE_GUESS ) );
190
+
191
+ } );
192
+
193
+ const nuv = uvEdge.sub( edgeStep.mul( EDGE_STEPS.element( 0 ) ) ).toVar();
194
+ const nLuminanceDelta = SampleLuminance( nuv ).sub( edgeLuminance ).toVar();
195
+ const nAtEnd = abs( nLuminanceDelta ).greaterThanEqual( gradientThreshold ).toVar();
196
+
197
+ Loop( { start: 1, end: EDGE_STEP_COUNT }, ( { i } ) => {
198
+
199
+ If( nAtEnd, () => {
200
+
201
+ Break();
202
+
203
+ } );
204
+
205
+ nuv.subAssign( edgeStep.mul( EDGE_STEPS.element( i ) ) );
206
+ nLuminanceDelta.assign( SampleLuminance( nuv ).sub( edgeLuminance ) );
207
+ nAtEnd.assign( abs( nLuminanceDelta ).greaterThanEqual( gradientThreshold ) );
208
+
209
+ } );
210
+
211
+ If( nAtEnd.not(), () => {
212
+
213
+ nuv.subAssign( edgeStep.mul( EDGE_GUESS ) );
214
+
215
+ } );
216
+
217
+ const pDistance = float().toVar();
218
+ const nDistance = float().toVar();
219
+
220
+ If( e.isHorizontal, () => {
221
+
222
+ pDistance.assign( puv.x.sub( uv.x ) );
223
+ nDistance.assign( uv.x.sub( nuv.x ) );
224
+
225
+ } ).Else( () => {
226
+
227
+ pDistance.assign( puv.y.sub( uv.y ) );
228
+ nDistance.assign( uv.y.sub( nuv.y ) );
229
+
230
+ } );
231
+
232
+ const shortestDistance = float().toVar();
233
+ const deltaSign = bool().toVar();
234
+
235
+ If( pDistance.lessThanEqual( nDistance ), () => {
236
+
237
+ shortestDistance.assign( pDistance );
238
+ deltaSign.assign( pLuminanceDelta.greaterThanEqual( 0.0 ) );
239
+
240
+ } ).Else( () => {
241
+
242
+ shortestDistance.assign( nDistance );
243
+ deltaSign.assign( nLuminanceDelta.greaterThanEqual( 0.0 ) );
244
+
245
+ } );
246
+
247
+ const blendFactor = float().toVar();
248
+
249
+ If( deltaSign.equal( l.m.sub( edgeLuminance ).greaterThanEqual( 0.0 ) ), () => {
250
+
251
+ blendFactor.assign( 0.0 );
252
+
253
+ } ).Else( () => {
254
+
255
+ blendFactor.assign( float( 0.5 ).sub( shortestDistance.div( pDistance.add( nDistance ) ) ) );
256
+
257
+ } );
258
+
259
+ return blendFactor;
260
+
261
+ };
262
+
263
+ const ApplyFXAA = Fn( ( [ uv, texSize ] ) => {
264
+
265
+ const luminance = SampleLuminanceNeighborhood( texSize, uv );
266
+ If( ShouldSkipPixel( luminance ), () => {
267
+
268
+ return Sample( uv );
269
+
270
+ } );
271
+
272
+ const pixelBlend = DeterminePixelBlendFactor( luminance );
273
+ const edge = DetermineEdge( texSize, luminance );
274
+ const edgeBlend = DetermineEdgeBlendFactor( texSize, luminance, edge, uv );
275
+
276
+ const finalBlend = max( pixelBlend, edgeBlend );
277
+ const finalUv = uv.toVar();
278
+
279
+ If( edge.isHorizontal, () => {
280
+
281
+ finalUv.y.addAssign( edge.pixelStep.mul( finalBlend ) );
282
+
283
+ } ).Else( () => {
284
+
285
+ finalUv.x.addAssign( edge.pixelStep.mul( finalBlend ) );
286
+
287
+ } );
288
+
289
+ return Sample( finalUv );
290
+
291
+ } ).setLayout( {
292
+ name: 'FxaaPixelShader',
293
+ type: 'vec4',
294
+ inputs: [
295
+ { name: 'uv', type: 'vec2' },
296
+ { name: 'texSize', type: 'vec2' },
297
+ ]
298
+ } );
299
+
300
+ const fxaa = Fn( () => {
301
+
302
+ return ApplyFXAA( uvNode, this._invSize );
303
+
304
+ } );
305
+
306
+ const outputNode = fxaa();
307
+
308
+ return outputNode;
309
+
310
+ }
311
+
312
+ }
313
+
314
+ export default FXAANode;
315
+
316
+ export const fxaa = ( node ) => nodeObject( new FXAANode( convertToTexture( node ) ) );
@@ -1,8 +1,4 @@
1
- import TempNode from '../core/TempNode.js';
2
- import { uv } from '../accessors/UV.js';
3
- import { Fn, nodeProxy, vec4 } from '../tsl/TSLBase.js';
4
- import { mix, fract, clamp, rand } from '../math/MathNode.js';
5
- import { timerLocal } from '../utils/TimerNode.js';
1
+ import { TempNode, rand, Fn, fract, time, uv, clamp, mix, vec4, nodeProxy } from 'three/tsl';
6
2
 
7
3
  class FilmNode extends TempNode {
8
4
 
@@ -29,7 +25,7 @@ class FilmNode extends TempNode {
29
25
  const film = Fn( () => {
30
26
 
31
27
  const base = this.inputNode.rgb;
32
- const noise = rand( fract( uvNode.add( timerLocal() ) ) );
28
+ const noise = rand( fract( uvNode.add( time ) ) );
33
29
 
34
30
  let color = base.add( base.mul( clamp( noise.add( 0.1 ), 0, 1 ) ) );
35
31