WebGL坐标系—投影

最新推荐文章于 2023-11-08 17:16:16 发布

Threejs可视化

最新推荐文章于 2023-11-08 17:16:16 发布

阅读量1.3k

点赞数

分类专栏： WebGL

本文链接：https://blog.csdn.net/u014291990/article/details/103219442

版权

WebGL 专栏收录该内容

40 篇文章 47 订阅

订阅专栏

WebGL坐标系—投影

本文是WebGL电子书的1.3节内容

完成1.1节和1.2节案例后，想必你已经迫切希望呈现出三维的效果，不过在实现三维效果之前，本节课预先进行三维坐标系的讲解。

在这里插入图片描述
在xyz轴上分别设置一个顶点，三个顶点确定一个三角形，然后通过WebGL渲染出来，本节课的目的就是通过这样一个案例让你建立WebGL三维坐标系和投影两个概念。本节课的渲染效果并不是上图所表达的效果，上图只是给你展示下三个顶点如何构成了一个三角形区域。

源码中通过下面代码定义了三角形的三个顶点坐标。

//9个元素构建三个顶点的xyz坐标值
// 数组里9个元素，每间隔3个为一组，分别代表xyz轴上的坐标值
var data=new Float32Array([
    0.0, 0.0, 1.0,//三角形顶点1坐标
    0.0, 1.0, 0.0,//三角形顶点2坐标
    1.0, 0.0, 0.0//三角形顶点3坐标
]);

体验测试

用你的浏览器打开本节课的案例源码测试，你可以看一个直角三角形，准确地说你所看到的图像是三维空间中一个等边三角形平面的投影，等边三角形平面的三个顶点分别xyz轴上，说明投影的方向是其中的一个坐标轴所在的方向，才能呈现出直角三角形这种效果。

在这里插入图片描述
节选自：《画法几何学》(大连理工教研室编)

尝试把三角形第一个顶点中的数值1.0(代码47行)，也就是z轴坐标更改为0.5，查看屏幕canvas画布渲染的三角形是否有变化，若无变化，说明投影方向默认的是z轴，也就是说z轴是WebGL系统默认的观察三维模型的视线方向，也就是说顶点的投影方向。
尝试把三角形顶点2和顶点3坐标中1.0，更改为0.5，观察变化，回到数值初始状态，再把其中的一个1.0更改为2.0，观察变化。可以看到超出1.0范围的顶点，不会在图形区域显示出来，这就为以后显示大场景提供了基础，通过控制点坐标值的大小就可以控制是否在场景中显示出来，超出范围的顶点对应像素会被剪裁掉。
你可尝试把三角形顶点2坐标的y值1.0更改为-1.0，把顶点3行坐标的x值1.0更改为-1.0，你可以看到三角形显示在左下角，可以看出WebGL坐标系-1.0~1.0区间对应的是canvas画布的四个边界线。
你可以尝试把三角形三个顶点的z坐标值都设定为-1.0~1.0之外的数值，比如都更改为2.0，刷新浏览器你会发现Canvas画布上没有任何三角形渲染效果，如果你更改其中一个顶点的z坐标为2.0，你会发现显示部分，其实这是因为顶点光栅化后，WebGL系统会把Z轴方向处在-1.0~1.0区域之外片元像素剪裁掉。这也就说明顶点光栅化之后得到的片元，只要不在xyz三个方向-1.0~1.0范围构成的立方体空间中，就会被剪裁掉。

总结

在这里插入图片描述

canvas画布宽高采用的是像素值定义，以显示器为准，WebGL中顶点坐标的表示方法采用的是相对坐标，相对于canvas而言
WebGL坐标系统，X轴水平向右，也就是canvas画布的width表示的宽度方向，x等于-1表示canvas画布的左边界，x等于1表示canvas画布的右边界，x等于0对应的是画布宽度方向的中间。
WebGL坐标系统，Y轴竖直向上，也就是canvas画布的height表示的高度方向，y等于-1表示canvas画布的下边界，y等于1表示canvas画布的上边界，y等于0对应的是画布高度方向的中间。
WebGL坐标系统，Z轴垂直canvas画布朝外，Z值-1和1是Z方向的极限值，GPU成像默认的沿着Z轴投影，你也可以抽象出一个概念，人眼睛位于z轴上，沿着z轴方向去观察物体，如果你在其他的书上看到视图坐标系等其它各类坐标系都是抽象出的概念都是建立在本节课所说的WebGL 坐标系统之上，例如无人机导航中的所说的机体坐标系、地球坐标系都是直接对现实中事物的描述，三维场景中的各类坐标系与无人机中坐标系没什么区别，但是要显示在屏幕上，就要经过一些处理，这里不再详述，后面的教程后为大家引入各类坐标系概念，正射投影和透射投影概念。

代码执行流程简述

本节课代码的执行流程与1.2案例代码基本一样，区别就是顶点数组不一样，WebGL APIgl.vertexAttribPointer()第二参数不一样，1.2节例子是四个顶点，定义了每个顶点的x、y值，z值默认缺省设置为1.0，本案例中定义的是三个点，每个点都定义了xyz坐标值，类型数组就像一个仓库，存储了大量数据，如何按照一定的规律从库中取出数据，WebGL定义了一个API就是gl.vertexAttribPointer()方法，该方法的第2、5、6参数描述的就是如何取出，比如从哪个数据开始取出每几个数据为一组，间隔几个数据，暂时不用关心，后面用到自然明白，根据这两节课的学习，你至少知道第二参数定义的是几个数字为一组表示一个顶点的坐标。