(sim) Écriture d’un shader pour la Sphere de Vegas

 (whenistheweekend.com)
1 points par GN⁺ 2023-12-01 | 1 commentaires | Partager sur WhatsApp
  • La page The Sphere montre, à travers 5 exemples et un fragment de shader GLSL, comment la couleur de la surface de la sphère est calculée
  • Les entrées du shader sont time, vUv et vNormal, et le temps ainsi que les coordonnées UV sont au cœur des variations de couleur
  • main() calcule la couleur finale de chaque pixel en plaçant un vec4(...) dans gl_FragColor
  • Les valeurs RGB sont produites à partir de cos(time + vUv.xyx + vec3(0., 2., 4.)), ce qui exprime une variation basée sur le temps
  • Le vNormal déclaré n’est pas utilisé dans l’extrait de code fourni, il n’a donc actuellement aucun effet sur le calcul des couleurs

Structure de la page The Sphere

  • Le titre est The Sphere
  • Le corps contient des repères d’exemples allant de example 1 à example 5
  • Ensuite, un code de shader qui semble être en GLSL est affiché

Déroulement du code du shader GLSL

  • Les variables d’entrée sont au nombre de trois : time, vUv, vNormal
    • time est un uniform float
    • vUv est un varying vec2
    • vNormal est un varying vec3
  • La fonction main() définit gl_FragColor
  • La couleur est calculée sous la forme 0.5 + 0.5 * cos(...)
  • L’entrée de cos() combine la valeur de temps, vUv.xyx et vec3(0., 2., 4.)
  • La valeur alpha est fixée à 1.

À lire aussi

1 commentaires

 
GN⁺ 2023-12-01
Commentaires sur Hacker News

  • J’ai réussi à faire fonctionner l’effet Matrix.
    J’ai abandonné l’idée d’ajuster les UV pour faire apparaître le haut de la sphère, mais les uniforms de three.js projectionMatrix et modelViewMatrix étaient accessibles simplement en les déclarant en haut du GLSL.

  • J’ai créé un pavage de Penrose statique : https://gist.github.com/vjeranc/265db912d4004c7c0b0f16ae5fda...
    Comme une sphère n’est pas infinie, utiliser un pavage apériodique n’a pas vraiment de sens pratique, mais ça reste joli.
    Je ne sais pas encore s’il existe un ensemble de tuiles, ou une tuile unique, similaire capable de paver un cône infini.

    • Avec des tuiles physiques, cela semble impossible parce que la courbure ne correspondrait pas.
      La question reste intéressante, mais il n’est pas assez clair quel type de projection aurait du sens, ce qui rend difficile d’aller plus loin.
    • Ce serait aussi amusant de montrer la sphère se déplaçant lentement à travers un plan infini de tuiles apériodiques.

  • Je m’éloigne un peu du sujet, mais ce qui est fascinant, c’est à quel point The Sphere est réellement un immense projet d’ingénierie.
    Cela va de la structure elle-même à la synchronisation de milliers de panneaux LED à l’intérieur et à l’extérieur de la sphère, en passant par le refroidissement dans la chaleur de Las Vegas et le maintien des 18 000 places intérieures suffisamment fraîches et ventilées.
    Beaucoup d’immeubles de bureaux ordinaires n’arrivent même pas à être correctement ventilés.

    • Tous ces efforts et toutes ces ressources, au final, juste pour capter davantage de regards sur de la publicité.
    • À l’intérieur de Sphere, ils peuvent même produire du vent froid pour les effets spéciaux, c’est vraiment génial.

  • J’ai fait un petit smiley.frag : https://gist.github.com/nickbarth/4ec5147bd1288fd2bcfc4c5b46...

  • Très bon projet.
    Ce serait plus facile à partager si chaque morceau de code avait sa propre URL. Intégrer le code directement dans l’URL pourrait aussi être une bonne approche.

  • J’ai créé un shader de grand visage souriant.
    C’est du code GLSL qui utilise sdRing pour faire la bouche, exploite la symétrie gauche-droite pour gérer les yeux en une seule fois, puis affiche le résultat en jaune.

  • C’était la première fois que je touchais aux shaders, et j’ai fait une pastèque qui tourne.
    Je comprends plus ou moins qu’on manipule des tuples RGB, que fract() ressemble à une opération de reste, et qu’en mettant ces valeurs au carré puis en les additionnant on obtient des bandes douces, mais je ne vois pas encore clairement comment fonctionne exactement le shader, ce qu’est vUv, ni où gl_FragColor est affecté.

    • Le GPU reçoit des objets en espace modèle, c’est-à-dire une liste de sommets de triangles, la position de la caméra, ainsi qu’un vertex shader qui transforme tout cela en espace écran.
      Ensuite, il découpe les triangles en fragments, autrement dit en pixels, et exécute le fragment shader pour chaque fragment.
      Ici, les entrées sont l’uniform time, identique pour tous les fragments, et vUv, produit par les sommets puis interpolé linéairement à l’intérieur du triangle ; vUv correspond aux coordonnées du pixel sur la sphère.
      gl_FragColor est la sortie de couleur RGBA qui sera appliquée à ce fragment.
      Dans un shader de jeu classique, ou pour Google Earth, on ajouterait à cela du texturing et de l’éclairage. Le modèle d’exécution GPU donne l’impression qu’on code pixel par pixel, mais en réalité c’est du SIMT : NVIDIA traite 32 pixels à la fois, AMD 64.
      On peut considérer que les conditions sont généralement transformées en opérations conditionnelles qui exécutent les deux branches.
    • Le principe est d’exécuter le code pour chaque pixel du canvas.
      https://www.shadertoy.com/ devrait aussi te plaire.

  • Les shaders de https://www.glslsandbox.com valent aussi le détour.
    Attention toutefois : des personnes immatures y publient souvent des shaders NSFW, et les modérateurs ne semblent pas tout vérifier très soigneusement.

    • Faire un corps en quelques centaines de lignes de GLSL, c’est déjà impressionnant, mais composer une scène d’orgie en seulement 11 lignes, c’est encore un autre niveau.
      Je me demande quelle est la complexité de Kolmogorov du « contenu GLSL NSFW ».
      https://www.glslsandbox.com/e#108133.0
    • C’est du pur génie.
      NSFW : https://www.glslsandbox.com/e#108230.3
      Les commentaires du code contiennent des prompts demandant à ChatGPT de rendre le corps plus gros, d’ajouter des lignes de défilement en arrière-plan, de changer les couleurs et d’ajouter certaines parties du corps.
    • C’est quand même nettement mieux que les gens qui y publiaient des croix gammées.

  • Très bon.
    En regardant la solution que quelqu’un a proposée pour mon projet isocity, elle permet de partager par URL la ville qu’on a créée.
    Il devrait être possible d’implémenter quelque chose de similaire : https://github.com/victorqribeiro/isocity/commit/c6588171e37...

  • The Sphere serait un excellent lieu pour organiser une demoparty.
    https://en.wikipedia.org/wiki/Demoscene#Parties