WebGL学习笔记(五):变换库
变换运算
模型变换(顶点着色器阶段处理)
视图变换(顶点着色器阶段处理)
模型视图变换(顶点着色器阶段处理)

投影变换(顶点着色器阶段处理)
我们在这一步得到了物体在摄像机中看起来的最终坐标,但是和我们人眼可以看见的景象还是有所区别,比如我们看世界上的东西都是由一种近大远小的透视效果,投影变换就是用来实现这些效果的变换;
正交投影
正交投影,可以看做是一种平行投影,正交投影下的物体没有近大远小的视觉效果,无论远近看起来都是一样大的,该投影一般用在2D或2.5D(一般是3D角色2D场景)游戏中,3D游戏的UI实现也会用到该投影;
使用gl-matrix库创建正交投影代码如下:
var m4 = glMatrix.mat4.create();
// 通过设定每个面的大小确定投影区域
glMatrix.mat4.ortho(m4, -100, 100, -100, 100, -100, 100);
透视投影
透视投影,可以模拟人眼所看见的3D世界的近大远小的视觉效果,该投影一般用在3D游戏中;
使用gl-matrix库创建透视投影代码如下:
var m4 = glMatrix.mat4.create();
// 方法1:通过垂直范围、高宽比和近远面确定投影区域
glMatrix.mat4.perspective(m4, 1, 1, 0, 100);
// 方法2:通过设定每个面的大小确定投影区域
glMatrix.mat4.frustum(m4, -100, 100, -100, 100, -100, 100);
透视除法(图元装配阶段处理)
透视除法即使用w分量除以x,y,z分量(w默认值是1),产生三维的透视效果。
更多的信息可以参考:https://www.jianshu.com/p/7e701d7bfd79
视口变换(图元装配阶段处理)
视口变换主是将三维空间中的物体投影到二维的平面上,在计算机图形学中,它的定义是将经过几何变换,投影变换和裁剪变换后的物体显示于屏幕指定区域内。
用户可以通过调用两个方法来控制这个步骤的变换:
gl.viewPort
确定最终显示的位置和尺寸,单位为像素;
gl.depthRange
确定最终可以显示出来的深度区域,可选范围[0-1];
完整的变换管线(变换流水线)如下图所示
变换顺序的重要性

变换矩阵堆栈
入栈
出栈
- 压入桌子的矩阵;
- 用栈顶矩阵乘于桌面的矩阵,得到桌面位于全局坐标的矩阵;
- 压入桌面的矩阵,当桌面上需要绘制物体时,可以使用该栈顶矩阵乘于需要绘制的物体的矩阵;
- 桌面已经没有物体需要绘制了,弹出栈顶的矩阵(即桌面的矩阵);
- 此时栈顶的矩阵即桌子的矩阵,用栈顶的矩阵乘于第一个腿的矩阵,得到第一个腿的全局坐标的矩阵;
示例
WebGL学习笔记(五):变换库的更多相关文章
- webgl学习笔记五-纹理
写在前面 建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放 术语 : 纹理 :图像 图形装配区域 :顶点着色器顶点坐标 ...
- WebGL学习笔记五
本章主要是对纹理的进一步讲解,我们很多时候需要将现实中已有 的图片在网页中展示出来而不是去创造图片,通过纹理 我们可以将光栅化的图形和图片纹理形成映射并且将图片在图形 中显示出来.基本过程与前几章一致 ...
- CMake学习笔记五-依赖库添加
# # 项目名称 # SET(WIS_PROJECT_NAME EXAMPLE) # dependencies SET(DEPENDENCIES #依赖第三方库 ) #Qt模块 SET(QT_MODU ...
- muduo网络库学习笔记(五) 链接器Connector与监听器Acceptor
目录 muduo网络库学习笔记(五) 链接器Connector与监听器Acceptor Connector 系统函数connect 处理非阻塞connect的步骤: Connetor时序图 Accep ...
- openresty 学习笔记五:访问RabbitMQ消息队列
openresty 学习笔记五:访问RabbitMQ消息队列 之前通过比较选择,决定采用RabbitMQ这种消息队列来做中间件,目的舒缓是为了让整个架构的瓶颈环节.这里是做具体实施,用lua访问Rab ...
- C#可扩展编程之MEF学习笔记(五):MEF高级进阶
好久没有写博客了,今天抽空继续写MEF系列的文章.有园友提出这种系列的文章要做个目录,看起来方便,所以就抽空做了一个,放到每篇文章的最后. 前面四篇讲了MEF的基础知识,学完了前四篇,MEF中比较常用 ...
- (转)Qt Model/View 学习笔记 (五)——View 类
Qt Model/View 学习笔记 (五) View 类 概念 在model/view架构中,view从model中获得数据项然后显示给用户.数据显示的方式不必与model提供的表示方式相同,可以与 ...
- java之jvm学习笔记五(实践写自己的类装载器)
java之jvm学习笔记五(实践写自己的类装载器) 课程源码:http://download.csdn.net/detail/yfqnihao/4866501 前面第三和第四节我们一直在强调一句话,类 ...
- Learning ROS for Robotics Programming Second Edition学习笔记(五) indigo computer vision
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...
- Typescript 学习笔记五:类
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
随机推荐
- termux 为 python3 添加 numpy 库
1 本机环境 Termux v0.77 python3.8 2 配置步骤 2.1 安装 python 和 ipython apt updateapt upgradepkg install python ...
- Bash基础——快捷键
参考:The Best Keyboard Shortcuts for Bash (aka the Linux and macOS Terminal) Navigating Bash History w ...
- js 预解析以及变量的提升
js在执行之前会进行预解析. 什么叫预解析? 预:提前 解析:编译 预解析通俗的说:js在执行代码之前会读取js代码,会将变量声明提前. 变量声明包含什么?1.var 声明 2.函数的显示声明. 提前 ...
- sql语句的面试题
中科软的面试题:http://www.mayiwenku.com/p-5888480.html 中科软的面试题:https://blog.csdn.net/woolceo/article/detail ...
- vue 的computed 和 watch 两者的区别
computed是计算属性,依赖其他属性计算,并且computed的值有缓存,只有当计算值发生变化才会返回内容. computed 用来监控自己定义的变量,该变量不在data里面声明,直接在compu ...
- 堆内存腐败异常(STATUS_HEAP_CORRUPTION---0xC0000374)
什么是内存腐败 当堆内存位置的内容由于编程行为而被修改,超出了原始程序构造的意图时,计算机程序就会发生内存腐败,也可以叫内存破坏:这被称为违反内存安全.内存腐败的最可能原因是编程错误.当腐败的内存内容 ...
- pip崩了, 解决 ModuleNotFoundError: No module named 'pip'.
今天 在windows下用pip 安装数据库模块pymysql 把pip 弄崩了,直接出现下面的错误.都是红字, 再输入pip install pymysql ,会报错ModuleNotFound ...
- IDEA的foreach循环
试了试其他快捷键, 突然发现的... 先弄一个list 再把变量名写出来先 按快捷键 ctrl+alt+J, 选最后一个 看效果
- log4j 1.2 配置和使用简述
本文通过MetaWeblog自动发布,原文及更新链接:https://extendswind.top/posts/technical/log4j_properties_simple_introduct ...
- python学习笔记一: 《python3 input()函数》
一.在学习之前需要先了解: 1.Python3.x 中 input() 函数接受一个标准输入数据,返回为 string 类型,即把任何输入看作str. 2.input可以用作文本输入,如用户名,密码框 ...