Skip to content
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

TSL 'property', using array of float or vec, or mat etc.. #30097

Open
Samsy opened this issue Dec 10, 2024 · 9 comments
Open

TSL 'property', using array of float or vec, or mat etc.. #30097

Samsy opened this issue Dec 10, 2024 · 9 comments
Labels
TSL Three.js Shading Language

Comments

@Samsy
Copy link
Contributor

Samsy commented Dec 10, 2024

Description

Still porting Legacy shaders into TSL, bumped into something,

Using Legacy shaders, we could replace a string in a chunk to inject =>

shader.replace( xxx, 
 '
  vec4 META_DATA_ARRAY[10];
    META_DATA_ARRAY[0] = vec4(0.0, 0.7513855695724487, 1.0, 0.0950118750333786);
    META_DATA_ARRAY[1] = vec4(0.0, 0.9136975407600403, 1.0, 0.0482977032661438);
    META_DATA_ARRAY[2] = vec4(0.0, 0.5273159146308899, 1.0, 0.12668250501155853);
    META_DATA_ARRAY[3] = vec4(0.0, 0.9619952440261841, 1.0, 0.03246239200234413);
    META_DATA_ARRAY[4] = vec4(0.0, 0.0, 1.0, 0.241488516330719);
' + xxx ) 
  

Using 'property' in TSL to write hardcoded float, vec, mat etc.. is available

Been looking for an example in the repo that shows support on TSL 'property' for arrays of vec, float, mat etc.. but could not find it ( unless I completely missed it )

@Samsy Samsy changed the title TSL Property, using array of float or vec4, or mat3 TSL 'property', using array of float or vec, or mat etc.. Dec 10, 2024
@Spiri0
Copy link
Contributor

Spiri0 commented Dec 11, 2024

That's what the storage buffer is for. I use it for something like that

@Samsy
Copy link
Contributor Author

Samsy commented Dec 12, 2024

I'm not familiar with the storage buffer yet, but it does not really fit the same purpose if that is a uploaded buffer.
Here in the legacy, the values are hardcoded in the shader directly, and the number of indexes in the array might be completely arbitrary

@Spiri0
Copy link
Contributor

Spiri0 commented Dec 12, 2024

You can use it like this in a wgslFn

let META_DATA_ARRAY = array<vec4<f32>, 10>(
    vec4<f32>(0.0, 0.75138557, 1.0, 0.095011875),
    vec4<f32>(0.0, 0.91369754, 1.0, 0.048297703),
    vec4<f32>(0.0, 0.52731591, 1.0, 0.126682505),
    vec4<f32>(0.0, 0.96199524, 1.0, 0.032462392),
    vec4<f32>(0.0, 0.0, 1.0, 0.241488516),
    (xxx),
);

With the wgslFn you can work in wgsl raw code. This helps me a lot because I can use the W3C documentation directly. Only the binding management continues to be done by the node system, but I think that's good.
Please excuse me if I make the mistake of automatically assuming that you are using three.webgpu.js when you talk about TSL.

@Samsy
Copy link
Contributor Author

Samsy commented Dec 12, 2024

Well I could, but this need to work for both WebGL backend and WebGPU backend in TSL

@Spiri0
Copy link
Contributor

Spiri0 commented Dec 12, 2024

Then I'm sorry I can't help because I only work with webgpu

@sunag
Copy link
Collaborator

sunag commented Dec 12, 2024

Wouldn't you be looking for uniformArray?

const array = uniformArray( [ new Vector3( 1, 1, 1 ), new Vector3( 1, 1, 1 ), new Vector3( 1, 1, 1 ) ] );
const element = bloomTintColors.element( 0 )

@Samsy
Copy link
Contributor Author

Samsy commented Dec 13, 2024

hey @sunag !

Well, not really, this won't be data passed as uniforms since those will never change but as defines, the same way we can do :

property( vec4 ), but working with array instead

@Spiri0
Copy link
Contributor

Spiri0 commented Dec 14, 2024

I find the uniformArray an elegant solution for this case where WebGL / WebGPU compatibility is important. In the end, the data is also in the GPU. A new node that is either converted into glsl code or into wgsl code in the backend that has also be done by the cpu first, ends up in the same result as using uniformArray, where the data is only sent to the gpu once if you don't change it.
I previously closed a PR of mine that was about arrays because I realized that I could get the same result with the uniformArray. The fact that it's a different way doesn't bother me as long as it's efficient.
When it comes to things like this, I always emphasize that this is just my personal view and not a dogma for others. But I hope that I was able to make the uniformArray node a little more attractive to you. I like this node, it serves its purpose

@Samsy
Copy link
Contributor Author

Samsy commented Dec 16, 2024

Well, it is just that we are able to write a property =>

const myproperty = property('float', 'whatever).assign( 0.5 )

This one translates into a hardcoded value in the shader and isn't a uniform or a buffer.

To write an array at the moment the way it to use a uniformArray, but the actual data is purely static and does not need to be a uniform, but a sort of define

@Mugen87 Mugen87 added the TSL Three.js Shading Language label Dec 16, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
TSL Three.js Shading Language
Projects
None yet
Development

No branches or pull requests

4 participants