Abrazando WebGPU y WebXR con Three.js

Rate this content
Bookmark

En el panorama en constante evolución de las tecnologías web, la introducción de WebGPU y WebXR representa un gran avance, prometiendo redefinir los límites de lo que es posible en las experiencias web en 3D. Esta charla se sumerge 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.


En la transición al ámbito inmersivo, nos adentramos 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.
  • 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 en un esfuerzo impulsado por la comunidad con numerosos colaboradores en los últimos 14 años. Comenzó con el trabajo del motor 3D en Flash y pasó a utilizar SVG para el renderizado en HTML5 antes de adoptar WebGL. El proyecto muestra varios proyectos y marcos, incluida una herramienta sin código impulsada por 3.js. El equipo está trabajando en un nuevo renderizado utilizando WebGPU y desarrollando un nuevo lenguaje de sombreado llamado TSL. La esperanza es que WebGPU eventualmente reemplace a WebGL, ofreciendo un mejor control y rendimiento.

1. Introducción al proyecto 3JS

Short description:

He estado liderando el proyecto 3JS durante aproximadamente 14 años, y es una especie de liderazgo comunitario sin un plan establecido. Ren Yuan hizo una visualización del repositorio 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 solucionar problemas sin necesidad de contratos.

Soy Ricardo, he estado liderando el proyecto 3JS durante aproximadamente 14 años en este momento. El proyecto ha tenido hasta ahora alrededor de 2,000 colaboradores, y algo que me pareció interesante es que realmente nunca hemos tenido un plan establecido para el proyecto. Es una especie de liderazgo comunitario, como mencioné antes, yo guío un poco, pero en general, no lo hacemos, todos están tratando de hacer lo que creen que se debe hacer. Si tienes curiosidad por ver cómo se ve un proyecto como este, cómo se ve una organización, Ren Yuan hizo una visualización del repositorio Git de los últimos 14 años, y verás en el centro, básicamente soy yo en el centro, una pequeña bola moviéndose, los archivos están en los bordes, y durante los primeros años, básicamente era solo yo, ya sabes, algunas personas se unirían a mí y tratarían de ayudar en algunas partes, pero hay muchas pequeñas, ya sabes, todos esos pequeños puntos son personas que están ayudando a solucionar este problema, y realmente disfruto el hecho de que brindamos esta oportunidad a cualquiera que quiera solucionar este problema, es bastante fácil unirse y solucionar ese problema, ya sabes, en comparación con, ya sabes, no tener que hacerlo en proyectos más grandes, como si se 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 impulsado por la comunidad con numerosos colaboradores. Comenzó con el trabajo del motor 3D en Flash, luego pasó a utilizar SVG para renderizar en HTML5. Eventualmente, WebGL se convirtió en la opción preferida para utilizar la GPU en 3D. El sitio web de 3JS muestra varios proyectos, incluida una sección interactiva que evoca la creatividad y experimentación de Flash. Además, hay frameworks como React ReFiber y Trace.js para facilitar el desarrollo, así como una herramienta sin código impulsada por 3.js. El proyecto también ha visto avances en el trazado de trayectorias, lo que permite un renderizado de escenas más realista. El navegador ahora puede manejar escenarios en tiempo real y de trazado de trayectorias, como se demuestra en ejemplos como Octopus T. En general, las capacidades del proyecto 3JS continúan expandiéndose.

Entonces, después de, como, 14 años, se ve así, es un grupo de personas que son los principales colaboradores, pero hay mucha gente que está ayudando mucho. Para aquellos de ustedes que no lo saben, voy a dar un poco de introducción, un poco de antecedentes, también, como originalmente, esto es en realidad hace más de 14 años, comencé a hacer, como, trabajo de motor 3D, explorando esto, como en Flash, ya en 2006, 2007, y, como, estuve trabajando en eso durante algunos años hasta que, ya sabes, cuando comenzamos a ver que había un HTML5, y nos íbamos a pasar a eso, así que en realidad comencé a portar el código que tenía a HTML5, y en realidad estaba usando SVG para renderizarlo, porque SVG era similar a lo que Flash estaba usando para renderizar 3D, y créanlo o no, básicamente estaba creando un nuevo SVG en cada cuadro, estaba eliminando todos los nodos y agregando todos los nodos para todos los triángulos, pero creo que en ese momento solo se podían hacer 2,000 triángulos o algo así, como una escena con solo 2,000 polígonos, ya sería demasiado difícil para la CPU.

Luego tuvimos canvas 3D, y, como saben, es una opción mucho mejor para eso, pero aún no es la más óptima, y luego, en 2011, obtuvimos WebGL en los navegadores, que es lo que quieres usar, tu computadora tiene una GPU, quieres usar tu GPU para hacer 3D. Voy a mostrar, ya saben, pueden 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, estoy dos años atrasado en la actualización, ya saben, los últimos proyectos, pero uno de mis favoritos es esta empresa japonesa que realmente se excedió en todas las cosas que puedes hacer con él, así que, ya saben, este es solo un sitio web normal. Como introducción. Puedes moverte, jugar con las cosas y pasar a la siguiente sección, ahora, como el animal se vuelve refractivo, pasar a la siguiente sección, ya sabes, es más como una forma informativa y muy, como, alucinante, supongo, y en esta sección puedes mover el lápiz y dibujar en el suelo, y eventualmente, el animal simplemente se va volando. Esto realmente me trae mucha 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 que dice que esto no es útil, y esto es, como, aburrido, así que, ya saben, todavía voy con las cosas más bonitas y más experimentales. Eso es principalmente JavaScript plano.

También están acostumbrados a usar frameworks. Para React, hay React ReFiber que trae todos los componentes, como el enfoque de React, y lo hace mucho más fácil para las personas, no tienes que aprender tanto cómo funcionan las cosas, cómo conectar las cosas, simplemente puedes conectar las cosas, juntar las cosas mucho más fácilmente. Para Vue.js, está Trace.js, enfoque similar, sería bueno si hubiera una forma más fácil para que todos ellos reutilicen componentes, pero es una idea similar. Básicamente es una especie de dialecto del lenguaje que teníamos en JavaScript, pero, ya saben, en cada sabor diferente. Si usas Velt, también es como Threlt, que es lo mismo, todos usan un poco del mismo 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 te gusta más el tipo sin código, hay uno popular que también utiliza 3.js por debajo, y es una herramienta bastante buena para crear prototipos y para que los diseñadores jueguen con ella. También más recientemente, Gareth ha estado trabajando en el trazado de trayectorias. Para aquellos de ustedes que no lo saben, esto es básicamente no se centra en tiempo real, pero 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, ya saben, trata de utilizar la API tanto como sea posible, así que ahora tu proyecto tiene una escena que estás definiendo, ya sabes, un buen ejemplo de esto es si estás haciendo, como, una tienda de muebles o algo así, y quieres que la persona personalice los muebles, y quieres que puedan ver de una manera más realista cómo se verá el mueble, entonces puedes usar esto para hacer un renderizado más lento, más bajo. Entonces, si tienes algún tipo de escena que hayas hecho con 3, ahora también puedes agregar este básicamente lo que puedo ver, este trazador de trayectorias, y en lugar de renderizar con un renderizado 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. Entonces, cada vez que mueves la cámara, puedes ver, como, es en tiempo real, es básicamente un renderizador WebGL en ejecución, pero cuando detienes la cámara, el trazador de trayectorias comienza a funcionar e intenta hacer que la escena sea más realista. También hace que el fondo tenga profundidad de campo, más sombras, en general, más realista de lo que puedes hacer en tiempo real en este momento. Otro ejemplo, 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 más es Octopus T, creo. Entonces esto es en tiempo real, y eso se convierte en uno de trazado de trayectorias. Esto es lo que podemos hacer ahora en el navegador. Si quieres una forma más fácil de probar, como, hay un editor de 3GS, así que, veamos, podemos hacer tal vez una caja sobre una esfera. Si obtengo la caja, puedo hacer que se convierta en un plano. Algo así. Para poder ver, podemos ver que básicamente, en este momento, tenemos esta esfera que está 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.