This article features 10 tips when using the WebGL library, Three.JS, and follows on from my previous tips articles and there is a final bonus tip. Live examples are available via this CodePen collection https://codepen.io/collection/RzgPww or via the examples on this page.
No. 21 Use the smallest texture
Use the smallest texture that gives the fidelity you want. In the CodePen example the apples have square textures; 128, 256, 512, 1024 and 2048 pixels, left to right.
See the Pen ThreeJS Tips: 20-22 by Nik Lever (@nik-lever) on CodePen.
No. 22 Disable the stencil buffer
Unless you’re using it disable the stencil buffer.
renderer = new THREE.WebGLRenderer({ stencil: false });See the Pen ThreeJS Tips: 20-22 by Nik Lever (@nik-lever) on CodePen.
No. 23 Dispose geometry, material, texture
When deleting a mesh. If the geometry, material and maps are no longer being used by other meshes in your scene then dispose of them. See deleteSelected function, line 109 in the CodePen example.
selected.geometry.dispose();
selected.material.map.dispose();
selected.material.dispose();
See the Pen ThreeJS Tips: 23-25 by Nik Lever (@nik-lever) on CodePen.
No. 24 PointerEvents
If you’re using OrbitControls and want to add more mouse events, then use pointer events.
window.addEventListener( 'pointerdown', onPointerDown );See the Pen ThreeJS Tips: 23-25 by Nik Lever (@nik-lever) on CodePen.
No. 25 Outline shader
One way to create an outline shader is to clone the mesh, then use a custom shader to move each vertex along the vertex normal,
const vShader = `
uniform float u_offset;
void main() {
vec3 pos = position + normal * u_offset;
gl_Position = projectionMatrix * modelViewMatrix * vec4( pos, 1.0 );
}`;(lines 16-26, 172-185). Make sure to set side to THREE.BackSide and add the new mesh to the original. In the example clicking on an apple attaches the outline mesh.
See the Pen ThreeJS Tips: 23-25 by Nik Lever (@nik-lever) on CodePen.
No. 26 The LOD class
You can use the LOD class to create a mesh that uses low res geometry and textures if it is a long way from the camera. Create a new LOD instance, then use the addLevel method, this takes a mesh and a distance from camera.
const lod = new THREE.LOD();
lod.addLevel( mesh1, 2 );
lod.addLevel( mesh2, 10 );
See the Pen ThreeJS Tips: 26 by Nik Lever (@nik-lever) on CodePen.
No. 27 Bake lighting
You can really improve performance by baking your lighting. Here’s a video about how to do this with Blender
and a CodePen example that uses no lights. To do this I swap the models materials in the GLTFLoader onLoad event handler. By default the loader uses MeshStandardMaterial, here I switch this to MeshBasicMaterial, which uses no lights but retain the map, the texture containing all the lighting detail.
baked = gltf.scene;
baked.traverse( child => {
if (child.isMesh){
const material = new THREE.MeshBasicMaterial( { map: child.material.map });
child.material = material;
}
});See the Pen ThreeJS Tips: 27 by Nik Lever (@nik-lever) on CodePen.
No. 28 SMAA post processing
You can add antialiasing as a post processing pass. Get the current pixelRatio and create a new SMAAPass instance. Then add this to the EffectsComposer instance.
const pr = renderer.getPixelRatio()
const pass = new SMAAPass( window.innerWidth * pr, window.innerHeight * pr );
composer.addPass( pass );See the Pen ThreeJS Tips: 28 by Nik Lever (@nik-lever) on CodePen.
No. 29 RoomEnvironment
The RoomEnvironment class creates a scene that can be used as scene.environment. You use a PMREMGenerator which has a fromScene method.
const envmap = pmremGenerator.fromScene( new RoomEnvironment(), 0.04 ).texture;See the Pen ThreeJS Tips: 29 by Nik Lever (@nik-lever) on CodePen.
No. 30 WebXR VR
You can easily create VR and AR apps that run from the browser using Three.JS.
Here’s a link to a set of videos from my YouTube channel, explaining how it’s done. Get the full courses at a great discount on my courses page.
Bonus Tip
My last tip. If you’re new to Three.JS and want to learn the basics quickly. Check out my FREE course.
Hope you enjoyed these tips. I create video courses and have several about Three.JS check them out at niklever.com/courses