Three.js Optimization - Best Practices and Techniques

[@Leosc1986]

What a great example of how well a video tutorial can be made! Good job!

[@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

[@hausaaesa]

Thank you very much. The video is not short because it is full of useful information. It is very good. Thank you for your dedication to providing information.

[@birbothealpha]

this video, especially the case study at the end, is fantastic

[@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!

[@abdullahnaim10]

wow so much value! thank you for taking the time to provide this information!

[@andrewwoan]

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

[@gamingpig4997]

Incredible video, this video will stay useful even 10 years from now.

[@heagandev]

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

[@Lalalandinseoul]

This is what i needed !

[@ValentinCoding]

I'm glad it helped!

[@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

[@adamjackson6606]

Very useful video, thank you!

[@Superla]

Such a good video about the process!

[@shujaa]

This is great and very informative

[@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!

[@amirsohail963]

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

[@codevlogs9100]

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

[@ValentinCoding]

Glad it was helpful!

[@kshitijroodkee8151]

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

[@ValentinCoding]

Should be the next videos!

[@vrmeup]

Thanks for an interesting and educational video.

[@morejpeg]

Great tutorial, thank you!

[@ValentinCoding]

I appreciate the feedback! Thanks

[@iub.9893]

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?

[@ValentinCoding]

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.

[@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 !!

[@AndersonMancini]

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

[@ValentinCoding]

Thanks I really really appreciate the feedback ☺️

[@juanrolon1729]

very useful

[@vitaliyforij5205]

Thanks for a video

[@aadarshgupta6800]

need more videos pls !

[@ValentinCoding]

Will do! ☺️

[@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

[@iub.9893]

Instantly susbcribed

[@lilxiaoX]

I know it's out of topic Would you tell me a bit about the journey of how you became a creative dev? or any advice for people who want to be like you? much love from korea

[@ValentinCoding]

Hey, I would be happy to help out a fellow developer! I actually studied general IT at school and didn't have a big dev background. When I moved to South Korea 10 years ago, I studied web dev by myself to land a job. After that, I moved from company to company as a front-end dev, but the last company I joined was for a creative developer position. This company had an experimental lab that created offline and online experiences. Over the years, the demand for WebGL grew bigger, and my company started hiring full-time WebGL devs. To be honest, full-time WebGL dev positions are not that common. So in my opinion, it's either you join a creative lab department in a company that has one, but you have to be ready to develop many different things ranging from IoT, mapping projection systems, mobile/web apps, etc., or you just find a front-end dev position in the hope that sometimes there will be some WebGL integrated into the websites you develop. Hope this helps :)

[@lilxiaoX]

@@ValentinCoding thank you so much for taking your time! One last question where did you learn all of this? I think we all agree that teaching yourself is not easy, especially for WebGL. Again thank you for your words, your particle work for NC is stunning!

[@ValentinCoding]

​@@lilxiaoX The best resource for WebGL is simply the library of examples on the Three.js website. I just dive into the code of almost all the examples. When you have enough years of development under your belt, usually the best resources are just official docs and other people's code. But if I was a complete beginner, I would totally watch Bruno Simon's course. By the way, I'm not sure how you know I made the NC website (don't remember mentioning it); nevertheless, this was actually my first ever WebGL project! Glad you liked it.

[@lilxiaoX]

@@ValentinCoding Can't believe that this is your first project! it was fairly easy to find out you made this. I searched up nc WebGL on google and your company showed up on the first link. thank you again. it really means a lot and good luck on your journey

[@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?

[@ValentinCoding]

From what I have experienced, frustum culling works at the object level, not the vertex level.

[@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