Question

我真的希望你能帮助我解决这个问题，因为它有点困扰我：

我有三个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);

好的，现在我拥有ripple_texture中的所有内容

现在有另一个着色器应该更新Animate（）上的波纹形状被调用。

当然它应该再次将结果渲染到ripple_texture中：

/* 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没有渲染回调。

Answer 1

它告诉你错误：

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

您无法一次读取并渲染到相同的纹理，因为渲染操作会践踏您在渲染过程中读取的纹理数据，从而为您提供垃圾输出。

您需要将另一个渲染的纹理与您正在阅读的纹理相同。

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

1 个答案: