Glossy spheres in Three.js

A simple trick to improve the quality of your Three.js scenes

Recently I’ve been on mr.doob’s website and I’ve been amazed by all his experiments.

I hadn’t (and for the most part, still haven’t) idea how to achieve such a level of quality with Three.js, therefore I decided to dive into his code and try to learn one cool thing at a time.

I haven’t found any clear explanation about this topic on the internet, so here it is! Hopefully this will save a couple hours to someone :)

(here you can find part 2 on animations with alpha textures and here another post on real-time reflections)

Glossy effect

Among the cool things from mr.doob’s screne was the photo realistic glossy effect of his materials, I decided to exploring the code from there.

What I want to achieve: