WebGL中的各种坐标系

坐标系

viewport视口坐标系：视口的左下角为原点（0，0），水平向右为x轴正方向，垂直向上为y轴正方向。viewport可以看作是一块画布中进行绘图的区域。canvas标签的width，height属性为画布的宽高；style样式的width、height设置的是canvas这个标签的宽高）。

canvas标签可以理解为一个显示屏，style样式的width、height设置的是显示屏的宽高；webgl在绘制时，是在一个画布上进行绘制的，canvas标签的width，height属性为画布的宽高；viewport用于设置webgl在绘图时在画布上的哪个区域进行绘图。最后webgl渲染完成，将整个画布放在显示屏上显示。一般情况下设置canvas标签的width，height属性，style的width、height，viewport的width、height设置为一样。style的width、height设置大于canvas标签的width，height属性时，相当于显示屏的分辨率很大，但画布的像素很低，显示时相当于将画布放大，会出现模糊现象。

webgl画图坐标系：webgl默认的使用的是右手坐标系，x轴正方向向右,y轴正方向向上,z轴正方向朝向屏幕外。webgl坐标系是在viewport限定的绘图区域内，坐标系原点为绘图区域的中心。

图片坐标：图片左上角为原点（0，0），水平向右为x轴正方向，垂直向下为y轴正方向。

纹理坐标：左下角为原点（0，0），水平向右为x轴正方向，垂直向上为y轴正方向。

纹理坐标转换

当通过framebuffer渲染至纹理时，生成的图像就是按照正常渲染观察到的图像放置（注意是放置，不是进行转换）到纹理坐标系中。所以在设置顶点UV坐标时，按照像素点在纹理坐标系中的坐标作为UV坐标。

通过图片加载生成纹理时，因为图片的坐标系和纹理的坐标系不同，所以不能将图片直接放在纹理坐标系来取纹理坐标。生成纹理时是通过纹理坐标对应取图片上的像素，x轴未变，但y轴颠倒了，将图片坐标与纹理坐标对应时,即图片上一个(x,y）像素点放到纹理坐标系中的（x,y)点上，图片经过纹理加载，视觉上看纹理时，相当于图片发生了上下颠倒。单图片对应的像素点在图片坐标系的坐标与对应点在纹理坐标系中的坐标相同，所以写UV坐标时，我们直接按照顶点对应的像素点在图片坐标系中的坐标来作为UV坐标即可。一句话就是图片像素点在不同坐标系对应的坐标值一直没变。

所以在为顶点设置UV坐标时，都根据顶点对应源像素点在所在源坐标系的坐标来作为UV坐标。