In this project: https://playcanvas.com/project/803940/overview/shadertest
I am trying to connect the script with the fragment shader as the chunk.
But for some reason is not working, even tho I followed the tutorial from Leonidas.
Does anyone know what’s the problem with this setup?
As soon as you do that your shader will compile and you will get a list of the errors you need to fix:
ERROR: 0:148: 'UV' : undeclared identifier
Since you didn’t reference any texture in your material, your pixel shader doesn’t include texture coordinates. Meaning you can’t use the $UV variable to target those. That’s easy to fix, just add a texture to your diffuse slot, any will do, even a blank one.
ERROR: 0:198: 'constructor' : not enough data provided for construction
ERROR: 0:198: '=' : dimension mismatch
ERROR: 0:198: 'assign' : cannot convert from 'const 4-component vector of float' to 'highp 3-component vector of float'
The following line in your shader code has two mistakes:
dAlbedo =vec4(1,1,1);
a. That’s a vec3 not a vec4, hence the constructor error.
b. dAlbedo excepts a vec3 not a vec4, hence the dimension mismatch error and not being able to convert to vec3.
The fix would be:
dAlbedo =vec3(1,1,1);
You can also try putting a random color there and you will see your shader working:
I have 5 questions regarding the GLSL inside Playcanvas @Leonidas
1 Since dAlbedo approves the only vec3, how can we add transparency data ?
2 Is it possible to add text inside GLSL somehow?
3 About resolution, is that determined by the texture we add on diffuse slot in material?
4 In your tutorial, I saw this line of code “texture2DSRGB(uWaterPattern, uvWater).$CH” , what does $CH stands for, and is there any explanation about texture2DSRGB how it works
5 I made this shader, for optimization purposes, is it possible if the user doesn’t want the ring
on the ball, can I just remove this part code somehow, or that kind of optimization is useless or not possible
Short answer is no, you can’t display text in shader. A shader is a simple function that outputs a single color value, which is applied to all pixels at the same time.
if you mean iResolution, its your canvas resolution.
texture2DSRGB is a convenience function to read the color value via sampler2D at provided UV coordinates. It is the same as sampler2D(texture, uv);. The acronim $CH stands for Channel, and points to the Channel field in the Editor (refer to the last screenshot from @Leonidas).
You can add some uniform, e.g. uRingScale which would scale that ring to 0 or 1. You would then material.setParameter("uRingScale", scale); from script to affect the visiiblity of the ring.
Probably because the shader chunk property is called .opacityPS, not opacity.
If I would face a similar issue, where I don’t see an expected result of the shader, I would use SpectorJS (Chrome plugin). It is very simple to use - click a button and it will record your current frame. You then simply select the draw call, where you expect your material to be rendered and check the fragment shader code to see what’s up. I would then see that the fragment shader code has a default chunk code in it, and not the one I was presumably replacing with. I would then check if I am assigning it to the correct property, where I would find that I was not.
You can find this and other chunk property names here: