Embracing WebGPU and WebXR With Three.js

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

En el panorama en rápida evolución de las tecnologías web, la introducción de WebGPU y WebXR representa un avance significativo, prometiendo redefinir los límites de lo que es posible en experiencias web 3D. Esta charla se adentra en el corazón de estas nuevas tecnologías, guiada por la biblioteca Three.js.


Comenzamos explorando WebGPU, una API de gráficos de próxima generación que ofrece un rendimiento y eficiencia mejorados para renderizar gráficos 3D directamente en el navegador. Demostraremos cómo Three.js se está adaptando para aprovechar todo su potencial, desbloqueando oportunidades sin precedentes para que los desarrolladores creen experiencias interactivas visualmente impresionantes.


Transicionando al ámbito inmersivo, profundizamos en WebXR, una tecnología que abre la puerta a experiencias de realidad virtual y realidad aumentada directamente desde la web. Mostraremos cómo Three.js permite a los creadores construir experiencias inmersivas.

This talk has been presented at JSNation 2024, check out the latest edition of this JavaScript Conference.

Mr.doob
Mr.doob
27 min
13 Jun, 2024

Comments

Sign in or register to post your comment.
  • Va Da
    Va Da
    P4
    I wonder if the will be some other API besides WebGPU and OpenGL to run MML workloads?
  • Venkatramaiah Kethana
    Venkatramaiah Kethana
    Eruvaka Technologies Pvt Ltd
    Nice
  • Rajnikant Sharma
    Rajnikant Sharma
    Individual
    Loved the session , it was amazing talk with Mr Doob and specially Q&A
Video Summary and Transcription
El proyecto 3JS ha evolucionado hasta convertirse en un esfuerzo impulsado por la comunidad con numerosos colaboradores durante los últimos 14 años. Comenzó con el trabajo de motor 3D en Flash y pasó a usar SVGs para renderizar en HTML5 antes de adoptar WebGL. El proyecto muestra varios proyectos y frameworks, incluyendo una herramienta sin código impulsada por 3.js. El equipo está trabajando en un nuevo renderizador usando WebGPU y desarrollando un nuevo lenguaje de sombreado llamado TSL. La esperanza es que WebGPU eventualmente reemplace a WebGL, ofreciendo mejor control y rendimiento.

1. Introducción al Proyecto 3JS

Short description:

He estado liderando el proyecto 3JS durante unos 14 años, y es todo un esfuerzo liderado por la comunidad sin una hoja de ruta. Ren Yuan hizo una visualización del repositorio de Git, mostrando cómo ha evolucionado a lo largo de los años. El proyecto ha tenido alrededor de 2,000 colaboradores, y aprecio la oportunidad que brinda a cualquiera que quiera arreglar cosas sin necesidad de contratos.

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í.

2. Evolución del Proyecto 3JS

Short description:

Después de 14 años, el proyecto 3JS ha evolucionado en un esfuerzo liderado por la comunidad con numerosos colaboradores. Comenzó con el trabajo del motor 3D en Flash, luego pasó a usar SVGs para el renderizado en HTML5. Eventualmente, WebGL se convirtió en la opción preferida para utilizar la GPU para 3D. El sitio web de 3JS muestra varios proyectos, incluyendo una sección interactiva que evoca la creatividad y experimentación de Flash. Además, hay marcos de trabajo como React ReFiber y Trace.js para un desarrollo más fácil, así como una herramienta sin código impulsada por 3.js. El proyecto también ha visto avances en el trazado de rutas, permitiendo un renderizado de escenas más realista. El navegador ahora puede manejar escenarios en tiempo real y de trazado de rutas, como se demuestra con ejemplos como Octopus T. En general, las capacidades del proyecto 3JS continúan expandiéndose.

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.

3. Renderizado con WebGPU y Lenguaje de Sombreado

Short description:

Para lograr un renderizado realista, podemos agregar emisión a la esfera y guardar la imagen. WebGPU, una nueva API para 3D en la web, está disponible en Chrome y ofrece un rendimiento optimizado. El proyecto 3JS ha estado trabajando en un nuevo render utilizando WebGPU, con una opción de retrocompatibilidad WebGL2. Se está desarrollando un nuevo lenguaje de sombreado llamado TSL para simplificar el uso y la combinación de sombreadores, permitiendo la creación de materiales personalizados.

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.

4. Materiales Personalizados y WebXR

Short description:

Ahora es más fácil crear materiales personalizados y combinar texturas utilizando el nuevo lenguaje de sombreado TSL. El trabajo en WebGPU está avanzando y tiene como objetivo estar listo para producción a finales de año. La API de WebXR permanece sin cambios, y se están desarrollando nuevos dispositivos. Dos plataformas, MetaQuest y Vision Pro con Vision OS 2, tendrán WebXR habilitado por defecto. Entre los proyectos en los que se está trabajando se encuentran el seguimiento de manos y la detección de mallas.

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.

5. Geometría 3D e Inclusión en la Escena

Short description:

Puedes incluir objetos 3D en la escena con lo que tengas a tu alrededor. Este es todo el trabajo que hemos hecho hasta ahora.

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.

6. Entendiendo WebGL y WebGPU

Short description:

¿Qué conceptos de WebGL crees que son útiles para entender antes de empezar a trabajar en 3JS? El buffer C es importante para entender, ya que afecta la apariencia de los objetos 3D transparentes. El desarrollo de juegos en la web enfrenta desafíos con el tamaño de la descarga y la monetización. El rendimiento en las aplicaciones Three.js puede mejorarse optimizando los modelos y activos 3D. La esperanza es que WebGPU eventualmente reemplace a WebGL, ofreciendo un mejor control y rendimiento.

APLAUSOS. ¿Qué conceptos de WebGL crees que son útiles para entender antes de empezar a trabajar en 3JS? Supongo que el buffer C, como la transparencia, necesitas entender que no puedo explicar muy rápidamente qué es el buffer C, pero es algo que es bueno entender primero. Pero básicamente vas a tener objetos 3D transparentes que no parecen correctos, y es por eso. ¿Y eso es todo lo que necesitas para empezar con 3JS? Creo que eso es una de las principales cosas a entender para esta pregunta específica. Alguien más acaba de dar un gran agradecimiento. No nada que preguntar, pero muchas gracias. ¿Qué piensas sobre el desarrollo de juegos en la web? ¿Veremos alguna vez un juego AAA en la web, o eso sería un sueño imposible? Creo que es difícil, como técnicamente podemos, pero un juego AAA es como, ya sabes, supongo que tal vez hoy en día son como 100 gigabytes que tienes que descargar, así que vas a un sitio web que no vas a descargar 100 gigabytes para jugar un juego, y luego tal vez la próxima vez se ha perdido, o porque el navegador tuvo que dar los recursos a otro sitio web. La gente está haciendo juegos, especialmente más como juegos Flash, pero creo que el lado AAA es más, va a ser difícil principalmente por el tamaño de la descarga. ¿Y cómo lo monetizas si está en el navegador? Creo que la monetización es algo que, todavía puedes hacer eso de una manera similar a Flash. Hay Poki, la gente tiende a hacer juegos pequeños y tener banners alrededor. Creo que eso está volviendo, pero eso es factible y está sucediendo. Para AAA va a ser diferente. Lo siento. He perdido mi lugar ahora. Sí. ¿Cuáles son tus, gracias por la biblioteca. Ayudé a un estudiante con su licenciatura después de hacer la mía en Three.js. ¿Cuáles son tus principales consejos para hacer aplicaciones Three.js de alto rendimiento? Supongo que lo principal es que tienes que tener cuidado con lo complicado que es el modelo 3D. Así que si tiene muchos triángulos, mucho detalle, y realmente necesitas ese detalle, así que aprendes Blender para optimizar las cosas, creo que esa es la forma más fácil de simplificar las cosas. Tienes un CAD de una compañía de automóviles que tiene un millón de objetos, eso va a ir lento. Intentas combinar todos ellos en uno, y eso va a ser mucho más rápido. Pero en general es más la creación de activos, no tanto el lado del código, es más como al final del día tiende a ser que los activos son lo que necesita ser optimizado.

7. Optimización de activos y el futuro de WebGL

Short description:

La optimización de activos es importante, similar a las imágenes. WebGPU puede superar a WebGL, ofreciendo más control y rendimiento. Eventualmente, WebGL se ejecutará sobre WebGPU, modernizando la tecnología. Se convertirá en una capa de legado para soportar código antiguo.

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.

8. Proyecto favorito de Three.js y posibilidades futuras

Short description:

El proyecto favorito de Ricardo construido con Three.js es el de Johnny. Continúa asombrándose por lo que la gente crea con la plataforma y cree que la web puede recuperar el mismo nivel de creatividad que Flash con un editor equivalente. Ricardo enfatiza la importancia del software abierto y el papel de la generación actual en la construcción de herramientas innovadoras. El rendimiento del proyecto del coche japonés es excelente y funciona en cualquier teléfono. La URL es nextjuni.jp.

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Transformers.js: Machine Learning de Última Generación para la Web
JSNation 2025JSNation 2025
27 min
Transformers.js: Machine Learning de Última Generación para la Web
Joshua introduces Transformers JS and Hugging Face, emphasizing community collaboration and pre-trained models. Transformers JS evolution led to 1.4 million monthly users, supporting 155 architectures. The library's browser-based capabilities offer real-time processing, cost-efficiency, and scalability. Integration enhancements include native web GPU execution and React Native implementation. Web ML implementation focuses on Onyx Runtime for device execution and web GPU for resource optimization. Browser-based ML applications cover vision, speech recognition, and text-to-speech. Advanced implementations include multimodal applications and educational tools. Interactive AI demonstrations showcase semantic search and conversational AI scenarios. Model licensing transitions to ECMAScript for efficiency and model redownloading factors are discussed.
Unreal Engine en WebAssembly/WebGPU
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Unreal Engine en WebAssembly/WebGPU
Top Content
Alex Saint-Louis, co-founder of Wunder Interactive, shares the mission of bringing Unreal Engine to the browser, enabling cross-platform 3D applications and games. They are working on a WebGPU back end for Unreal Engine to push the limits of 3D on the web. Wunder Interactive has improved compression, built their own asset file system, and offers powerful tools for game developers. They are utilizing modern web technologies like WebAssembly, WebGL, and WebGPU, and plan to support other engines like Unity and Godot. The team aims to transform the industry by bringing console-quality games to the browser and providing an alternative distribution path. They are excited to bring Unreal Engine 5 to the web with WebGPU support and are working on WebXR support for cross-platform 3D experiences, including VR.
Construye un Sistema Solar 3D con Reconocimiento de Manos y Three.js
JSNation 2022JSNation 2022
36 min
Construye un Sistema Solar 3D con Reconocimiento de Manos y Three.js
Top Content
This Talk explores the use of TypeScript, 3JS, hand recognition, and TensorFlow.js to create 3D experiences on the web. It covers topics such as rendering 3D objects, adding lights and objects, hand tracking, and creating interactive gestures. The speaker demonstrates how to build a cube and a bouncy box, move objects with flick gestures, and create a solar system with stars and planets. The Talk also discusses the possibilities of using hand gestures for web navigation and controlling websites, as well as the performance limits of these technologies.
Makepad - Aprovechando Rust + Wasm + WebGL para construir aplicaciones multiplataforma increíbles
JSNation 2022JSNation 2022
22 min
Makepad - Aprovechando Rust + Wasm + WebGL para construir aplicaciones multiplataforma increíbles
Top Content
Welcome to MakePad, a new way to build UI for web and native using WebAssembly and Rust. JavaScript is not suitable for complex applications like IDEs and design tools. Rust, a new programming language, was used to reimagine MakePad, resulting in a fast and efficient platform. MakePad offers live editing, high CPU performance, and the ability to load native instrument components. The future of MakePad includes an open-source release, a design tool, and support for importing 3D models.
Haciendo juegos web “de tamaño bocado” con GameSnacks
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Haciendo juegos web “de tamaño bocado” con GameSnacks
Top Content
Welcome to making bite-sized games with GameSnacks, a platform that focuses on optimizing game sizes for easy accessibility on the web. Techniques such as lazy loading, script placement, and code and art optimization can greatly improve game performance. Choosing the right file formats, reducing game size, and using game engines or custom tools are important considerations. Prioritizing file size, testing internet connections, and using testing tools for accurate simulation can help attract more users and improve game retention and reach.
Ampliando Unity WebGL con Javascript
JS GameDev Summit 2022JS GameDev Summit 2022
32 min
Ampliando Unity WebGL con Javascript
Top Content
Unity targets over 25 platforms and technologies, including desktop, mobile, and virtual reality. They use Emscripten to compile the engine and game logic into WebAssembly for web development. Unity can be extended with plugins to access browser features like WebXR's augmented reality mode. The speaker demonstrates intercepting Unity's calls to the browser to modify its behavior. Unity is actively working on mobile support for web export and improving documentation for extending Unity with web plugins.