Programación 3D con JavaScript - parte 1

¿Alguna vez te has preguntado como se crean sitios web como los que encuentras en awwwards cssdesignawards u orpetron?

¿Estará esto hecho con JavaScript? bruno-simon, doesbook o brettwilliams.

¿Sabías que podemos programar (enviar secuencias de instrucciones) directamente a nuestra GPU, con JavaScript?

En esta serie de post vamos a entender los elementos que componen estas maravillosas escenas, como y de que están hechas, y terminaremos con el equivalente al "hello word"

Lo sé, lo sé un cubo verde girando, no se ve particularmente útil... Pero después de construir este cubo tan básico, te darás cuenta de que la programación 3D no es ingeniería nuclear de la nasa (no tengo idea siquiera si eso existe, pero no será tan difícil). Ver codigo

Un poco de historia 📃

Antes de saltar al código primero entendamos un poco que es lo que hace todo esto posible.

WebGL API aparece alrededor del 2007 como una solución a los múltiples plug-ins y la falta de estándares, para crear experiencias 2D y 3D en los navegadores de manera nativa usando OpenGL como base.

OpenGL es una API usada en diferentes plataformas, mantenida por el grupo Khronos y compite con otras API como Direct3D de Microsoft (importante destacar que OpenGL no es la única opción disponible)

WebGL se introduce en los navegadores con la capacidad de usar los Shaders. Los Shaders que son básicamente dos: Fragment-shaders y Vertex-Shaders (No vamos a entrar en este tópico ahora). Estos son escritos en un lenguaje llamado GLSL y básicamente nos permiten programar en nuestra GPU. GLSL no es JavaScript, se parece más a C; Es multiplataforma y lo podemos usar en nuestros navegadores.

Ahora programar en WebGL directo, aunque posible, resulta increíblemente laborioso, ya que debemos especificar todo de manera muy manual, por ejemplo luces, sombras, coordenadas en el espacio...

ThreeJs

Es aquí donde aparece threejs para salvarnos, realizando abstracciones sumamente útiles, y se establece como librería estándar para la creación de experiencias 3D en el ecosistema de JS.

ThreeJs aparece por el 2010, es open source y es un repositorio sumamente activo, en su página principal pueden ver muchos más ejemplos creativos, cuenta con una documentación muy buena en varios idiomas y muchísimos ejemplos, además también podemos crear experiencias de realidad virtual y realidad aumentada, con él.

Existe mucho contenido y recursos alrededor, uno de los más famosos es el curso Threejs-journey Recomendado para todos los que quieran adentrarse más en este mundo de los creative-developers🎨. El único detalle es que la mayor parte de todos los contenidos está en inglés.

Yo mismo tengo un curso en español 🎓, lo puedes encontrar acá: Curso. Donde explico las bases. (post-data: no gano ningún dinero extra si compran el curso).

React-Three-fiber, TresJs, AngularThree, threlte

Se ha popularizado una capa superior en torno a ThreeJS que facilita todavía más el desarrollo de estas experiencias, eliminando el código duplicado y trayendo todo el poder de tus frameworks favoritos. React-Three-Fiber fue la primera y declara los componentes de ThreeJs de forma declarativa y permite separa fácilmente las instancias por componentes. El resto de librerías sigue la misma filosofía

Yo mismo soy mantenedor de TresJs que es la opción por defecto para VueJs

Ahora, aunque recomiendo mucho usar estas librerías, para experiencias más complejas, al final todas ellas usan ThreeJs como base, lo que significa que altamente es recomendable, conocer como funciona ThreeJs antes de entrar a trabajar con cualquiera de ellas.

¿Qué viene para el futuro🔮?

Como mencione anteriormente, WebGL ya tiene bastante tiempo rondando, y a pesar de todo viene con algunos problemas que son virtualmente imposibles de solucionar sin breaking changes. Por eso, en mayo del 2022 fue liberado al público un trabajo de años, la nueva WebGPU API. Que promete mejores rendimientos, mejor manejo de la memoria, mejor manejo de errores, y un sin fin de beneficios. Por ahora, "dic/2023" solo está disponible para Chrome.

La buena noticia: No tendremos que adaptar casi nada de nuestro código o aprender un lenguaje nuevo 🥳, ThreeJs ya está trabajando en una migración responsable, y aunque la definición de los shaders cambia un poco, ThreeJs está trabajando, en fallbacks para manejar estos casos.

Uff, suficiente con la teoría 😓... En los siguientes post empezaremos con el código ¡Yes! 🤓, y los elementos básicos de todas las escenas.

Segunda parte