What Makes Three.js MeshPhysicalMaterial Realistic

In Three.js, achieving photorealism requires materials that accurately mimic how light interacts with real-world surfaces. While MeshStandardMaterial provides a solid foundation using physically-based rendering (PBR), MeshPhysicalMaterial extends it with advanced optical properties like clearcoat, sheen, iridescence, transmission, and anisotropy. This article explores the specific properties that make MeshPhysicalMaterial the most realistic material option in Three.js and how they simulate complex real-world phenomena.

Clearcoat

The clearcoat properties simulate a thin, shiny outer layer over a base material. This is highly effective for replicating car paint, varnished wood, or glazed ceramics.

• clearcoat: Sets the intensity of the clearcoat layer, from 0 to 1.
• clearcoatRoughness: Controls the roughness of the clearcoat layer, allowing for a glossy outer layer even if the base material underneath is rough.
• clearcoatNormalMap: Applies a separate normal map specifically to the clearcoat layer, enabling independent surface details like scratches or orange-peel texture on the lacquer.

Transmission and Thickness

Unlike simple opacity, which just makes an object semi-transparent, transmission simulates physical refraction and light absorption as light passes through a solid medium. This is essential for glass, water, and plastic.

• transmission: Controls the percentage of light that passes through the surface rather than being reflected or absorbed.
• thickness: Defines the volume of the medium. When combined with refraction, thickness determines how much the light bends as it passes through the geometry.
• ior (Index of Refraction): Defines how sharply light bends. Air has an IOR of 1.0, water is 1.33, glass is around 1.5, and diamond is 2.4.
• attenuationColor and attenuationDistance: Simulates light absorption within the medium. Thicker parts of the geometry will appear more saturated with the attenuation color, mimicking real-world glass bottle bases or deep water.

Iridescence

Iridescence simulates thin-film interference, where light waves reflect off the top and bottom boundaries of a microscopic film, causing shifting, rainbow-like colors. This is the effect seen on soap bubbles, oil slicks, peacock feathers, and CD surfaces.

• iridescence: Controls the intensity of the iridescence effect.
• iridescenceIOR: Sets the index of refraction of the thin-film layer.
• iridescenceThicknessRange: Defines the minimum and maximum thickness of the film layer, which determines the specific colors and patterns generated across the surface.

Sheen

Sheen simulates retroreflection, which occurs when light reflects directly back toward the light source from micro-fibers on a surface. This is crucial for rendering realistic fabrics like velvet, satin, and microfiber, as well as organic surfaces like peach fuzz.

• sheen: The intensity of the sheen layer.
• sheenColor: The color of the reflected sheen light.
• sheenRoughness: Determines how wide or tight the sheen highlight appears on grazing angles.

Anisotropy

Anisotropic materials reflect light differently depending on the direction of the surface’s microscopic grooves. This effect is visible on brushed metals, hair, and satin fabric.

• anisotropy: Controls the strength of the directional reflection.
• anisotropyRotation: Rotates the direction of the anisotropic reflection, allowing you to align the highlights with the geometry’s UV coordinates or a specific tangent vector.

Specular F90 and Specular Color

While standard PBR materials calculate reflection based on a fixed metallic/roughness workflow, MeshPhysicalMaterial allows fine-tuned control over non-metallic reflections at different angles.

• specularColor: Customizes the color of the specular reflection at normal incidence (facing the camera directly).
• specularIntensity: Controls the strength of the specular reflection.
• specularF90: Controls the reflectivity of the material at grazing angles (90 degrees), allowing for precise adjustment of Fresnel reflections.