初识webGL|青训营笔记

这是我参加【第五届青训营】笔记创作活动的第13天

今天来学习WebGL的一些基本知识，首先我们要知道的是WebGL是什么？Why WebGL/Why GPU？首先，GPU≠WebGL≠3D，他们三者之间是不同的。另外，WebGL为什么不像其他前端技术？这是因为它涉及到硬件底层的概念和原理

现代图形系统

CPU和GPU都是做计算，为什么要分开呢？

在这之前，先理解一下图形的绘制过程

现代图形系统中，首先进行轮廓提取，对轮廓进行网格化；对于平面用三角网格，3d的面用各种网格方法，常用的也是三角网格；网格化之后，将网格的图源进行光栅化；光栅化之后将数据送到帧缓存中，读取帧缓存的内容进行图形渲染。

数据处理成光栅或者像素的阵列，这个过程叫做渲染管线。

CPU vs GPU

CPU可以理解为处理能力强大的处理单元，像一个管道处理数据，一个管道对应CPU的一个核，内核越多，同时能处理的任务越多。当处理图形渲染的任务时，像素的个数很多，同时处理48万个盒子，效率低；

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

WebGL & OpenGL

WebGL是OpenGL的子集，它是OpenGL在浏览器端(Web)上的实现。OpenGL家族有很多，嵌入式设备中有一个OpenGL ES的版本，有一个对应的在web上的版本，叫WebGL.

WebGL Startup

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

Create WebGL Context

创建WebGL上下文

考虑老一些浏览器的兼容性，需要用下面的代码

The Shaders

写着色器

1.顶点着色器：处理图形的轮廓；

2.片段着色器：光栅化之后，将像素点映射到片段着色器中，用片源折射器处理颜色。

Greate Program

创建顶点着色器，然后编译；创建片段着色器，然后编译；创建WebGL Program，将两个着色器通过attachshader的方式关联，然后将program link到webgl的上下文，然后用webgl的useprogram处理要渲染的图像。

Date to Frame Buffer

Frame Buffer to GPU

Output

WebGL

Mesh.js

绘制多边形在2d很简单，但在WebGL很难，因此可以用mesh.js封装来绘制多边形。

Polygons

Draw Polygon with 2D Triangulations

3D Meshing

Transforms

Apply Transforms

应用线性变换

3D Matrix

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

• 投影矩阵Projection Matrix；
• 模型矩阵Model Matrix；
• 视图矩阵View Matrix；
• 法向量矩阵Normal Matrix.

read more

• The book of shaders；

• Mesh.js；

• glsl-doodle；

• SpriteJS；

• ThreeJS；

• ShaderToy