Holograma

Una práctica del curso Three.js Journey, para reproducir el aspecto de un holograma de ciencia ficción con un solo material: franjas que suben, bordes brillantes, transparencia y pequeñas interferencias. El caza TIE lo modelé para este ejercicio.

El modelo usa un ShaderMaterial propio con mezcla aditiva y las dos caras visibles. En el fragment shader, unas franjas horizontales suben con el tiempo y se combinan con un término Fresnel que ilumina los bordes; un desvanecimiento hacia el centro deja el cuerpo casi transparente:

float stripes = pow(mod((vPosition.y - uTime * 0.25) * 8.0, 2.0), 2.0);
float fresnel = pow(dot(viewDirection, normal) + 1.0, 2.0);
float holographic = (fresnel * stripes + fresnel * 1.25) * smoothstep(0.8, 0.0, fresnel);

En el vertex shader, cada vez que el modelo vuelve a mirar al frente, una onda recorre su altura y desplaza los vértices con un valor pseudoaleatorio: es la interferencia del holograma.

El modelo flota con Float de Drei y gira al azar cada pocos segundos antes de volver al frente. El emisor es un cilindro de doce lados en wireframe emisivo que gira sobre sí mismo, y el cono de luz usa FakeGlowMaterial de Anderson Mancini, con un brillo que varía según la altura del modelo. Con el audio activado suena una música de fondo y, en cada interferencia, uno de cuatro chasquidos eléctricos elegido al azar.

Ejercicio basado en la lección Hologram de Three.js Journey. Modelo del caza TIE: propio. FakeGlowMaterial por Anderson Mancini. Efectos de sonido de henrikcederblad (Freesound) y Little Robot Sound Factory (ZapSplat), con licencia CC BY 4.0.