I have been struggling with a particular issue and I really need some assistance:
In my three js context, I have created a custom material and rendered it into a texture.
`
/* Rendering in texture */
fbo_renderer_scene = new THREE.Scene();
fbo_renderer_ripple_update_scene = new THREE.Scene();
var fbo_texture_light = new THREE.DirectionalLight(0xFFFFFF, 1.5);
fbo_texture_light.position.set(0.0, 0.0, -1.0).normalize();
fbo_renderer_scene.add(fbo_texture_light);
fbo_renderer_ripple_update_scene.add(fbo_texture_light);
ripple_texture = new THREE.WebGLRenderTarget(width, height, render_target_params);
ripple_update_texture = new THREE.WebGLRenderTarget(width, height, render_target_params);
ripple_material = new THREE.ShaderMaterial(
{
uniforms:
{
texture1: { type: "t", value: bottom_plane_texture},
},
vertexShader: document.getElementById('drop_vert_shader').textContent,
fragmentShader: document.getElementById('drop_frag_shader').textContent,
depthWrite: false
});
fbo_renderer_camera = new THREE.OrthographicCamera(width / -2.0, width / 2.0, height / 2.0, height / -2.0, -10000, 10000);
var texture_mesh = new THREE.Mesh(bottom_plane_geometry, ripple_material);
fbo_renderer_scene.add(texture_mesh);
renderer.render(fbo_renderer_scene, fbo_renderer_camera, ripple_texture, true);
After rendering, everything is stored in the ripple_texture.
Now, I need to update the ripple shape using another shader when Animate() is called.
This shader should render the updated result back into the ripple_texture:
/* Rendering the updated texture */
fbo_renderer_scene = new THREE.Scene();
fbo_renderer_ripple_update_scene = new THREE.Scene();
var fbo_texture_light = new THREE.DirectionalLight(0xFFFFFF, 1.5);
fbo_texture_light.position.set(0.0, 0.0, -1.0).normalize();
fbo_renderer_scene.add(fbo_texture_light);
fbo_renderer_ripple_update_scene.add(fbo_texture_light);
ripple_texture = new THREE.WebGLRenderTarget(width, height, render_target_params);
ripple_update_texture = new THREE.WebGLRenderTarget(width, height, render_target_params);
ripple_material = new THREE.ShaderMaterial(
{
uniforms:
{
texture1: { type: "t", value: bottom_plane_texture},
},
vertexShader: document.getElementById('drop_vert_shader').textContent,
fragmentShader: document.getElementById('drop_frag_shader').textContent,
depthWrite: false
});
fbo_renderer_camera = new THREE.OrthographicCamera(width / -2.0, width / 2.0, height / 2.0, height / -2.0, -10000, 10000);
var texture_mesh = new THREE.Mesh(bottom_plane_geometry, ripple_material);
fbo_renderer_scene.add(texture_mesh);
renderer.render(fbo_renderer_scene, fbo_renderer_camera, ripple_texture, true);
When I attempt to do this, Chromium displays an error:
WebGLRenderingContext-0x3d022469aa80]GL ERROR :GL_INVALID_OPERATION :glDrawElements: Source and destination textures of the draw are the same.
Meanwhile, Firefox shows a black canvas.
I suspect it may be a timing issue, but I am unsure how to resolve it since three js does not have a callback for rendering.