Apple's Watch Series 3 Webpage
Have you seen the new Apple Watch Series 3 page? It’s incredible. Whether you care about the device itself, it’s a pretty amazing feat of web development.
If you have some kind of smooth scrolling device like a trackpad or your phone, look at the swimmer/bubbles while you scroll around. It looks like a whole 3D scene is set up with depth and lighting.
In fact, I’m pretty sure that’s what’s Apple created.
Poking around in their source code, we can see a few things.
Included or downloaded with the page are a few different assets:
glTF: A format for storing models and 3D scenes in a JSON-like format. An example would be Swimmer.gltf.
Collada: This seems to be pretty similar to gltf but XML instead of JSON? I’m not sure, but I know you can download it and actually view it on a macOS natively. Download Swimmer.dae and open it in Preview.app on a Mac.
Binary files: There are also some binary files that I imagine hold color or image data. I can’t figure out how to read them though: Swimmer.bin.
With three.js and all these 3D asset files, it seems pretty clear that Apple is setting up a 3D scene, and moving a virtual camera around when you scroll. You can see that they’re setting up a perspective camera by searching for
The folks working on the web team at Apple is doing are doing a hell of a job.