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

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

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上。是否有一些方便的方法从FBO转换为WebGL中的Texture2D？

编辑：

经过一些实验它会出现，这是没有问题的。如果我将FBO传递给另一个着色器，我写的只是将纹理输出到屏幕上，然后显示正常。由于照明/法线之类的事情，我的材料会显示为黑色吗？

编辑2：

的的UV和法线从三连胜的到来，所以我不认为它可以是。部分问题是大多数着色器错误都没有报告，所以我在这方面有困难。如果我能映射WebGLTexture不知何故，这将使一切变得更容易，也许这样

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

但当然不工作的。我一直无法找到任何建议THREE可以直接从WebGLTextures读取的文档。

来源

2013-03-26 cdnza

这就是所谓的“渲染到纹理”。 http://mrdoob.github.com/three.js/examples/webgl_rtt.html – WestLangley 2013-03-26 16:58:33

对不起，我想你已经误解了我。我已经绘制到纹理（实际上是一个包含纹理的FBO）。我没有这个问题。我现在要做的是使用这个WebGLTexture纹理THREE.js中的网格 – cdnza 2013-03-26 17:25:25

我引用的例子就是这样做的。它将呈现给WebGLRenderTarget并将WebGLRenderTarget用作网格物体的纹理。 – WestLangley 2013-03-26 19:08:48

戳一点点进入WebGLRenderer的来源（看https://github.com/mrdoob/three.js/blob/master/src/renderers/WebGLRenderer.js#L6643后），您可以尝试创建一个三个JS质感与虚拟图片，然后把你自己的webgltexture改变这种纹理数据成员__webglTexture。

此外，您可能需要设置true纹理对象的__webglInit数据成员，因此不执行的初始化代码

来源

2013-03-27 17:28:48 Popov

如果你不介意的话（因为那时__webglTexture是通过调用_gl.createTexture();覆盖）使用three.js所数据结构，这里是你如何做到这一点：

Three.js use framebuffer as texture

来源

2014-02-08 20:48:15 meetar

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

回答

相关问题