Part 2 – Materials and shaders

In KickJS a Mesh rendered with a MeshRenderer component needs a Material. A material is basically an instance of a shader including the actual values the shader uses (such as colors, textures, etc.).

The Shader object determines how a vertex is transformed (the vertex shader) and how rasterized pixels are drawn (the fragment shader). The Shader object also contains several states that determine how WebGL draw the pixels to the screen (such as blend, depth mash, z-test and polygon offset).

The vertex shader and the fragment shader can expose uniform variables that can be set for each object rendered. In the Shader object, default values for these uniforms exist, and in the Material object, these uniform properties can be set using setUniform method. The shader also has a list of vertex attributes, which is the data, stored per vertex in the mesh. There needs to be correspondence between what data the shader needs and what data the mesh has.

<

KickJS has reserved uniforms starting with underscore (_) to have a special meaning. These uniforms are set automatically each time the object is being rendered. An example of this is the transformation of the model, the time and light information. See the full list of automatic uniforms in the shader documentation: http://www.kickjs.org/api/classes/kick.material.Shader.html

KickJS has a number of built-in shaders. A complete list can be found in the documentation (http://www.kickjs.org/api/classes/kick.core.Project.html )