火狐浏览器在使用 Web GL 时"This operation requires zeroing texture data"警告

Question

在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 ) );
}

这是实时页面：http://ssjstash.net/webgl_error

您也可以下载源代码：http://ssjstash.net/webgl_error.zip

我不确定到底是什么问题，认为这可能是萤火虫的问题。

如果有人知道如何解决这个问题(如果可以解决的话)，我会感谢

Answer 1

这是一条无稽之谈，Mozilla声称正在修复或已经修复

https://bugzilla.mozilla.org/show_bug.cgi?id=1478216

修复程序可能还没有发送到稳定的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);

那么在这种情况下会发生什么呢？好吧，您分配了一个缓冲区，大小与浏览器无论如何都会分配的大小相同。该缓冲区会像浏览器一样被清零，但最重要的是，您现在有了浏览器必须创建的Uint8ArrayArrayBufferView。它还必须创建底层的ArrayBuffer，这两个javascript对象都有完整的原型链等。这些对象也有引用计数器，垃圾收集器必须随着时间的推移对其进行检查，以确定它们是否以及何时可以安全释放。

换言之，在JavaScript中执行此操作时，还有更多的工作要做，因此警告是无稽之谈。