这是我参与「第四届青训营」笔记创作活动的第3天

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网页游戏等。

Modern Graphics System

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

Modern Graphics System

1.轮廓提取/meshing 2.光栅化 3.帧缓存 4.渲染

CPU VS GPU

GPU由大量的小运算单元构成
每个运算单元只负责处理很简单的计算
每个运算单元彼此独立
因此所有计算可以并行处理

WebGL Startup

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

2D vs Mesh.js

2D

const canvas=document.querySelector('canvas');
const ctx=canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(250,0);
ctx.lineTo(500,500);
ctx.lineTo(0,500);
ctx.fillStyle='red';
ctx.fill();

mesh.js

const{Render,Figure2D,Mesh2D}=meshjs;

const canvas=document.querySelector('canvas');
const renderer=new Renderer(canvas);

const figure=new Figure2D();
figure.beginPath();
figure.moveTo(250,0);
figure.lineTo(500,500);
figure.lineTo(0,500);

const mesh=new Mesh2D(figure,canvas);
mesh.setFill({
color;[1,0,0,1],
});

renderer.drawMeshes([mesh]);

3D标准模型的四个齐次矩阵(mat4)

1.投影矩阵 Projection Matrix
2.模型矩阵 Model Matrix
3.视图矩阵 View Matrix
4.法向量矩阵 Normal Matrix\

WebGL与动画实现 | 青训营笔记

WebGL简介

Modern Graphics System

Modern Graphics System

CPU VS GPU

WebGL Startup

2D vs Mesh.js

2D

mesh.js

3D标准模型的四个齐次矩阵(mat4)

推荐读物