Créations graphiques
Conception d’un shader de métal liquide
Un champ de type chrome, en évolution automatique, associe bruit déformé, couleurs irisées et reflets balayants sous une typographie fixe en bas à gauche.
Cas d'usage du métal liquide
- Direction artistique WebGLFaçonnez des surfaces pilotées par shader pour des études visuelles expressives.
- Études de mouvement génératifComparez des états de matière évolutifs sans ressources de texture.
- Arrière-plans de hero animésExplorez des traitements visuels plein canevas pour des expériences numériques.
Points forts du shader de type chrome
- Matière mathématiqueUn champ de bruit à déformation de domaine crée la structure de la surface.
- Palette iriséeLavande, cyan, vert et magenta se déplacent d'un état à l'autre.
- Reflets spéculaires en mouvementDes reflets brillants font lire la surface comme un métal réfléchissant.
- Trois états capturésDes images distinctes montrent comment la composition évolue dans le temps.
Trois états du champ métallique
1 / 3
Une surface de type chrome sans textures d'image
Liquid Metal est un exemple graphique officiel d'OpenDesign centré sur une seule composition de shader en plein canevas. Son titre, « Molten chrome, zero textures. », pose la contrainte centrale : la surface est présentée comme une étude de matière plutôt que comme une illustration construite à partir d'images.
La ligne d'appui décrit un champ de bruit à déformation de domaine ombré comme du métal, avec un reflet spéculaire balayant et une palette irisée de type film mince. Cette formulation correspond directement aux captures : des bandes fluides et repliées, des reflets blancs nets, et une couleur qui passe de la lavande et du violet vers le cyan, le vert et le magenta.
Où ce design trouve sa place
Cet artefact est surtout utile lorsque la surface visuelle doit porter une atmosphère sans concurrencer un modèle d'interaction plus vaste. Son canevas ininterrompu peut servir de référence pour des traitements hero WebGL, des études d'art génératif ou un travail d'identité visuelle fondé sur le mouvement.
L’absence de contrôles interactifs garde l'attention sur le champ rendu. L'exemple est ainsi facile à étudier, mais une adaptation produit devrait définir son propre modèle d'interaction, son traitement de l'accessibilité et son lien avec le contenu, sans supposer que ces décisions sont déjà résolues.
Référence de shader
Utilisez ce design pour étudier comment la distorsion du bruit et les bandes spéculaires créent une lecture liquide sans images de texture.
Direction du mouvement
Utilisez les états capturés pour comparer comment la palette et le flux modifient le caractère émotionnel d'une même composition.
Apport au système visuel
Traduisez les relations entre lavande, cyan, vert et magenta en une direction maîtrisée pour une interface plus large.
Comment la composition évolue
Les trois images conservent un petit surtitre vert LIQUID METAL, un titre « Molten chrome, zero textures. » bien plus grand, sa description d'appui et un badge WebGL2 en haut à droite. Le shader change sous cette hiérarchie fixe. Un bruit à six couches façonne un champ de hauteur ; des échantillons de hauteur voisins permettent d'estimer les normales de surface, tandis qu'une lumière mobile, un terme spéculaire net et une palette irisée créent l'apparence de chrome.
Dans view-1, la lavande pâle et le blanc dominent, avec de fins canaux bleus et violets qui traversent le champ. View-2 évolue vers des bandes vertes et bleues plus sombres, rendant la surface plus directionnelle et allongée. View-3 introduit des zones plus marquées de magenta, d'olive et de gris fumé. Ce sont des états capturés distincts, et non la preuve d'une palette sélectionnable par l'utilisateur ni d'un mode de performance mesuré.
View-1
La lavande et le violet dominent, avec des reflets blancs denses qui donnent un aspect de chrome doux.
View-2
Les canaux verts et bleu profond deviennent plus visibles et forment des bandes directionnelles plus longues.
View-3
Le magenta, l'olive et le gris fumé accentuent la variation chromatique.
Typographie stable, champ variable
Le grand titre blanc se place bas sur le champ visuel, précédé du court libellé vert LIQUID METAL. Cet ordre permet d'identifier le sujet avant de lire la description plus longue de la matière. En contrepartie, le texte occupe une part importante de l'image, ce qui réduit la surface de shader dégagée disponible pour l'observation.
Contraste réfléchissant
Des reflets brillants et étroits soulignent sans cesse les formes déformées. Ils créent l'indice visuel du métal poli, tandis que les canaux plus sombres donnent à ces reflets des bords à suivre. Comme l'effet repose sur le contraste, une palette plus calme ou des reflets moins intenses rendraient probablement la matière moins lisible, même si le contraste du texte s'en trouvait amélioré par endroits.
Comportement visible et limites
La source met en œuvre un rendu WebGL2 automatique, une animation fondée sur le temps écoulé et le redimensionnement du canevas. Elle n'enregistre aucune commande au pointeur, au clic ou au clavier. Une estimation locale de la fréquence d'images se met à jour environ toutes les demi-secondes dans le badge WebGL2 ; elle décrit cette session de rendu, et non une performance GPU garantie. L'effet est une approximation visuelle procédurale du chrome, non une simulation physique de métal en fusion.
Aucun contrôle interactif n'apparaît dans le balisage statique, et les éléments fournis n'établissent ni services connectés, ni données utilisateur stockées, ni déploiement en production, ni entrées d'interaction, ni le modèle de génération d'origine. Une recréation peut proposer ces capacités, mais elles dépassent ce que ce design vérifie lui-même.
Garder le canevas local
Traitez le shader comme une couche visuelle autonome et définissez séparément tout comportement applicatif externe.
Séparer captures et métriques
Servez-vous des trois images pour discuter de la variation visuelle, et mesurez séparément les performances d'exécution dans l'environnement visé.
Comment créer un shader de métal liquide dans OpenDesign
Définir le canevas et la typographie
Commencez par une seule surface de shader plein canevas et conservez l'ordre de la référence : le petit libellé LIQUID METAL, le grand titre Molten chrome, zero textures., puis la description d'appui. Gardez une typographie lisible sur les reflets les plus lumineux.
Invite suggéréeCrée une étude de shader WebGL2 de métal liquide en plein canevas, avec un bloc de texte stable en bas à gauche affichant LIQUID METAL, Molten chrome, zero textures., et une courte description d'un bruit à déformation de domaine, de reflets brillants et d'une palette irisée de type film mince. Utilise uniquement un rendu local ; n'ajoute ni textures, ni services externes, ni commandes, ni affirmations de performance.
Affiner le rendu de matière
Affinez ensemble le champ à déformation de domaine, la réponse spéculaire et la palette. Comparez les directions lavande-violet, vert-cyan et magenta-olive comme des états visuels, en vérifiant que les bandes réfléchissantes décrivent toujours une surface liquide cohérente.
Vérifier les états capturés
Examinez plusieurs images à la taille de canevas prévue. Vérifiez que le titre reste lisible, que le shader demeure le sujet visuel dominant et que tout libellé GPU, WEBGL2 ou FPS est présenté comme une information d'affichage locale, et non comme un benchmark vérifié.
Exporter et obtenir un lien de partage
Exportez votre design finalisé, puis utilisez Partager dans OpenDesign pour obtenir un lien de partage. Ouvrez le lien dans une fenêtre de navigateur distincte et vérifiez que la version souhaitée ainsi que ses ressources sont disponibles avant de l'envoyer.
Conception d’affiche éditoriale sur les workflows IA
Cette affiche éditoriale sur les workflows IA présente six affirmations, organisées en chapitres numérotés, avec des exemples concrets de prompts et des accents typographiques rouille sur un fond crème.
Créations graphiques
Conception d’un carrousel social sur les workflows IA
Sept cartes verticales utilisent des titres chinois surdimensionnés, des habitudes numérotées, des aplats de couleur changeants et une conclusion pour expliquer les workflows d’édition avec l’IA.
Créations graphiques
Conception de shader Aurora Field
Un champ de bruit bleu-vert animé automatiquement donne son atmosphère à un hero WebGL, tandis qu’un titre fixe et un petit indicateur local de fréquence d’images ancrent la scène.
Créations graphiques
Conception du shader Aurora Veil
Aurora Veil est une composition shader interactive qui transforme des lumières superposées, des étoiles et les mouvements du curseur en un hero WebGL atmosphérique.
Créations graphiques