Google Pixel Watch Running Threejs Realistic Water with Caustics as a Watch Face
· 1:13 · Tutorials · three.js, react-three-fiber, tutorial
Watch on YouTube · Subscribe to the channel
Subscribe to my newsletter:
People sometimes ask me, "How do you get such good performance in your projects?" The answer is that I set very high constraints.
Here, you can see my Realistic Water with Caustics project running in the browser on a Google Pixel Watch 2. It's not React Native. It's not an app. It's just a website that behaves like a watch face. Everything works exactly the same on the computer—the interactivity, camera movements, and even the caustics calculation. I ended up making a dedicated, unpublished version for this device, and of course, I took the opportunity to make a beautiful watch face with it. It's totally useless, but a…
It's essential to have high constraints because this allows me to understand what parameters define good performance. By making my projects work on my watch, I know that it will be possible to make them work on very low-end devices.
It's amazing what threejs and react three fiber can do together!
Links from the video
Related projects
- Realistic Water — WebGL pool simulation with caustics