最近在研究一位大神用webgl写的三维地图引擎，在研究源码的过程中学到了很多以前没注意到的东西，特地在此记录一番
平常WebGL渲染的时候，如果顺过来看的话，坐标转换会经过如下几个过程
局部坐标=>世界坐标=>观察坐标=>裁剪坐标=>标准设备坐标=>屏幕坐标
就是我们平常说的MVP矩阵，对于这些细节如果还不清楚的话，可以看看的这篇文章，讲的很清楚
这里就不多说了，如果哪天需要知道“当前鼠标电机的那个点，对应的三维坐标是多少干怎么办呢？”也就是说当前屏幕坐标所对应的世界坐标是多少？
这里我们需要将这个过程反过来：
当我们鼠标点击这个屏幕时，通过JavaScript获取到的当前坐标为：event.clientX和event.clientY，这个是屏幕坐标，之后我们需要将它转换为标准化设备坐标，此时X，Y坐标都需要映射到（-1，1）的范围内，此时的公式为：
_mouse.x = ( event.clientX / _domElement.width ) * 2 - 1;
_mouse.y = - ( event.clientY / _domElement.height ) * 2 + 1;之后，三维中的顶点坐标数据都是需要有“深度”的，也就是Z值，这个我们可以认为的加一个Z，比如0.5.（当然，你也可以使用WebGL提供的函数GLReadPixels）
之后将这个坐标（标准化设备坐标NDC）转换为齐次坐标，之后与相机的MP矩阵的逆矩阵相乘即可
来源：CSDN
作者：pengpai123
链接：https://blog.csdn.net/qq_30621091/article/details/61205645