这是我参与「第五届青训营 」伴学笔记创作活动的第 11 天
WebGL(3D渲染)
WebGL:运用GPU进行3D渲染(计算机图形学)
1. 轮廓提取 / meshing
2. 光栅化(变成像素的点)
3. 帧缓存
4. 渲染
GPU由大量的小运算单元构成
每个运算单元只负责处理很简单的计算
每个运算单元彼此独立
因此所有计算可以并行处理
和cpp的openGL很相似web.eecs.umich.edu/~sugih/cour…
WebGL Startup 1. 创建 WebGL 上下文 2. 创建 WebGL Program 3. 将数据存入缓冲区 4. 将缓冲区数据读取到 GPU 5. GPU 执行 WebGL 程序，输出结果
Mesh.js mesh和普通2D绘图对比如下：
顶点着色器->片源着色器(中间线性插值)
绘制点，线，三角形，但多边形无法直接绘制
· 普通多边形三角剖分(Earcut算法)
· 复杂多边形先转化为普通多边形
3DMesh 图形库:SpriteJS 旋转+缩放是线性变换
3D 标准模型的四个齐次矩阵(mat4)
1.投影矩阵 Projection Matrix(缩放和平移)
2.模型矩阵 Model Matrix
3视图矩阵 View Matrix(调整摄像机位置)
4.法向量矩阵 Normal Matrix(法线)
相关资料
云朵:分形操作 The book of shaders(可以直接搜):绘画，设计，图像处理
标题：「WebGL 月影带练」第五届字节跳动青训营 - 前端专场
