WebGL 纹理图像Y轴翻转理解

学习《WebGL编程指南》，对纹理图像进行Y轴翻转

gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);   

不是很理解————为啥需要对Y轴进行翻转？
 

下面写出我的思考：

一、3个坐标系：

WebGL纹理映射中，有3个坐标系：

webgl坐标系<————>纹理坐标系<————>图片坐标系

双向箭头“<————>”之间需要有映射关系

a、webgl坐标系和纹理坐标系之间的映射关系

b、纹理坐标系和图片坐标系之间的映射在书中没有讲

二、纹理坐标系与图片坐标系之间的映射关系：

因为这本书中没讲，下面的内容带有主观猜测的成分

1、没有直接使用图片坐标系去和webgl坐标系进行映射

可能是担心不同图片的坐标系有可能不同

所以提出了纹理坐标系这个概念，来屏蔽掉图片坐标系的差异

2、图片坐标系与纹理坐标系的映射关系的定义（自己给的不准确定义）

已知要进行映射操作的图片的宽度为width，高度为height

假设图片坐标系中有一点（x,y）

对应于纹理坐标系中的坐标为(s,t)

2个坐标之间满足：

s=x/width

t=y/height

上述定义为了追求严谨，表述的比较“数学化”，不形象和直观。

3、结论

根据上述映射关系的定义，一个图片从“图片坐标系”映射到“纹理坐标系”后

图片会倒立，再进行后续映射的时候，不是很方便

所以最好先让图片在图片坐标系中倒立一下

而gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);   就是起这个作用。