Créations graphiques
Conception d’un shader de grille néon
Un soleil rétro à bandes ancre un horizon violet tandis qu'une grille néon défile au sol, avec un titre fixe et quelques détails de ciel procéduraux.
Cas d'usage de la scène néon
- Études de scènes WebGLExplorez des scènes basées sur des shaders, avec une forte profondeur et de l'atmosphère.
- Systèmes visuels synthwaveConstruisez des compositions rétro-futuristes à partir de relations de couleurs néon maîtrisées.
- Arrière-plans animésUtilisez un mouvement visuel local pour donner le rythme sans aucune commande.
Points forts de la scène synthwave
- Grille en perspectiveUn sol en fuite installe la profondeur sous l'horizon.
- Soleil à bandesDes bandes horizontales superposées créent le point focal rétro.
- Champ d'étoiles néonDe rares points lumineux prolongent la scène au-delà du soleil.
- Scène à shader uniqueUne seule composition en fragment shader réunit les éléments visuels.
Trois moments de l'horizon néon
1 / 3
Un horizon fait d'un soleil et d'une grille
Neon Grid est un exemple graphique officiel d'OpenDesign construit autour du titre « Outrun to the horizon. ». Son principe visuel est précis : une grille de sol en perspective défile vers un soleil rétro à bandes, sous un champ d'étoiles néon. Cet agencement fait de l'horizon la ligne organisatrice, tandis que la grille inférieure apporte un mouvement directionnel.
Les captures montrent différents moments d'une même animation automatique du shader. Le badge en haut à droite conserve ses libellés GPU et WebGL2 tandis qu'une estimation de fréquence d'images calculée localement varie. Ces valeurs décrivent la session de capture, et non un benchmark de performance vérifié ni un mode de rendu sélectionnable.
Où ce design trouve sa place
Cette composition convient aux études visuelles, aux arrière-plans animés de pages d'accueil et aux présentations WebGL expérimentales où l'atmosphère compte plus qu’une interface chargée de contrôles. Son meilleur usage est une scène d'ouverture autonome : un soleil chaud et des lignes de perspective froides posent le ton, tandis que le titre fixe et la courte description identifient le concept visuel.
Comme le balisage source ne déclare aucun contrôle interactif conçu par l’auteur, cet exemple ne doit pas être présenté comme un jeu, un outil configurable ou un service connecté. La scène visible soutient une présentation axée sur le mouvement ; toute interaction ou tout comportement de produit ajouté autour serait une adaptation proposée.
Visuels d'ouverture
Utilisez la scène d'horizon pour installer un cadre rétro-futuriste avant le contenu de soutien.
Références de shaders
Étudiez comment une grille, un soleil et un champ d'étoiles peuvent être composés à partir d'un seul système visuel.
Expériences éditoriales
Associez une typographie surdimensionnée à un rendu atmosphérique lorsque le message est bref.
Comment la scène se lit
La capture présente d'abord la scène rendue : le soleil occupe le haut du centre, des bandes horizontales brisent sa surface et la grille converge en dessous. Le grand champ violet foncé laisse au soleil lumineux et aux bandes roses la place de s'imposer. Ce contraste rend le point focal lisible, mais il impose aussi que la typographie reste subordonnée à l'événement visuel plutôt que de rivaliser avec lui.
La typographie en bas à gauche se superpose au même canvas au lieu d'occuper un panneau séparé en dessous. Un petit surtitre vert NEON GRID précède le titre surdimensionné sur deux lignes « Outrun to the horizon. » et sa courte explication. Le fragment shader génère le soleil et les bandes de la moitié basse, ajoute de rares points de ciel qui scintillent avec le temps et fait avancer la grille de sol en perspective selon le temps écoulé. Le soleil reste fixe tandis que la grille crée le mouvement.
Ordre focal
Soleil d'abord, grille ensuite, typographie en troisième : cette séquence va de l'atmosphère à l'explication.
Rôles des couleurs
Le jaune chaud et le corail marquent le soleil, tandis que le violet et le bleu définissent la profondeur autour de lui.
Échelle du texte
Le titre sur deux lignes crée un poids éditorial, mais sa longueur garde le message précis.
Limites des capacités
Les éléments fournis confirment un exemple de rendu WebGL local, avec une gestion du redimensionnement et de la boucle d'animation visible dans les observations de la source. Ils n'établissent ni services connectés, ni données persistantes, ni déploiement en production, ni jeu jouable, ni objectif de performance mesuré. Les libellés des cadres montrent des valeurs changeantes d'une capture à l'autre ; ils doivent donc rester des annotations descriptives et non des affirmations sur la qualité d'exécution.
Limite d'adaptation
Une recréation peut conserver les relations visuelles observées tout en modifiant le shader, la vitesse de mouvement, la typographie ou la mise en page responsive. Toute commande, tout audio, tout gameplay ou toute intégration de service ajouté constituerait un nouveau comportement et devrait être décrit comme proposé, et non comme faisant partie de cet artefact.
Comment créer un shader de grille néon dans OpenDesign
Définir la structure visuelle
Commencez par une scène sombre en plein cadre, un soleil à bandes centré près de l'horizon et une grille en perspective qui s'élargit vers le premier plan. Gardez la composition centrée sur un seul point de fuite.
Ajouter la couche éditoriale
Placez la petite étiquette verte « NEON GRID » au-dessus d'un grand titre sur deux lignes « Outrun to the horizon. », suivi d'une courte phrase nommant la grille, le soleil, le champ d'étoiles et le fragment shader. Vérifiez que le texte explique l'image sans masquer son point focal.
Invite suggéréeCrée une scène synthwave WebGL locale avec un fond violet foncé, un soleil rétro à bandes centré, une grille néon en perspective qui fuit au sol et un champ d'étoiles clairsemé. Ajoute les libellés « NEON GRID » et « Outrun to the horizon. » avec une courte phrase descriptive en dessous. Utilise uniquement un rendu local ; n'ajoute ni services connectés, ni stockage persistant, ni audio, ni gameplay, ni affirmations de performance.
Affiner le mouvement et les limites
Ajustez le défilement de la grille et la luminosité variable des étoiles en gardant le soleil à bandes fixe. Comparez les états d'animation naturels pour le contraste et la lisibilité. N'ajoutez ni pilotage à la souris, ni gameplay, ni mode de rendu sélectionnable, sauf à les implémenter comme un nouveau comportement.
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