这是我参与「第五届青训营 」伴学笔记创作活动的第 17 天
什么是WebGL
WebGL(全写Web Graphics Library)字面意义理解就是web图像库.是一种3D绘图协议,也可以说是一个负责图形处理的JavaScript API,可在任何兼容的Web浏览器中渲染高性能的交互式3D和2D图形,而无需使用插件.总结一句话,“webgl是一个专门计算或渲染3D图像的javascriptAPI也可以称之为专门处理3D图像的一种JavaScript技术”.
现代图形系统组成部分
- 光栅:几乎所有的现代图形系统都是基于光栅来绘制图形的,光栅就是构成图形的像素阵列
- 像素:一个像素对应图形上的一个点,它通常保存图像上的某个具体位置的颜色等信息
- 帧缓存:在绘图过程中,像素信息被存放于帧缓存中,帧缓存是一块内存地址
- CPU:中央处理单元,负责逻辑运算
- GPU:图形处理单元,负责图形计算
OpenGL
在深入 WebGL 之前,我们还需要了解 OpenGL,因为 WebGL 是基于 OpenGL 的。 OpenGL (Open Graphics Library) 是一种跨语言、跨平台的应用程序编程接口,用于渲染 2D 和 3D 矢量图形,常用于 CAD、虚拟现实、科学可视化程序和视频游戏开发。 OpenGL通常由显卡厂商根据规范实现。
什么是GPU
GPU中文翻译为图形处理器,又称显示核心、视觉处理器、显示芯片。
GPU的特点
- GPU由大量的小运算单元构成
- 每个运算单元只负责处理很简单的计算
- 每个运算单元彼此独立
- 因此所有计算可以并行处理
WebGL渲染过程
- 常见WebGL上下文
- 创建WebGL Program
- 将数据存入缓冲区
- 将缓冲区数据读取到GPU
- GPU执行WebGL程序,输出结果
一些常用的转换
- 平移
- 旋转
- 缩放