WebGL
This is a quick guide on why we use WebGL, and what it means for you.
What is WebGL and why use it?
WebGL is a browser technology that allows to draw graphics using the GPU (graphics processing unit).
It is much faster than the CPU-based technologies and allows us to create certain things, like interactive dot grids with LOTS of dots that run smoothly even on low-performance devices.
All the "true" 3D stuff on the web - Three.js, Spline etc. uses WebGL for this reason.
We use it for some of our components. If the component uses WebGL, it is explicitly mentioned on the page.
Okay, cool. Where is the catch?
WebGL is based on some pretty old tech that dates back to the 90s. Hardware evolved A LOT in the meantime. Modern iPhones are faster than the fastest supercomputer of that era!
Because of that, WebGL has some quirks. One of them is that you can only run 16 instances of WebGL (in our case, components using WebGL) in Chrome and most other browsers at the same time, across all tabs. On mobile, the number is even lower: 8.
Once the limit is exceeded, the components opened first will start turning off. Once the other tabs are closed, they will turn back on. Nothing too scary.
What does it mean for me?
Use WebGL-powered components sparingly. Having 1 or 2 per page is generally okay; as you can see, some of our pages have up to 5. But if you add too many, things will start disappearing, making user experience confusing.
Now, it does not mean that you shouldn't use WebGL components. They are fast and stable and generally awesome - just don't push the limit.
Will it be solved in the future?
Surprisingly, the answer is yes! Thanks to the amazing people developing browsers and web standards, soon we will be able to use a new technology called WebGPU. It is a direct replacement for WebGL - modern, faster, and with fewer quirks.
Once it is available in most browsers, we will port the WebGL components to WebGPU and make this page history. Realistically, this could happen in the next couple of years (yeah, we also wish it would be sooner). At the time of writing, June 2024, only 71% of users have WebGPU available by default in their browsers. Safari and Firefox teams are still working on supporting it.