这是我参与「第五届青训营 」伴学笔记创作活动的第 16 天。
初识WebGL
WebGL是什么
webgl（全称：Web Graphics Library）是一种3D绘图协议。 webgl免费开放，于2010年公开发布，主要有两个作用。第一，它通过本身实现Web交互式三维动画的制作，无需任何浏览器插件支持；第二，它利用底层的图形硬件加速功能进行的图形渲染，是通过统一的、标准的、跨平台的OpenGL接口实现的
GPU≠WebGL≠3D
Modern Graphics System图形系统
- 光栅： 几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图形的像素阵
- 像素： 一个像素对应图像上的一个点，他通常保存图像上的某个具体位置的颜色等信息
- 帧缓存： 在绘制过程中，像素信息被存放于帧缓存中，帧缓存是一块内存地址
- CPU： 中央处理单元，负责逻辑运算
- GPU： 图形处理单元，负责图形计算
- 轮廓提取/meshing
- 光栅化
- 帧缓存
- 渲染
CPU vs GPU
- GPU由大量小运算单元构成
- 每个单元只负责处理很简单的运算
- 每个运算单元彼此独立
- 可以并行处理。
WebGL Startup
- 创建WebGL上下文
- 创建WebGL Program
- 将数据存入缓冲区
- 将缓冲区数据读取到GPU
- GPU执行WebGL程序，输出结果
着色器
通过GLSL编写，输出每个像素的坐标和颜色。可分为以下两类
- 顶点着色器： 处理图形顶点
- 片段着色器： 顶点和图源确定好以后，处理区域内的所有像素点
光栅化：实际上就是一个将上一步装配好的图形用像素来表示的过程
3D Matrix
3D标准模型的4个齐次矩阵
- 投影矩阵
- 模型矩阵
- 视图矩阵
- 法向量矩阵
