空的 WebGL 上下文使用大量内存

Question

比如我的940M显卡，用下面代码创建的canvas需要500MB的显存

var c = document.createElement('canvas');
var ctx = c.getContext('webgl');
c.width = c.height = 4096;

同时，相同大小的OpenGL上下文仅使用100MB显存：

glutInit(&argc, argv);
glutInitDisplayMode(GLUT_SINGLE);
int s = 4096;
glutInitWindowSize(s, s);
glutCreateWindow("Hello world :D");

为什么 WebGL 使用这么多内存？是否可以减少相同大小的上下文的已用内存量？

Answer 1

正如 LJ 所指出的，canvas 是双缓冲的，抗锯齿的，默认情况下有 alpha 和深度缓冲。您将 canvas 设置为 4096 x 4096，因此

16meg * 4 (RGBA) or 64meg for one buffer

你至少得到 4 次

front buffer = 1
antialiased backbuffer = 2 to 16
depth buffer = 1

所以这是 256meg 到 1152meg，具体取决于浏览器选择的抗锯齿功能。

在回答您的问题时，您可以尝试不要求深度缓冲区、alpha 缓冲区and/or 抗锯齿

var c = document.createElement('canvas');
var ctx = c.getContext('webgl', { alpha: false, depth: false, antialias: false});
c.width = c.height = 4096;

浏览器是否实际不分配 alpha 通道或分配但只是忽略它取决于浏览器和驱动程序。它是否真的不分配深度缓冲区也取决于浏览器。传递 antialias: false 应该至少使第二个缓冲区 1x 而不是 2x 到 16x。

空的 WebGL 上下文使用大量内存

Empty WebGL context uses a lot of memory

memory

opengl-es

webgl

html5-canvas