Realistic Glass in Three.js with MeshPhysicalMaterial

This article explains how to create highly realistic glass materials in Three.js using the advanced features of MeshPhysicalMaterial. You will learn how to configure key properties such as transmission, thickness, index of refraction (IOR), and roughness to simulate the physical behavior of light passing through solid glass objects.

To achieve a realistic glass effect in Three.js, you must use MeshPhysicalMaterial rather than standard materials. This material extends MeshStandardMaterial by adding physically-based rendering (PBR) properties specifically designed for transparent, reflective, and refractive surfaces.

Key Properties for Realistic Glass

To make a material look like glass, you need to adjust several specific properties:

• transmission: This is the most critical property. Unlike the standard opacity property which simply fades an object out, transmission allows light to pass through the material while maintaining physical reflections and refractions. Set this to 1.0 for fully transparent glass.
• thickness: This defines the thickness of the glass volume. Without thickness, the material behaves like a infinitely thin bubble. Adding thickness (e.g., 0.5 to 2.0) enables light bending and refraction inside the volume.
• ior (Index of Refraction): This controls how much light bends as it enters the material. Air has an IOR of 1.0, while standard glass typically has an IOR of 1.5 to 1.52. Water is 1.333, and diamond is 2.417.
• roughness: For clear glass, set this close to 0.0. If you want a frosted or etched glass effect, increase this value slightly (e.g., 0.1 to 0.3).
• clearcoat and clearcoatRoughness: Adding a clearcoat layer (value of 1.0) simulates a glossy outer laminate, which enhances reflections on the surface of the glass.

Implementation Code Example

Here is a practical code configuration for a highly realistic glass material:

import * as THREE from 'three';

// Create the glass material
const glassMaterial = new THREE.MeshPhysicalMaterial({
    color: 0xffffff,            // Base color of the glass
    transparent: true,          // Enable transparency
    transmission: 1.0,          // Maximum light transmission
    opacity: 1.0,               // Base opacity (keep at 1.0 when using transmission)
    roughness: 0.05,            // Low roughness for a smooth, shiny surface
    metalness: 0.0,             // Glass is non-metallic
    ior: 1.5,                   // Index of Refraction for standard glass
    thickness: 1.2,             // Simulates the physical volume of the object
    specularIntensity: 1.0,     // Intensity of the specular reflection
    specularColor: new THREE.Color(0xffffff),
    clearcoat: 1.0,             // Extra glossy layer on top
    clearcoatRoughness: 0.1     // Roughness of the clearcoat layer
});

// Apply the material to a geometry
const geometry = new THREE.IcosahedronGeometry(2, 3);
const glassMesh = new THREE.Mesh(geometry, glassMaterial);
scene.add(glassMesh);

The Importance of Environment Maps

Glass does not look realistic in a dark or empty scene because it relies entirely on reflecting and refracting its surroundings. To make your glass look convincing:

1. Add an Environment Map (HDRI): Use an EXRLoader or RGBELoader to load a high-dynamic-range environment map, and set it as the scene’s background and environment:

   scene.environment = hdrTexture;

2. Enable Shadow Map Support: Glass objects should cast and receive shadows for realistic depth. Ensure your renderer has shadow maps enabled, and set glassMesh.castShadow = true and glassMesh.receiveShadow = true.