WebGL屏幕坐标系、canvas坐标系和WebGL坐标系转换——学习笔记

canvas坐标系转为webgl坐标系，webgl的坐标是x[-1, 1]，y[-1, 1]。

①获取canvas在浏览器客户区中的坐标

var x = ev.clientX;
var y = ev.client.Y;
var rect = ev.target.getBoundingClientRect();

图中的P点（x,y）为该点在屏幕坐标系下的坐标值；
图中canvas原点在屏幕坐标系下的坐标值为（a,b），即canvas在屏幕上左上角的位置坐标；
其中(a,b)坐标中：

  a = rect.left;
  b = rect.top;

此时求P点在canvas坐标系下的坐标，即将屏幕上的点P转换到cavans坐标系下：

  x' = x-a = x - rect.left;
  y' = y-b = y - rect.top;

(x - rect.left,y - rect.top)坐标为P点在canvas坐标系下的坐标值；

②将canvas坐标转换到webgl坐标系下

1.首先我们通过图片可知，canvas坐标系的Y轴和webgl的坐标系的Y轴方向是相反的，即在后面的转换过程中，y坐标值要进行取反操作。
2.通过代码我们可以获取canvas画布的宽和高：
width = canvas.width;
height = canvas.height;
则webgl原点在canvas坐标系中的位置（即canvas的中心点位置）坐标我们可以直接获得为（width/2,height/2）;

现在我们所得到的数据有：

1. P点在canvas坐标系下的坐标值:（x’,y’）->(x - rect.left,y - rect.top)
2. canvas的中心点在canvas坐标系下的坐标值：(width/2,height/2)

下一步，我们将canvas的原点平移到中心点（WebGL坐标系统的原点位于此处）
此时将canvas原点平移到中心点时，P点的坐标应该变为：

x'' = x'-width/2
y'' = y'-height/2

为了使得canvas平移后坐标系与WebGL坐标系完全一致，还需要对平移后的Y轴进行取反操作，即

y'' = -1(y'-height/2)

此时的
（x'',y''）= (x'-width/2,height/2-y')) = ((x - rect.left)-width/2,height/2-(y - rect.top))
在对canvas坐标系进行平移、Y轴取反的操作后（此时的canvas坐标系与webgl坐标系原点位置和xy轴方向完全一致)。由于webgl坐标系的坐标区间为-1.0到1.0，所以最后一步我们将x’‘坐标除以width/2，将y’‘坐标除以height/2，将canvas坐标映射到webgl坐标。
即P点坐标（x,y）最终转换后的坐标为（x’’/(width/2),y’’/(height/2)） =( ((x - rect.left)-width/2)/(width/2),(height/2-(y - rect.top))/(height/2))
对应结果：

x'' = ((x - rect.left)-width/2)/(width/2) = ((x - rect.left)-canvas.width/2)/(canvas.width/2)
y'' = (height/2-(y - rect.top))/(height/2) = (canvas.height/2-(y - rect.top))/(canvas.height/2)