Conception de shader Aurora Field

Aurora Field comme expérience WebGL

Aurora Field est un exemple graphique officiel d’OpenDesign construit autour d’un canvas WebGL2 animé automatiquement. Son titre principal, “Motion that runs on the GPU.”, énonce directement le principe de conception : le champ visuel est le sujet, tandis que le texte fixe en bas à gauche lui donne un cadre éditorial.

La capture montre un canvas plein écran rempli de zones colorées bleues, vertes et turquoise douces. Une petite étiquette “WEBGL EXPERIENCE” apparaît au-dessus du titre, et la phrase d’accompagnement se trouve en dessous. Cet ordre de lecture va de la catégorie à l’affirmation, puis à l’explication technique, sans ajouter de contrôles ni de navigation secondaire.

Le travail est présenté comme une composition plutôt que comme un ensemble d’écrans distincts. Les frames fournies conservent la même structure typographique tandis que le champ atmosphérique évolue, faisant de la relation entre la superposition persistante et l’arrière-plan changeant le principal dispositif de conception.

Où cette composition trouve sa place

Cette conception convient à l’ouverture d’une landing page, à l’introduction d’un portfolio expérimental ou à une étude visuelle de type installation où l’atmosphère doit apparaître avant l’interaction détaillée. Le canvas instaure une ambiance en un coup d’œil, tandis que le texte en bas à gauche identifie ce que le visiteur regarde.

Son usage le plus pertinent est communicatif plutôt qu’opérationnel. Le markup statique ne contient aucun contrôle conçu à cet effet ; la conception visible ne démontre donc ni édition de paramètres, ni gestion de contenu, ni données connectées. Un tel comportement serait une adaptation proposée, et non une capacité documentée.

Fonctionnement de la composition visuelle

Une fonction de bruit à six couches pilote le fragment shader. Deux champs de distorsion imbriqués évoluent avec le temps écoulé, modelant des régions bleu marine et bleues avec une illumination vert citron et des rehauts bleus plus doux. L’effet utilise un triangle plein écran plutôt que des maillages de scène ou des textures externes. La majeure partie du frame reste ouverte, tandis qu’un bloc de texte fixe en bas à gauche fournit la seule masse typographique substantielle.

Le titre est défini dans une taille très importante et se répartit sur deux lignes : “Motion that runs on”, puis “the GPU.”. Cette coupure rend le sujet technique lisible comme un énoncé plutôt que comme une petite légende. En dessous, la phrase plus longue explique que le visuel est un fragment shader plein écran et fait référence à le bac à sable de prévisualisation opaque (opaque preview sandbox), dans lequel ce type de visuel ne s’affichait auparavant pas.

Le badge en haut à droite associe le contexte WebGL2 à une estimation locale de la fréquence d’images d’animation, mise à jour environ toutes les demi-secondes. Les captures fournies affichent des valeurs autour de 2–3 FPS dans leur environnement de capture, tandis que le texte descriptif d’origine affirme 60fps. Ni cette affirmation rédigée ni ces mesures locales isolées n’établissent les performances générales sur les navigateurs ou les appareils.

1. Lire la superposition

   Commencez par la petite étiquette “WEBGL EXPERIENCE”, passez à l’énoncé GPU surdimensionné, puis utilisez la phrase d’accompagnement pour interpréter le champ visuel.

2. Comparer les états

   Les trois frames fournies conservent la superposition tandis que l’arrière-plan et l’étiquette FPS affichée varient, montrant une couche éditoriale persistante au-dessus d’un résultat visuel changeant.

3. Observer le compromis

   Le canvas ouvert laisse de l’espace au shader, mais l’absence de contrôles visibles laisse au visiteur un rôle d’observation plutôt que de manipulation directe.

Limites des capacités

La source compile un shader WebGL2, redimensionne son canvas et le redessine avec le temps écoulé dans requestAnimationFrame. Elle ne fournit aucun contrôle de pointeur, de clic, de clavier ou d’édition de paramètres ; le visiteur observe donc un mouvement automatique au lieu de manipuler le champ. Les trois captures sont des états temporels d’un même canvas, et non des workflows indépendants.

La source n’établit ni services connectés, ni déploiement en production, ni modèle de génération original, ni compatibilité universelle, ni rendu garanti à 60fps. Sa phrase sur un bac à sable de prévisualisation opaque constitue un contexte rédigé, et non une affirmation vérifiée concernant chaque environnement OpenDesign. L’indicateur local de fréquence d’images et le code source expliquent ce spécimen ; une mise en production nécessiterait des tests distincts sur les appareils et les runtimes.