Canvas WebGL图形缓冲区大小不等于画布大小_Canvas_Three.js_Webgl

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

canvas three.js webgl

Canvas WebGL图形缓冲区大小不等于画布大小,canvas,three.js,webgl,Canvas,Three.js,Webgl,我有一个webapp，它使用three.js绘制多个webgl层，有时（在Chrome中）会得到drawingBufferHeight和drawingBufferWidth不等于画布高度和宽度的层可以打开和关闭每个层。我有一堆这样它们就可以重复使用了： Layers.GLRendererPool = new (function() { this.renderers = []; this.getRenderer = function() { if(this.ren

我有一个webapp，它使用three.js绘制多个webgl层，有时（在Chrome中）会得到drawingBufferHeight和drawingBufferWidth不等于画布高度和宽度的层

可以打开和关闭每个层。我有一堆这样它们就可以重复使用了：

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错误吗？

存在多个问题

根据three.js的版本，它可能会神奇地将您的宽度和高度乘以

window.devicePixelRatio

，这意味着如果设备像素比不是1，您的画布将与您要求的大小不同。在过去2-3年里，几乎任何一款智能手机都不会是1

你的内存不足（就chrome而言）。这正是

drawingBufferWidth

和

drawingBufferHeight

存在的原因，因此您可以检查它生成的drawingBuffer的大小

这样做的最初动机是因为GPU只支持一定大小的画布（由纹理制成）。如果你有多个显示器，并且你在它们之间拉伸一个窗口，那么很容易使某个显示器的大小超过这个限制。因此WebGL有几个选择（1）崩溃/抛出异常。这可能会破坏大多数程序，用户会丢失数据（2）不要使drawingBuffer大于最大大小，而是让它拉伸以适合请求的大小

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

嗯，这是一个很长的解释

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