Javascript 从一个缓冲区到自身的三个JS渲染

我真的希望你能帮我解决这个问题，因为这让我很困惑：

我有一个三个js上下文。 在那里，我创建了一个自定义材质，并将其渲染为纹理

`

好的，现在我所有的东西都有波纹纹理了

现在有另一个着色器，它应该在调用Animate时更新涟漪形状

当然，它应该再次将结果渲染到ripple_纹理中：

/* Texture render environment */
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);

但每次我试着这么做的时候：

WebGLRenderingContext-0x3d022469aa80]总账错误：总账操作无效： GLDraweElements：绘图的源纹理和目标纹理是 一样

Firefox只显示了一个黑色画布

---

我想这可能是一个时间问题，但我不确定，也不知道如何绕过它，因为three js没有用于渲染的回调。

它告诉您出了什么问题：

WebGLRenderingContext-0x3d022469aa80]GL错误：GL_无效_操作：GLDraweElements:绘图的源纹理和目标纹理相同

不能同时读取和渲染到同一纹理，因为渲染操作会破坏渲染过程中读取的纹理数据，从而产生垃圾输出

您需要有另一个与您正在读取的纹理不同的纹理来渲染

/* Texture render environment */
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);