5
$\begingroup$

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

Improve this question
$\endgroup$
2
  • $\begingroup$ Do you want to use specific features that are only available using a given graphics card? Or is it sufficient simply to know how fast the code can run? This will determine whether you need to determine which graphics card (if any) is being used, or whether you can use an approach that starts up in the lowest quality setting and detects frame rate, using that to decide whether to increase the quality. $\endgroup$
    – trichoplax is on Codidact now
    Oct 3, 2016 at 7:10
  • $\begingroup$ I think it would be sufficient to just know how fast it can run $\endgroup$
    – Nick
    Oct 3, 2016 at 8:03

1 Answer 1

Reset to default
4
$\begingroup$

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.

Improve this answer
$\endgroup$
3
  • $\begingroup$ Perhaps even using pixel doubling. By the way I get a consistent 60 fps no matter what. $\endgroup$
    – joojaa
    Oct 4, 2016 at 13:18
  • $\begingroup$ Sounds like I need a newer computer... $\endgroup$
    – trichoplax is on Codidact now
    Oct 4, 2016 at 14:06
  • $\begingroup$ I usually get 30-60 on my macbook pro depending on how large the window is (full screen on a WQHD monitor lowers it a lot). (edit: accidentally hit enter too soon) I was hoping you could go more into some specific techniques to maximize performance. Are my initial ideas for lower quality on track? $\endgroup$
    – Nick
    Oct 4, 2016 at 19:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.