webGL第五课——屏幕坐标转到webGL坐标
来源:互联网 发布:gif缩小软件 编辑:程序博客网 时间:2024/06/11 05:36
看到第四课,发现好多知识需要了解,所以应该进行系统性顺序性的学习了.参考《webGL编程指南》
webGL入门知识
- 浏览器支持html5之后,可以创建canvas,并调用js进行二维图形的绘制。
- 要使用webGL绘制图形,必须使用着色器。着色器是webGL的核心机制。
- drawArrays函数说明:
屏幕上点转换成webGL坐标系中的点,参照下图所示
依据平面坐标系转换公式进行坐标转换
- 首先将屏幕上的点P转换到cavans坐标系下。
x′=(x−a);y′=(y−b),(a,b)为canvas在屏幕上左上角位置 - 将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
- 因为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; - 最终,屏幕点P在webGL坐标系中的坐标为
x′=2∗(x−a−w/2)/w y′=2∗(h/2+b−y)/h 其中,x,y为屏幕坐标系中点坐标;x′,y′为webGL坐标系中点的坐标;
0 0
- webGL第五课——屏幕坐标转到webGL坐标
- webGL第六课——二维平面真实坐标到webGL坐标转换
- 一、WebGL屏幕坐标转世界坐标
- 【WebGL】WebGL的坐标系统
- 06 WebGL的坐标系统
- WebGL笔记_三维坐标变换(一)
- [WebGL入门]十三,minMatrix.js和坐标变换矩阵
- 七、WebGL入门,正交投影,坐标变换初探
- 38 WebGL针对单独的顶点坐标绘制组成模型
- webgl——VAO
- WebGL
- WebGL
- WebGL
- webGL
- WebGL
- 世界坐标转到UGUI坐标
- 世界坐标转到UGUI坐标
- 逻辑坐标与设备坐标——全窗口坐标、屏幕坐标、客户区坐标的总结
- NYOJ 47 贪心问题
- 131 Palindrome Partitioning(dp+dfs)
- TCP/IP分层模型
- 图的深度遍历
- android studio在引入环信EaseUI库出错
- webGL第五课——屏幕坐标转到webGL坐标
- 并发容器之CopyOnWriteArrayList
- 网易有道笔试编程之队列构造
- Codeforces Round #333 (Div. 2)
- 测试之apache batch (简称ab测试)
- spring学习笔记(基础篇)
- NYOJ 650
- centos安装jdk8,安装IntelliJ Idea
- C#委托的学习