求助WebGL 中渲染器问题

Posted 2023-04-27

参考技术A 目前还处于 Beta 版。　　WebGL 是一套用于渲染 2D 和 3D 图形的标准图形库，其标准是由 Khronos、AMD、爱立信、谷歌、Mozilla、Nvidia 以及 Opera 等共同制定，允许把 javascript 和 OpenGL ES 2.0 结合在一起。通过增加 OpenGL ES 2.0 的一个 JavaScript 绑定，WebGL 可以为 html5 Canvas 提供硬件 3D 加速渲染，这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示 3D 场景和模型了，还能创建复杂的导航和数据视觉化。　　WebGL 技术标准免去了开发网页专用渲染插件的麻烦，可用于创建具有复杂 3D 结构的网站页面，甚至可以用来设计 3D 网页游戏等等。　　在Google Play下载最新 Beta 版 Chrome 后，你需要到在浏览器中键入 chrome://flags/，在里面启用支持 WebGL 功能。开启后，你可以访问这个测试页面来测试，也可以访问 Google 做的一个3D Demo模型 。

读取 WebGLTexture 中的像素（将 WebGL 渲染到纹理）

【中文标题】读取 WebGLTexture 中的像素（将 WebGL 渲染到纹理）

【英文标题】：Read pixels in WebGLTexture (Rendering WebGL to texture)

【发布时间】：2013-02-24 23:00:18

【问题描述】：

我正在 GPU 上生成纹理并将其渲染到我自己的帧缓冲区对象。它工作正常，纹理被渲染到 WebGLTexture，我可以传递给其他着色器。但是我想在 javascript 中访问 WebGLTexture 像素。有没有办法做到这一点？

目前，在将纹理绘制到帧缓冲区后，我正在使用 gl.ReadPixels 读取像素。效果很好，但如果我可以直接访问 WebGLTextureObject 中的像素不是更好吗？

我想要完成的是：我有 GLSL perlin 噪声着色器，可以在 GPU 上渲染高清高度图和法线贴图。我想将高度图传递给 CPU，以便为网格生成顶点。我当然可以只在顶点着色器中定位顶点，但我需要它在 CPU 中进行碰撞检测。

我希望我的问题很清楚。欢迎任何反馈！

谢谢！

【问题讨论】：

我认为这是唯一的解决方案，因为glGetTexImage不存在。但无论如何，我不认为这是一个糟糕的解决方案。如果可以在 GPU 上进行碰撞检测，您可能应该考虑一下。

【参考方案1】：

您可以通过将它们附加到帧缓冲区来从大多数纹理中读取像素。

var fb = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) == gl.FRAMEBUFFER_COMPLETE) 
  var pixels = new Uint8Array(width * height * 4);
  gl.readPixels(x, y, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);

【讨论】：

正如我在问题中描述的那样，这就是我目前正在做的事情。我想知道是否有其他方法，例如直接从 WebGLTexture 读取。谢谢。

好的，从您的描述中看不清楚。 “我已将纹理绘制到我的帧缓冲区”。您不必绘制纹理。您只需要将纹理附加到帧缓冲区，然后调用 readPixels。很抱歉对于这个误会。 WebGL 中没有其他直接的方法。

好的，非常感谢！ :-) 您可能想要更新您的答案并声明 WebGL 中没有其他直接可用的方法（对于其他人）。