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
0
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
0
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
0
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
0
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作为纹理