Conception du shader Caustic Pool

Un champ aquatique lumineux

Caustic Pool est un exemple officiel OpenDesign WebGL2 présenté comme un canvas complet plutôt que comme une succession d’écrans. Son titre conçu, « CAUSTIC POOL », se place en bas à gauche sur un champ turquoise profond composé de filaments pâles et ramifiés. Le grand titre sur deux lignes établit d’abord le sujet ; le texte d’accompagnement décrit l’effet comme « domain-warped ripples » (ondulations déformées par domaine) et « caustic filaments » (filaments caustiques).

Cet ordre de lecture rend la pièce compréhensible avant le début de l’interaction. Le bord supérieur porte « OPENDESIGN · WEBGL PREVIEW » à gauche et « REAL-TIME · GPU » à droite, ce qui donne à la surface autrement abstraite un cadre technique compact. Le compromis est délibéré : les étiquettes orientent le regard, mais la surimpression fixe entre légèrement en concurrence avec l’atmosphère ininterrompue.

01

Le titre avant la technique

« CAUSTIC POOL » nomme l’univers visuel avant que la description n’introduise les ondulations déformées par domaine, ce qui permet à l’effet de rester expressif plutôt que purement technique.

02

Une instruction en bordure

« CLICK THE WATER ↗ » est placé en bas à droite, à distance du bloc de titre, afin que l’invitation reste repérable sans interrompre le parcours de lecture principal.

À quels contextes la composition convient-elle ?

La conception convient aux contextes où le mouvement constitue le sujet plutôt qu’un élément décoratif secondaire. Une étude de creative coding peut l’utiliser pour comparer des champs d’ondulations et des concentrations de lumière ; une page d’accueil interactive peut reprendre la même structure pour donner une dimension spatiale à un message court. Le canvas intégral est particulièrement utile lorsqu’il n’y a pas d’interface produit à parcourir.

La composition fonctionne également comme arrière-plan visuel pour un événement, une installation ou une fonctionnalité web expérimentale, à condition que l’expérience environnante puisse prendre en charge une surface rendue par GPU. Sa principale contrainte est la concentration : comme le champ ne comporte aucun contrôle conçu dans le balisage statique, l’interaction reste volontairement limitée et le visuel assure l’essentiel de la communication.

Comment l’ondulation et la typographie partagent l’espace

Les captures montrent un canvas complet dans des états visuels changeants, et non des écrans distincts. Dans ces différents états, l’arrière-plan turquoise reste continu tandis que le réseau pâle change de position et de densité. Cette continuité donne au mouvement l’apparence d’une propriété du champ aquatique plutôt que d’une transition de page. La conséquence visuelle est une surface calme et persistante ; le compromis est que le changement d’état est communiqué par un mouvement subtil du motif plutôt que par un texte d’état explicite.

Le shader forme son réseau lumineux au moyen de cinq séries de calculs de coordonnées repliées. Lors de l’appui du pointeur, il réinitialise une position et un âge d’ondulation ; une onde radiale sinusoïdale courbe ensuite les coordonnées d’échantillonnage et s’atténue avec la distance et l’âge. Cela produit une impression de lumière aquatique sans maillage, texture externe ni solveur de fluide physique. Le titre fixe en bas à gauche et l’instruction sur le bord opposé permettent de comparer ce champ changeant à un texte stable.

1. Ancrer

   Conservez le titre et le texte explicatif dans un bloc stable en bas à gauche afin que le visiteur puisse comparer les états changeants du shader à une référence fixe.

2. Contraster

   Utilisez des filaments lumineux sur le champ turquoise plus sombre pour rendre le réseau de réfraction lisible sans ajouter de graphiques, de contrôles ou de panneaux décoratifs.

3. Inviter

   Placez une instruction concise destinée au pointeur sur le bord inférieur opposé, en reliant le geste local à la métaphore aquatique visible.

Une seule surface, plusieurs états

Les captures alternatives conservent les mêmes étiquettes, le même titre, la même description et le même signal de clic, tandis que les lignes lumineuses changent. Cette surimpression répétée sépare le contenu de l’état animé : les visiteurs peuvent comparer le champ sans devoir réapprendre l’interface. Une recréation doit préserver cette couche éditoriale stable tout en permettant au rendu du shader de varier en dessous.

Limites de capacité

La source implémente un rendu WebGL2 local, une entrée sur appui du pointeur, la gestion du redimensionnement et une boucle de dessin. Chaque pression remplace l’ondulation précédente au lieu d’accumuler plusieurs vagues indépendantes. L’âge de l’ondulation augmente de 1/60 à chaque image d’animation ; le minutage de sa décroissance dépend donc de la fréquence d’images réelle. Les trois captures montrent des états d’un même canvas ; en l’absence de traces d’entrée enregistrées, elles ne démontrent pas indépendamment une réponse au clic.

Il s’agit d’une approximation visuelle d’un effet caustique, et non d’une simulation aquatique validée. La source n’établit ni services connectés, ni données utilisateur stockées, ni performances GPU mesurées, ni compatibilité universelle des entrées, ni modèle de génération utilisé à l’origine. Pour une adaptation en production, testez le comportement de l’entrée locale et du minutage dans l’environnement prévu au lieu de considérer l’étiquette GPU ou la métaphore aquatique conçue comme des preuves d’acceptation.