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 回答