BabylonJS: ShaderMaterial

to get the Shader Material

pvar 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", 
  • Options − object containing attributes and uniforms arrays containing their names as strings.

The shader syntax with values look as shown below −

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

Attributes have to be in array form. These contain position, normal and uv which are vector3 3D floating point vectors.

  • 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.

The above are built in variables in GLSL language.

Leave a Reply

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