Simple, lightweight Flat Surface Shader [FSS] written in JavaScript for rendering lit Triangles to a Canvas element. Check out this demo to see it in action.

Simply put, FSS uses the Lambertian Reflectance model to calculate the color of a Triangle based on an array of Light sources within a Scene.

A Light is composed of a 3D position Vector and 2 Color objects defining its ambient & diffuse emissions. These color channels interact with the Material of a Mesh to calculate the color of a Triangle.

A Triangle is constructed from 3 Vertices which each define the x, y and z coordinates of a corner. Based on these 3 Vertices, a forth 3D Vector is automatically derived at the center of the Triangle – this is known as its Centroid. Alongside the Centroid, a fifth unit Vector is automatically calculated which defines the surface Normal. The Normal describes the direction that the Triangle is facing.

Geometry is simply a collection of triangles – nothing more.

A Material is composed of 2 Color objects which define the ambient & diffuse properties of a surface.

A Mesh is constructed from a Geometry object and a Material object. All the Triangles within the Geometry are rendered using the properties of the Material.

A Scene sits at the very top of the stack. It manages an array of Mesh & Light objects and renders the information to a canvas.

For every Triangle in a Scene the following calculation is performed:

1. A Vector between the Triangle's Centroid and the Light's Position is calculated and normalised. This can be considered as a single Ray travelling from the Light to the center of the Triangle.
2. The angle beween this Ray and the Normal of the Triangle is then calculated using the dot product. This angle is simply a number ranging from -1 to 1. When the Ray and the Normal are coincident, this value is 0, and when they are perpendicular to one another, this value is 1. This value goes into the negative range when the Light is behind the Triangle.
3. Firstly, the diffuse color of the Light is multiplied by the diffuse color of the Material associated with the Triangle. This color is then multiplied by the coincidence angle described above. For example, if the diffuse color of the Light is #FFFFFF { R:1, G:1, B:1 } and the diffuse color of the Material is #FF0000 { R:1, G:0, B:0 }, the combined color would be #FF0000 { R:1*1=1, G:1*0=0, B:1*0=0 }. If the coincidence angle was 0.5, the final color of the Triangle would be #800000 { R:1*0.5=0.5, G:0*0.5=0, B:0*0.5=0 }.
4. In much the same way as above, the ambient color of the Light is multipled by the ambient color of the Material. Since ambient light is a uniform dissipation of scattered light, it is not modified any further.
5. The final color of the Triangle is simply calculated by adding the diffuse & ambient colors together. Simples.

NOTE: All Flat Surface Shader Objects exist within the FSS namespace.

// 1A) You can either add the Scene's canvas to the DOM:
var scene = new FSS.Scene();
var container = document.getElementById('container');
container.appendChild(scene.canvas);

// 1B) Or pass your own canvas reference to the Scene constructor as an option:
var canvas = document.getElementById('canvas');
var scene = new FSS.Scene({canvas:canvas});

// 2) Create some Geometry & a Material, pass them to a Mesh constructor, and add the Mesh to a Scene:
var geometry = new FSS.Plane(200, 100, 4, 2);
var material = new FSS.Material('#444444', '#FFFFFF');
var mesh = new FSS.Mesh(geometry, material);
scene.addMesh(mesh);

// 3) Create and add a Light to the Scene
var light = new FSS.Light('#FF0000', '#0000FF');
scene.addLight(light);

// Finally, render the Scene
scene.render();

Install Dependancies:

npm install [email protected]

Build:

node build.js

Matthew Wagerfield: @mwagerfield

Licensed under MIT. Enjoy.