html视点坐标系csdn,webgl--坐标轴

一、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