three.js icon indicating copy to clipboard operation
three.js copied to clipboard

TSL: Remove `transformed*` prefix

Open sunag opened this issue 6 months ago • 1 comments

Related issue: https://github.com/mrdoob/three.js/pull/31177, https://github.com/mrdoob/three.js/pull/31260

Description

Removing the transformed prefix from normals also simplifies the shader creation process, making it less confusing.

For those who need normals without the fine surface transformations (fragment), a suffix called Geometry has been added, such as normalViewGeometry.

With the implementation of namespace, the normalView node, for example, will return the same as normalViewGeometry if used inside the material.normalNode input, and if used outside, it will use the final calculation.

This is also more in line with the strategy of moving the vertex calculations from skinning and morph to compute() and leaving it with the fewest possible modifications, perhaps none for the target developer.

sunag avatar Jun 15 '25 18:06 sunag

📦 Bundle size

Full ESM build, minified and gzipped.

Before After Diff
WebGL 337.54
78.73
337.54
78.73
+0 B
+0 B
WebGPU 555.73
153.92
556.32
154.12
+591 B
+205 B
WebGPU Nodes 555.08
153.76
555.67
153.97
+591 B
+204 B

🌳 Bundle size after tree-shaking

Minimal build including a renderer, camera, empty scene, and dependencies.

Before After Diff
WebGL 468.74
113.38
468.74
113.38
+0 B
+0 B
WebGPU 631.33
170.79
632.24
171.08
+911 B
+291 B
WebGPU Nodes 586.18
160.12
587.24
160.39
+1.06 kB
+267 B

github-actions[bot] avatar Jun 15 '25 18:06 github-actions[bot]

If a normalMap is used, the normalWorld cannot calculate surface reliefs during the vertex stage or while constructing normals, as this would lead to recursive computation issues. Therefore, in both cases, normalWorld behaves according to the logic defined in each specific build and sub-build stage of the shader.

Vertex Stage or Normal Sub-Build Stage Fragment Stage
image image
// Examples of Vertex-Stage
material.positionNode = normalWorld /*... no logic considering only for example ...*/
material.colorNode = normalWorld.toVertexStage(); // run normalWorld completely in vertex-stage

// Example of Normal Sub-Build Stage
material.normalNode = normalWorld  /*... no logic considering only for example ...*/

// Examples of Fragment-Stage
material.colorNode = normalWorld;
material.opacityNode = normalWorld;
material.roughnessNode = normalWorld;
material.metalnessNode = normalWorld;
// etc

/cc @mrdoob @Mugen87

sunag avatar Jun 16 '25 05:06 sunag