一、webgl六大坐标系
1. Object or model coordinates(物体或模型坐标系)
2. World coordinates(世界坐标系)
3. Eye (or Camera) coordinates(眼(或相机)坐标系)
4. Clip coordinates(裁剪坐标系)
5. Normalized device coordinates(标准设备坐标系)
6. Window (or screen) coordinates(屏幕坐标系)
我们要在屏幕上看到一个物体一般要经过以下几个步骤:物体的坐标从object coordainates到world coordinates再到camera coordinate的变换,在OPENGL中统一称为model-view转换,眼坐标通过乘以GL_PROJECTION变成了裁剪坐标,再除以w,即透视除法,变到NDC,NDC坐标通过平移和缩放来适应渲染的屏幕,屏幕坐标最终传递给绘制流水线中的光栅化处理部分来变成片元,初始化的时候,object coordinates和world coordinates还有camera coordinates坐标重合在原点,变换矩阵都为Identity。
二、常要在程序中用到的四种坐标
世界坐标,物体坐标,设备坐标和眼坐标。
1、世界坐标:是OpenGL中用来描述场景的坐标,Z+轴垂直屏幕向外,X+从左到右,Y+轴从下到上,是右手笛卡尔坐标系统。我们用这个坐标系来描述物体及光源的位置。
WebGL的世界坐标系是右手坐标系,原点在屏幕中心:
而我们的屏幕的坐标系是原点在左上角,X轴水平向右,Y轴向下:
2、物体坐标:是以物体某一点为原点而建立的“世界坐标”,该坐标系仅对该物体适用,用来简化对物体各部分坐标的描述。物体放到场景中时,各部分经历的坐标变换相同,相对位置不变,所以可视为一个整体,与人类的思维习惯一致。
3、眼坐标是以视点为原点,以视线的方向为Z+轴正方向的坐标系中的方向。OpenGL管道会将世界坐标先变换到眼坐标,然后进行裁剪,只有在视线范围(视见体)之内的场景才会进入下一阶段的计算。
4、设备坐标:OpenGL 的重要功能之一就是将三维的世界坐标经过变换、投影等计算,最终算出它在显示设备上对应的位置,这个位置就称为设备坐标。在屏幕、打印机等设备上的坐标是二维坐标。
三、webgl--正交投影
我现在想把坐标系在为世界坐标系的物体投影到屏幕坐标系下,这个时候可以用正交投影,即使物体顶点坐标乘上正交投影矩阵,我们引入一个工具包来计算正交投影矩阵:glMatrix-0.9.6.min.js
1、在shader里面定义一个mat4变量来存储这个矩阵
uniform mat4 proj;void main(void){gl_Position = proj*vec4(v3Position.x+anim,v3Position.y,v3Position.z,1.0);}
2、定义一个变量来存储这个矩阵,定义一个变量给shader里面的proj传值
//投影矩阵,mat在工具包内定义的var projectMat = mat4.create();//projectMat索引var uniformProj = 0;
3、用ortho()计算该矩阵,参数分别为left,right,bottom,top,near,far,proj,即视景体为一长方体
//求正交投影矩阵mat4.ortho(0,canvas.clientWidth,canvas.clientHeight,0,-1.0,1.0,projectMat);//获取shader 中 proj 索引uniformProj = webgl.getUniformLocation(programObject,"proj");//在renderScene()里面,给shader里面的proj传值webgl.uniformMatrix4fv(uniformProj,false,projectMat);
4、最后不要忘记,此时绘制物体的坐标要以屏幕像素大小为准,若还是像前面一样在[-1,1]之间的话,经过投影后将会很小(不到一个像素点)而看不到。
var jsArrayData =[//x y z r g b a-0.0, +0.0, 0.0, 1.0, 0.0, 0.0, 1.0,100, +0.0, 0.0, 0.0, 1.0, 0.0, 1.0,100, +100, 0.0, 0.0, 0.0, 1.0, 1.0,-0.0, +100, 0.0, 1.0, 1.0, 0.0, 1.0,];
注意的是,上面的坐标还是以坐标原点在屏幕中心,X轴向右,Y轴向上,Z轴向外,但是与正交变换矩阵相乘后变成了屏幕坐标系:原点在左上角,X轴水平向右,Y轴向下
最后结果:
学习内容来源于:
https://blog.csdn.net/a23366192007/article/details/50838568