TSL operator question

Questions
,
1

I’m trying to recreate a basic 2D metaball shader using TSL on webGPU. Everything is fine, shader is running. See the codepen bellow. But can’t find a way to iterate/loop float to draw and merge more metaballs (line 43). Current demo use only 2, and I’m aiming for >40 with their own value.

I tried to use .addAssign to emulate some a+=b (that’s how it’s done with GLSL ) inside a Loop but seem I miss something. Is this even a viable path? Any help would be great! :grin:

2

The .addAssign method needs a variable to work with. Here is how this code:

const mergedBall = ballOne.add(ballTwo); // X=A+B

can be written with .addAssign:

const mergedBall = float(0).toVar(); // X=0
mergedBall.addAssign( ballOne );     // X += A
mergedBall.addAssign( ballTwo );     // X += B

So, yes, you can use it in a loop.

Here is a demo of a loop in TSL (it is from the Wood TSL Texture):

4 Likes
3

Amazing, thank you!
I’m gonna look at the wood demo as well. TSL is really cool but there is not many entry level examples (nothing wrong here it’s a work in progress API) so anything I can learn from is valuable.

Edit: Codepen is updated with the answer, just in case someone need it.
Time to leave this and dive into uniforms and dataTexture to squeeze as much data I can. :wave:

1 Like