Gantry 5 demo website

Particle - animated background - FSS - Flat Surface Shader

Particle - animated background - FSS - Flat Surface Shader

Introduction

etl fss

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)

particle FSS Main

OptionDescription
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

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.

particle EN FSS 2

OptionDescription
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

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.

particle FSS Option LIGHT

OptionDescription
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

See top 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

OptionValue
Configuration preset Custom
z-index Default  (-1)
Height Default (none)
CSS classes  

Custom render - MESH config

OptionValue
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

OptionValue
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

See - 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

OptionValue
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)

OptionValue
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