javascript - 读取 WebGLTexture 中的像素(将 WebGL 渲染到纹理)

标签 javascript webgl textures framebuffer

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

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

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

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

谢谢!

最佳答案

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

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

关于javascript - 读取 WebGLTexture 中的像素(将 WebGL 渲染到纹理),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15057720/

相关文章:

javascript - 无法解析模块说明符三

c++ - OpenGL GL_TEXTURE1 不显示

javascript - css 和 js 文件的路径

JavaScript 代码适用于 chrome,不适用于 IE 和 firefox

javascript - “循环”JavaScript 函数

javascript - 在导出模块中传递多个参数

javascript - 如何确定事件的 WebGL 上下文的数量?

canvas - Three.js 中的纹理形状拉伸(stretch)

python - 如何使用 Python 在 Blender 2.49 中设置世界背景纹理?

c++ - glUniform 无法设置采样器值