Vertex Color input in babylon shaders?

Hello! I continue to master the shaders, and this time I ran into the next problem. I can’t understand how to convey the color of the vertex that it processes to the shader. Since the built in inputs list has no gl_Color analogue
https://doc.babylonjs.com/resources/shaderintro#built-in-inputs
Can you please help me figure out how to do this? Thank you!

This may help you https://www.babylonjs-playground.com/#1BLVWO#22. The fog color is passed to the shader at line 25.

Lava documentation

Lava fragment shader - see line 14
Lava vertex shader

1 Like

To pass data computed in the vertex shader to the fragment shader, you need to declare a varying variable in both shaders.

See line #48 in the vertex and #26 in the fragment shader linked to by @JohnK:

varying vec4 vColor;

The vColor variable is computed/set in the vertex shader and is re-used in the fragment shader.

2 Likes

Excellent thank you! By the way, is there some place where I can see all the available built-in variables?
I understand correctly that they are marked by “#ifdef” in the shader from the example? Is this an exhaustive list? Thx!

No, those are not the built-in variables you can use, they are defines set by the engine to modify the code generated according to the properties you set on the material class instance.

Try: Introduction to Shaders - Babylon.js Documentation

The built-in variables are listed in this doc. Try also to follow the links in the “Further Reading” section.

I still do not understand a complete picture of the process. Can you please help me with this? :slight_smile: For example, I need to take the vertex color of the imported mesh (from a 3D editor with baked vertex colors), and process it in the vertex shader, depending on the color. I somehow need to pass this color to the shader. I can’t do it at the mesh level, since the shader is supposed to be universal, and should work with any object. I also can’t access via Built In Inputs, because they only transmit position, normal and uv. At this point I am at an impasse. I see that this is possible, since nme materials esealy process vertices colors. But apparently I’m missing some important piece of this puzzle. Maybe this is a stupid question, but I started to study shaders only a few days ago, and I really want to achieve understanding. I would be very grateful for any help! :slight_smile:

Data specific to meshes are called attributes.

You have the position, normal and uv among others. Babylonjs will setup your material to pass those attributes to the shader if they are defined at the mesh level.

Vertex color is another attribute that Babylonjs will pass to the shader if it is defined for the mesh AND if mesh.useVertexColors = true.

And if you also want to use the alpha component of the vertex color, you must set mesh.useVertexAlpha = true.

Note that mesh.useVertexColors is true by default, so if your mesh does have a vertex color attribute, you will be able to access it in your vertex / fragment shader.

The actual data of those attributes are not part of the shader, they are specific to each mesh. When a mesh must be rendered, the vertex/fragment shaders are enabled at the WebGL level (so that the next rendering operation will use those shaders) and the data of the attributes are also “wired” by WebGL so that the shader code will be able to use them. But as they are not part per see of the shader code, the shaders can be reused to display different meshes.

1 Like

Great, thank you for the detailed explanation! Based on it, I seem to understand the moment that I was missing. Shaders connect attributes depending on the properties of the object. Like “vec4 color” for objects that have vertex color properties, and vec4 world0,world1,world2,world3 for instances; But these attributes are not listed in the documentation, it was a problem :slight_smile: So “gl_Color” from GLSL it is just “color” in babylon! I have not tested it in practice, but It seems that this is the case. Thank you!

The names of the attributes passed to the vertex shader are set by Babylon, they are not built-in GLSL names: position, normal, uv, etc.

So, you must use those names in the shader for it to be valid.

There are only a few parameters that you can use by their GLSL names: gl_Position, gl_FragCoord, gl_PointSize and a few others.

You can create a custom material thanks to the ShaderMaterial class. Have a look at this doc for more information on the topic: Use ShaderMaterial - Babylon.js Documentation

1 Like