Introduction
Flat Surface Shader (FSS) animated background is written in JavaScript by Matthew Wagerfield and Tobias van Schneider for rendering lit Triangles to a number of contexts. Basically, this tool 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 see demo from developper here or one funny example of use here Flat Surface Shader Earth
On my side, I render FSS using a Canvas support.You can choose between 7 color presets or you can configure the Canvas yourself.
Configuration
Main Options- FSS preset
Easiest for you is to select preset colors.
Important: Do not forget that the color of the backgrounds of the sections where the animation should appear must be transparent (to adjust in the styles of your Outline)
| Option | Description |
|---|---|
| Particle Name | Enter the name you would like to assign to the particle. This only appears in the back end. |
| Configuration preset | You can choose between 7 preset colors, Green, Yellow, Orange, Red, Blue, Dark blue, Mauve or Custom your render (use other tabs for that) |
| z-index | Define z-index of your canvas, most of case keep preselected z-index (-1) |
| Height | in some case, full render, you have to fix heght of canvas to 100% |
| CSS classes | Enter the CSS class(es) you want to use in the content of the particle. |
Custom render
I'm not going to explain you all available options , You see them live @ http://matthew.wagerfield.com/flat-surface-shader/
Custom render - MESH config
A Mesh is constructed from a Geometry (collection of triangles) object and a Material object (2 Color objects which define the ambient & diffuse properties of a surface.). All the Triangles within the Geometry are rendered using the properties of the Material.
| Option | Description |
|---|---|
| MESH Ambient color | offently use Default color #555555 |
| MESH Diffuse color | offently use Default color #ffffff |
| MESH Width | Triangle Width |
| MESH Height | Triangle Height |
| MESH Depth | Transparency of the triangles |
| MESH Segments | Number of triangles to display in 1 row |
| MESH Slices | Number of triangles to display in 1 column |
| MESH xRange | Wideness of the triangles in X Position |
| MESH yRange | Wideness of the triangles in Y Position |
| MESH Speed | Speed of the moving triangles |
Custom render - LIGHT config
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.
| Option | Description |
|---|---|
| LIGHT Ambient color | Base color of the canvas |
| LIGHT Diffuse color | |
| LIGHT Count | Contrast |
| LIGHT zOffset | |
| LIGHT Speed |
Examples
Example 1 - Section Showcase of this page
Base style background : transparent - rgba(255, 255, 255, 0)
Section Showcase background: transparent - rgba(255, 255, 255, 0)
Main Section Layout : Fullwidth (boxed content)
Particle is used in Showcase section
| Option | Value |
|---|---|
| Configuration preset | Custom |
| z-index | Default (-1) |
| Height | Default (none) |
| CSS classes |
Custom render - MESH config
| Option | Value |
|---|---|
| MESH Ambient color | #706868 |
| MESH Diffuse color | #ffffff |
| MESH Width | 1.2 |
| MESH Height | 1.2 |
| MESH Depth | 15 |
| MESH Segments | 20 |
| MESH Slices | 25 |
| MESH xRange | 0.8 |
| MESH yRange | 0.4 |
| MESH Speed | 0.003 |
Custom render - LIGHT config
| Option | Value |
|---|---|
| LIGHT Ambient color | #f71875 |
| LIGHT Diffuse color | #ffffff |
| LIGHT Count | 2 |
| LIGHT zOffset | 350 |
| LIGHT Speed | 0.003 |
Example 2 - Section Showcase of Home Page
Base style background : transparent - rgba(255, 255, 255, 0)
Section Showcase background: transparent - rgba(255, 255, 255, 0)
Main Section Layout : Fullwidth (boxed content)
Particle is used in Showcase section
| Option | Value |
|---|---|
| Configuration preset | Green - ETL Color |
| z-index | Default (-1) |
| Height | Default (none) |
| CSS classes |
No need to use Custom render - MESH config and Custom render - LIGHT config
Example 3 - Full page Background FSS render
See - Template Hydrogen Mauve "Boxed animated"
Base style background : transparent - rgba(255, 255, 255, 0)
All sections are with background transparent - rgba(255, 255, 255, 0) - out of Navigation and Main
Main Section Layout : Fullwidth (boxed content)
Section Navigation Layout : Boxed
Particle is used in Top section (New layout defaut for Hydrogen by En toutes Lettres)
| Option | Value |
|---|---|
| Configuration preset | Mauve |
| z-index | Default (-1) |
| Height | Height 100% |
| CSS classes |
No need to use Custom render - MESH config and Custom render - LIGHT config