我可以在 Webgl 中使用两个单独的 vshadders 和程序创建两个单独的对象吗？

Question

我正在尝试在 webgl 中创建一个圆圈，然后让用户单击 3 次，然后使用 LINE_LOOP 在他们单击的位置出现一个三角形。我创建了 2 个 vshader 和 2 个程序，但在单击 3 次后圆圈消失了。我尝试在主要功能中声明这两个程序，然后在点击功能中使用三角形的缓冲区进行所有操作。在点击函数中，我找到了用户点击的 x,y 位置，然后将这些值推送到我尝试用来输出三角形的顶点数组中。我很确定函数的逻辑大部分是正确的，因为我对过去创建的另一个代码有类似的函数。我希望用户一直看到圆圈，然后在点击 3 次后看到在他们点击的地方创建的三角形。

这是我的着色器声明

        var circlevertices_length;
        var gl = null;
        var program = 0;
        var program2 = 0;
        var divisions = 0;
        var tcount = 0;
        var tmax = 3;
    
        var trivert = [
            0.0, 0.0, 0.0,
            0.0, 0.0, 0.0,
            0.0, 0.0, 0.0
            ];

        var VSHADER_SOURCE = `
       precision highp float;
           attribute vec3 coordinates;

        void main(){
               gl_Position = vec4(coordinates, 1.0);
        }
        `;

        var VSHADER_SOURCE_TRIANGLE = `
             precision highp float;
             attribute vec3 coordinates2;

        void main() {
             gl_Position = vec4(coordinates2, 1.0);
         }
         `;

        var FSHADER_SOURCE = `
        precision highp float;
        uniform vec4 color;

        void main(){
         gl_FragColor = color;
        }

这是我的主要功能：

    function main(){
    var canvas = document.getElementById("MyCircle");
    gl = getWebGLContext(canvas);
    
    program1 = createProgram(gl, VSHADER_SOURCE, FSHADER_SOURCE);
    program2 = createProgram(gl, VSHADER_SOURCE_TRIANGLE, FSHADER_SOURCE);

    gl.useProgram(program);
    
    
    //register event handler to be called on a mouse click
        canvas.onmousedown = function(ev){
            click(ev, gl, canvas)
        };

    render();   
    
    return;
     }

这里是我做所有事情来创建三角形的地方：

    function click(ev, gl, canvas){
    gl.useProgram(program2);

    var x = ev.clientX;
    var y = ev.clientY;
    var rect = ev.target.getBoundingClientRect();

    if(tcount < tmax){
        x = ((x - rect.left) - canvas.width/2)/(canvas.width/2);
        y = (canvas.height/2 - (y-rect.top))/(canvas.height/2);
        z = 0.0;

        trivert[tcount * 3 + 0] = x;
        trivert[tcount * 3 + 1] = y;
        trivert[tcount * 3 + 2] = z;

        tcount++;
    }

    if(tcount == tmax){
        alert(trivert[0],trivert[1],trivert[2])
        var buff = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, buff);
        gl.bufferData(gl.ARRAY_BUFFER, trivert, gl.STATIC_DRAW);

        const position_loc = gl.getAttribLocation(program2, "coordinates2");
        gl.enableVertexAttribArray(position_loc);
        gl.vertexAttribPointer(position_loc, 3, gl.FLOAT, false, 0, 0);

        const color_loc2 = gl.getUniformLocation(program2, 'color');
        gl.uniform4f(color_loc2, 1.0, 1.0, 1.0, 1.0);

        gl.drawArrays(gl.LINE_LOOP, 0, tcount);

        gl.disableVertexAttribArray(position_loc);
        tcount = 0;
    }
    }