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

问题描述

我真的希望您能在这个问题上为我提供帮助，因为一段时间以来它使我感到困惑：

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

`

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

好的，现在我有了涟漪效果

现在有另一个着色器，可以在调用Animate（）时更新波纹形状。

当然，它应该再次将结果呈现到波纹纹理中：

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

但是每次我尝试执行此操作时，Chromium都会报告以下内容：

WebGLRenderingContext-0x3d022469aa80] GL错误：GL_INVALID_OPERATION：glDrawElements：绘制的源纹理和目标纹理相同。

Firefox仅显示一个黑色画布。

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