一、WebGL屏幕坐标转世界坐标

本文记录了研究WebGL三维地图引擎时学到的知识,涉及WebGL坐标转换的过程,包括局部坐标、世界坐标、观察坐标等。当需要找到屏幕坐标对应的世界坐标时,可以通过一系列数学运算实现,主要包括屏幕坐标到标准化设备坐标、加入Z值以及与相机逆矩阵相乘的步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近在研究一位大神用webgl写的三维地图引擎,在研究源码的过程中学到了很多以前没注意到的东西,特地在此记录一番
平常WebGL渲染的时候,如果顺过来看的话,坐标转换会经过如下几个过程
局部坐标=>世界坐标=>观察坐标=>裁剪坐标=>标准设备坐标=>屏幕坐标
就是我们平常说的MVP矩阵,对于这些细节如果还不清楚的话,可以看看的这篇文章,讲的很清楚
这里就不多说了,如果哪天需要知道“当前鼠标电机的那个点,对应的三维坐标是多少干怎么办呢?”也就是说当前屏幕坐标所对应的世界坐标是多少?
这里我们需要将这个过程反过来:
当我们鼠标点击这个屏幕时,通过JavaScript获取到的当前坐标为:event.clientXevent.clientY,这个是屏幕坐标,之后我们需要将它转换为标准化设备坐标,此时X,Y坐标都需要映射到(-1,1)的范围内,此时的公式为:

_mouse.x = ( event.clientX / _domElement.width ) * 2 - 1;
_mouse.y = - ( event
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值