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.