材質和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