空WebGL上下文使用大量内存

时间:2017-09-19 20:06:21

标签: memory opengl-es html5-canvas webgl

例如,对于我的940M视频卡,使用以下代码创建的画布需要500 MB的视频内存

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

同时,相同大小的OpenGL上下文仅使用100 MB的视频内存:

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

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

1 个答案:

答案 0 :(得分:4)

正如LJ指出的那样,canvas是双缓冲的,抗锯齿的,默认情况下有alpha和深度缓冲。你制作了帆布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缓冲区和/或抗锯齿

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。