1

我正在尝试在 THREE.js 的材料中使用 FBO。我有一个基于 GPU 的流体模拟，它将其最终可视化输出到一个帧缓冲区对象，我想用它来纹理网格。这是我的简单片段着色器：

varying vec2 vUv;
uniform sampler2D tDiffuse;

void main() {

    gl_FragColor = texture2D( tDiffuse, vUv );

}

然后我尝试使用一个简单的 THREE.ShaderMaterial：

var material = new THREE.ShaderMaterial( {

    uniforms: { tDiffuse: { type: "t", value: outputFBO } },
    //other stuff... which shaders to use etc
} );

但是我的网格只是显示为黑色，尽管控制台没有错误。如果我使用相同的着色器和着色器材质，但将 THREE.ImageUtils.loadTexture("someImageOrOther") 的结果作为统一体提供给着色器，它会正确渲染，所以我认为问题出在我的 FBO 上。有没有一些方便的方法可以在 WebGL 中从 FBO 转换为 Texture2D？

编辑：

经过更多的实验，这似乎不是问题。如果我将 FBO 传递给我编写的仅将纹理输出到屏幕的不同着色器，则它显示得很好。由于照明/法线之类的原因，我的材质是否会显示为黑色？

编辑2：

UV 和法线直接来自三个，所以我认为不可能是这样。部分问题是大多数着色器错误没有被报告，所以我在这方面有困难。如果我能以某种方式映射 WebGLTexture 会让一切变得更容易，也许像这样

var newMaterial = new THREE.MeshLambertMaterial({ map : outputFBO.texture });

但这当然行不通。我还没有找到任何表明 THREE 可以直接从 WebGLTextures 读取的文档。

4

2 回答 2

0

通过深入了解 WebGLRenderer 的源代码（查看https://github.com/mrdoob/three.js/blob/master/src/renderers/WebGLRenderer.js#L6643及之后），您可以尝试创建一个三个js 纹理与虚拟图片，然后__webglTexture通过放置您自己的 webgltexture.js 来更改此纹理的数据成员。

此外，您可能需要设置纹理对象true的__webglInit数据成员，以便不执行初始化代码（因为 then__webglTexture被调用覆盖_gl.createTexture();）

于 2013-03-27T17:28:48.583 回答
0

如果您不介意使用 Three.js 数据结构，请按照以下方法操作：

Three.js 使用 framebuffer 作为纹理

于 2014-02-08T20:48:15.007 回答