Twitter | Search | |
Jack Rugile
📢 Calling all devs: Let's make a mega thread of performance/efficiency tips & tricks for three.js! Big or small, name something that has helped you boost rendering perf, load times, memory management, etc. Textures, materials, loaders, shaders, geometries, you name it.
Reply Retweet Like More
Mr.doob 22 Feb 18
Replying to @jackrugile
10 tips off the top of my head...
Reply Retweet Like
Mr.doob 22 Feb 18
Replying to @jackrugile
1. Reuse geometries and materials whenever possible.
Reply Retweet Like
Mr.doob 22 Feb 18
Replying to @jackrugile
2. Use *BufferGeometry instead of *Geometry if whenever possible.
Reply Retweet Like
Mr.doob 22 Feb 18
Replying to @jackrugile
3. Use MeshBasicMaterial (unlit shading) MeshLambertMaterial (per-vertex shading) whenever possible.
Reply Retweet Like
Mr.doob 22 Feb 18
Replying to @jackrugile
4. The less lights in the scene the better.
Reply Retweet Like
Mr.doob 22 Feb 18
Replying to @jackrugile
5. Bake scene lights to a texture and use them as lightmaps whenever possible.
Reply Retweet Like
Mr.doob 22 Feb 18
Replying to @jackrugile
6. Ensure camera.near and camera.far are as tight to your scene as possible, also remember that 1 unit = 1 meter.
Reply Retweet Like
Mr.doob 22 Feb 18
Replying to @jackrugile
7. Resize your textures as small as possible and to power of 2 sizes whenever possible.
Reply Retweet Like
Luigi De Rosa 22 Feb 18
Replying to @jackrugile
1. Disable antialiasing on "dpr > 1" 2. Limit dpr to a max of 2 3. Use a custom FXAA 4. Use a triangle instead of quad for postprocessing 5. Use 'high-performance' when creating the context 6. Animate stuff directly in the shaders! ...
Reply Retweet Like
Florian Morel 23 Feb 18
Replying to @luruke @jackrugile
cool, very interested in the triangle approach, I've read but still curious about how it works, are UV affected?
Reply Retweet Like
Luigi De Rosa 24 Feb 18
Replying to @ayamflow @jackrugile
If I recall, instead of UV you can just `gl_FragCoord / resolution`
Reply Retweet Like
Florian Morel 24 Feb 18
Replying to @luruke @jackrugile
d’oh, obviously forgot this
Reply Retweet Like
Louis Hoebregts 21 Feb 18
Replying to @jackrugile
When I need a basic circle as a texture for particules, I create it using a canvas instead of loading a png. (it also prevent all kind of CORS issues :) )
Reply Retweet Like
Rach Smith 🌈 21 Feb 18
Replying to @Mamboleoo @jackrugile
Reply Retweet Like
James Baicoianu 22 Feb 18
Replying to @jackrugile
Three.js loads and runs in web workers! You can use this to offload model loading onto separate threads, or even run the renderer itself in a separate thread using OffscreenCanvas. Both of these techniques can help prevent your render thread from blocking as new content loads.
Reply Retweet Like
Mr.doob 22 Feb 18
Replying to @bai0 @jackrugile
We know have a example of that ✌️
Reply Retweet Like
Atrahasis 22 Feb 18
Replying to @jackrugile @bai0
Only render when the camera position changes by epsilon or when an animation happens
Reply Retweet Like
Atrahasis 22 Feb 18
Replying to @jackrugile @bai0
If procedural shadows are needed and baking is not possible, for static scenes, disable the shadowmap autoupdate
Reply Retweet Like
Atrahasis 22 Feb 18
Replying to @jackrugile @bai0
Disable the matrix autoupdate for everything and consciously call updateMatrix when needed
Reply Retweet Like
Atrahasis 22 Feb 18
Replying to @jackrugile @bai0
Most importantly, use Draco !
Reply Retweet Like