WebGl的学习 | 青训营笔记

64 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 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渲染过程

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

一些常用的转换

  • 平移
  • 旋转
  • 缩放