Flat Surface Shader Tutorial

Date Posted: February 4, 2015, 6:47 am


flat-surface-shader-image-sample

Demo Download

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

flat-surface-editor

Another cool example that I saw from CodePen is an Earth Figure with FSS used on the water: codepen.io/Yuschick/pen/tbiHp

About author


Carl Victor Fontanos

A fine gentleman specializing in front-end and back-end development with extensive experience building high performance web applications that keeps users engaged and help businesses grow.

 
Hire Me