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

【问题标题】：Empty WebGL context uses a lot of memory空的 WebGL 上下文使用大量内存
【发布时间】：2018-02-28 17:46:21
【问题描述】：

例如，对于我的 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 使用这么多内存？对于相同大小的上下文，是否可以减少使用的内存量？

【问题讨论】：

你是怎么衡量的？
@LJᛃ 在 Opera 中使用任务管理器，或在 Ubuntu 中使用 NVidia X 服务器设置
像你一样获得一个默认的 WebGL 上下文已经启用了抗锯齿、alpha 通道、深度缓冲区和（afaik）双缓冲，你的 glut 设置代码没有这些......

标签： memory opengl-es html5-canvas webgl

【解决方案1】：

正如 LJ 所指出的，画布是双缓冲、抗锯齿的，默认情况下具有 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。

【讨论】：

非常感谢。没有深度、alpha 和抗锯齿的上下文确实占用更少的内存