Question

我正在尝试在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：

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

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

但当然不起作用。我找不到任何表明THREE可以直接从WebGLTextures读取的文档。

Answer 1

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

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

Answer 2

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

Three.js use framebuffer as texture

THREE.js中的着色器材质和GL框架缓冲区

2 个答案: