While 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.
