WebGL 参数在浏览器之间不一致

Question

I run into memory related issues with my WebGL app, mainly on PCs with Intel Graphics IGPs.

When trying tho find the bottleneck, I get inconsistent data from the browsers.

Using:

var viewport = gl.getParameter(gl.MAX_VIEWPORT_DIMS);
var texturesize = gl.getParameter(gl.MAX_TEXTURE_SIZE);
var renderbuffer = gl.getParameter(gl.MAX_RENDERBUFFER_SIZE);

The values I get on the same PC are inconsistent:

Chrome

• gl.MAX_VIEWPORT_DIMS = 16384
• gl.MAX_TEXTURE_SIZE = 16384
• gl.MAX_RENDERBUFFER_SIZE = 16384

Firefox

• gl.MAX_VIEWPORT_DIMS = 16384
• gl.MAX_TEXTURE_SIZE = 8192
• gl.MAX_RENDERBUFFER_SIZE = 8192

Safari

• gl.MAX_VIEWPORT_DIMS = 8192
• gl.MAX_TEXTURE_SIZE = 16384
• gl.MAX_RENDERBUFFER_SIZE = 8192

I get the same values using the online WebGL browser reports

• https://browserleaks.com/webgl
• https://webglreport.com/

Who knows what's happening here?

Answer 1

In https://browserleaks.com/webgl check for differences, for example which underneath api is being used (Unmasked Renderer), or which VS and PS versions are being used: perhaps one browser is using one library version and other is using other (for example Direct3D9 one and Direct3D11 other). Maybe even the different browsers clamp the value downwards for some reason.

However, even getting different values from different browsers, those are 1D limits and your app should use much smaller values.

For example for renderbuffers and viewports: 4K resolution is 3840 x 2160 pixels (smaller) and even 8K is less than 8192. Probably your computer does not support 8K for memory reasons even with a 8192 1D limit.

For textures the same problem: a 16384 x 16384 will probably use 1GB of VRAM (depending on texel format and other issues), and because of allocation problems (VRAM already has allocated blocks) such a big texture maybe even have problems to be allocated in a 2GB or 4GB GPU... in a Intel GPU probably will be even harder.

And if you want your app to be executed on different PCs, you should use much smaller values so those different values you mention doesn't really affect you: you must use much smaller ones (or at least have different alternatives which use much smaller values) if you want your app to be run in different pcs without problems.

Answer 2

1. Browsers are free to implement their own limits

   As one example Firefox has a development feature to force many smaller limits.

   Looking in the WebKit (Safari) source we can see it's hard coded to return 8192 or less . No idea why. You'd have to ask the WebKit team.

2. On Machines with multiple GPUs browsers are free to choose one GPU or the other. The user might also set at an OS level or in their browser's settings which GPU to use for each browser.

3. Browsers can choose different ways to implement WebGL (via OpenGL, via OpenGL ES, via DirectX, via Metal, via Vulkan, in software, etc...)

Answer 3

As this was no actual question, there is no answer.

Conclusion, the browsers don't reveal reliable data, so stats like: https://webglstats.com/webgl/parameter/MAX_RENDERBUFFER_SIZE are just an indication not 'real' data.

For what I can see, the most useful information is the Unmasked Renderer. Guess I have to build my own detection in WebGL and test for the min values I need. Then store the results on the server with the Unmasked Renderer info, this way I can provide a list of GPU's that meet minimum requirements.

Thanks for the excellent information!