Flat Surface Shader Tutorial
The Flat Surface Shader is a simple plugin developed by Matthew Wagerfield which is based on the Lambertian Reflectance model, where the color of a triangle is calculated by a variety of different light sources within a particular scene. It is a great alternative to creating 3d effects with WebGL. Basically, this cool toy takes geometry, light and triangles and turns it into something fun, exciting and beautiful that everyone can use. With this Flat Surface Shader, triangles are rendered into three different contexts (WebGL, Canvas 2D and SVG). You can customize the settings yourself and even export your finished piece of art as a SVG or a PNG graphic that you can use later. What makes this project even better is that it is open source. You can visit their website, have a look at the code yourself and you can even adapt it or make it better if you want to. Reference
On the Demo, I rendered FSS using a Canvas.
The Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | MESH: { ambient: '#555555', // Default diffuse: '#FFFFFF', // Default width: 1.2, // Triangle Width height: 1.2, // Triangle Height depth: 10, // Transparency of the triangles segments: 16, // Number of triangles to display in 1 row slices: 8, // Number of triangles to display in 1 column xRange: 0.8, // Wideness of the triangles in X Position yRange: 0.1, // Wideness of the triangles in Y Position zRange: 1.0, // Wideness of the triangles in Z Position speed: 0.002 // Speed of the moving traingles }, LIGHT: { autopilot: true, // Set this to true if you want the light to follow your mouse cursor ambient: '#880066', diffuse: '#ff8800', count: 2, // Contrast zOffset: 100, xyScalar: 1, speed: 0.001, gravity: 1200, dampening: 0.15, minLimit: 8, maxLimit: null, minDistance: 20, maxDistance: 400, draw: false // Set to true if you want to just draw a background image (static). } |
You Configure it live @ http://matthew.wagerfield.com/flat-surface-shader/ refer to the screenshot bellow
Another cool example that I saw from CodePen is an Earth Figure with FSS used on the water: codepen.io/Yuschick/pen/tbiHp
Do you need help with a project? or have a new project in mind that you need help with?
Contact Me
