我正在尝试在 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 读取的文档。