Skip to content

TSL: Introduce uniformTexture() and uniformCubeTexture() #31190

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 28, 2025

Conversation

sunag
Copy link
Collaborator

@sunag sunag commented May 28, 2025

Related issue: #30849, Closes #31173

Description

The introduction of uniformTexture() should help more experienced developers migrate their shaders to TSL, since it more closely resembles the GLSL style.

Now the texture() function can also sample uniformTexture() as in the example below.

const myUniform = uniformTexture( textureA );
material.colorNode = texture( myUniform, uv() );

setTimeout( () => {

	// switch texture after 1 second
	myUniform.value = textureB;

}, 1000 );

Another example creating a helper function to get the material map as uniform.

const materialUniformTexture = ( property ) => uniformTexture().onObjectUpdate( ( { material } ) => material[ property ] );

const mapUniform = materiaUniformTexture( 'map' );

material.map = textureA;
material.colorNode = texture( mapUniform, uv() );

setTimeout( () => {

	// switch texture after 1 second
	material.map = textureB;

}, 1000 );

/cc @Makio64

@sunag sunag mentioned this pull request May 26, 2025
12 tasks
Copy link

📦 Bundle size

Full ESM build, minified and gzipped.

Before After Diff
WebGL 337.26
78.64
337.26
78.64
+0 B
+0 B
WebGPU 552.95
153.31
553.51
153.43
+561 B
+122 B
WebGPU Nodes 552.3
153.16
552.86
153.28
+561 B
+123 B

🌳 Bundle size after tree-shaking

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

Before After Diff
WebGL 468.44
113.28
468.44
113.28
+0 B
+0 B
WebGPU 627.97
170
628.45
170.12
+484 B
+123 B
WebGPU Nodes 582.82
159.33
583.3
159.47
+484 B
+139 B

@sunag sunag added this to the r177 milestone May 28, 2025
@sunag sunag marked this pull request as ready for review May 28, 2025 06:17
@sunag sunag merged commit 99347e1 into mrdoob:dev May 28, 2025
12 checks passed
@sunag sunag deleted the dev-uniformTexture branch May 28, 2025 15:20
@Makio64
Copy link
Contributor

Makio64 commented May 29, 2025

@sunag it's very cool ! I didnt understand the use of onObjectUpdate but it's so powerful!

Just a quick question , when we do this approach, it create different version of the material or it re-assign the uniform between both drawcall?

Also is it internally optimized so if I render material1 textureA / material1 textureB one after the other it only change the uniform ?

Thanks !

@sunag
Copy link
Collaborator Author

sunag commented May 29, 2025

Just a quick question , when we do this approach, it create different version of the material or it re-assign the uniform between both drawcall?
Also is it internally optimized so if I render material1 textureA / material1 textureB one after the other it only change the uniform ?

The approach you saw above only updates the uniform according to the object/material that will be rendered, it does not create different versions of the material.

@Makio64
Copy link
Contributor

Makio64 commented May 29, 2025

So just to confirm if i have materialA and materialB with each fews models its more performant for the webgpurenderer to do :

renderOrder 1 : 
meshA.materialA
meshC.materialA
meshE.materialA

renderOrder 2:
meshB.materialB
meshD.materialB

instead of

no renderOrder :
meshA.materialA
meshB.materialB
meshC.materialA
meshD.materialB
meshE.materialA

note in above example lets say each mesh have a different map for example.

@sunag
Copy link
Collaborator Author

sunag commented May 29, 2025

The first option, with order, in order to optimize commands for gpu.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Understanding building / accessing a material map in an abstract way inside a Fn function without passing an argument
2 participants