Embracing WebGPU and WebXR With Three.js

Soy Ricardo, he estado liderando el proyecto 3JS durante unos 14 años hasta este punto. El proyecto ha tenido hasta ahora alrededor de 2,000 colaboradores, y una cosa que encontré interesante es que realmente nunca tuvimos ninguna hoja de ruta para el proyecto. Es todo un esfuerzo liderado por la comunidad, como dije, guío un poco, pero en general, no lo hacemos, todos están tratando de hacer lo que creen que debería hacerse. Si tienes curiosidad por ver cómo se ve un proyecto así, cómo se ve una organización, Ren Yuan hizo una visualización del repositorio de Git de los últimos 14 años, y verás en el centro, esto es básicamente yo en el centro, una pequeña bola moviéndose, los archivos están en los bordes, y durante los primeros años, era prácticamente solo yo, como, ya sabes, algunas personas se unían a mí e intentaban ayudar en algunas de las partes, pero hay un montón de pequeños, ya sabes, todos esos pequeños puntos son solo personas que están ayudando a arreglar esta cosa, y, ya sabes, me gusta mucho el hecho de que tenemos, damos esta oportunidad a cualquiera que, ya sabes, quiera arreglar esta cosa, es bastante fácil entrar y arreglar esa cosa, ya sabes, en comparación con, ya sabes, no tener que, algunos de los proyectos más grandes, como si se les requiriera firmar contratos y cosas así.

Entonces, después, como, 14 años, se ve así, es un grupo de personas que son los principales contribuyentes, pero hay muchas personas que, como, ayudan mucho. Para aquellos de ustedes que no lo saben, voy a dar una pequeña introducción, un poco de antecedentes, también, como, originalmente, esto es en realidad más de 14 años atrás, empecé a hacer, como, trabajo de motor 3D, explorando esto, como, en Flash, ya, en 2006, 2007, y, como, estaba trabajando en eso durante unos años hasta que, ya sabes, había, como, cuando empezamos a ver que había un HTML5, y íbamos a pasar a eso, así que yo realmente empecé a portar el código que tenía a HTML5, y estaba usando SVGs para renderizarlo, porque SVG era similar a lo que Flash estaba usando para renderizar 3D, y créelo o no, básicamente, como, creando un nuevo SVG cada cuadro, estaba borrando todos los nodos y añadiendo todos los nodos para todos los triángulos, pero creo que en ese momento tú sólo podías hacer 2,000 triángulos o algo así, como una escena con sólo 2,000 polígonos, sería demasiado difícil ya para la CPU.

Luego tuvimos canvas 3D, y, como, ya sabes, es una opción mucho mejor para ello, pero aún no es la más óptima, y luego, como, en 2011, tuvimos, como, conseguimos WebGL en los navegadores, que es lo que quieres usar, como tu ordenador tiene una GPU, quieres usar tu GPU para hacer 3D. Voy a mostrar, como, ya sabes, puedes ir al sitio web para ver algunos de los proyectos que la gente ha estado haciendo. Debería intentar, se supone que debo actualizar esto, tengo dos años de retraso para actualizar, como, ya sabes, los últimos proyectos, pero uno de mis favoritos es esta empresa japonesa que realmente se volcó en todas las cosas que puedes hacer con ello, así que, ya sabes, esto es sólo un normal sitio web. Como, esta es la introducción. Puedes moverte, como, jugar con las cosas, e ir a la siguiente sección, ahora, como el animal se vuelve refractivo, ve a la siguiente sección, como, ya sabes, es más como un informativo y una forma muy, como, alucinante, supongo, y en esta sección puedes mover el bolígrafo y dibujar en el suelo, y finalmente, como, el animal simplemente vuela. Esto para mí realmente trae mucho de la creatividad que la gente, o el tipo de sitio web que solíamos ver con Flash, que siempre va a ser la batalla de la gente diciendo, como, esto no es útil, y esto es, como, aburrido, así que, ya sabes, todavía voy con las cosas más bonitas y más, como, experimentales. Eso es principalmente como JavaScript plano.

También estás acostumbrado a usar frameworks. Para React, hay React ReFiber que trae todos los componentes, como el enfoque de React, y lo hace mucho más, es mucho más fácil para la gente, como no tienes que aprender tanto de cómo funcionan las cosas, cómo conectar las cosas, puedes simplemente conectar las cosas, juntar las cosas mucho más fácil. Para Vue.js, hay Trace.js, enfoque similar, sería bueno si hubiera una forma más fácil para que todos ellos reutilicen los componentes, pero es una idea similar. Básicamente es una especie de dialecto del lenguaje que teníamos en JavaScript pero, como, ya sabes, en cada sabor diferente. Si usas Velt, también es como Threlt que es lo mismo, todos usando el mismo tipo de como algo del código que hemos hecho en la base, pero algunos de ellos hacen sus propios componentes y su propio trabajo para hacer las cosas mucho, mucho más fáciles. Y si estás más en como la cosa sin código, hay una popular que es también como usando 3.js debajo, y es una herramienta bastante buena para crear prototipos y para que más diseñadores jueguen con ella. También más recientemente, como, Gareth ha estado trabajando en el trazador de rutas. Para aquellos de ustedes que no lo saben, esto es más básicamente no enfocado en realtime, sino es más similar a Blender o cualquier software 3D como Maya donde puedes renderizar una escena de una manera que se ve mucho más realista. Pero la idea es que básicamente utiliza la misma, como, ya sabes, intenta utilizar la API tanto como sea posible, así que ahora tu proyecto tiene una escena que estás definiendo, como, ya sabes, un buen ejemplo para esto es si estás haciendo como una tienda de muebles o algo que quieres que la persona personalice los muebles, y quieres que puedan ver de una manera más realista cómo va a lucir el mueble, entonces puedes usar esto para hacer un render más lento, más bajo. Así que si tienes cualquier tipo de escena que has hecho con 3, también puedes ahora añadir esto básicamente lo que puedo ver, este trazador de rutas, y en lugar de renderizar con un render normal, renderizas con esto, y básicamente te permite hacer, como, la primera escena, la primera que ves es sin él, y luego progresivamente se vuelve más realista. Un mejor ejemplo es este. Así que cada vez que mueves la cámara, puedes ver, como, es un realtime, es básicamente un renderizador WebGL funcionando, pero cuando detienes la cámara, el trazador de rutas comienza a trabajar e intenta hacer la escena más realista. También hace que el fondo parezca que tiene profundidad de campo, más sombreado, en general, más realista de lo que puedes hacer en realtime en este punto. Otro ejemplo, donde, en este, realmente podemos jugar con todos los, en realidad ofrece muchos parámetros, como cuánto quieres que la luz rebote en el objeto, y la reflexión, como todos los diferentes parámetros. Otro ejemplo es Octopus T, creo. Así que esto es realtime, y eso se convierte en un trazador de rutas. Esto es lo que podemos hacer ahora en el navegador. Si quieres una forma más fácil de probar, como, hay un editor 3GS, así que, vamos a ver, podemos hacer tal vez una caja en una esfera. Si cojo la caja, puedo convertirla en un plano. Algo así. Para poder ver, podemos ver que esto básicamente, ahora mismo, tenemos esta esfera que está sentada encima de la caja.

Así que lo convertimos en realista. Ahora mismo, no lo hace, porque no hay luz ni nada, no vamos a, no vamos a ver nada, pero si seleccionamos la esfera y cambiamos el material a colores emisivos, añadimos emisión a ella, significa que la esfera misma va a emitir color en lo que sea que esté a su alrededor. También podemos añadir como otro, quizás un nodo turístico. Acercar demasiado. ¿Dónde estoy? Ahí vas. Luego desde aquí, puedes guardar eso como una imagen, y básicamente, tienes un pequeño blender en el navegador en este punto. Este es un código que cualquiera puede reutilizar para su proyecto para lo que quieras usar.

Así que esto es un poco como lo que hemos tenido hasta ahora, como el tipo de trabajo que la gente está haciendo, el tipo de frameworks que la gente ha estado construyendo encima, hasta el punto de que incluso tenemos trazadores de rutas disponibles para sitios web. Ahora tenemos desde el año pasado, WebGPU se hizo disponible en Chrome. Todavía no está disponible en Safari, u otros navegadores, como Firefox, pero estamos seguros de que va a, tal vez no este año para Safari, tal vez el próximo año. Para WebGPU, básicamente, WebGPU es una API diferente debajo para hacer 3D en la web. Es más, básicamente está encima de Metal, Vulkan, y DirectX 12. Así que, básicamente, son APIs nativas que están más optimizadas para el hardware actual que tenemos estos días. Como WebGL se basa en OpenGL, que fue diseñado a finales de los 90. Así que esto es básicamente como un nuevo enfoque más moderno para hacer 3D, pero básicamente, es muy diferente a OpenGL, por lo que requiere hacer un nuevo back end para ello. Así que, durante los últimos años, hemos estado trabajando en Mugen, y Sunak, y Reno han estado trabajando en un nuevo render para la biblioteca. La idea es que, lo único que tienes que hacer es básicamente, en lugar de hacer un WebGL render, solíamos hacer una clase WebGPU. Tenemos un montón de ejemplos ya. Hemos estado trabajando durante bastantes años tratando de tener la misma paridad, como la misma para poder ser compatibles con las cosas que soportamos WebGL, que son muchas de ellas. No vamos a poder soportar todo, pero puedes ver muchas de las cosas que tenemos hasta ahora. Una de las cosas, como la idea es tratar de hacerlo de manera que sólo reemplaces el render y funcione de inmediato, pero al mismo tiempo, si tuviéramos eso, como, ya sabes, no queremos que la gente tenga que hacer, como, si haces un sitio web, no quieres tener que tener dos renders diferentes, así que estamos tratando de tener una opción de retrocompatibilidad WebGL2 en el render WebGPU para que puedas empezar a usar el mismo código, y no tienes que preocuparte si Safari soporta WebGPU, vamos a tratar de hacerlo funcionar usando la opción de retrocompatibilidad WebGL2. De nuevo, no todo va a poder funcionar, pero la idea es que para la mayoría de las cosas, ya sabes, si no estás haciendo algo específico, debería funcionar. Uno de los problemas, sin embargo, es que, ya sabes, una de las cosas que no somos capaces de soportar es que OpenGL tiene GLSL para su propio lenguaje, y WebGPU tiene el WGSL, que son básicamente como lenguajes diferentes. Podrías tener un compilador en tu sitio web que compile GLSL a WGSL, pero eso sería un mínimo, como ahora mismo creo que el último tamaño del compilador era como un megabyte, lo cual es demasiado para un sitio web. Así que algo en lo que Sunak ha estado trabajando es como un nuevo y otro lenguaje de sombreado TSL, que es básicamente como una abstracción de sombreado JavaScript basada en nodos. De la misma manera que Three.js estaba haciendo una abstracción para OpenGL, para hacerlo más fácil de usar, como TSL está tratando de hacer que los sombreadores sean más fáciles de usar, y fáciles de combinar con otras cosas. Ahora mismo, es muy difícil tener un sombreador u otro sombreador, no puedes fácilmente combinarlos. Así que este lenguaje básicamente genera GLSL o WGSL, o de lo contrario generará GLSL.

También va a permitir que sea mucho más fácil crear materiales personalizados. Como un buen ejemplo es este, en este tenemos básicamente dos texturas. Tenemos un mapa de color allí, y un mapa de detalle. La idea es que tienes un material que tiene una textura de color, pero quieres añadir como otra, quieres multiplicar otra textura encima del color, para hacerlo más interesante, como para no hacerlo, especialmente piensas en un juego, usualmente tienes algunos tonos de color en una celda o algo así, y luego añades otra textura encima que añade algo de rugosidad a todo, por lo que no parece tan simple. Así que para esto, este es el código que hará eso. Usas este tipo de material de nodo, usas esta textura de mapa de color, y multiplicas este detalle en él, y todo esto es como basado en JavaScript. Ya no tenemos que escribir una cadena más, como el GLSL o WGSL. Para comparar, si quieres hacer lo mismo con lo que tenemos, hasta ahora sería esto, como para modificar un material incorporado, este es el tipo de código que teníamos que hacer. Y sabes, va a ser interesante ver cómo la gente es capaz de combinar estas cosas, el tipo de materiales que la gente va a ser capaz de hacer con esto. También nos va a permitir hacer tree-shaking, como hasta ahora, todos los materiales incorporados tienen sombreadores que no éramos capaces de tree-shake cuando construyes un sitio web porque cualquiera va a ser capaz de crear cualquier material en cualquier momento, y los sombreadores necesitan estar allí, y ahora somos capaces de saber exactamente qué nodo estás usando y qué código deberíamos estar generando, o qué código deberíamos ser capaces de, sabes, todo es básicamente JavaScript. También va a permitir texturas procedurales de una manera mucho más fácil. Un buen ejemplo como vi hoy, había como este chico estaba haciendo lo que él llama una textura TSL, que es una de las cosas interesantes con esto es que es realmente como una resolución infinita, como si quisieras hacer algo como esto, sabes, sería como una textura de 8k que tienes que cargar, pero al mismo tiempo, puedes modificar en tiempo real y hacer lo que quieras con ella. Otro ejemplo de esto. Veamos. Tal vez este. Sí, curiosamente, esto es realmente como, sabes, esta textura se está generando cada cuadro, y parece ser bastante eficiente. Y lo mismo, como la, sabes, resolución es infinita. Así que eso es más o menos lo que tenemos hasta ahora para el trabajo con WebGPU. Todavía, no creo que esté listo para producción en este punto, pero estamos bastante cerca de eso. Creo que para finales de año, estamos apuntando a poder reemplazarlo y recomendar a la gente que empiece a usarlo.

Desde el lado de WebXR, como la API realmente no ha cambiado, ahora mismo estamos esperando que los dispositivos se pongan al día. Hicimos la mayoría de estas cosas para, sabes, en la era de Daydream. Luego pararon las cosas, y ahora la gente está empezando a hacer dispositivos. La API es prácticamente, sabes, en el render, habilitas XR y luego tienes todo el código interno para renderizar para cada ojo. En este punto, se supone que las dos principales plataformas, como MetaQuest, y también como ayer estaban anunciando que para otoño de 2024, el Vision Pro con el Vision OS 2, van a tener WebXR habilitado por defecto. Así que ahora tenemos dos plataformas. Sólo va a ser VR, pero es bueno. Es emocionante. Algunos de los proyectos que la gente ha estado haciendo hasta ahora, en este punto tenemos seguimiento de manos es algo que siempre estuvo allí, así que este es un buen ejemplo de eso. Una de las nuevas extensiones en las que hemos estado trabajando es la detección de mallas, así que ahora puedes tener como una geometría de tu lo que sea que tengas, como lo que ves, pero es algo que básicamente el navegador te da.

Puedes tener lo que sea, te proporciona una geometría 3D. No es algo que el sitio web pueda escanear. Y también esta detección, que básicamente es algo que en este caso tienes un mapa de profundidad de la escena que estás mirando. Entonces en este caso, puedes ver que el error se fue bien detrás de la pantalla. Por lo tanto, eres capaz de incluir cosas, eres capaz de incluir objetos 3D en la escena con lo que tengas a tu alrededor. Y, sí, eso es prácticamente todo. Este es todo el trabajo que hemos hecho hasta ahora.

Entonces, es una cuestión de pensar en qué nivel de detalle realmente quieres antes de que incluso comiences a escribir el código. Es similar a las imágenes. No cargas un archivo PSD o no quieres una imagen de 10K para un logo, así que necesitas ser consciente de optimizar los activos para lo que necesitas. Por supuesto, aunque he visto muchos sitios web con imágenes de 20MB sin ninguna razón. ¿Crees que WebGPU eventualmente superará a WebGL? Esa es la esperanza, que eventualmente será así. WebGL seguirá estando allí, pero la idea es que los proveedores de navegadores están interesados en tener WebGPU como la API principal, porque básicamente tienes que lidiar con menos problemas de controladores y tienes más control y más performance en general, así que es como modernizar este paso. Eventualmente, el navegador va a ejecutar WebGL encima de WebGPU, más o menos. No WebGPU, pero lo que se ejecuta bajo WebGPU, van a tener WebGL ejecutándose de la misma manera. Entonces, de la misma manera que, como, en macOS tienen OpenGL pero no es realmente OpenGL, es OpenGL encima de Metal. Así que eventualmente todo se está moviendo hacia las nuevas APIs. Así que WebGL terminará ejecutando realmente WebGPU bajo el capó y simplemente siendo una capa de legado para soportar código antiguo.

Genial. ¿Cuál es tu proyecto favorito que se construyó con Three.js? No tiene que ser uno propio. Supongo que como el que mostré, el de Johnny por ahora, ese es el que me trae más alegría de, como, claro, pongamos todo allí y es lúdico, es bueno. Así que incluso ahora todavía ves cosas que te sorprenden y te hacen decir, oh, wow. Ha sido, sí. Fue un sentimiento cálido cuando vi ese proyecto. Ha pasado mucho tiempo desde que me sorprendió lo que todos están haciendo con él. Entiendo muy poco de lo que está pasando en este punto. Entiendo, como, puedo hacer algunas de las capas pero cuando veo lo que la gente está haciendo estoy bastante impresionado con ello.

Entendido. Es abrumador. Es un poco abrumador. Aquí hay uno que apuesto te preguntan muchas veces. Mr. Doob, Flash fue el pico de la creatividad y una herramienta fácil para crear animación. ¿Crees que 3 podría lograr lo mismo si hubiera un editor equivalente? Creo que podemos llegar allí, y algo en lo que pienso de vez en cuando es que teníamos Flash en ese momento como un software propietario. No queríamos que la web dependiera de software propietario, así que ahora lo estamos haciendo más abierto En este punto, si queremos tener ese tipo de creatividad de vuelta, básicamente depende de nosotros, la generación actual, construirlo. Si queremos que otras personas lo construyan, probablemente no lo tendremos. Así que básicamente depende de nosotros hacerlo. Y creo que eventualmente lo lograremos. Seguimos asegurándonos de que todo sea abierto y construyendo los diferentes componentes pero creo que estamos llegando allí. Solo está tomando algo de tiempo.

Alguien preguntó cómo es el rendimiento de ese maravilloso coche japonés. ¿El animal? ¿Oh, el del animal? Está muy bien. El tipo que lo hizo allí sabe muy bien lo que está haciendo. Está bastante bien optimizado. Funciona en cualquier teléfono. ¿Te importaría recordarnos la URL? Claro. Creo que es nextjuni.jp Excelente. Estoy bastante seguro. Muchas gracias, Ricardo. Eso fue realmente interesante. Un aplauso para Ricardo, Mr. Do.