webGL第五课——屏幕坐标转到webGL坐标

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/lzwdlut/article/details/52243009

看到第四课，发现好多知识需要了解，所以应该进行系统性顺序性的学习了.参考《webGL编程指南》

webGL入门知识

• 浏览器支持html5之后，可以创建canvas,并调用js进行二维图形的绘制。
• 要使用webGL绘制图形，必须使用着色器。着色器是webGL的核心机制。
• drawArrays函数说明：
• 

屏幕上点转换成webGL坐标系中的点,参照下图所示

依据平面坐标系转换公式进行坐标转换
$\ x' =(x-x_0)\cos\theta -(y-y_0)\sin\theta$
$\ y'=(x-x_0)\sin\theta+(y-y_0)\cos\theta$

$\ 其中，x_0,y_0表示新坐标系原点在原坐标系原点;\theta表示坐标系转角;x',y'表示新坐标系中的坐标$

1. 首先将屏幕上的点P转换到cavans坐标系下。$\ x'=(x-a); y'=(y-b),(a,b)为canvas在屏幕上左上角位置$
2. 将P点转换到webGL坐标系中。
   
   • webGL坐标系相对于canvas坐标系y轴方向相反。
   • webGL坐标系原点在原来canvas坐标系中的坐标为(w/2,h/2)。
     $\ x'' =(x'-w/2)=x-a-w/2； y'' =-1*(y'-h/2)=h/2-y'=h/2-y+b$
3. 因为canvas坐标系的范围为x(0,w),y(0,h);webGL坐标系范围为x(-1,1),y(-1,1)。需要进行缩放操作，将原坐标系数据缩放到webGL尺度下。
   $\ x'/2=x/w; y'/2 = y/h; 即， x'=2x/w;y'=2y/h;$
4. 最终，屏幕点P在webGL坐标系中的坐标为
   $$x'=2*(x-a-w/2)/w$$
   $$y'=2*(h/2+b-y)/h$$
   $$其中，x,y为屏幕坐标系中点坐标；x',y'为webGL坐标系中点的坐标；$$