Utiliser des shaders pour créer des effets spéciaux réalistes dans la conception Web

WebGL est devenu un sujet d'expérimentation et teste les limites de ce qui est possible sur le Web. Presque chaque jour, nous tombons sur des solutions grandioses alimentées par elle. Pour preuve, nous avons déjà examiné un certain nombre de projets réels.

Aujourd'hui, nous allons explorer quelques concepts qui montrent les avantages de l'utilisation des shaders. Nous allons nous concentrer sur GLSL.

GLSL signifie Graphics Library Shader Language. Il fait partie intégrante de WebGL et est responsable de la majorité des solutions époustouflantes que nous voyons dans la nature. Fidèle à son nom, il fournit aux développeurs des outils pour manipuler les graphiques de manière intuitive. Entre de bonnes mains, il est capable de donner vie à presque toutes les idées.

Codepen regorge déjà de projets fascinants créés à l'aide de shaders. Cependant, ceux qui montrent des effets réalistes sont les plus impressionnants et les plus inspirants. Et nous allons le prouver dans la collection d'aujourd'hui. Plongeons dedans.

Waterdroplet WebGL Shader par Stefan Weck

Stefan Werk ouvre notre tour d'horizon avec son chef-d'œuvre, prouvant à tous que les technologies haut de gamme sont une véritable magie. Il a réussi à recréer la pluie tombant sur une fenêtre (ou dans notre cas, un écran). Le comportement et la réalisation des gouttes de pluie sont si réels qu'on a envie de les toucher. Ici, JavaScript se tient derrière la simulation de pluie tandis que le shader WebGL prend la responsabilité de l'effet gluant et de la réfraction.

Three js water shader par Jonathan Blair / ShaderToy Compilation par David Hartley

Peut-être que les deux prochains projets sont parmi les exemples les plus impressionnants d'utilisation de shaders dans notre collection. Bien que chacun oblige votre ordinateur à fonctionner à pleine capacité pour faire face à tout ce qui se passe dans les coulisses, cela en vaut néanmoins la peine. Chaque concept, avec toutes ces ondulations, petites et grandes vagues, ainsi que les couleurs changeantes, semble incroyablement réaliste et très inspirant.

Alors que Jonathan Blair n'a recréé que la surface de l'eau, David Hartley a rendu les choses un peu intéressantes en donnant à cette dernière une forme sphérique, imitant ainsi habilement la Terre. Les deux projets sont hallucinants.

Exemple de shader Pixijs.v3 par Omar Shehata

Propulsé par Pixi.js, ce concept fascinant d'Omar Shehata vous surprendra par sa simulation très détaillée d'un effet de brume. Rehaussés d'une belle coloration violacée et d'un fond sombre, ces nuages ​​de fumée sont incroyablement authentiques. Le comportement est bien pensé. Le concept est tout simplement fascinant.

Shader WebGL des chutes de neige par Boris Šehovac

Ce concept porte bien son nom. C'est très réaliste. Boris Sehovac a utilisé différentes tailles de flocons de neige, différents niveaux de flou et différentes vitesses pour recréer la profondeur. De plus, il a également essayé de simuler le vent en forçant la composition à changer de direction de gauche à droite et vice versa. En conséquence, nous pouvons assister à une sorte de petite tempête de neige. Un shader WebGL natif se cache derrière cette beauté.

Concept par Anand Davaasuren

Si l'exemple précédent vous a laissé une bonne impression, alors le concept d'Anand Davaasuren plaira sans aucun doute à vos yeux. La solution est basée sur la même idée. L'effet de chute de neige en est le cœur : à une exception près. Cet exemple utilise des cœurs au lieu de flocons de neige. En conséquence, le concept a une atmosphère agréable à laquelle il est difficile de résister. Ce n'est peut-être pas brutalement réaliste, mais quand même, l'effet de chute ainsi que le comportement des cœurs sont incroyablement polis.

Clouds Shader par David Hartley

Ceci est un autre chef-d'œuvre créé par David Hartley. Cette fois, l'artiste montre sa vision des nuages ​​et de leur comportement flottant. Encore une fois, Pixi.js se tient derrière ce projet grandiose. Ici, la caméra passe à travers les nuages, vous permettant de ressentir toute la beauté de l'idée. Mais ce n'était pas suffisant pour David. Il nous a également fourni l'occasion d'explorer la scène en déplaçant le curseur. Juste incroyable.

Ombrage de feu par 14islands

Qu'il s'agisse d'une tempête de neige glaciale, de nuages ​​froids et moelleux ou de choses chaudes, voici une tentative réussie de simulation d'incendie. L'équipe derrière 14islands utilise un tas de particules et de shaders personnalisés pour donner vie à cette idée. En conséquence, nous pouvons assister à un petit feu de joie avec de la fumée qui respire la chaleur sur tous les fronts.

GLSL : Chrome de Liam Egan

Chrome de Liam Egan présente un liquide à haute densité. Le projet rappelle légèrement une scène de l'épopée Terminator 2, lorsque le diabolique T-1000 a montré sa composition de métal liquide. Le concept semble artificiel, sans aucun doute. Pourtant, le comportement et la surface brillante semblent incroyablement réalistes. De plus, vous pouvez jouer en déplaçant votre souris de haut en bas pour modifier le paramètre de lissage.

Effet d'entraînement par Martin Laxenaire

Ce projet de Martin Laxenaire est un parfait exemple de shaders mis en pratique. Ici, l'auteur a réussi à créer un véritable effet d'entraînement qui fait bouger l'image comme un rideau au survol de la souris. Curtains.js alimente ce concept. Le seul inconvénient est qu'il est peut-être trop tôt pour fournir à chaque image d'un site Web cet effet, car il est encore trop lourd pour qu'un ordinateur bas de gamme puisse le "digérer".

Lucioles Glitched de Fabien Motte

Le projet de Fabien Motte propose également une solution pratique. Cependant, nous ne parlons pas de ces lucioles lumineuses qui se déplacent de manière chaotique autour de l'axe vertical. Nous parlons d'un effet de pépin qui frappe parfois l'écran. C'est tout simplement incroyable. Et comme il est populaire de nos jours, ce concept peut servir de base parfaite pour vos expériences.

Jeter de l'ombre

Les shaders sont des outils puissants. Bien que nous nous soyons concentrés sur des solutions réalistes dans cet article, il existe un tas d'autres concepts époustouflants qui semblent plus artificiels. Vous pouvez créer des scènes et des compositions absolument différentes - c'est ici que votre imagination peut se déchaîner.

Cependant, un grand pouvoir s'accompagne d'une grande responsabilité. Il y a quelques problèmes que vous devez prendre en compte avant de vous lancer dans toute cette affaire de shader.

Tout d'abord, il y a un problème avec la compatibilité du navigateur. Tout le monde ne peut pas profiter de sa beauté. Et deuxièmement, tous les ordinateurs ne peuvent pas le gérer sans accroc. Cela signifie que les shaders ne sont pas des outils universels – du moins pas encore.