{"id":1192,"date":"2021-11-24T17:45:00","date_gmt":"2021-11-25T00:45:00","guid":{"rendered":"http:\/\/www.patrickmatte.com\/?p=1192"},"modified":"2025-08-15T10:50:34","modified_gmt":"2025-08-15T17:50:34","slug":"lighting-animation-prototype","status":"publish","type":"post","link":"https:\/\/www.patrickmatte.com\/?p=1192","title":{"rendered":"Light & Animation Prototype"},"content":{"rendered":"
\n
\nWhile working on the Airpods Max project, I noticed a new thing in the ThreeJS examples, PMREMGenerator. It was now possible to render a ThreeJS scene as an environment map! Back at that time there was no example of it being animated but I figured that by rendering PMREMGenerator every frame, I could create an animation. So I decided to try to re-create the lighting animation that was at the time featured on the Airpods Pro page of apple.com. In order to match the apple.com animation as close as possible, I had to actually render two environment maps, one for each airpod. I also had an additional render pass that would bake the shadows from a directional light on two separate textures that were used as occlusion maps on the two airpods. Even after all this, the performance was still pretty decent.<\/div>\n
<\/div>\n<\/div>\n
\n