I slowly started making my portfolio site and I want to use Three.js and shaders. I feel like I should have some sort of a fallback for mobile and low-end PCs..
How do you adjust your web content to match client machine's performance?
Currently for the sake of testing I put a pretty compute heavy shader that works fine on my home PC, but completely chunks down my mobile and office PCs:
https://www.jerzakm.com/
Option 1: WEBGL_debug_renderer_info
Webgl context allows us to accurately (In most cases) get user's GPU. Sounds great but from a first glance it has two disadvantages:
- User privacy. Knowing precise GPU model allows for ad targeting and unnecessary data mining.
- Keeping it up to date. New GPUs come out all the time, and it would become necessary to update GPU list and benchmarks.
There are libraries already available that do precisely that, but I'm not 100% happy with any of them.
detect-gpu
Option 2: Rendering a few first frames off-screen and checking performance before deciding how to proceed
This takes care of privacy issues, but requires loading potentially unnecessary libraries and causing a browser freeze on first load.
Top comments (0)