Learning Compute shaders in tsl

Resources
1

From where can I know more about compute shaders in tsl.

and one more thing, when i do compute shaders in tsl with webgpuRenderer, will it work inside webgl?

2

There are no compute shaders in WebGL, so it won’t really be the same. However it’s possible that three does some kind of a fallback.

3

Type the search term “compute” in the three.js examples and you should find several useful examples. Note that they all appear in the WebGPU section.

I can’t imagine how three.js could make compute shaders work in WebGL. For me, the ability to use compute shaders is a big reason why I switched to using WebGPU.

However, from what I have seen compute shaders do not work well (at all?) with iPhone or iPads.

4

There has been a concept of gpgpu with WebGL. I think you overall have less control, and it’s not as efficient but can essentially do the same thing. Regarding mobile, I has some issues until recently just running WebGPU on my iPhone.

5

I can get at least some of the three.js WebGPU examples to run on my iPhone.
But I can’t get some of my WebGPU programs to run on my iPhone.
Is there a special switch to set? Or CSS instruction?

6

I don’t know much about this, perhaps :confused:

7

Now that I look at the three.js WebGPU examples, I see that they have changed the stylesheet from main.css to example.css. The main.css included the following instructions in the info section:

	-moz-user-select: none;
	-webkit-user-select: none; // relates to Apple ios
	-ms-user-select: none;

The example.css has none of these instructions.
Nor do the program headers appear to include any Apple ios- related instructions.

I believe that one advantage of using tsl is that it works well with Apple ios.

8

I think you might be mixing up a few things here. CSS is hardly related to WebGL/webgpu. While you do have to use it to control the sizing of the canvas element, in that context the canvas is just a dom element like any other. You don’t have to ask for the WebGL context, you can ask for the 2d context. As such it has nothing to do with shaders and by extension TSL.

I don’t think there is a CSS setting that is related to the availability of WebGPU. MDN has a good reference for all of these. What you’re looking at prevents the user to select the text within that div.

I am unable to run WebGPU on my iPhone, probably need to do some update.

9

What I need is the texture output from the compute shaders. Do you guys know any way?

1 Like
10

Like this example? And this example puts animated textures on spheres. Several three.js versions ago, I modified the last example to work on a flat plane.

11

I’m afraid we’ve gone off on a tangent.

You had said “Regarding mobile, I has some issues until recently just running WebGPU on my iPhone.” I thought that meant that you had might have found a special way to turn on WebGPU on your iPhone.

On my iPhone, WebGPU is working automatically. But there was one WebGPU program in my collection that didn’t work. So I was hoping that problem might be solved if there was a special switch or special commands on my iPhone or in my program or css that could make it work.

I agree that the css change would not change things. Older css instructions used to have several lines relating to the Apple webkit. Those are all gone.

12

i also need access to the UV coordinates, but I don’t know how to get them.

in the code I can see


const posX = instanceIndex.mod(width);
const posY = instanceIndex.div(width);
const indexUV = uvec2(posX, posY);

but its not the UV coordinate :smiling_face_with_tear:

or maybe I’m missing something?

13

got it, I just need to normalize it, and that’s it.

const uv = vec2(
   float(posX).add(0.5).div(width),
   float(posY).add(0.5).div(height)
);
1 Like
14

Just to make sure because you started the discussion talking about compute shaders and ended up talking about textures (fragment shaders). In WGSL, you use different commands to save your final values. For fragment shaders, you use TextureStore(destination,index,vec4(value). For compute shaders, you simply use Destination(index). As I recall, the index for compute shaders does not use uv values.

Here is a program where I made compute shader results visible by transferring the contents of those compute shaders to fragment shaders. (This is a series of shaders that compute vertex values for ocean waves.) This is helpful if you want to see what is going on. But, as the first panel shows, the results are not always visible. And you always need to set the last value (the “a” in rgba) = 1.

1 Like