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

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

webGL入门知识

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

屏幕上点转换成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

    这里写图片描述
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

技道两进

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值