图形学

DevLGQ

ComputerBasicsGraphics

发布于：2019年9月27日

次浏览

字数：2.8k字

时长：10分钟

图形学

研究表达的科学. 利用计算机生成图像的科学–主要研究图形的表示, 生成处理和显示.

1984年, 4k显示器出现.

1995, 可编程着色器.

1996, 法线贴图(Normal Mapping) – 提升低精度模型的显示效果.

1999, Nvidia, Geforce 256; 1995 DirectX 1.0; 1997 OpenGL 1.1.

GPU: 显示处理单元.

Shader language: GLSL

向量

图形渲染引擎使用左手系.

向量, 用来描述的, 而不是真实存在的.

向量的长度通常读作向量的模

圆

使用弧度来描述角度.

1radian = 180°/Π

极坐标系, 由极点(pole)和射线(ray)组成的坐标系. 用角度/射线长度描述点.

向量的点乘和叉乘

叉积

叉积几何意义

行列式求值

三维叉积的意义

向量叉积指向向量a和b的垂直方向
值等于a和b形成的平行四边形面积
a, b和c的叉积是a, b, c形成的平行六面体体积

向量点积

矩形的乘法

矩阵的加减法

矩阵的转置

矩阵的乘法

一个 m*n 的矩阵乘以一个 n*q 的矩阵, 可以得到一个 m*q 的矩阵.

注意观察规律.

对角线都是1的矩阵叫做单位矩阵.

单位矩阵乘以任何矩阵都保持该矩阵的值不变.

矩阵相乘不满足交换律, AB!=BA

满足分配律和结合律.

矩阵乘法的意义

揭示了线性变换的本质.
点P和矩阵M的乘积PxM是点P的一种线性变换(把空间的点映射到另外一个点).

例如: 把一个正方形映射成一个平行四边形.

矩阵的逆(Invese)

向量叉积的行列式表示

三角形网格

一种由顶点(vertex)集合和索引(index)集合描述(那三个点形成一个面)图形的方法.

为什么使用三角形?

三个点可以确定一个平面, 而且共面.
唯一(三个点确定一个三角形); 效率高, 方便描述
数学模型更加简单(判断投影是否在三角形内)

球面网格绘制

渲染图形–从顶点到视区

顶点: 在3D世界顶点通常用一个坐标表示.

显示的时候把三角形放在屏幕上就变形了

图形本质式生活在3d空间的, 3d坐标系的原点本质上可以随便指定, x,y和z轴的方向, 也可以随便指定–因为这是一个虚拟世界.

在虚拟世界中增加一只眼睛, 眼睛位置不同看到就不同.

表示物体的坐标系叫做世界坐标系.
眼睛所在的位置会形成相对于眼睛的坐标系, 叫做观察坐标系.
显示到屏幕上的内容叫做视口坐标系.
固一个顶点至少要经过两次变换.

WebGL

Web Graphics Library
浏览器端2d/3d渲染引擎
OpenGL ES标准(OpenGL的轻量级标准)

HTML & Canvas

Canvas是Html的一种元素, canvas是基于WebGL工作的.

应用

微信小程序
浏览器(建造养成类), 医疗辅助, VR等
桌面应用(Electron)

绘制2D图形

用三角形描述一个”F”. 用6个三角形, 也就是18个顶点, 但是会有重叠, 实际顶点数会少点.

顶点网格–Mesh

Model层设计

模型是对世界物体的一种抽象.

WebGL 图形渲染管道

图形渲染管道–Graphics Pipeline. 管道关注的是数据的流转, 数据的变换以及数据的处理.

绘制三维图形需要一系列的步骤, 把这些抽象成渲染管道(流水线)

Vertex Shader : 顶点着色器. 相当于挖了出来, 这种设计叫做IOC, 这部分交给程序员处理.

使用一门新的语言, 是因为在这个计算过程中, 有很多这些通用的计算能力, 而这些计算能力需要抽象封装.

经过顶点着色器, 顶点的坐标也就计算完成了, 也直到哪几个点组成三角形的, 下一个阶段就会进入图元组装(Primitives Assembly).

图元组装就是把这些数据转换成 WebGL 理解的图形描述.

栅格化: 把这些三角形如何映射到像素点. 每一个像素叫做 Fragment.

Fragment Shader: 这个操作也是 IOC, 可以让开发者来进行编程上色. 这个也要用一门新的语言. 主要是为了提升效率, 利用显卡的资源. 显卡的 ALU 很多, 并行计算很快.

开发者的程序进行完之后, WebGL 就进行 Fragment Operation (着色操作).

形成 Frame Buffer(帧缓冲区). 在内存里, 它可以驱动显示器工作. 每个颜色需要4个数字, 然后分辨率 x 4 字节.

GPU 之后就会读取进行处理.

顶点着色器

图元组装

栅格化

Cull: 选择去掉一些图元
Clip: 剪裁去掉图元的某些部分

片段着色器

计算图元每个像素的颜色

着色操作–深度探测

遍历所有图元中的像素, 计算深度
如果存在深度更小的(离用户更近的点), 可以采取一些措施

帧缓冲区

存储发送位图给显示器

Buffer 管理

通过 Buffer 传递数据给 GLSL.

传递方式

Uniforms 直接传递, 可以传矩阵, 向量.
Attributes 通过 Buffer. 顶点属性, 包括位置, 颜色等.

传递向量到着色器

gl.uniform[1234][uif][v](location, data)
- ui: unsigned integer
- i: integer
- f: float
- location: 变量位置
- data: 与维度要一致, 如果是2就是2个变量的数组.
例如: gl.uniform2fv(location, data)

传递矩阵到着色器

gl.uniformMatrix[234]x[234]fv(location, false, data)
- false : 目前是写死的, 预留的 api. 代表这个矩阵要不要转置.
例子
- gl.uniformMatrix2fv(location, false, data)
- gl.uniformMatrix2x3fv(location, false, data)
- gl.uniformMatrix3fv(location, false, data)

Buffer 缓冲区

分配的一块内存空间
WebGL 中用于存储数据
类型
- Vertex Buffer, 顶点缓冲区
- Index Buffer, 对顶点进行索引
- Frame Buffer, 帧缓冲区, 驱动显示器工作

缓冲区相关操作

gl.createBuffer()
gl.bindBuffer(target, buffer)
gl.bufferData(target, data, usage)

target/usage 参数

target, 描述buffer被绑定到哪里
- gl.ARRAY_BUFFER, 顶点属性
- gl.ELEMENT_ARRAY_BUFFER, 索引
usage, 提示 webgl 数据将如何使用
- gl.STATIC_DRAW, 数据通常不会发生变化
- gl.DYNAMIC_DRAW, 动态数据

绘制3D图形

顶点

6个面, 每个面4个点.

索引

透视矩阵

人的感觉是近大远小的, 两线相交的点叫灭点.

GLSL

OpenGL 着色器语言(OpenGL Shading Language)
让开发者可以对渲染过程拥有更多的控制

两个IOC留给了开发者使用.

计算顶点位置(Vertex Shader)
- 平移, 旋转, 缩放
- 投影
为每个像素上色(Fragment Shader)
- 颜色
- 材质
- 光照

数据类型

Attribute(属性)
- 表示数据(顶点, 索引, 颜色, 法向量等)
- 只在顶点着色器中使用
Uniform(统一的)
- 通常是一个全局的向量(如颜色, 光照参数等), 或者全局的矩阵(如世界矩阵, 观察矩阵等等)
- 可以在顶点着色器和片段着色器中使用
Varying(变化的)
- 通常用来将数据从顶点着色器传递到片段着色器