Graphics 如何使用GLSL在WebGL中拾取二维对象?

Graphics 如何使用GLSL在WebGL中拾取二维对象?,graphics,glsl,webgl,webgl2,Graphics,Glsl,Webgl,Webgl2,我学习WebGL已经有一段时间了——我已经在这里问了一些问题——但我还没有真正掌握它的窍门。我现在要做的一件事就是选择一个物体。我看过很多书和代码示例,但它们似乎都是3D的,有很多对象,所以我有点迷失在挑选东西和其他代码中 在这里,我的代码使用鼠标单击选择顶点位置绘制点、线段和多边形,并使用一个按钮告知webgl我已完成绘制并要渲染多边形: canvas.addEventListener("mousedown", function(event){

我学习WebGL已经有一段时间了——我已经在这里问了一些问题——但我还没有真正掌握它的窍门。我现在要做的一件事就是选择一个物体。我看过很多书和代码示例,但它们似乎都是3D的,有很多对象,所以我有点迷失在挑选东西和其他代码中

在这里,我的代码使用鼠标单击选择顶点位置绘制点、线段和多边形,并使用一个按钮告知webgl我已完成绘制并要渲染多边形:

    canvas.addEventListener("mousedown", function(event){

        
        t  = vec2(2*event.clientX/canvas.width-1,
            2*(canvas.height-event.clientY)/canvas.height-1);

        if (select_flag == false){

            gl.bindBuffer( gl.ARRAY_BUFFER, bufferId );
            
            
            gl.bufferSubData(gl.ARRAY_BUFFER, 8*index, flatten(t));

            tt = vec4(colors[cindex]);
            
            gl.bindBuffer( gl.ARRAY_BUFFER, cBufferId );
            gl.bufferSubData(gl.ARRAY_BUFFER, 16*index, flatten(tt));
            
           
            numPositions[numPolygons]++;
            
            index++;
        };
    });
我的问题是,我不确定如何修改代码,使其先写入帧缓冲区,然后在屏幕上显示正常颜色。

    var a = document.getElementById("EndPolyButton")
    a.addEventListener("click", function(){
    numPolygons++;
    numPositions[numPolygons] = 0;
    start[numPolygons] = index;
    render();
    });
function render() {

    gl.clear( gl.COLOR_BUFFER_BIT );

    for(var i=0; i<numPolygons; i++) {
        
        if (numPositions[i] == 1){
            gl.drawArrays( gl.POINTS, start[i], numPositions[i] );
        } else if (numPositions[i] == 2){
            gl.drawArrays( gl.LINE_STRIP, start[i], numPositions[i] );          
        } else{
            gl.drawArrays( gl.TRIANGLE_FAN, start[i], numPositions[i] );
        }
    }
}
     var renderbuffer = gl.createRenderbuffer();
     gl.bindRenderbuffer(gl.RENDERBUFFER, renderbuffer);
     gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, canvas.width, canvas.height);

    
     var framebuffer = gl.createFramebuffer();
     gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
     gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
     gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, renderbuffer);