From ddb87aca43b862715cb1b12e5d4c1cbecb131e6a Mon Sep 17 00:00:00 2001 From: WestLangley Date: Thu, 4 Jun 2026 19:48:20 -0400 Subject: [PATCH 1/2] TSL: Align packing nomenclature with `packing.glsl.js` (#33715) --- docs/index.html | 4 +- docs/llms-full.txt | 10 ++--- docs/pages/TSL.html | 4 +- examples/webgpu_mesh_batch.html | 4 +- examples/webgpu_mrt.html | 4 +- examples/webgpu_postprocessing_ao.html | 6 +-- examples/webgpu_postprocessing_ssgi.html | 6 +-- .../webgpu_postprocessing_ssgi_ballpool.html | 10 ++--- examples/webgpu_postprocessing_ssr.html | 6 +-- examples/webgpu_test_memory.html | 6 +-- src/Three.TSL.js | 2 + src/materials/nodes/MeshNormalNodeMaterial.js | 4 +- src/nodes/utils/Packing.js | 39 +++++++++++++++++-- 13 files changed, 69 insertions(+), 36 deletions(-) diff --git a/docs/index.html b/docs/index.html index e6c188d6c6a96e..a9ef2897978655 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1091,7 +1091,7 @@

TSL

  • code
  • colorBleeding
  • colorSpaceToWorking
    • -
  • colorToDirection
    • +
  • unpackRGBToNormal
  • compute
  • computeBuiltin
  • computeKernel
    • @@ -1126,7 +1126,7 @@

    TSL

  • difference
  • diffuseColor
  • diffuseContribution
    • -
  • directionToColor
    • +
  • packNormalToRGB
  • directionToFaceDirection
  • dispersion
  • distance
    • diff --git a/docs/llms-full.txt b/docs/llms-full.txt index cdf4a235e6f04a..c230cbb482493c 100644 --- a/docs/llms-full.txt +++ b/docs/llms-full.txt @@ -1403,8 +1403,8 @@ const matcap = texture( matcapMap, matcapUV ); | Variable | Description | Type | | -- | -- | -- | -| `directionToColor( value )` | Converts direction vector to color. | `color` | -| `colorToDirection( value )` | Converts color to direction vector. | `vec3` | +| `packNormalToRGB( value )` | Converts normal vector to color. | `color` | +| `unpackRGBToNormal( value )` | Converts color to normal vector. | `vec3` | ## Render Pipeline @@ -1442,18 +1442,18 @@ MRT allows capturing multiple outputs from a single render pass. Instead of rend Use `setMRT()` with the `mrt()` function to define which outputs to capture: ```js -import { pass, mrt, output, normalView, velocity, directionToColor } from 'three/tsl'; +import { pass, mrt, output, normalView, velocity, packNormalToRGB } from 'three/tsl'; const scenePass = pass( scene, camera ); scenePass.setMRT( mrt( { output: output, // Final color output - normal: directionToColor( normalView ), // View-space normals encoded as colors + normal: packNormalToRGB( normalView ), // View-space normals encoded as colors velocity: velocity // Motion vectors for temporal effects } ) ); ``` -Each MRT entry accepts any TSL node, allowing you to customize outputs using formulas, encoders, or material accessors. For example, `directionToColor( normalView )` encodes view-space normals into RGB values. You can use any TSL function to transform, combine, or encode data before writing to the render target. +Each MRT entry accepts any TSL node, allowing you to customize outputs using formulas, encoders, or material accessors. For example, `packNormalToRGB( normalView )` encodes view-space normals into RGB values. You can use any TSL function to transform, combine, or encode data before writing to the render target. Within a TSL function `Fn( ( { material, object } ) => { ... } )`, you have complete access to the current material and object being rendered, enabling full customization of outputs. diff --git a/docs/pages/TSL.html b/docs/pages/TSL.html index 7a6e91a9c3dd85..6a5347f2914ed6 100644 --- a/docs/pages/TSL.html +++ b/docs/pages/TSL.html @@ -3487,7 +3487,7 @@

    ..colorToDirection( node : Node.<vec3> ) : Node.<vec3>

    +

    .unpackRGBToNormal( node : Node.<vec3> ) : Node.<vec3>

    Unpacks a color value into a direction vector.

    @@ -4251,7 +4251,7 @@

    ..directionToColor( node : Node.<vec3> ) : Node.<vec3>

    +

    .packNormalToRGB( node : Node.<vec3> ) : Node.<vec3>

    Packs a direction vector into a color value.

    diff --git a/examples/webgpu_mesh_batch.html b/examples/webgpu_mesh_batch.html index 9db61c2875147e..2f828f566da0df 100644 --- a/examples/webgpu_mesh_batch.html +++ b/examples/webgpu_mesh_batch.html @@ -42,7 +42,7 @@ import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { radixSort } from 'three/addons/utils/SortUtils.js'; - import { normalView, directionToColor, diffuseColor, vec4 } from 'three/tsl'; + import { normalView, packNormalToRGB, diffuseColor, vec4 } from 'three/tsl'; let camera, scene, renderer; let controls; @@ -131,7 +131,7 @@ material = new THREE.MeshBasicNodeMaterial(); material.outputNode = vec4( - diffuseColor.mul( directionToColor( normalView ).y.add( 0.5 ) ).rgb, + diffuseColor.mul( packNormalToRGB( normalView ).y.add( 0.5 ) ).rgb, diffuseColor.a, ); diff --git a/examples/webgpu_mrt.html b/examples/webgpu_mrt.html index 0e0e7e3bad9de0..5b4bd0b78f2bce 100644 --- a/examples/webgpu_mrt.html +++ b/examples/webgpu_mrt.html @@ -38,7 +38,7 @@