Embracing WebGPU and WebXR With Three.js

Rate this content
Bookmark

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.
  • Rajnikant Sharma
    Rajnikant Sharma
    Individual
    Loved the session , it was amazing talk with Mr Doob and specially Q&A
  • GitNation resident
    Nice talk! But too bad in practice Threejs dosen't leverage GPU for simple things like Point Clouds. The current PointMaterial isn't based on WebGL. Looking forward to better compatibility with ShaderMaterials and Points! Amazing work.
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.

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

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.
React + WebGPU + IA - ¿Qué podría salir mal? 😳
JSNation 2023JSNation 2023
31 min
React + WebGPU + IA - ¿Qué podría salir mal? 😳
With AI and web GPU, it's an exciting time to be a developer. The speaker's journey involves combining programming and design, leading to the creation of Pure Blue, a powerful programming environment. Adding AI to the mix, the speaker discusses the potential of AI in the creative process and its impact on app development. The talk explores the role of React components and WebGPU in enabling fine-grained editing and running AI models locally. The future of app development is discussed, emphasizing the need to stay ahead of the curve and leverage the power of JavaScript.