Optimizing performance on hardware

Question

I'm working on a webgl audio visualizer that uses particles, and I want to optimize rendering based on the user's hardware. I'd like to offer a "low quality" and "high quality" setting so that it works well on a wide-range of devices.

Is there a way to automatically detect in the browser if the user has hardware acceleration available and generically whether their graphics card is good or not?

What techniques are there for rendering low vs high quality? My initial ideas for low quality were:

• render less geometry (less particles, and nearer "far" clipping distance)
• use a smaller framebuffer and scale it up to the size of the canvas
• smaller texture sizes

Edit: Additionally, any resources on performance optimization would be appreciated. It seems that searches mostly result in helping users configure their graphic card settings

Answer 1

Although you may be able to detect what hardware is available as a first approximation of a computer's capability, depending on this might not be useful since the same hardware may behave differently depending on the machine it is hosted in, and any other tasks that may be competing for it.

Use the frame rate

It looks like you are already measuring the frame rate, so you could simply use this value to decide which features to include. If you settle on a target frame rate, then you can order your features from most essential to most optional, and gradually add in less essential features for as long as the target frame rate is exceeded.

You could also remove features in reverse order if the frame rate drops (in order to avoid poor frame rate if the available resources change). If you decide to do this, I recommend setting the target frame rate to a slightly different value for adding and removing features. Otherwise some machines near the border between two feature levels may end up skipping back and for between the two levels, adding and removing that feature endlessly. So set the trigger for removing a feature at a slightly lower frame rate than the trigger for adding it.

You'll need to find a compromise between adding new features too quickly so that the frame rate suddenly drops further than you intended, and adding features too slowly so that there are several seconds of low quality animation before it settles on the appropriate level of features. You may be able to estimate that some features can be added 2 or 3 at a time if the frame rate is already very far above target. This will depend on the specific features involved and may take some trial and error on a variety of machines with different resources.

If you prefer, you can show a blank background until the frame rate has settled, so the user does not see the feature level being adjusted. Alternatively you may be able to adjust the features sufficiently gradually that there will be no perceptible change in any given moment.

Consider the window size

On my laptop I get 4 frames per second consistently regardless of the window size - whether full screen or a thumbnail sized browser window. Since it appears that the particles move only away from the centre, and do not contribute later to the area they have left, it might be worth considering abandoning particles sooner when the window size is reduced. If this allows a higher frame rate when the window size is reduced, then the extra features will be automatically activated even if they were not possible at full screen.