材质和GL框架由3个js组成

I'm trying to use an FBO in a material in THREE.js. I have a GPU-based fluid simulation which outputs its final visualisation to a framebuffer object, which I would like to use to texture a mesh. Here's my simple fragment shader:

我试着用FBO处理3。j的材料。我有一个基于gpu的流体模拟，它将最终的可视化输出到一个framebuffer对象，我想用它来纹理网格。这是我的简单碎片着色:

varying vec2 vUv;
uniform sampler2D tDiffuse;

void main() {

    gl_FragColor = texture2D( tDiffuse, vUv );

}

I am then trying to use a simple THREE.ShaderMaterial:

然后我尝试使用一个简单的3。材质:

var material = new THREE.ShaderMaterial( {

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

But my mesh just appears black, albeit with no errors to the console. If I use the same shader and shader material, but supply the result of THREE.ImageUtils.loadTexture("someImageOrOther") as the uniform to the shader, it renders correctly, so I assume the problem is with my FBO. Is there some convenient way of converting from an FBO to a Texture2D in WebGL?

但是我的网格看起来是黑色的，虽然没有错误到控制台。如果我使用相同的材质和材质，但是提供3 . imageutils . loadtexture(“someImageOrOther”)作为材质的统一，它会正确渲染，所以我认为问题出在我的FBO上。在WebGL中，从FBO到Texture2D有什么方便的方法吗?

EDIT:

编辑:

After some more experimentation it would appear that this isn't the problem. If I pass the FBO to a different shader I wrote that just outputs the texture to the screen then it displays fine. Could my material appear black because of something like lighting/normals?

经过更多的试验，这似乎不是问题所在。如果我将FBO传递给我编写的另一个着色器，将纹理输出到屏幕上，那么它就会显示得很好。我的材料会不会因为光线/法线的原因而变成黑色?

EDIT 2:

编辑2:

The UVs and normals are coming straight from THREE, so I don't think it can be that. Part of the problem is that most shader errors aren't reported so I have difficulty in that regard. If I could just map the WebGLTexture somehow that would make everything easier, perhaps like this

UVs和法线是直接从3开始的，所以我认为不可能是这样。部分的问题是大部分的着色错误没有报告，所以我在这方面有困难。如果我可以映射WebGLTexture这会让一切变得更简单，比如这样

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

but of course that doesn't work. I haven't been able to find any documentation that suggests THREE can read directly from WebGLTextures.

当然，这是行不通的。我还没有找到任何文档表明可以从webgltexture直接读取3。

2 个解决方案

#1

By poking a little into the sources of WebGLRenderer (look at https://github.com/mrdoob/three.js/blob/master/src/renderers/WebGLRenderer.js#L6643 and after), you may try to create a three js texture with a dummy picture, then change the data member __webglTexture of this texture by putting your own webgltexture.

通过深入了解WebGLRenderer的来源(查看https://github.com/mrdoob/three.js/blob/master/src/renderers/webglrenderers/webglrenderer .js#L6643和之后)，您可以尝试创建一个带有虚拟图片的三个js纹理，然后通过放置您自己的webgl6.com纹理来更改这个纹理的数据成员__webglTexture。

Also, you may need to set to true the __webglInit data member of the texture object so that init code is not executed (because then __webglTexture is overwritten by a call to _gl.createTexture();)

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

#2

If you don't mind using the Three.js data structures, here's how you do it:

如果你不介意用这三个。js数据结构:

Three.js use framebuffer as texture

三。js使用framebuffer作为纹理

#1