Issues with WebGL Best Practices Advice

MDN URL

https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices

What specific section or headline is this issue about?

No response

What information was incorrect, unhelpful, or incomplete?

Estimating vram size:

1. For one system (e.g. a particular desktop / laptop), decide the maximum amount of VRAM your application should use. 2) Compute the number of pixels covered by a maximized browser window. E.g. (window.innerWidth * devicePixelRatio) * (window.innerHeight * window.devicePixelRatio) 3) The per-pixel VRAM budget is (1) divided by (2), and is a constant.

This constant should generally be portable among systems. Mobile devices typically have smaller screens than powerful desktop machines with large monitors. Re-compute this constant on a few target systems to get a reliable estimate.

Mobile devices do NOT "typically have smaller screens".

Pixel 7: 2400 × 1080, (2.6 million pixels) Pixel 7 Pro: 3120 × 1440, (4.5 million pixels) iPhone 14+: 1284 x 2778, (3.5 million pixels) 13 MacBook Pro: 2560 x 1600 (4 million pixels) Samsung Galaxy S22 Ultra: 3088 x 14440 (4.4 million pixels) Typical Windows Laptop: 1920 x 1080 (2 million pixels) Typical Windows Desktop: 1920 x 1080 (2 million pixels)

Note: The typical windows laptop/desktop, the ones most people buy, are the $400-$700 machines pushed by Best Buy, Amazon, Dell, etc. They have low-DPI display

---

Memory usage of depth and stencil formats

This one is strange. What is the user supposed to get from this "best practice"? It seems like a detail that provides no actionable info.

---

Use texStorage to create textures

Sadly this advice is bad for perf, at least in Chrome. Chrome has optimized texImage2D but not texSubImage2D for image and video uploads.

---

devicePixelRatio and high-dpi rendering

Using pixel snap is incompatible with normal CSS layout where you want your canvas to fit some container. It's arguably not a "best practice". The correct solution is to use ResizeObserver and devicePixelContentBoxSize (the next solution)

---

ResizeObserver and 'device-pixel-content-box'

out of date. Firefox supports this

That said, it's a pretty convoluted example IMO. The majority of WebGL apps render in loop. The remaining ones render on demand. I don't know of any use-case where the dev would want to do

const size = async getDevicePixelSize(canvas);

And have their app stall, waiting for the result.

Further, it's arguably bad practice to hack on to "window" as the example does for no explicable reason. It's certainly not "best practice".

It would be more common to just set the size of the canvas in the resizeobserver callback

const observer = new ResizeObserver(entries => {
   .. get size ...
   cannas.width = width;
   canvas.height = height;
});

The rendering code would then look at the current canvas sizes to render. For a raf loop, no other changes are needed. For an on demand renderer, add a call to "render" inside that callback.

What did you expect to see?

...

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

No response

MDN metadata

• Folder: en-us/web/api/webgl_api/webgl_best_practices
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/api/webgl_api/webgl_best_practices/index.md
• Last commit: https://github.com/mdn/content/commit/c6dbc4ff96451887b908b46c8e70bcfec1c2c48c
• Document last modified: 2023-02-26T04:54:36.000Z