Loading... # WebGL与动画实现 ## Why WebGL / Why GPU - 为什么WebGL不像其他前端一样简单 - WebGL涉及许多系统以及底层的操作 ### 现代图形系统 - 光栅:现代图形系统基本都基于光栅,光栅就是一个像素阵列。 - CPU:用于逻辑运算。 - GPU:用于图形运算。 - 现代图形系统的渲染过程 - 轮廓提取(网格化) - 光栅化 - 帧缓存 - 渲染 - 渲染管线(Pipeline) - 将数据进行处理后,放入帧缓存,设备将像素从帧缓存中取出然后显示。 - 可以理解为活字印刷——将很多部分拼接起来光栅化放入帧缓存。 - CPU vs GPU - CPU就像一个处理能力强的管线,将一个比较复杂的问题扔给他可以处理 - 图像渲染,例如一个800*600的图片,需要计算480000个像素,但每个像素都只需要简单计算出颜色,对CPU来说即使运算简单但仍然需要一个一个执行,计算速度慢。 - GPU像处理能力弱的很多管线,虽然不能计算复杂逻辑运算,但是数量很多,对于图形渲染这类问题可以并行计算,速度快。 ### WebGL & OpenGL - WebGL是OpenGL的一个在Web方面的子集,OpenGL是一个图形渲染引擎。 ## WebGL ### 启动WebGL - 创建WebGL上下文 - 创建WebGL Program - 将数据存入缓冲区 - 将缓冲区数据读取到GPU - GPU执行WebGL程序,输出结果 <img src="https://s2.loli.net/2022/08/19/elUrxMG9sHEYpOu.png" alt="image-20220819233801325" style="zoom:50%;" style=""> - 创建WebGL上下文 ```js const canvas = document.querySelector("canvas"); const gl = canvas.getContext("webgl") ``` - 着色器 - 使用着色器处理数据,创建出WebGL Program ### Polygon - 多边形如何绘制? - 三角剖分(使用Earcut三角剖分) - 三维渲染时,一般在设计工具中进行三角剖分渲染时直接绘制三角形 ### 变换 #### 2D - 平移 - $$\left\{ \begin{array}{cl}x=x_0+x_1\\y=y_0+y_1\\ \end{array} \right.$$ - 旋转 - $$\left\{ \begin{array}{cl} x=x_0cos\theta -y_0sin\theta\\y=x_0sin\theta +y_0cos\theta\\ \end{array} \right.$$ - 缩放 - $$\left\{ \begin{array}{cl} x=s_x x_0\\ y=s_y y_0\\ \end{array} \right.$$ - 旋转+缩放是线性变换 - 变换可以变为矩阵运算,3d只需要改为3维矩阵运算即可 #### 3D Matrix - 3d标准模型的四个齐次矩阵 - 投影矩阵 - 用于处理设计坐标系,例如坐标系具有的最大最小值,左手/右手系等等 - 模型矩阵 - 用于模型的变换,改变模型的大小,方向,位置,旋转等等 - 视图矩阵 - 对于摄像机的模拟,不改变物体模型,改变摄像机的位置,对视图进行处理 - 法向量矩阵 - 物体的某个点向外的法向量由此矩阵给出,用于处理光线,阴影等信息 ## 总结 - 经过本节课的学习,了解到现代图形系统的工作原理,明白了一个数学函数如何通过渲染,光栅化等等操作从数据显示到显示器上,同时了解到了在数学模型中对于模型,摄像机的变换方法和原理。 Last modification:August 20, 2022 © Allow specification reprint Like 如果觉得我的文章对你有用,请随意赞赏