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

[英]Shader Materials and GL Framebuffers in THREE.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


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


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2013/03/26/7127794f08ab3b5b59ea6f70cfd7c178.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com