In my current project, I am attempting to utilize an FBO within a material in THREE.js. The project involves a GPU-based fluid simulation that generates its final visualization to a framebuffer object, which I intend to use as a texture for a mesh. Below is a snippet of the fragment shader I am using:
varying vec2 vUv;
uniform sampler2D tDiffuse;
void main() {
gl_FragColor = texture2D( tDiffuse, vUv );
}
Subsequently, I am working with a basic THREE.ShaderMaterial:
var material = new THREE.ShaderMaterial( {
uniforms: { tDiffuse: { type: "t", value: outputFBO } },
//other configurations... such as shaders to use
} );
However, when I render my mesh, it appears black without any errors appearing in the console. Interestingly, using the same shader and shader material but providing the outcome of THREE.ImageUtils.loadTexture("someImageOrOther") as the uniform works successfully. This leads me to believe that the issue lies with my FBO. Is there a straightforward method to convert an FBO to a Texture2D in WebGL?
UPDATE:
Further testing indicates that the FBO is not the source of the problem. When I pass the FBO to a different shader that simply displays the texture on the screen, it renders correctly. Could the black appearance of my material be attributed to factors like lighting or normals?
UPDATE 2:
The UVs and normals used are directly sourced from THREE.js, ruling out potential issues there. The lack of error reporting for shader problems complicates the troubleshooting process. If there was a way to directly map the WebGLTexture, similar to the hypothetical scenario below:
var newMaterial = new THREE.MeshLambertMaterial({ map : outputFBO.texture });
Unfortunately, such a method does not work, and I have not encountered any documentation suggesting that THREE.js can directly read from WebGLTextures.