您现在的位置:首页 >> 前端 >> 内容

WebGL屏幕坐标转世界坐标

时间:2017/3/18 9:29:00 点击:

  核心提示:WebGL屏幕坐标转世界坐标:最近在研究一位大神用webgl写的三维地图引擎,在研究源码的过程中学到了很多以前没注意到的东西,特地在此记录一番平常WebGL渲染的时候,如果顺过来看的话,坐标转换会经过...

WebGL屏幕坐标转世界坐标:最近在研究一位大神用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矩阵的逆矩阵相乘即可。

Tags:WE EB BG GL 
作者:网络 来源:qq_3062109
  • 上一篇:AJAX概念
  • 下一篇:页面客户端交互