Three.js Optimization - Best Practices and Techniques
HTML-код
- Опубликовано: 31 июл 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
What a great example of how well a video tutorial can be made! Good job!
Wow I learned a lot from this, and in a very digestible format as well. Thanks!
Incredible! Thanks so much. Looking forward to more! Super helpful stuff; optimization is always tough.
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
Incredible video, this video will stay useful even 10 years from now.
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!
Such a good video about the process!
Very useful video, thank you!
This is great and very informative
Thanks for an interesting and educational video.
thank you
we need more tutorial on optimization and technical parts and I have subscribed :)
Wow. So good content here. Congratulation. This will help a lot of people. 👏🏻👏🏻👏🏻👏🏻
Thanks I really really appreciate the feedback ☺️
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 video ! would love to see some optimisation tutorials also in a complete workflow ✨
Should be the next videos!
Great tutorial, thank you!
I appreciate the feedback! Thanks
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
very useful
A great information for a new 3D developer like me.
Glad it was helpful!
Instantly susbcribed
This was incredible thank you very much! What are your thoughts on different lights? Where do they fit in impacting performance relative to the other elements?
Personally, I rarely use Three.js lighting because you can never achieve the same level of realism as baking lights in 3D software. That being said, I often add at least one ambient light to control the general tone of the scene and sometimes a directional light. As long as you use lights solely for lighting purposes (with shadows disabled), they aren't that costly.
This is soooooo important to understand but has only 16.754 views
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
5:18 aren't vertices of a mesh that are outside of the view frustum removed from rendering pipeline, such that vertex shader can also benefit from it since less vertices are calculated with the shader?
From what I have experienced, frustum culling works at the object level, not the vertex level.
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