这是我参与「第五届青训营」笔记创作活动的第16天
一、本堂课重点内容：
- WebGL是什么？
- Why GPU?
- 现代图像系统
- WebGL & OpenGL
- 使用WebGL
二、详细知识点介绍：
2.1 WebGL是什么？
WebGL技术是一个Web标准JavaScript API，无需使用插件即可在浏览器中渲染高性能的交互式3D和2D图形。可以将其理解成一种帮助开发3D网页的绘图技术。 GPU≠WebGL≠3D
2.2 Modern Graphics System
- 光栅(Raster)：几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列。
- 像素(Pixel): 一个像素对应图像上的一个点，它通常保存图像上的某个具体位置的颜色等信息。
- 帧缓存(Frame Buffer): 在绘图过程中，像素信息被存放于帧缓存中，帧缓存是一块内存地址。
- CPU (Central Processing Unit): 中央处理单元，负责逻辑计算。
- GPU (Graphics Processing Unit): 图形处理单元，负责图形计算。
图像系统的工作过程： 轮廓提取/meshing、光栅化、帧缓存、渲染
2.3 Why GPU?
🌟 CPU VS GPU
-
GPU由大量的小运算单元构成
-
每个运算单元只负责处理很简单的计算
-
每个运算单元彼此独立
因此所有计算可以并行处理
2.4 WebGL & OpenGL
在深入 WebGL 之前，还需要先了解 OpenGL，因为 WebGL 是基于 OpenGL 的。OpenGL(Open Graphics Library) 是用于渲染2D、3D矢量图形的跨语言、跨平台的应用程序编程接口，常用于CAD、虚拟现实、科学可视化程序和电子游戏开发。OpenGL 通常是显卡生产商根据规范来实现的。
2.5 使用WebGL
WebGL渲染绘图过程：
- 创建WebGL上下文
- 创建WebGL Program
- 将数据存入缓冲区
- 将缓冲区数据读取到GPU
- GPU执行WebGL程序，输出结果
三、实践练习例子：
Create WebGL Context
创建项目
输出
四、课后个人总结：
通过此次课程了解了什么是 WebGL以及WebGL 的大致流程，并且完成了一个最简单的 WebGL 应用 - 绘制三角形。
五、引用参考：
