图形渲染

图形学的作用

作用：做CG, 做动画, 做仿真

主流的两种方法

• 实时渲染 → 追求 实时性, 效率

  • 游戏这种

• 离线渲染 → 追求 真实性, 质量

  • 影视特效
  • 三维动画

实时渲染的流程

三维物体的表示

有三种表示方式:

• 在自己的坐标系中
  • 比如 一个立方体，以个顶点定为x，剩下所有的点都可以算出来（相对x）
  • 类似 iOS 中视图的 bounds 本地坐标系
• 在世界中的坐标系中
• 在投影平面中
  • (视像头/照片, 人眼, 屏幕)视角

如何算出在平面上的投影坐标:

• 一个三维点经过自己的坐标的转换,
• 再经过世界坐标的转换,
• 再经过投影坐标的转换,
• 最后得到二维平面上投影坐标的点;

操作如下:

1. 在世界坐标系中, 将物体的形变(rotation, translation, scale, skew)累乘起来, 得到矩阵1
2. 通过一些视角参数(3个顶点), 确定一个视角坐标系, 即视图矩阵
3. 通过投影参数, 得到一个投影矩阵
4. 矩阵1 * 视图矩阵 * 投影矩阵, 得到转换矩阵
5. 物体在自己坐标系的每个点, 换算成在世界坐标系中对应的坐标, 再应用转换矩阵得到在二维平面的点

三维物体在屏幕上显示的整个流程

1. 显示三维物体需要: 顶点数据 和 贴图
2. 每个顶点数据对应贴图一个二维坐标, 顶点通过贴图可以拿到颜色;
3. 顶点数据中, 每三个顶点确定一个小三角形, 把三维模型看作是一堆小三角形;
4. 每个小三角形应用 光照, 阴影等滤镜效果得到新的小三角形;
5. 把每一个新的小三角形投影到二维平面, 然后绘制平面上的三角形, 得到三维模型的投影;

光照

@Td

贴图

@Td

可编程管线

可编程管线 着色器 pipeline
可理解为：GPU汇编

作用：
- vertext shader: 顶点 → 时空扭曲
- fragment shader(pixel shader): 对每个像素做处理

主流技术：

• OpenGL
  • 显卡驱动提供 OpenGL api
• OpenGL ES
  • 阉割版, 用在手机上
• WebGL
  • 把 OpenGL ES 放在浏览器上
  • Next-generation 3D Graphics on the Web
• DirectX
  • 与 OpenGL 竞争的东西

动画

@Td