Three.js Optimization - Best Practices and Techniques

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

[@Leosc1986]

What a great example of how well a video can be! good job!

[@andrewwoan]

Incredible! Thanks so much. Looking forward to more! Super helpful stuff; optimization is always tough.

[@vfxlord]

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

[@heagandev]

Wow I learned a lot from this, and in a very digestible format as well. Thanks!

[@u_walk2251]

nice overview ! thank you so much....and keep bringing such quality stuff. just don't stop

[@ValentinCoding]

With this kind of comment how could I stop!! Thanks!

[@adamjackson6606]

Very useful video, thank you!

[@Superla]

Such a good video about the process!

[@shujaa]

This is great and very informative

[@vrmeup]

Thanks for an interesting and educational video.

[@amirsohail963]

thank you
we need more tutorial on optimization and technical parts and I have subscribed :)

[@AndersonMancini]

Wow. So good content here. Congratulation. This will help a lot of people. 👏🏻👏🏻👏🏻👏🏻

[@ValentinCoding]

Thanks I really really appreciate the feedback ☺️

[@Lalalandinseoul]

This is what i needed !

[@ValentinCoding]

I'm glad it helped!

[@kshitijroodkee8151]

Great video ! would love to see some optimisation tutorials also in a complete workflow ✨

[@ValentinCoding]

Should be the next videos!

[@dinoscheidt]

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.

[@ValentinCoding]

Thanks for sharing!

[@morejpeg]

Great tutorial, thank you!

[@ValentinCoding]

I appreciate the feedback! Thanks

[@nastykingkurl4080]

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

[@vitaliyforij5205]

Thanks for a video

[@repalash]

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

[@edmondbounasr8727]

whenever i turn on bloom , the fps drops and i loose performance !!

[@codevlogs9100]

A great information for a new 3D developer like me.

[@ValentinCoding]

Glad it was helpful!

[@aadarshgupta6800]

need more videos pls !

[@ValentinCoding]

Will do! ☺️

[@brianliang3010]

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?

[@captainofthewhitetower]

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

[@benedictlang7431]

This is soooooo important to understand but has only 16.754 views

[@has.nguyen1753]

Could you please attach the node guide link at 6:48? Thank youuuuuuu

[@ValentinCoding]

I updated the description and added the link, thanks for the suggestion!

[@LakiLOOP]

Is unconventionalgallery your work?

[@ValentinCoding]

No it is not! And I just realized I didn't cite the source for this reference. My bad, I updated the description!

[@LakiLOOP]

​@@ValentinCoding it's such a nice project. Do you maybe know how they did reflections on the floor?

[@ValentinCoding]

@@LakiLOOP Probably a custom shader like the meshReflectorMaterial from pmndrs/drei