Design de shader : sculpture en raymarching

Un hero construit à partir de pixels

Ce design de shader de sculpture en raymarching présente une grande forme procédurale verte sur un fond bleu marine profond. Le titre visible, « 3D that lives in a fragment shader. », présente l’image comme une étude de rendu plutôt que comme un asset 3D conventionnel. Cet appariement permet au visiteur de comprendre le principe technique avant d’examiner la surface de la sculpture.

Le fragment shader effectue un sphere tracing de l’union lisse des champs de distance de cinq sphères, dont les centres orbitent au fil du temps. Un second tracé, plus court, estime les ombres douces ; des normales par différences finies alimentent les reflets et un contour de type Fresnel. Une lente orbite automatique de la caméra modifie la vue. Les formes vertes paraissent sculpturales, mais aucun maillage de sculpture, aucune texture d’image ni aucune simulation de fluide n’est fourni.

Le design place l’explication technique sous le titre surdimensionné : « No meshes » introduit la méthode de rendu, puis le mouvement orbital annoncé. Cet ordre rend l’idée visuelle lisible au premier regard ; en contrepartie, le vocabulaire du shader suppose une certaine familiarité avec la programmation graphique.

Où cette composition trouve sa place

Ce design convient à un hero en première vue, où l’atmosphère et l’identité technique comptent plus qu’une navigation dense. La sculpture occupe l’essentiel du champ visuel, tandis que l’étiquette et le paragraphe en bas à gauche offrent un point d’entrée aux lecteurs qui veulent savoir ce qu’ils voient.

Les trois états fournis montrent le même système textuel pendant que les formes rendues changent d’arrangement. Un état centre une grande forme arrondie, un autre introduit des formes qui se chevauchent, et un troisième pousse une forme aux bords lumineux à travers le haut du champ. Le texte répété fait du mouvement le sujet, sans exiger de commandes ni une galerie de scènes distinctes.

Lire le badge d’état

Le badge en haut à droite conserve ses libellés GPU et Raymarch et ajoute une estimation de FPS calculée localement. Les trois captures indiquent 2FPS dans cet environnement, alors que le texte explicatif mentionne 60fps. Ces éléments ne s’équivalent pas : le compteur décrit la cadence de redessin de la session de capture, et le texte source n’établit pas de garantie de performance transposable.

Composition par la lumière et l’échelle

La sculpture est volontairement surdimensionnée. Dans la première capture, son corps arrondi entre par le haut et par la droite, laissant un espace négatif marine autour de la typographie ; les états suivants rapprochent plusieurs formes. Recadrer les formes aux limites de la fenêtre donne à l’objet une taille supérieure à celle de la page, mais réduit aussi la part de contour que le lecteur peut examiner.

Le dégradé du vert au presque noir fournit le principal indice de profondeur. Des points lumineux se placent près des bords supérieurs gauche ou droit des formes, tandis qu’un contour pâle suit certaines silhouettes. L’œil dispose ainsi d’un parcours autour de formes autrement sombres. Le compromis tient au contraste : le vert néon est visuellement puissant, donc le paragraphe technique, plus discret, doit rester court et soigneusement placé.

La couche éditoriale utilise une petite étiquette en capitales « RAYMARCHED HERO », un très grand titre sur deux lignes et un court paragraphe explicatif. L’étiquette établit la catégorie, le titre énonce l’idée et le paragraphe nomme la technique. Cette séquence à trois niveaux est propre à cet artefact, car chaque couche de texte renvoie directement à la sculpture en raymarching au lieu de décrire un hero générique.

1. Commencer par le champ

   Établissez le fond bleu marine foncé et une seule forme verte surdimensionnée afin que le modèle d’éclairage soit lisible avant que d’autres formes ne se disputent l’attention.

2. Ajouter des indices de volume

   Utilisez des ombres douces, des reflets concentrés et un bord de Fresnel mesuré pour décrire la forme à champ de distance signé sans introduire de détail propre à un maillage.

3. Placer l’explication

   Conservez dans cet ordre l’étiquette de catégorie, l’énoncé principal et la phrase technique pour que l’expérience visuelle reste compréhensible lorsque le mouvement est en pause.

Limites des capacités

Cet exemple officiel OpenDesign contient une véritable implémentation WebGL2 locale, et pas seulement une étiquette de rendu fictive. Un triangle plein écran exécute par pixel un sphere tracing de 90 pas maximum, s’arrête à un seuil de distance de 0.001 ou à une portée supérieure à huit, et utilise jusqu’à 24 pas pour les ombres douces. Ce sont des faits issus de la source, pas la preuve d’une disponibilité en production ni d’un service connecté.

La scène et la caméra s’animent automatiquement. Le redimensionnement est le seul événement d’entrée, et le DPR de rendu est plafonné à 1.5 pour limiter le travail par pixel. Il n’existe aucune commande de pointeur, de clavier, de pilotage de caméra, d’édition de matériau ou de paramètres. L’estimation locale des FPS se met à jour par fenêtres d’environ une demi-seconde ; ni elle ni la mention 60fps de la source n’établissent un benchmark valable sur tous les appareils.