尝试将 WebGL 纹理清除为纯色答案

【问题标题】：Trying to clear a WebGL Texture to a solid color尝试将 WebGL 纹理清除为纯色
【发布时间】：2019-09-20 10:32:59
【问题描述】：

我有一系列纹理堆叠在一起（使用 mip-map 风格的分辨率金字塔）以获得最终图像。

由于它们的堆叠方式，当它们没有被有意义的图像数据填充时，有必要将它们初始化为无符号整数值 128。 IE，128 为零，因为渲染着色器将从每个纹理值中减去 0.5，这允许后续的金字塔层将最终图像偏移正值或负值。

我似乎无法弄清楚如何将（单通道 GL_LUMINANCE）纹理初始化为一个值！

我尝试将其设置为渲染缓冲区目标并向其渲染多边形，但 FBO 似乎被标记为不完整。我也尝试将其定位为渲染缓冲区目标并使用 gl.clear(gl.COLOR_BUFFER_BIT) 但它再次被认为是不完整的。

显而易见的事情是使用 gl.texSubImage2D() 复制值，但这似乎真的很慢......也许这是唯一的方法？我希望有一些更优雅的东西，它不需要分配这么多内存（至少一个帧的单个值）并且那么慢（因为当所有数据都是单个值时，必须将所有数据写入缓冲区）。

在 WebGL 中将纹理设置为（默认）值的唯一方法似乎是调整它的大小或分配它，将其设置为全零。

此外，似乎没有像 gl.SIGNED_BYTE 这样的复制模式允许零为零（IE，有符号值传入）......但这也不能解决初始化纹理的问题为单个值（在本例中为零）。

有什么想法吗？除了简单地将值复制到其中之外，如何将 WebGL 纹理初始化为一个值？

【问题讨论】：

标签： javascript webgl

【解决方案1】：

遗憾的是，WebGL 所基于的 OpenGL ES 2.0 规范无法保证能够渲染到特定类型的纹理。判断它是否有效的唯一方法是创建纹理，将其附加到帧缓冲区，然后调用 checkFramebufferStatus 并查看它是否返回 FRAMEBUFFER_COMPLETE。不幸的是，在很多情况下它不会。

只有 3 种附件组合保证有效

COLOR_ATTACHMENT0 = RGBA/UNSIGNED_BYTE 纹理
COLOR_ATTACHMENT0 = RGBA/UNSIGNED_BYTE 纹理 + DEPTH_ATTACHMENT = DEPTH_COMPONENT16 渲染缓冲区
COLOR_ATTACHMENT0 = RGBA/UNSIGNED_BYTE 纹理 + DEPTH_STENCIL_ATTACHMENT = DEPTH_STENCIL 渲染缓冲区

所以你的选择是

使用 RGBA 纹理并渲染 128,128,128,???在 fbo（或 gl.clear it）中对其进行处理
使用 LUMINANCE 纹理并调用 texImage2D
使用 LUMINANCE 纹理并使用后缓冲区调用 copyTexImage2D 或将正确大小的 fbo 清除为您想要的颜色（尽管不能保证这是快速 AFAIK）

【讨论】：

【解决方案2】：

根据我的经验（主要是在 OSX 中使用 Chrome）使用 Canvas 初始化纹理很快。我猜是因为浏览器在 GPU 上分配 Canvas 并全部绘制到它上面，而它的 WebGL 实现使用与 Canvas 相同的 GL 上下文，因此没有巨大的 CPU 到 GPU 内存传输。

        // Quickly init texture to (128,128,128)
        var canvas = this._canvas = document.createElement("canvas");
        canvas.width = wTex;
        canvas.height = hTex;
        var ctx = this._ctx = canvas.getContext("2d");
        ctx.fillStyle = "#808080";
        ctx.fillRect(0, 0, wTex, hTex);
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, canvas);

【讨论】：