WebGL 绘图缓冲区大小不等于画布大小

Question

我有一个使用 three.js 来绘制多个 webgl 图层的 web 应用程序，我有时会（在 Chrome 中）获取具有不等于画布高度和宽度的绘图缓冲区高度和绘图缓冲区宽度的图层。

每一层都可以打开和关闭。我有一叠它们，所以它们可以重复使用：

Layers.GLRendererPool = new (function() {
    this.renderers = [];
    this.getRenderer = function() {
        if(this.renderers.length == 0) {
            var r = new THREE.WebGLRenderer({ alpha: true });
            r.setClearColor(0x000000, 0);
            return r;
        } else {
            var r = this.renderers.shift();
            return r;
        }
    };
    this.saveRenderer = function(r) {
        r.setSize(0, 0); //EXPERIMENTAL
        this.renderers.push(r);
    };
    return this;
})();

在使用 THREE.WebGLRenderer.setSize() 获取它们后调整它们的大小。调用 setSize() 后，canvas.width == renderer.context.drawingBufferWidth 和 canvas.height == renderer.context.drawingBufferHeight，但并非总是如此。即使我目前只使用 1 个渲染器，它们也不相等。

任何想法为什么会发生这种情况？我假设视频卡内存有一些限制，我尝试在每个未使用的渲染器上调用 setSize(0, 0)，但没有运气。这是 Chrome + WebGL 的错误吗？

Answer 1

有多个问题。

1234563在过去 2-3 年的几乎所有智能手机上都不是第一。

1. 您的内存不足（就 chrome 而言）。 The WebGL spec allows for the drawingBuffer to be smaller than requested。这正是存在drawingBufferWidth 和drawingBufferHeight 的原因，因此您可以检查它使绘图缓冲区的大小。

这样做的最初动机是因为 GPU 仅支持特定大小的画布（由纹理制成）。如果您有多个显示器，并且在它们之间拉伸一个窗口，则很容易使某些东西大于该限制。所以 WebGL 有几个选择（1）崩溃/抛出异常。这可能会破坏大多数程序并且用户会丢失数据 (2) 不要使绘图缓冲区大于最大大小，而是让它被拉伸以适应请求的大小。

除此之外，WebGL 实现还可以使用规范的相同部分为您提供比您出于任何原因要求的更小的画布。最常见的原因是您的内存不足，因此它会尝试使您请求的大小，失败，并尝试逐渐减小大小，直到成功

嗯，这是很长的解释。

我会在crbug.com 提交一个错误，因为似乎 chrome 最近为每个网页添加了任意 512meg 限制，这给许多用户带来了问题。