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

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

webGL入门知识

  • 浏览器支持html5之后,可以创建canvas,并调用js进行二维图形的绘制。
  • 要使用webGL绘制图形,必须使用着色器。着色器是webGL的核心机制。
  • drawArrays函数说明:
  • webGL第五课——屏幕坐标转到webGL坐标_第1张图片

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

依据平面坐标系转换公式进行坐标转换
 x=(xx0)cosθ(yy0)sinθ
 y=(xx0)sinθ+(yy0)cosθ

 x0,y0;θ;x,y

  1. 首先将屏幕上的点P转换到cavans坐标系下。  x=(xa);y=(yb),(a,b)canvas
  2. 将P点转换到webGL坐标系中。
    • webGL坐标系相对于canvas坐标系y轴方向相反。
    • webGL坐标系原点在原来canvas坐标系中的坐标为(w/2,h/2)。
       x′′=(xw/2)=xaw/2y′′=1(yh/2)=h/2y=h/2y+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(xaw/2)/w

    y=2(h/2+by)/h

    x,yx,ywebGL

    webGL第五课——屏幕坐标转到webGL坐标_第2张图片

你可能感兴趣的:(webGL)