1 webgl坐标系:
2 屏幕坐标坐标系
3 视口坐标系
投影坐标,也就是需要算上摄像机的深度,也就是z轴,因为摄像机是透视的,当它里焦点越远时,可以 看到的区域就越宽广,而这个区域是可以计算的:
并且,这个坐标系是和webgl坐标系平行的
比如,camera的深度 = 20的情况下的坐标系分布:
4 shader的逐像素坐标(操作的像素点对应的坐标)
配套的Buffer顶点:
5 有了以上的坐标系理论之后,我们就可以通过变换的方式去使光标跟踪更加完善!
我们来看一下效果:
这里总结一下屏幕坐标和webgl坐标的转换:
function screen2WebglCoordinate(ev,width,height) {
var _mouse = {};
_mouse.x = ( ev.clientX / width) * 2 - 1;
_mouse.y = -( ev.clientY /height ) * 2 + 1;
return _mouse;
}
webgl坐标到视口坐标的转换(垂直世界坐标的转换):
function screenConvertToWorld(mouseInput) {
//摄像机深度
var depth = opView.camera.position.z;
var clipScreenWidth = (depth/Cos(45/2))*Sin(45/2);
var a = Vector3(mouseInput.x*clipScreenWidth,mouseInput.y*clipScreenWidth,0);
//2*PI/360*角度
return a;
}
这个原理你们可以参考之前的章节,有详细介绍