Do you know how we make our threejs projects run so smoothly?
(Well, the secret lies in the basics…)
Many beginners are unaware of how the default materials are different from each other. Knowing how expensive different Three.js materials are plays a major role in performance optimization.
Let’s go through the materials in order of expense in this post:
1. Basic Material: This Material is the simplest default material in Three.js, providing basic color. This material is not affected by lights.
2. Normal Material: This is designed to visualize the normals of a geometry by representing them as colors. This material is commonly used for debugging purposes to inspect the orientation and distribution of surface normals on a mesh.
3. Depth Material: Used for rendering the depth of each pixel. Depth is based on the camera's near and far plane. White is nearest, black is farthest.
4. Matcap Material: This uses Material Capture (MatCap) textures to fake lighting effects, but is extremely cost-effective as it just maps a texture based on the object normals.
5. Toon Material: MeshToonMaterial applies a stylized, cartoon-like rendering effect by using a gradient map to decide how to shade rather than shading smoothly. In other words, it quantizes lighting values into a limited number of shades that results in a 2 (or more) toned look that looks like a cartoon.
6. Lambert Material: MeshLambertMaterial is perfect for creating non-shiny surfaces without specular highlights. It uses a Lambertian model to simulate materials like untreated wood or stone. However, it is not suitable for shiny surfaces with specular highlights, such as varnished wood.
7. Phong Material: This material uses a non-physically based Blinn-Phong model for calculating reflectance. Unlike the MeshLambertMaterial this can simulate shiny surfaces with specular highlights (eg: varnished wood, shiny metal surface). This is our favourite material to use by default.
8. Standard: MeshStandardMaterial is based on Physically based rendering (PBR). The idea here is to create a material that will react 'correctly' under all lighting scenarios. In practice, this gives a more accurate and realistic-looking result than the Lambert or the Phong Material, at the cost of being somewhat more computationally expensive.
9. Physical: This is an extension of the MeshStandardMaterial, providing more advanced physically-based rendering properties: Anisotropy, Clearcoat, Iridescence, Physically-based transparency, Advanced reflectivity, Sheen. Most effects are disabled by default, and add cost as they are enabled.
For best results, always specify an environment map when using MeshStandardMaterial and MeshPhysicalMaterial.
If this article was helpful, give us a follow for more informative articles.
What is your go-to material? Let us know in the comments.
P.S.: We are building a tool that can make your life easier. (Note: For designers and developers only).
#ux #threejs #webdevelopment #design