Fundamentals
Core
Master
Shaders
Optimizaci贸n
Los sitios web en 3D pueden ser exigentes en t茅rminos de rendimiento. Es importante tener en cuenta que no todos los usuarios tienen el mismo dispositivo.
Algunos tienen dispositivos de gama alta con una GPU potente y una pantalla de alta resoluci贸n, mientras que otros tienen dispositivos de gama baja con una GPU d茅bil y una pantalla de baja resoluci贸n.
Para asegurarte de que un m谩ximo de usuarios pueda disfrutar de tus aplicaciones web en 3D de la mejor manera posible, necesitas optimizarlas y evitar c谩lculos innecesarios.
En esta lecci贸n, veremos diferentes t茅cnicas para optimizar nuestros proyectos de React Three Fiber y algunos errores comunes que debemos evitar.
Draw calls
En los gr谩ficos 3D, un draw call es una comando enviado a la GPU que le indica a la API gr谩fica qu茅 dibujar y c贸mo dibujarlo.
Cuantos m谩s draw calls tengas, m谩s trabajo tendr谩 que hacer la GPU.
Para monitorear el n煤mero de draw calls en tus proyectos de React Three Fiber puedes usar la extensi贸n SpectorJS para Chrome.
Una vez que hayas instalado la extensi贸n, puedes abrir el panel de SpectorJS haciendo clic en el icono de Spector.js en la barra de herramientas de Chrome.
Haz clic en el bot贸n de c铆rculo rojo para comenzar a grabar los draw calls. Espera unos segundos y se abrir谩 el panel de SpectorJS.
Por defecto, se abre en la pesta帽a de comandos. Te muestra todos los comandos enviados a la GPU. En la columna izquierda, puedes ver una miniatura para cada draw call.
Las primeras draw calls son para las sombras. Luego puedes ver las draw calls para el personaje y luego una por cada cubo (estas 煤ltimas deben ser optimizadas).
La pesta帽a de informaci贸n tambi茅n proporciona informaci贸n 煤til como el n煤mero de v茅rtices y el n煤mero de draw calls.
Ahora veremos c贸mo optimizar nuestros proyectos de React Three Fiber para reducir el n煤mero de draw calls.
Instancing
El concepto de instancing es ampliamente utilizado en gr谩ficos 3D. Permite reutilizar la misma geometr铆a y material para m煤ltiples objetos.
Es una gran soluci贸n cuando quieres renderizar el mismo objeto m煤ltiples veces pero con diferentes position, scale, rotation o color...
Fusiona todas las draw calls en una sola y mejora enormemente el rendimiento.
La librer铆a Drei proporciona el componente Instances para ayudarnos a hacerlo de una manera sencilla.
Necesitamos envolver la geometr铆a y el material que queremos instanciar con el componente Instances.
End of lesson preview
To get access to the entire lesson, you need to purchase the course.
