BabylonJS: ShaderMaterial Cheat Sheet

Below is the syntax to get the shader material

var myShaderMaterial = new BABYLON.ShaderMaterial(name, scene, route, options);

Parameters

The parameters related to the shader material:

• Name − A string, naming the shader.
• Scene − The scene in which the shader is to be used.
• Route − The route to the shader code in one of the three ways.

Syntax:

object - {
   vertex: "custom", 
   fragment: "custom" 
}, used with 
BABYLON.Effect.ShadersStore["customVertexShader"] and
BABYLON.Effect.ShadersStore["customFragmentShader"]

object - { 
   vertexElement: "vertexShaderCode", 
   fragmentElement: "fragmentShaderCode" 
}, 
used with shader code in <script> tags

string - "./COMMON_NAME", 

This syntax used with external files COMMON_NAME.vertex.fx and COMMON_NAME.fragment.fx in the index.html folder.

• Options − object containing attributes and uniforms arrays containing their names as strings.

Syntax:

var shaderMaterial = new BABYLON.ShaderMaterial("shader", scene, {
   vertex: "custom",
   fragment: "custom",
},
{
   attributes: ["position", "normal", "uv"],
   uniforms: ["world", "worldView", "worldViewProjection", "view", "projection"]
});

Note: Attributes have to be in array form.

• vec2 − A two-dimensional vector of floating-point numbers.
• vec3 − A three-dimensional vector of floating-point numbers.
• mat4 − A matrix with 4 columns and 4 rows floating-point numbers.
• gl_Position − It provides positional data for screen coordinates.
• gl_FragColor − It provides colour data for the representation of a facet on screen.