threejs-materials

Three.js MeshStandardMaterial supports PBR by applying albedo, normal, roughness, metalness, and AO texture maps to their respective material properties. You must also configure uv2 coordinates on the mesh for ambient occlusion mapping to achieve physically accurate shading.

MeshPhysicalMaterial extends MeshStandardMaterial to support advanced physical rendering properties like clearcoat, transmission, sheen, iridescence, and anisotropy. Choose MeshPhysicalMaterial for specialized surfaces like car paint or glass, and MeshStandardMaterial for standard PBR to reduce runtime cost.

Optimize Three.js materials by reusing material instances across meshes and implementing material pooling strategies. Properly dispose of unused materials to prevent memory leaks, and choose simpler material types like MeshBasicMaterial when advanced physical shading is not required to reduce sorting overhead.

Use ShaderMaterial or RawShaderMaterial when you need custom GLSL shading effects beyond built-in physical or toon models. MeshPhongMaterial is suitable for simpler specular highlights, while ShaderMaterial allows direct access to built-in uniforms and attributes for unique visual styles and advanced rendering tasks.

Set up environment reflections in Three.js by assigning an HDR environment map to the material's envMap property. This enables physical materials like MeshStandardMaterial and MeshPhysicalMaterial to calculate accurate surface reflections, enhancing the physical realism of metals and glossy surfaces.

Yes, Three.js provides MeshToonMaterial specifically for creating stylized cartoon shading effects. It simplifies continuous gradients into distinct bands of color, making it ideal for interactive visualizations and web games that require a stylized non-photorealistic visual look.