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