Site de démonstration Gantry 5

Particle - animated background - FSS - Flat Surface Shader

Particle - animated background - FSS - Flat Surface Shader

Introduction

etl fss

L'arrière-plan animé "Flat Surface Shader (FSS)" a été écrit en JavaScript par Matthew Wagerfield et Tobias van Schneider pour rendre les Triangles éclairés dans plusieurs contextes. Fondamentalement, cet outil prend la géométrie, la lumière et les triangles et le transforme en quelque chose d'amusant, excitant et beau que tout le monde peut utiliser. Avec ce Shader surface plane, les triangles sont rendus dans trois contextes différents (WebGL, Canvas 2D et SVG).

Vous pouvez voir la démonstration des développeurs ici ou un exemple original d'utilisation ici Flat Surface Shader Earth

De mon côté, je rends l'animation FSS à l'aide d'un support de Canvas. Vous pouvez choisir entre 7 presets de couleurs ou vous pouvez configurer le Canvas vous-même.



Configuration

Options Pricipales - FSS preset

Le plus simple pour vous est de sélectionner les couleurs présélectionnées que j'ai définies.

Important: N'oubliez pas que la couleur des arrière-plans des sections où l'animation doit apparaître doit être transparente (à ajuster au niveau des styles de votre "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 Vous pouvez choisir entre 7 couleurs préconfigurées, Vert, Jaune, Orange, Rouge, Bleu, Bleu foncé, Mauve ou Personnalisé votre rendu (utilisez les onglets si vous choisissez Personnalisé)
z-index Define z-index of your canvas, most of case keep preselected z-index (-1)
Hauteur dans certains cas, Fond animé page complète, vous devez corriger la hauteur du Canvas à 100%
Classe CSS Classe CSS de la particule.

Rendu personnalisé

Je ne vais pas vous expliquer toutes les options disponibles, vous les voyez en direct @ http://matthew.wagerfield.com/flat-surface-shader/

Rendu personnalisé - Configuration maillage (MESH)

Un maillage (MESH) est construit à partir d'un objet Géométric (une collection de triangles) et d'un Objet "Matériel" (2 objets colorés qui définissent les propriétés ambiantes et diffuses d'une surface). Tous les triangles dans la géométrie sont rendus à l'aide des propriétés du l'objet "Matériel".

particle FSS option MESH

OptionDescription
MESH Couleur ambiante Utilisez généralement la couleur par défaut #555555
MESH Couleur diffuse Utilisez généralement la couleur par défaut #ffffff
MESH Largeur Largeur du Triangle
MESH Hauteur Hauteur du Triangle
MESH Profondeur Transparence des triangles
MESH Segments Nombre de triangles à afficher en 1 rangée
MESH Slices Nombre de triangles à afficher en 1 colonne
MESH xRange Largeur des triangles en position X
MESH yRange Largeur des triangles en position Y
MESH Vitesse Vitesse des triangles en mouvements

Rendu personnalisé - Configuration Lumière (LIGHT)

La lumière (LIGHT) est composée d'une image 3D (Vecteur) et des objets de 2 couleurs définissant ses émissions ambiantes et diffuses. Ces canaux de couleurs interagissent avec le matériel d'un maillage (Mesh) pour calculer la couleur d'un triangle.

particle FSS option LIGHT

OptionDescription
LIGHT Couleur ambiante Couleur de base du canvas
LIGHT Couleur diffuse  
LIGHT Count (Contrast) Contrast des couleurs
LIGHT zOffset  
LIGHT Vitesse  
  
 

Exemples

Example 1 - Section Showcase sur page - Mode Personnalisé

Voir Le Haut de cette page

Base style background : transparente - rgba(255, 255, 255, 0)

Section Showcase background: transparente - rgba(255, 255, 255, 0)

Main Section Layout : Fullwidth (boxed content)

La Particule est utilisée en section Showcase.

OptionValeur
Configuration preset Personnalisé
z-index Defaut  (-1)
Hauteur Defaut (none)
CSS classes  

Custom render - MESH config

OptionValue
MESH Couleur ambiante #706868
MESH Couleur diffuse #ffffff
MESH Largeur 1.2
MESHHauteur 1.2
MESHProfondeur 15
MESH Segments 20
MESH Slices 25
MESH xRange 0.8
MESH yRange 0.4
MESH Vitesse 0.003

Custom render - LIGHT config

OptionValue
LIGHT Couleur ambiante  #f71875
LIGHT Couleur diffuse  #ffffff
LIGHT Count (Contrast) 2
LIGHT zOffset  350
LIGHT Vitesse  0.003

Example 2 - Section Showcase de la page d'accueil

Voir - Page d'accueil

Base style background : transparente - rgba(255, 255, 255, 0)

Section Showcase background: transparente - rgba(255, 255, 255, 0)

Main Section Layout : Fullwidth (boxed content)

La Particule est utilisée en section Showcase.

OptionValue
Configuration preset Green - ETL Color
z-index Default  (-1)
Hauteur Defaut (none)
CSS classes  

Pas besoin d'utiliser les valeurs personnalisées MESH et LIGHT.

Example 3 - Animation FSS page complète

Voir - Template hydrogen Mauve - "Boxed animated"

Base style background : transparente - rgba(255, 255, 255, 0)

Toutes les sections sont avec background transparente - rgba(255, 255, 255, 0)  - sauf Navigation and Main

Main Section Layout : Fullwidth (boxed content)

Section Navigation Layout : Boxed

La particule est utilisée en postion top (Nouveau template par défaut pour Hydrogen par En toutes lettres)

OptionValue
Configuration preset Mauve
z-index Default  (-1)
Hauteur Hauteur 100%
CSS classes  

Pas besoin d'utiliser les valeurs personnalisées MESH et LIGHT.