Three.js Optimization - Best Practices and Techniques
Вставка
- Опубліковано 30 тра 2024
- Are you struggling to get your Three.js scenes running smoothly? Performance optimization can be a daunting task, but in this video guide, we'll break it down step-by-step. We'll start with an overview of the key factors that can impact performance, including draw calls, geometry complexity, and texture size. Then, we'll dive into specific techniques you can use to optimize your Three.js scenes, such as mesh merging, color palettes, ORM textures and more. Finally we will look at two websites and analyze what are the techniques they used to have a fast performant experience.
Useful Resources
Blender GLTF Node guide
docs.blender.org/manual/en/la...
R3F Performance Monitoring
github.com/utsuboco/r3f-perf
React Three Fiber Examples
docs.pmnd.rs/react-three-fibe...
Mesh Transmission Material
codesandbox.io/s/hmgdjq
The Unconventional Gallery - Ruinart
unconventionalgallery.ruinart...
Kode Club - Merci-Michel
www.kodeclubs.com
Volkswagen Virtual Studio - VisStudio
www.vw.com.mx/app/virtual-stu...
Timestamps
00:00 Introduction
00:56 Understanding what's heavy
01:54 Performance tracking
03:05 Draw calls
05:34 Materials
08:06 Textures
10:37 Shadows
11:44 Post processing
12:28 Case study
Incredible! Thanks so much. Looking forward to more! Super helpful stuff; optimization is always tough.
Wow I learned a lot from this, and in a very digestible format as well. Thanks!
This is great and very informative
Such a good video about the process!
Very useful video, thank you!
I learned a lot from watching the video , I will definitely come back to this video in the future when I need to improve performance
Thanks for an interesting and educational video.
thank you
we need more tutorial on optimization and technical parts and I have subscribed :)
nice overview ! thank you so much....and keep bringing such quality stuff. just don't stop
With this kind of comment how could I stop!! Thanks!
Great video ! would love to see some optimisation tutorials also in a complete workflow ✨
Should be the next videos!
Thank you so much! I was struggling to find out what makes my scene so slow, and it really was only the transmission. Which in the end i didnt even need, cause i solved it with transparent: true, & opacity. Went from 30fps back to 60fps
This is what i needed !
I'm glad it helped!
Great tutorial, thank you!
I appreciate the feedback! Thanks
Wow. So good content here. Congratulation. This will help a lot of people. 👏🏻👏🏻👏🏻👏🏻
Thanks I really really appreciate the feedback ☺️
Thank you very much for taking the time to make this video. As a software engineer currently dabbling in three.js. Regarding performance: There is always also chrome://tracing or about:tracing- a very potent profiler powering chrome lighthouse reports that can also break down webgl.
Thanks for sharing!
Awesome video! One thing to note, SSAO, SSR, Bloom other post-processing effects are not expensive when using a deffered/semi-deferred rendering pipeline similar to the car configurator
whenever i turn on bloom , the fps drops and i loose performance !!
Thanks for a video
A great information for a new 3D developer like me.
Glad it was helpful!
need more videos pls !
Will do! ☺️
Is there a guide on how to make realistic environment and a building? Also another guide for implementing threejs to html. Like making widgets for html and using it for the model like scaling or filterin
This is soooooo important to understand but has only 16.754 views
Could you please attach the node guide link at 6:48? Thank youuuuuuu
I updated the description and added the link, thanks for the suggestion!
Is unconventionalgallery your work?
No it is not! And I just realized I didn't cite the source for this reference. My bad, I updated the description!
@@ValentinCoding it's such a nice project. Do you maybe know how they did reflections on the floor?
@@LakiLOOP Probably a custom shader like the meshReflectorMaterial from pmndrs/drei