(sim) Escritura de shaders para la esfera de Las Vegas

• La página The Sphere muestra, mediante 5 ejemplos y fragmentos de shaders GLSL, cómo se calcula el color de la superficie de una esfera
• Las entradas del shader están compuestas por time, vUv y vNormal; el tiempo y las coordenadas UV son el centro de los cambios de color
• main() calcula el color final de cada píxel colocando vec4(...) en gl_FragColor
• Los valores RGB se generan con base en cos(time + vUv.xyx + vec3(0., 2., 4.)), expresando cambios basados en el tiempo
• El vNormal declarado no se usa dentro del fragmento de código proporcionado, por lo que no afecta el cálculo de color actual

---

Estructura de la página The Sphere

• El título es The Sphere
• En el cuerpo aparecen marcas de ejemplos desde example 1 hasta example 5
• A continuación se ubica código de shader que parece estar en GLSL

Flujo del código del shader GLSL

• Las variables de entrada son tres: time, vUv y vNormal
  • time es uniform float
  • vUv es varying vec2
  • vNormal es varying vec3
• La función main() establece gl_FragColor
• El color se calcula con la forma 0.5 + 0.5 * cos(...)
• En la entrada de cos() se incluyen juntos el valor de tiempo, vUv.xyx y vec3(0., 2., 4.)
• El valor alfa queda fijo en 1.

[GN⁺]

Comentarios de Hacker News

• Logré hacer funcionar el efecto Matrix.
  Intenté ajustar las UV para que se viera la parte superior de la esfera y terminé rindiéndome, pero los uniforms de three.js projectionMatrix y modelViewMatrix se podían referenciar con solo declararlos al inicio de GLSL.

• Hice un teselado de Penrose estático: https://gist.github.com/vjeranc/265db912d4004c7c0b0f16ae5fda...
  Como la esfera no es infinita, usar un teselado aperiódico no tiene sentido práctico, pero aun así se ve bien.
  Todavía no sé si existe un conjunto de teselas similar, o una única tesela, que pueda teselar un cono infinito.

  • Si fueran teselas físicas, parece imposible porque la curvatura no coincide.
    La pregunta sigue siendo interesante, pero no está lo suficientemente claro qué proyección tendría sentido, así que es difícil profundizar más.
  • También podría ser divertido mostrarlo moviendo lentamente la esfera entre planos infinitos de teselas aperiódicas.

• Un poco fuera de tema, pero es fascinante lo enorme que es The Sphere como proyecto de ingeniería real.
  Incluye todo: desde la estructura en sí hasta sincronizar miles de paneles LED dentro y fuera de la esfera, refrigerarla con el calor de Las Vegas y mantener los 18,000 asientos interiores lo bastante frescos y ventilados.
  Hay muchos edificios de oficinas comunes que ni siquiera logran ventilarse bien.

  • Todo ese esfuerzo y recursos, para al final solo mantener más miradas pegadas a la publicidad.
  • Me parece genial que dentro de Sphere incluso puedan generar viento frío para efectos especiales.

• Hice un smiley.frag simple: https://gist.github.com/nickbarth/4ec5147bd1288fd2bcfc4c5b46...

• El proyecto está muy bueno.
  Sería más fácil compartirlo si cada código tuviera una URL separada. También parece buena idea embeber el código en la URL.

• Hice un shader con una gran carita sonriente.
  Es código GLSL que crea la boca con sdRing, procesa ambos ojos de una vez usando simetría izquierda-derecha y luego lo muestra en amarillo.

• Toqué shaders por primera vez e hice una sandía giratoria.
  Entiendo más o menos que se manejan tuplas RGB, que fract() parece una operación de resto, y que al elevar ese valor al cuadrado y sumarlo se crean franjas suaves, pero todavía me resulta poco claro cómo funciona exactamente el shader, qué es vUv y dónde se asigna gl_FragColor.

  • La GPU recibe un objeto en espacio de modelo, es decir, una lista de vértices de triángulos y una posición de cámara, además de un shader de vértices que lo transforma a espacio de pantalla.
    Luego divide los triángulos en fragmentos, es decir, píxeles, y ejecuta el shader de fragmentos para cada fragmento.
    En este caso, las entradas son el uniform time, que tiene el mismo valor para todos los fragmentos, y vUv, que se emite desde los vértices y luego se interpola linealmente dentro del triángulo; vUv corresponde a las coordenadas del píxel sobre la esfera.
    gl_FragColor es la salida de color RGBA que se aplicará a ese fragmento.
    En un shader típico de un juego o de Google Earth se agregarían texturizado e iluminación, y aunque el modelo de ejecución de la GPU parece como programar píxel por píxel, en realidad es SIMT, por lo que NVIDIA procesa 32 píxeles a la vez y AMD 64.
    En general, se puede pensar que las condicionales se convierten en operaciones condicionales que ejecutan ambas ramas.
  • Es una forma de ejecutar el código para todos los píxeles del canvas.
    Probablemente también te guste https://www.shadertoy.com/.

• También vale la pena ver los shaders de https://www.glslsandbox.com.
  Eso sí, hay que tener cuidado porque ahí personas inmaduras suelen subir shaders NSFW, y parece que los administradores no revisan todo con demasiado detalle.

  • Hacer cuerpos con cientos de líneas de GLSL ya es impresionante, pero componer una escena de orgía en solo 11 líneas es otro nivel.
    Me da curiosidad cuál será la complejidad de Kolmogórov del “contenido GLSL NSFW”.
    https://www.glslsandbox.com/e#108133.0
  • Esto es genialidad pura.
    NSFW: https://www.glslsandbox.com/e#108230.3
    En los comentarios del código quedaron prompts para ChatGPT pidiéndole cosas como hacer el cuerpo más gordo, agregar líneas de desplazamiento en el fondo, cambiar colores y añadir ciertas partes del cuerpo.
  • Aun así, está mucho mejor que cuando había gente subiendo esvásticas ahí.

• Muy bueno.
  Viendo una solución que alguien subió a mi proyecto isocity, permite compartir la ciudad creada mediante una URL.
  Parece que se podría implementar algo parecido: https://github.com/victorqribeiro/isocity/commit/c6588171e37...

• The Sphere parece un lugar excelente para hacer una demo party.
  https://en.wikipedia.org/wiki/Demoscene#Parties