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

一、WebGL是什么？

WebGL(全写Web Graphics Library)是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。WebGL完美地解决了现有的Web交互式三维动画的两个问题:第一，它通过HTML脚本本身实现Web交互式三维动画的制作，无需任何浏览器插件支持;第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的。

二、Modern Graphics System

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

图像系统的工作过程：

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

三、Why GPU?

• GPU由大量的小运算单元构成
• 每个运算单元只负责处理很简单的计算
• 每个运算单元彼此独立

因此所有计算可以并行处理

四、WebGL & OpenGL

在深入 WebGL 之前，还需要先了解 OpenGL，因为 WebGL 是基于 OpenGL 的。OpenGL(Open Graphics Library) 是用于渲染2D、3D矢量图形的跨语言、跨平台的应用程序编程接口，常用于CAD、虚拟现实、科学可视化程序和电子游戏开发。OpenGL 通常是显卡生产商根据规范来实现的。

五、使用WebGL

WebGL渲染绘图过程：

• 创建WebGL上下文
• 创建WebGL Program
• 将数据存入缓冲区
• 将缓冲区数据读取到GPU
• GPU执行WebGL程序，输出结果

。。。。。