卜若的代码笔记-webgl系列-第二十五章：glsl的应用(五)>glsl的坐标系的补充及上一章的完善

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;

}

这个原理你们可以参考之前的章节，有详细介绍