volverPRY 008 · 2026

Shader de pasto

Un pasto que se planta sobre la superficie de cualquier modelo, se mueve con el viento y se despeina cuando lo soplás.

  • 3D en tiempo real

  • Three.js
  • GLSL
  • R3F
  • WebGL

Cada brizna es un solo triángulo dibujado como instancia, y todo lo que la hace parecer viva pasa en el vertex shader: se dobla en su propio espacio vertical - caída en reposo, vaivén propio, una ola que cruza la superficie, ruido - y recién al final se para sobre la normal donde fue plantada. Hacerlo al revés obligaría a calcular qué significa 'inclinarse a favor del viento' para una brizna ya acostada de costado.

Plantarlas es el otro problema, y el que hace que ande sobre cualquier figura: los triángulos de un modelo no miden todos lo mismo, así que elegir uno al azar amontona el pasto en los chicos y deja pelados los grandes. En cambio se recorre la malla una vez armando una tabla de área acumulada y cada brizna se sortea sobre ese total, de modo que cae en cada triángulo exactamente según su parte de la superficie.

Se le puede soplar encima. El puntero apoyado levanta una ráfaga sostenida que peina las briznas en dirección contraria a él, y un click larga un anillo que sale rodando desde donde golpeó. Toda la escena es un solo draw call, sin luces atadas y sin sombras.

Qué hace

  • Una brizna es un triángulo; el coat entero, un draw call
  • Se planta sobre cualquier geometría, caras de abajo incluidas
  • Viento propio, ola que cruza y ruido, todo en el vertex shader
  • Responde al puntero: ráfaga sostenida y anillo al golpear
Plataforma
Web (escritorio y celular)
Tecnología
Three.js · GLSL · R3F
Tipo
Laboratorio de shaders

Explorá más

proyecto 08 / 08
Tuxdi