经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 软件/图像 » WebGL » 查看文章
WebGL模型拾取——射线法
来源：cnblogs　　作者：ccentry　　时间：2018/11/17 14:42:24　　对本文有异议

　　今天要把WebGL中一个非常重要的算法记录下来——raycaster射线法拾取模型。首先我们来了解一下为什么要做模型拾取，我们在做webgl场景交互的时候经常要选中场景中的某个模型，比如鼠标拖拽旋转，平移。为了能做到鼠标交互，就首先要能选中场景中的模型对象，这就要用到模型拾取算法，本文仅讨论射线法模型拾取raycaster。

　　所谓射线法就是利用一根射线去和场景中的模型进行碰撞，撞到的模型对象就是被拾取到的模型。请看下图

　　我逐个来解释一下上图中的元素。首先解释相机（camera），这就是人眼的抽象，代表用户在屏幕前的眼睛位置。人眼看到的世界是透视的（perspective），因此我们构造的视棱台（frustum）基于透视投影。整个视棱台区域介于场景近截面（near）和远截面（far）之间，这个区间内的空间就是我们可以看到的场景空间。需要说明一下，near近截面我们这里紧贴屏幕（screen），即距离很小约等于0.1，far远截面就是我们认为的视线最远能看到的距离，我们这里设置为1000。屏幕screen在近截面前0.1的位置上，也是离人眼最近的截面，也是鼠标交互的界面，这是要事先解释明白的。理解了这个空间结构以后我们就开始讲解raycaster的算法原理。

　　首先我们来看一下鼠标在屏幕上的位置点P0，我们可以看到P0点（鼠标），这个就是鼠标在屏幕上的位置。我们再来看看triangle1三角形1，这就是透视空间中triangle2三角形2在屏幕上的投影。我们可以明显看到鼠标位置P0点在屏幕triangle1三角形1内部，即鼠标点选中triangle1三角形1。这在屏幕上可以看的很清楚，但是问题来了，在空间中鼠标是没有深度概念的，即鼠标只有XY坐标，没有Z坐标，那我们在视棱台的空间坐标系中如何表示鼠标的三维空间位置呢，如果没有鼠标的3维空间坐标，如何判断在视棱台空间中鼠标是否选中triangle2三角形2这个模型对象呢？也许有同学会说，triangle1就是triangle2的投影嘛，选中投影就是选中模型了不是，我就这么说，非常正确，能说出这样的话就已经完全理解了模型在屏幕上的投影的原理，但是新的问题随之又来了，如何获取鼠标点选模型的坐标呢，即如何得到鼠标点在模型上的那个点的三维空间坐标呢，如果仅仅判断是否选中，那投影就够用了，但要计算鼠标点选模型上的点坐标，就远远不够用了。为了解决这个问题，raycaster算法应运而生。

　　raycaster顾名思义就是射线投射。他的原理其实非常简单，就是用一根射线去交有限平面，获得交点。射线是有起点的，起点就是我们的眼睛。我们做一根起于camera，通过鼠标在屏幕上的位置P0，继续延伸，交视棱台近截面于P1，继续延伸，交视棱台远截面于P3，射线截止，我们得到了一根线段P1-P3。这根线段P1-P3就是我们眼睛能看到的鼠标发出的射线在透视空间中的部分，凡是这根线段碰到的模型，都是鼠标点选中的空间模型。而这根线段和模型的交点就是鼠标点选模型的交点，这个交点坐标就是鼠标点选模型的交点空间三维坐标。这样就顺利解决了上面我们的问题，即求鼠标点选空间三维模型的交点坐标。在上图中我们看得很清楚，这个交点就是P2，接下来我们就来讲解怎么求这个P2的空间坐标。

　　做图形学的同学们都非常清楚。如何求线段和平面的交点，这里我截取一部分代码，以供叙述方便，以下就是求线段截取平面交点的函数。

  1. /*
  2.  
  3.  */
  4. let Intersector = require('./Intersector');
  5. let LineSegmentIntersection = require('./Intersection').LineSegmentIntersection;
  6. let Vec3 = require('./Vec3');
  7. let Mat4 = require('./Mat4');
  8. let Algorithm = require('./Algorithm');
  10. let LineSegmentIntersector = function () {
  11.     Intersector.call(this);
  13.     //原始的起始点和临界值，初始化设置的数据，保留作为参照，设置后不再变动
  14.     this._orginStart = Vec3.new();//线段起点
  15.     this._orginEnd = Vec3.new();//线段终点
  16.     this._orginThreshold = 0.0;//点和线求相交时的临界值，完全相交是很难求到的
  18.     //临时存储，每次求交都可能会变动的数据
  19.     //对于有变换的几何求交，不会变换几何顶点而是变换起始点和临界值
  20.     this._start = Vec3.new();//线段起点
  21.     this._end = Vec3.new();//线段终点
  22.     this._threshold = 0.0;//点和线求相交时的临界值，完全相交是很难求到的
  23.  
  24.     this._direction = Vec3.new();
  25.     this._length = 0;
  26.     this._inverseLength = 0;
  27.     this._matrix = Mat4.new();
  28. };
  30. LineSegmentIntersector.prototype = Object.create(Intersector.prototype);
  31. LineSegmentIntersector.prototype.constructor = LineSegmentIntersector;
  32. Object.assign(LineSegmentIntersector.prototype, {
  33.     init: function (start, end, threshold) {
  34.         Vec3.copy(this._orginStart, start);
  35.         Vec3.copy(this._orginEnd, end);
  36.         Vec3.copy(this._start, start);
  37.         Vec3.copy(this._end, end);
  39.         if (threshold !== undefined) {
  40.             this._orginThreshold = threshold;
  41.             this._threshold = threshold;
  42.         }
  43.     },
  44.     intersect: function (drawable) {
  45.         //先使用包围盒子
  46.         if (!drawable.getBoundingBox().intersectLineSegment(this._orginStart, this._orginEnd)) {
  47.             return;
  48.         }
  50.         this._drawable = drawable;
  51.         let geometry = drawable.getGeometry();
  52.         let vertexbuffer = geometry.getBufferArray('Vertex');
  53.         this._vertices = vertexbuffer.getArrayBuffer();
  54.         //没有顶点数据不处理直接返回
  55.         if (!this._vertices) return;
  57.         //没有图元不处理直接返回
  58.         let primitive = geometry.getPrimitive();
  59.         if (!primitive) return;
  61.         //初始化求相交的各种数据
  62.         let matrix = drawable.getTransform();
  63.         if (this._transform !== matrix) {//如果不一样，需要计算新的起始点以及各种临时数据
  64.             this._transform = matrix;
  65.             Mat4.invert(this._matrix, matrix);
  67.             //根据矩阵计算新的临界值
  68.             if (this._orginThreshold > 0.0) {
  69.                 let tmp = this._start;
  70.                 Mat4.getScale(tmp, this._matrix);
  71.                 let x = tmp[0];
  72.                 let y = tmp[1];
  73.                 let z = tmp[2];
  74.                 this._threshold = this._orginThreshold * (x > y ? (x > z ? x : z) : y > z ? y : z);
  75.             }
  76.             //根据矩阵计算新的起始点
  77.             Vec3.transformMat4(this._start, this._orginStart, this._matrix);
  78.             Vec3.transformMat4(this._end, this._orginEnd, this._matrix);
  80.             //根据新的起始点计算各种临时数据
  81.             Vec3.sub(this._direction, this._end, this._start);
  82.             this._length = Vec3.length(this._direction);//长度
  83.             this._inverseLength = this._length <= Algorithm.EPSILON ? 0.0 : 1.0 / this._length;
  84.             Vec3.scale(this._direction, this._direction, this._inverseLength);//求单位向量
  85.         }//如果变换与上次一样，直接使用上次的数据求相交
  87.         //求相交
  88.         primitive.operate(this);
  89.     },
  90.     intersectPoint: function (vertex) {
  91.         // https://www.geometrictools.com/GTEngine/Include/Mathematics/GteDistPointSegment.h
  92.         //起点指向绘制点，向量M
  93.         let m = Vec3.MemoryPool.alloc();
  94.         Vec3.sub(m, vertex, this._start);
  95.         //起点指向终点，向量N
  96.         let n = Vec3.MemoryPool.alloc();
  97.         Vec3.sub(n, this._end, this._start);
  99.         //求M在N上的投影比例值
  100.         //|m|*|n|*cos / \n\*\n\ = |m|*cos/\n\
  101.         let r = Vec3.dot(m, n) * this._inverseLength * this._inverseLength;
  103.         //计算绘制点到线段的距离
  104.         let sqrdist = 1.0;
  105.         if (r < 0.0) {//夹角超过90度，绘制点在当前线段起点后面，求绘制点与起点的距离
  106.             sqrdist = Vec3.sqrLen(m);
  107.         } else if (r > 1.0) {//绘制点在当前线段终点后面，求绘制点与终点的距离
  108.             sqrdist = Vec3.sqrDist(vertex, this._end);
  109.         } else {//在0到1之间
  110.             //m - n * r 如果平行或者接近于平行，结果接近于0，相交
  111.             sqrdist = Vec3.sqrLen(Vec3.scaleAndAdd(m, m, n, -r));
  112.         }
  114.         let intersection = undefined;
  115.         if (sqrdist > this._threshold * this._threshold) {//超过了临界值，没有相交返回
  117.         } else {
  118.             //相交
  119.             intersection = new LineSegmentIntersection();
  120.             //intersection._i1 = index;
  121.             //intersection._r1 = 1.0;
  122.             Vec3.scaleAndAdd(intersection._point, this._start, n, r);
  123.             intersection._ratio = r;
  124.         }
  125.         Vec3.MemoryPool.free(m);
  126.         Vec3.MemoryPool.free(n);
  127.         return intersection;
  128.     },
  129.     intersectLine: function (vertex0, vertex1) {
  130.         // https://www.geometrictools.com/GTEngine/Samples/Geometrics/DistanceSegments3/DistanceSegments3.cpp
  131.         //let epsilon = 0.00000001;
  133.         //起点到终点的向量
  134.         let u = Vec3.MemoryPool.alloc();
  135.         Vec3.sub(u, vertex1, vertex0);
  136.         let v = Vec3.MemoryPool.alloc();
  137.         Vec3.sub(v, this._end, this._start);
  138.         let w = Vec3.MemoryPool.alloc();
  139.         Vec3.sub(w, vertex0, this._start);
  141.         let a = Vec3.dot(u, u);
  142.         let b = Vec3.dot(u, v);
  143.         let c = Vec3.dot(v, v);
  144.         let d = Vec3.dot(u, w);
  145.         let e = Vec3.dot(v, w);
  146.         let D = a * c - b * b;
  147.         let sN;
  148.         let tN;
  149.         let sD = D;
  150.         let tD = D;
  152.         // compute the line parameters of the two closest points
  153.         if (D < Algorithm.EPSILON) {//平行
  154.             // the lines are almost parallel
  155.             sN = 0.0; // force using point P0 on segment S1
  156.             sD = 1.0; // to prevent possible division by 0.0 later
  157.             tN = e;
  158.             tD = c;
  159.         } else {
  160.             // get the closest points on the infinite lines
  161.             sN = b * e - c * d;
  162.             tN = a * e - b * d;
  163.             if (sN < 0.0) {
  164.                 // sc < 0 => the s=0 edge is visible
  165.                 sN = 0.0;
  166.                 tN = e;
  167.                 tD = c;
  168.             } else if (sN > sD) {
  169.                 // sc > 1  => the s=1 edge is visible
  170.                 sN = sD;
  171.                 tN = e + b;
  172.                 tD = c;
  173.             }
  174.         }
  176.         if (tN < 0.0) {
  177.             // tc < 0 => the t=0 edge is visible
  178.             tN = 0.0;
  179.             // recompute sc for this edge
  180.             if (-d < 0.0) sN = 0.0;
  181.             else if (-d > a) sN = sD;
  182.             else {
  183.                 sN = -d;
  184.                 sD = a;
  185.             }
  186.         } else if (tN > tD) {
  187.             // tc > 1  => the t=1 edge is visible
  188.             tN = tD;
  189.             // recompute sc for this edge
  190.             if (-d + b < 0.0) sN = 0;
  191.             else if (-d + b > a) sN = sD;
  192.             else {
  193.                 sN = -d + b;
  194.                 sD = a;
  195.             }
  196.         }
  197.         // finally do the division to get sc and tc
  198.         let sc = Math.abs(sN) < Algorithm.EPSILON ? 0.0 : sN / sD;
  199.         let tc = Math.abs(tN) < Algorithm.EPSILON ? 0.0 : tN / tD;
  201.         // get the difference of the two closest points
  202.         let closest0 = Vec3.MemoryPool.alloc();
  203.         let closest1 = Vec3.MemoryPool.alloc();
  204.         Vec3.scaleAndAdd(closest0, vertex0, u, sc);
  205.         Vec3.scaleAndAdd(closest1, this._start, v, tc);
  207.         let sqrDistance = Vec3.sqrDist(closest0, closest1);
  208.         Vec3.MemoryPool.free(closest0);
  209.         Vec3.MemoryPool.free(closest1);
  211.         let intersection = undefined;
  212.         if (sqrDistance > this._threshold * this._threshold) {
  214.         } else {
  215.             //相交
  216.             intersection = new LineSegmentIntersection();
  217.             // intersection._i1 = index0;
  218.             // intersection._i2 = index1;
  219.             // intersection._r1 = 1.0 - tc;
  220.             // intersection._r2 = tc;
  221.             Vec3.copy(intersection._point, closest1);
  222.             intersection._ratio = tc;
  223.         }
  224.         Vec3.MemoryPool.free(u);
  225.         Vec3.MemoryPool.free(v);
  226.         Vec3.MemoryPool.free(w);
  227.         return intersection;
  228.     },
  229.     intersectTriangle: function (vertex0, vertex1, vertex2) {
  230.         let e2 = Vec3.MemoryPool.alloc();
  231.         Vec3.sub(e2, vertex2, vertex0);
  232.         let e1 = Vec3.MemoryPool.alloc();
  233.         Vec3.sub(e1, vertex1, vertex0);
  234.         let pvec = Vec3.MemoryPool.alloc();
  235.         Vec3.cross(pvec, this._direction, e2);
  237.         let intersection = undefined;
  238.         //线段与三角面点积
  239.         let det = Vec3.dot(pvec, e1);
  240.         //判断三角形所在的平面与线段是否平行，如果平行铁定不相交，面片没有厚度
  241.         if (Math.abs(det) < Algorithm.EPSILON) {
  242.             //return undefined;
  243.         }else{
  244.             let invDet = 1.0 / det;
  245.             let tvec = Vec3.MemoryPool.alloc();
  246.             Vec3.sub(tvec, this._start, vertex0);
  247.             let u = Vec3.dot(pvec, tvec) * invDet;
  248.             //三角面超出了线段两个点范围外面，铁定不相交
  249.             if (u < 0.0 || u > 1.0) {
  250.                 //return undefined;
  251.             }else{
  252.                 let qvec = Vec3.MemoryPool.alloc();
  253.                 Vec3.cross(qvec, tvec, e1);
  254.                 let v = Vec3.dot(qvec, this._direction) * invDet;
  255.                 //
  256.                 if (v < 0.0 || u + v > 1.0) {
  257.                     //return undefined;
  258.                 }else{
  259.                     let t = Vec3.dot(qvec, e2) * invDet;
  260.                     if (t < Algorithm.EPSILON || t > this._length) {
  261.                         //return undefined;
  262.                     }else{
  263.                         //相交
  264.                         intersection = new LineSegmentIntersection();
  266.                         //求相交点
  267.                         let r0 = 1.0 - u - v;
  268.                         let r1 = u;
  269.                         let r2 = v;
  270.                         let r = t * this._inverseLength;
  271.                         let interX = vertex0[0] * r0 + vertex1[0] * r1 + vertex2[0] * r2;
  272.                         let interY = vertex0[1] * r0 + vertex1[1] * r1 + vertex2[1] * r2;
  273.                         let interZ = vertex0[2] * r0 + vertex1[2] * r1 + vertex2[2] * r2;
  274.                         // intersection._i1 = index0;
  275.                         // intersection._i2 = index1;
  276.                         // intersection._i3 = index2;
  277.                         // intersection._r1 = r0;
  278.                         // intersection._r2 = r1;
  279.                         // intersection._r3 = r2;
  281.                         //这里的点没有经过变换，不是真实的世界坐标点
  282.                         Vec3.set(intersection._point, interX, interY, interZ);
  283.                         Vec3.transformMat4(intersection._point, intersection._point, this._transform);
  285.                         //求法向量，法向量未变换，如果有用途也要变换
  286.                         let normal = intersection._normal;
  287.                         Vec3.cross(normal, e1, e2);
  288.                         Vec3.normalize(normal, normal);
  289.                         //比例，在相交线段上的比例，不需要变换
  290.                         intersection._ratio = r;
  291.                      }
  292.                 }
  293.                 Vec3.MemoryPool.free(qvec);
  294.             }
  295.             Vec3.MemoryPool.free(tvec);
  296.         }
  297.         Vec3.MemoryPool.free(e1);
  298.         Vec3.MemoryPool.free(e2);
  299.         Vec3.MemoryPool.free(pvec);
  300.         return intersection;
  301.         // http://gamedev.stackexchange.com/questions/54505/negative-scale-in-matrix-4x4
  302.         // https://en.wikipedia.org/wiki/Determinant#Orientation_of_a_basis
  303.         // you can't exactly extract scale of a matrix but the determinant will tell you
  304.         // if the orientation is preserved
  305.         //intersection._backface = mat4.determinant(intersection._matrix) * det < 0;
  306.     },
  307.     intersectBoundingBox: function (box) {
  308.         return box.intersectLineSegment(this._orginStart, this._orginEnd);
  309.     },
  310. });
  312. module.exports = LineSegmentIntersector;
  315. // setDrawable: function (drawable) {
  316. //     this._geometry = drawable.getGeometry();
  317. //     this._vertices = this._geometry.getBufferArray('Vertex');
  318. //
  319. //     let matrix = drawable.getTransform();
  320. //     if (this._transform === matrix) {//如果与上次的一样，不再处理
  321. //         return;
  322. //     }
  323. //
  324. //     //如果不一样，需要计算新的起始点已经各种临时数据
  325. //     this._transform = matrix;
  326. //     Mat4.invert(this._matrix, matrix);
  327. //
  328. //     //根据矩阵计算新的临界值
  329. //     if (this._orginThreshold > 0.0) {
  330. //         let tmp = this._start;
  331. //         Mat4.getScale(tmp, this._matrix);
  332. //         let x = tmp[0];
  333. //         let y = tmp[1];
  334. //         let z = tmp[2];
  335. //         this._threshold = this._orginThreshold * (x > y ? (x > z ? x : z) : y > z ? y : z);
  336. //     }
  337. //     //根据矩阵计算新的起始点
  338. //     Vec3.transformMat4(this._start, this._orginStart, this._matrix);
  339. //     Vec3.transformMat4(this._end, this._orginEnd, this._matrix);
  340. //
  341. //     //根据新的起始点计算各种临时数据
  342. //     Vec3.sub(this._direction, this._end, this._start);
  343. //     this._length = Vec3.length(this._direction);//长度
  344. //     this._inverseLength = this._length <= Algorithm.EPSILON ? 1.0 / this._length : 0.0;
  345. //     Vec3.scale(this._direction, this._direction, this._inverseLength);//求单位向量
  346. // },
  347. // setGeometry: function (geometry, matrix) {
  348. //     Intersector.prototype.setGeometry.call(this, geometry, matrix);
  349. //
  350. //     //如果不一样，需要计算新的起始点已经各种临时数据
  351. //     Mat4.invert(this._matrix, matrix);
  352. //
  353. //     //根据矩阵计算新的临界值
  354. //     if (this._orginThreshold > 0.0) {
  355. //         let tmp = this._start;
  356. //         Mat4.getScale(tmp, this._matrix);
  357. //         let x = tmp[0];
  358. //         let y = tmp[1];
  359. //         let z = tmp[2];
  360. //         this._threshold = this._orginThreshold * (x > y ? (x > z ? x : z) : y > z ? y : z);
  361. //     }
  362. //     //根据矩阵计算新的起始点
  363. //     Vec3.transformMat4(this._start, this._orginStart, this._matrix);
  364. //     Vec3.transformMat4(this._end, this._orginEnd, this._matrix);
  365. //
  366. //     //根据新的起始点计算各种临时数据
  367. //     Vec3.sub(this._direction, this._end, this._start);
  368. //     this._length = Vec3.length(this._direction);//长度
  369. //     this._inverseLength = this._length <= Algorithm.EPSILON ? 1.0 / this._length : 0.0;
  370. //     Vec3.scale(this._direction, this._direction, this._inverseLength);//求单位向量
  371. // },
  372. // setGeometry: function (geometry) {
  373. //     //没有顶点数据不处理直接返回
  374. //     let vertexbuffer = geometry.getBufferArray('Vertex');
  375. //     if(!vertexbuffer) return;
  376. //
  377. //     //没有图元不处理直接返回
  378. //     let primitive = geometry.getPrimitive();
  379. //     if (primitive)
  380. //         primitive.operate(this);
  381. // },

　　以上的LineSegmentIntersector就是计算线段和平面交点的类，具体算法不再赘述，请自行参考《WebGL编程指南》。好了，我们接下来就看一个项目中的具体案例，请看下图

　　我们在pick事件中使用了LineSegmentIntersector对场景中的包围盒和坐标系模型进行了raycaster射线碰撞检测，结果我们得到了一系列的返回对象，其中包括包围盒的2个面，坐标系的一根坐标轴的geometry，这就另我们觉得难办了，鼠标射线碰到了不止一个模型，我们该怎么办呢，这里就要说明一下，一般我们都取离near近截面最近的一个模型作为我们pick选中的模型，因为其他模型都被处于前方的该模型遮挡住了。

　　好了，今天对raycaster的解释就结束了，只是初步了解一下，raycaster还有很多应用场景，这里和我们的鼠标拾取不相关的就不介绍了，谢谢大家阅读，欢迎大家一起留言探讨，再次感谢。转载本文请注明出处：https://www.cnblogs.com/ccentry/p/9973165.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

WebGL热门文章

  • WebGL学习之法线贴图
  • WebGL 与 WebGPU 比对[1] 前奏
  • WebGl 利用drawArrays、drawElements画三角形
  • WebGL之物体选择
  • WebGL模型拾取——射线法二
  • WebGL简易教程(十)：光照
  • WebGL学习之纹理盒
  • 纯Shading Language绘制HTML5时钟
  • WebGL简易教程(五)：图形变换(模型、视图、投影变换)
  • WebGL学习教程之Three.js学习笔记(第一篇)

    • WebGL推荐文章

  • 可视化学习：如何用WebGL绘制3D物体
  • webgl 系列 —— 渐变三角形
  • WebGL 与 WebGPU 比对[1] 前奏
  • WebGL简易教程(十二)：包围球与投影
  • WebGL简易教程(十一)：纹理
  • WebGL简易教程(十)：光照
  • WebGL简易教程(九)：综合实例：地形的绘制
  • 基于 HTML5 WebGL 的垃圾分类系统
  • WebGL简易教程(五)：图形变换(模型、视图、投影变换)
  • WebGL简易教程(六)：第一个三维示例(使用模型视图投影变换)

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号