WebGL之物体选择

原文地址: WebGL之物体选择

使用WebGL将图形绘制到画布后，如何与外部进行交互？这其中最关键的就是如何实现物体的选择。比如鼠标点击后判断是否选中了某个图形或图形的某个部分。

本节实现的效果: WebGL选中物体

WebGL选中物体

如何实现选中物体

颜色区分法

《WebGL编程指南》中提出了一个原理很简单的解决方案，步骤如下：

1. 鼠标按下时物体重绘为红色或其他能区分的颜色

2. 读取鼠标点击处像素的颜色

   gl.readPixels(x,y,width,height,format,type,pixels)
   

3. 使用物体原来的颜色进行重绘，以恢复物体本来颜色

4. 判断第2步读取到的颜色是否与预设的颜色值相等，相等则表示点击中物体

可以说这是个非常容易实现的方案，不过要为每个物体分别设置不同的区分颜色却是个隐患，同时也不够友好。

光线投射法

这是使用最广泛也最精确的一种方案了，Three.js 中的光线投射器 (Raycaster) 就实现了这种方案，可以看里面的源代码。

光线投射
它的基本原理: 从视点出发的光线首先投射到近截面，最后投射到远截面，结合鼠标点击的位置 (x, y) 和视图投影矩阵 (viewProjection)。可以得出由近截面坐标 (x1, y1, z1) 和远截面坐标 (x2, y2, z2) 组成的光线向量。然后我们就可以将物体坐标构成的面逐个与这个光线向量进行对比。首先对比盒子边界，再对比三角形面，这中间涉及到法向量，点积，叉积的计算，那叫一个复杂。

投影坐标判断法

目前对光线投射的具体实现理解地不是很透彻，那我就只能通过自己的理解来实现个简单版的方案。基本原理就是，用视图投影模型矩阵 (mvp) 对图形坐标进行变换，得到在屏幕中的绘制坐标(xyz)。然后遍历每个坐标得出一个由最大最小xy坐标 (xmax, xmin, ymax, ymin) 构成的二维平面盒子。最后与鼠标位置 (x, y) 进行比较，如果鼠标xy坐标处于盒子边界之内，那么就可判断选中了该物体。核心代码如下:

canvas.addEventListener('mousemove', function(e) {
    //坐标转换为webgl表示区间
    const pos = util.windowToWebgl(tCanvas,e.clientX,e.clientY);
    const ps = [];
    Polygons.forEach((p,i)=>{
        //重置状态
        p.select = false;
        //mvp矩阵
        const matrix = m4.translate(viewProjection, p.pos);
        let xmax, ymax, xmin, ymin;//盒子的边界
        //遍历顶点获取盒子的边界
        for(let j = 0; j < p.position.length; j = j+3){
            //对坐标进行矩阵转换
            const s = m4.transformPoint(matrix, p.position.slice(j,j+3));
            if(j == 0){
                xmax = s[0];
                xmin = s[0];
                ymax = s[1];
                ymin = s[1];
                continue;
            }
            if(s[0]>xmax) xmax = s[0];
            if(s[0]<xmin) xmin = s[0];
            if(s[1]>ymax) ymax = s[1];
            if(s[1]<ymin) ymin = s[1];
        }
        // 位于盒子边界内
        if(pos.x >= xmin && pos.x <= xmax && pos.y >= ymin && pos.y <= ymax){
            ps.push(p);
        }
    });
    if(!ps.length) return;
    let sel;
    //获取最靠近视点的图形
    if(ps.length == 1) {
        sel = ps[0];
    } else {
        sel = ps.sort((a,b)=> {
            const az = m4.transformPoint(a.matrix,[0,0,0])[2];
            const bz = m4.transformPoint(b.matrix,[0,0,0])[2];
            return az - bz;
        })[0];
    }
    //设置该图形为选中
    Polygons[sel.index].select = true;
},false);

目前实现的功能在 选择不规则的物体时，判断地不是很精准，毕竟不是所有的图形都是类似矩形。

那么解决方案就是：我们知道WebGL图形是由三角形构成的，如果进一步判断鼠标位置是否在构成该图形的三角形面当中，那就会更加精确了，这个功能留给读者去实现。