初识 WebGL | 青训营笔记

这是我参与「第五届青训营」伴学笔记创作活动的第十五天

一、本堂课重点内容

1. WebGL 是什么？

• GPU ≠ WebGL ≠ 3D

2. Modern Graphics System
3. CPU vs GPU
4. WebGl Startup
5. 3D标准模型的四个齐次矩阵(mat4)

二、详细知识点介绍

1. Modern Graphics System

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

2.CPU vs GPU

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

3.WebGL Startup

1. 创建 WebGL 上下文
2. 创建 WebGl Program
3. 将数据存入缓冲区
4. 将缓冲区数据读取到GPU
5. GPU执行 WebGL 程序，输出结果

4.3D标准模型的四个齐次矩阵(mat4)

1. 投影矩阵 Projection Matrix
2. 模型矩阵 Model Matrix
3. 视图矩阵 View Matrix
4. 法向量矩阵 Normal Matrix

三、课后个人总结

WebGL是一个3D绘图协议，由于不是特别理解，之后去搜索了一下百度，它的标准允许把JavaScript和OpenGL ES2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript去绑定，WebGL可以为HTML5 Canvas 提供硬件3D加速渲染，web开发人员就可以借助系统显卡来在浏览器进行3d场景和模型的展示，也为用户提供了更好的视觉效果，增加了浏览器的功能，提供了更好的效果。