La visualización de tramado Three.js del desarrollador Damar Aji Pramudita representa una animación cúbica de 160.000 instancias de GPU a través de un sombreador GLSL para decodificar imágenes de medios tonos.
El tramado es una técnica más antigua que la propia informática digital, utilizada en la impresión y en las primeras pantallas para simular gradaciones tonales en una paleta de colores limitada. El proyecto de Pramudita lleva este concepto de simulación al navegador, mapeando cualquier fotografía en una cuadrícula de 400×400 de 160.000 instancias de cubos individuales. Cada cubo recibe un valor de luminancia tomado de la imagen de origen y luego se anima a lo largo de su eje z en función de ese valor, creando un efecto de semitono tridimensional que respira con la imagen subyacente.
El rendimiento detrás de este efecto depende completamente de Three.js InstancedMesh, que entrega las 160.000 matrices de transformación a la GPU en una sola llamada de extracción. El factor de retraso, el objetivo de escala y el desplazamiento de posición de cada cubo se calculan dentro del sombreador de vértices GLSL, lo que elimina completamente JavaScript del bucle de animación. El resultado es una representación fluida e instantánea que se detendría si cada cubo se actualizara individualmente en JavaScript.
Cómo funciona la visualización de fluctuaciones de Three.js
Pramudita publicó un tutorial detallado de 10 pasos sobre Codrops que cubre la implementación completa, desde la configuración de la geometría y el muestreo de texturas hasta el mapeo de umbrales y la animación a través de uniformes de sombreado. Three.js Jitter Visualization también sirve como una introducción al arte generativo, mostrando cómo los algoritmos estructurados pueden producir resultados orgánicos y vívidos. El sombreador de fragmentos GLSL personalizado lee el índice de unidad normalizado y compara el brillo muestreado con la matriz de umbral, cambiando la visibilidad del cubo para restablecer la cuadrícula de medios tonos en cualquier resolución.
Demostraciones, código fuente completo y tutoriales paso a paso están disponibles en Codrops. fuente: Anima 160.000 cubos en Three.js para visualizar la inquietud Autor: Dharmal Aji Pramudita.
