【第二届青训营-寒假前端场】- 初识WebGL
前端上手比较简单，但是号称前端最难的技术WebGL，专门做图形渲染的
Why WebGL/Why GPU?
- WebGL是什么？
- GPU≠WebGL≠3D
- WebGL为什么不像其他前端技术那么简单？ WebGL是浏览器上的OpenGL
分两个代码，一个来自GPU的JS代码，另外是来自GPU的代码
计算机图形学是基础
Modern Graphics System
- 光栅(Raster) : 几乎所有的现代图形系统都是基光栅来绘制图形的，光栅就是指构成图像的像素阵列。
- 像素（Pixel）：一个像素对应图像上的一个点，它通常保存图像上的某个具体位置的颜色等信息。
- 帧缓存（Frame Buffer）：在绘图过程中，像素信息被存放于帧缓存中，帧缓存是一块内存地址。
- CPU（Central Processing Unit）：中央处理单元，负责逻辑计算。
- GPU（Graphics Processing Unit）：图形处理单元，负责图形计算。
- 轮廓提取/meshing
- 光栅化
- 帧缓存
- 渲染
The Pipeline
管道操作，并行渲染
CPU vs GPU
一个CPU的内核处理一个任务，多少核的CPU，并行计算多少个任务
GPU由大量小运算单元，每个单元独立，适合处理图片
- GPU由大量的小运算单元构成
- 每个运算单元只负责处理很简单的计算
- 每个运算单元彼此独立
- 因此所有计算可以并行处理
WebGL&OpenGL
WebGL是OpenGL的一个实现，相对比较底层的API
WebGLStartup
用Javascript实现WebGL绘图
- 创建 WebGL 上下文
- 创建 WebGL Program（顶点选择器、片元选择器） Vertex Shader
Fragment Shader
3. 将数据存入缓冲区
坐标系统
4. 将缓冲区数据读取到 GPU
5. GPU 执行 WebGL 程序，输出结果
