THREE.js 中的着色器材质和 GL 帧缓冲区 [英] Shader Materials and GL Framebuffers in THREE.js

问题描述

我正在尝试在 THREE.js 的材料中使用 FBO.我有一个基于 GPU 的流体模拟，它将其最终可视化输出到一个帧缓冲区对象，我想用它来纹理网格.这是我的简单片段着色器:

不同的vec2 vUv；均匀采样器2D tDiffuse；无效主(){gl_FragColor = texture2D(tDiffuse, vUv);}

然后我尝试使用一个简单的 THREE.ShaderMaterial:

var material = new THREE.ShaderMaterial( {制服:{ tDiffuse:{ 类型:t"，值:outputFBO } }，//其他东西...使用哪些着色器等});

但是我的网格只是显示为黑色，尽管控制台没有错误.如果我使用相同的着色器和着色器材质，但提供 THREE.ImageUtils.loadTexture("someImageOrOther") 的结果作为着色器的统一，它会正确呈现，所以我认为问题出在我的 FBO 上.是否有一些方便的方法可以在 WebGL 中从 FBO 转换为 Texture2D?

经过更多实验后，似乎这不是问题.如果我将 FBO 传递给我编写的其他着色器，该着色器仅将纹理输出到屏幕，则它显示正常.我的材质会因为光照/法线之类的原因而显得黑色吗?

编辑 2:

UV 和法线直接来自三，所以我认为不可能是那样.部分问题是大多数着色器错误都没有报告，所以我在这方面有困难.如果我能以某种方式映射 WebGLTexture，这将使一切变得更容易，也许像这样

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

但这当然行不通.我找不到任何文档表明三可以直接从 WebGLTextures 读取.

解决方案

如果您不介意使用 Three.js 数据结构，请按以下方式操作:

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:

varying vec2 vUv;
uniform sampler2D tDiffuse;

void main() {

    gl_FragColor = texture2D( tDiffuse, vUv );

}

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

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?

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?

EDIT 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

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.

解决方案

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

Three.js use framebuffer as texture

这篇关于THREE.js 中的着色器材质和 GL 帧缓冲区的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！