Flat Surface Shader [FSS]

Simple, lightweight Flat Surface Shader written in JavaScript for rendering lit Triangles to a number of contexts. Currently there is support for WebGL, Canvas 2D and SVG. Check out this demo to see it in action.

Understanding Lighting

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.

Light

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.

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

Geometry is simply a collection of triangles – nothing more.

Material

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

Mesh

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.

Scene

A Scene sits at the very top of the stack. It simply manages arrays of Mesh & Light objects.

Renderer

The Renderer takes all the information in a Scene and renders it to a context. Currently FSS supports WebGL, Canvas 2D and SVG.

Calculation

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.

Example

NOTE: All objects exist within the FSS namespace.

// 1) Create a Renderer for the context you would like to render to.
//    You can use either the WebGLRenderer, CanvasRenderer or SVGRenderer.
var renderer = new FSS.CanvasRenderer();

// 2) Add the Renderer's element to the DOM:
var container = document.getElementById('container');
container.appendChild(renderer.element);

// 3) Create a Scene:
var scene = new FSS.Scene();

// 4) Create some Geometry & a Material, pass them to a Mesh constructor, and add the Mesh to the 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.add(mesh);

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

// 6) Finally, render the Scene:
renderer.render(scene);

Building

Install Dependancies:

npm install uglify-js@2.2.5

Build:

node build.js

Inspiration

Please also checkout the case study on Behance created by my dear friend Tobias van Schneider – @schneidertobias.

Acknowledgments

The architecture of this project was heavily influenced by three.js and the implementation of the Vector calculations was taken from glMatrix.

Author

Matthew Wagerfield: @mwagerfield

License

Licensed under MIT. Enjoy.