BabylonJS: ShaderMaterial Cheat Sheet

Below is the syntax to get the shader material

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


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.


object - {
   vertex: "custom", 
   fragment: "custom" 
}, used with 
BABYLON.Effect.ShadersStore["customVertexShader"] and
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.


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.

Leave a Reply

Your email address will not be published. Required fields are marked *