javascript - 尝试将 WebGL 纹理清除为纯色

标签 javascript webgl

我有一系列纹理堆叠在一起(使用 mip-map 样式的分辨率金字塔)以得到最终图像。

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

我似乎无法弄清楚如何将(单 channel GL_LUMINANCE)纹理初始化为一个值!

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

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

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

此外,似乎没有像 gl.SIGNED_BYTE 这样的复制模式允许零为零(即,有符号值进来)......但这也不能解决初始化纹理的问题为单个值(在本例中为零)。

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

最佳答案

遗憾的是,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 渲染缓冲区

所以你的选择是

  1. 使用 RGBA 纹理并渲染 128,128,128,???在 fbo 中(或 gl.clear 它)

  2. 使用 LUMINANCE 纹理并调用 texImage2D

  3. 使用 LUMINANCE 纹理并使用后备缓冲区或正确大小的 fbo 调用 copyTexImage2D,清除为您想要的颜色(尽管不能保证这很快)

关于javascript - 尝试将 WebGL 纹理清除为纯色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10874359/

相关文章:

javascript - Javascript 游戏 - 添加更多问题

javascript - 如何在 angularjs 拦截器中重定向,除非出现错误?

javascript - Canvas 屏幕截图不起作用

javascript - preserveDrawingBuffer false - 值得付出努力吗?

javascript - 如何使用 webgl/two.js 创建带有选择的基本菜单栏?

javascript - MobX 存储职责

javascript - Google Cloud 函数错误 - PubSub 到 BigQuery

c# - SharePoint 2013 中的自定义字段

opengl-es - 顶点位置三元组如何映射到着色器中的 vec4?

opengl-es - 使用具有球体 Material 属性和 float 的 '/' 运算符时出错 (glsl)