Recently, I’ve been working on a rainy scene in Three.JS. One of the most important parts of this scene is a greenhouse with big glass windows.
I decided to take a stab at making some realistic raindrop-covered window panes for them using Three.JS’s built-in transmission shader. The result turned out pretty well if I do say so myself, so I thought I’d write up my process for building it from start to finish.

Casey Primozic

A walkthrough of building a realistic raindrop-covered window pane material in Three.JS using MeshPhysicalMaterial's transmission shader. Covers key properties including transmission, IOR, roughness maps, normal maps, and thickness maps. The author used an AI-generated gold texture repurposed as a roughness/normal map to simulate raindrop streaks, combined with a Stable Diffusion-generated dirt texture for surface grime. The post includes code snippets, texture images, and practical tips on tuning IOR and roughness together for convincing glass effects.

Building a Realistic Raindrop-Covered Window Pane Material in Three.JS

Transmission via MeshPhysicalMaterial ⌗