Modify texture properties failed(seems) with ShaderMaterial

Questions
,
1

Hi!
I tried to load this texture sheet

to perform a good explosion effect
It works fine if i use PointsMaterial
But if i switch to ShaderMaterial , the texture offsets change can not apply to Points.
Here are my codes
If you switch Line161 to material you can see texture sheets works perfect
If you switch Line161 to material1 seems texture offsets are not working

2

Just out of curiousity, if it works with PointsMaterial, why do you want it with ShaderMaterial?

3

The library transforms uvs according to offset and rotation texture settings in the vertex shader for built-in materials (uvTransform).

The most straightforward way to make it work in a custom shader is to implement your own uv transformation matrix and apply it.

If you want to use the library code, you will need to add some includes (via .onBeforeCompile), like

#include <uv_vertex>

and possibly others into your shader code as well as some defines (USE_UV, USE_MAP).

You can have a look at what code the library produces here (if you open the dev console and “copy string content” from printed shader objects):

Notice how shift disappears when you change mat to mat1.

1 Like
4

Hello ! The reason why I tried to do this with ShaderMaterial is beacuse I wanna control each point’s size,opacity,rotation,etc.

5

Thanks for replying ! Your explanation and example are fantastic.And the two solutions you offered are very helpful . I’ll add includes via onBeforeCompile !

1 Like
6

For PointsMaterial, the stuff for map UVs is in these chunks:

But, if you want each particle to behave individually, the solution with computing of offset for texture on js side won’t work the way you expect. You need to compute it for each particle either in shaders or on js, having time and the index of tile to show.

1 Like
7

Thanks for the info and solution ! I’ll compute uv in shaders :smile::smile::smile:

8

I added some code to the fiddle that allows to control scale/rotation/offset of the texture from JS. Changes made to mtx should reflect in the render.

1 Like
9

Bravo ! I think this deserves a showcase/resource :kissing_heart:. It’s very helpful and flexible when we trying to do texture sheets animation.

10

T.If VertexShader add gl_PointSize with THREE.Points,seems uv is not correctly mapped to Points.

11

If we don’t take into account the transform matrix of texture (uvTransform), the main UV coords for a point is vec2(gl_PointCoord.x, 1.0 - gl_PointCoord.y); in fragment shader.

Attentive look at the source code of PointsMaterial gives us no sign of shader chunks for UV in vertex shader.

1 Like
12

I’m not sure what the problem is at this point.

My example used an undivided plane geometry (a quad with 4 unique vertices and uvs attached to them) to render the texture.

As @prisoner849 mentioned, points material is different, since each point is only one vertex, there are no uvs there per se, gl_PointCoord is used instead as the offset inside the point square.

In the first case GPU renders triangles, in the second - points, so different draw modes and code.

That being said, I completed the example above with the actual explosion animation code:

2 Likes
13

:+1: Thanks to you guys ! I feel a little bit closer to master THREE and shaders.

14

:+1:Awsome ! I defined “uv” like @prisoner849 and you said.Use gl_PointCoord instead ,it’s working now