WebGL与动画实现 | 青训营笔记

每天摸鱼鱼
104 阅读3分钟

WebGL与动画实现 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第12天

问题

什么是WebGL/什么是GPU？

WebGL是什么？

GPU != WebGL != 3D

WebGL为什么不像其他前端技术那么简单？

我对这个问题的理解，是因为Web的技术栈和传统的Web前端技术有很大的不同，两者相比较来说，传统的Web前端使用的API都比较高级，不会存在太多需要理解的底层原理和概念等，而WebGl的核心是OpenCL，WebGl是OpenGL在Web上的实现，通过GPU来完成图像渲染等，就因为这些导致使用起来比较繁琐，所以学习门槛会比较高，也比其他前端技术要难一些。

1660900620753.png
  • 轮廓提取/meshing
  • 光栅化
  • 帧缓存
  • 渲染

初识WebGL

Modern Graphics System（现代图形系统）

  • 光栅（Raster）：几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列。
  • 像素（Pixel）：一个像素对应图像上的一个点，它通常保存图像上的某个具体位置的颜色等信息。
  • 帧缓存（Frame Buffer）：在绘图过程中，像素信息被存放于帧缓存中，帧缓存是一块内存地址。
  • CPU（Central Processing Unit）：中央处理单元，负责逻辑计算。
  • GPU（Graphics Processing Unit）：图形处理单元，负责图形计算。

CPU vs GPU

CPU和GPU的区别：

CPU是电脑的中央处理器，在电脑中起着控制计算机运行的作用 1660904011687.png GPU主要处理计算机中与图形计算有关的工作，并将数据更好地呈现在显示器中。

1660904043270.png

GPU由大量的小运算单元构成，每个运算单元只负责处理很简单的计算，每个运算单元彼此独立，因此所有计算可以并行处理。

1660904096311.png

WebGL启动

1、创建WebGL上下文

2、创建WebGLProgram

3、将数据存入缓冲区

4、将缓冲区数据读取到GPU

5、GPU执行WebGL程序，输出结果

image.png

Draw Polygon with 2D Triangulations

使用Earcut进行三角剖分

image.png

const vertices = [    [-0.7,0.5],
    [-0.4,0.3],
    [-0.25,0.71],
    [-0.1,0.56],
    [-0.1,0.13],
    [0.4,0.21],
    [0,-0.6],
    [-0.3,-0.3],
    [-0.6,-0.3],
    [-0.45,0.0],
];

const points = vertices.flat();
const triangler = earcut(points);

3D Matrix

3D标准模型的四个其次矩阵（mat4）

1、投影矩阵 Projection Matrix

2、投影矩阵 Model Matrix

3、视图矩阵 View Matrix

4、法向量矩阵

总结

其实想要理解和学会 WebGL，并没有那么困难，我们只需要理解一下 GPU，了解它与 CPU 的不同点，然后再理解运行 GPU 代码的语言——glsl，了解一下着色器的基本概念和用法，进而就可以理解 WebGL 的本质原理，通过一点一点慢慢学习就可以掌握 WebGL 这门技术了。

学到这我想大家也对WebGL有了初步的认识了吧，不如现在就开始尝试练习一下吧

如果你有任何建议都可以在评论区留言，或发电子邮箱，欢迎大家评论留言(ˆ⌣ˆ）

作者：Yifan

日期：2022年7月24日

电子邮箱：1279640748@qq.com

avatar
文章
阅读
粉丝