Javascript Firefox“；此操作需要将纹理数据归零“；使用Web GL时发出警告

在firefox中打开我的（JS HTML5）项目时，我收到警告：“错误：WebGL警告：drawArrays:此操作需要将纹理数据归零。这太慢了。”

有人告诉我这是因为试图读取超出范围的像素或类似的东西

这是我的密码：

var gl = Gra.gl

    // texture
    var tex = gl.createTexture()

    gl.bindTexture( gl.TEXTURE_2D, tex )
    gl.texImage2D( gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, AppImg )

    gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR )
    gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR )
    gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE )
    gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE )

    var bff_pos = BufferFromArr([
        -1, -1, 
         1, -1, 
        -1,  1, 
         1,  1
    ])

    var bff_tex = BufferFromArr([
        0, 1, 
        1, 1, 
        0, 0, 
        1, 0
    ])

    // buffer
    var wd = 200
    var ht = 200

    // texture
    var tex2 = gl.createTexture()

    gl.bindTexture( gl.TEXTURE_2D, tex2 )
    gl.texImage2D( gl.TEXTURE_2D, 0, gl.RGBA, wd, ht, 0, gl.RGBA, gl.UNSIGNED_BYTE, null )

    gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR )
    gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR )
    gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE )
    gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE )

    // framebuffer
    var frame = gl.createFramebuffer()
    gl.bindFramebuffer( gl.FRAMEBUFFER, frame )
    gl.framebufferTexture2D( gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex2, 0 )
    gl.viewport( 0, 0, wd, ht )

    gl.bindTexture( gl.TEXTURE_2D, tex )

    gl.bindBuffer( gl.ARRAY_BUFFER, bff_pos )
    gl.vertexAttribPointer( Gra.shd_a_pos, 2, gl.FLOAT, 0, 0, 0 )

    gl.bindBuffer( gl.ARRAY_BUFFER, bff_tex )
    gl.vertexAttribPointer( Gra.shd_a_tex, 2, gl.FLOAT, 0, 0, 0 )

    gl.drawArrays( gl.TRIANGLE_STRIP, 0, 4 )

    gl.bindFramebuffer( gl.FRAMEBUFFER, null )
    gl.viewport( 0, 0, Gra.cv.width, Gra.cv.height )

顶点着色器：

attribute vec2 a_pos;
attribute vec2 a_tex;

varying vec2 v_tex;

void main (void)
{
    gl_Position = vec4( a_pos.x, a_pos.y, 1.0, 1.0 );

    v_tex = a_tex;
}

片段着色器：

precision mediump float;

uniform sampler2D u_smp;

varying vec2 v_tex;

void main (void)
{
    gl_FragColor = texture2D( u_smp, vec2( v_tex.x, v_tex.y ) );
}

以下是实时页面：

您还可以下载源代码：

我不确定到底是什么问题，我想这可能是firefox的问题

---

如果有人知道如何解决这个问题（如果可以解决的话），我会很感激这是一条毫无意义的消息，Mozilla声称正在解决或已经解决了它

修复程序可能还没有发布到稳定的firefox

如果你想摆脱它，不要用

null

调用

gl.texImage2D

为什么这是胡说八道

如果你这样做

gl.texImage2D(target, level, format, width, height, 0, format, type, null);

然后浏览器将分配一块宽度*高度*格式*类型大小的内存，将其清除为0并将其传递给OpenGL驱动程序。警告是，此内存分配和清除速度很慢

消息毫无意义的原因是JavaScript中唯一可能的修复实际上速度较慢

修复方法是自己在JavaScript中分配一个缓冲区，例如

const zero = new Uint8Array(
    width * height * bytesPerPixelForFormatType(format, type));
gl.texImage2D(target, level, format, width, height, 0, format, type, zero);

那么在这种情况下会发生什么呢？您分配的缓冲区大小与浏览器分配的大小相同。该缓冲区会像浏览器一样被归零，但除此之外，浏览器还必须创建一个

Uint8Array

ArrayBufferView。它还必须创建底层的

ArrayBuffer

，这两个javascript对象都有完整的原型链等。这些对象也有引用计数器，垃圾收集器必须随时间检查这些计数器，以确定它们是否以及何时可以安全释放

换句话说，当从JavaScript执行此操作时，还有很多工作要做，因此警告是胡说八道。

谢谢你的回答=）我会投票，但我还没有足够的代表xD