WEBGL基础 | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 16 天

WdbGL是什么？

GPU ≠ WdbGL ≠ 计算机图形学

• 光栅：将多边形拆成不同的像素，最终实现将图像绘制在屏幕上
• 像素：控制每个点的颜色
• 帧缓存：绘图过程中，像素信息被存放于帧缓存中
• CPU：负责逻辑计算
• GPU：负责图形计算

• 轮廓提取
• 光栅化
• 帧缓存
• 渲染

GPU由大量小运算单元构成，每个单元只负责处理很简单的运算，可以并行处理。

WebGL绘图流程：

1. 创建WebGL上下文（canvas对象）
2. 创建WebGL Program
3. 将数据存入缓冲区
4. 将缓冲区数据读取到GPU
5. GPU执行WebGL程序，输出结果

在顶点着色器定义三角形顶点，之后会根据三个点的值进行线性插值。

const canvas = document.querySelector( 'canvas ' );
const gl = canvas.getContext( 'webgl' );
const names = [ 'webgl', 'experimental-webgl ' , 'webkit-3d ', 'moz-webgl'];
if( options.webgl2 ) names.unshift( 'webgl2 ' );
let context = null;
for( let ii = 0;ii<names.length;++ii) {
try {
context = canvas.getContext( names[ii], options ) ;
}catch (e) {
 // no-empty}
 }
if( context) {
    break;
}
return context;
}

The Shaders

1.Vertex Shader

attribute vec2 position;
void main() {
gl_Pointsize = 1.0;
gl_Position = vec4(position,1.0，1.0);
}

2.Fragment Shader

precision mediump float;
void main() {
gl_Fragcolor = vec4( 1.0，0.0，0.0，1.0);
}

WebGL在分析时不会实时进行分析和导出，而是通过缓存进行渲染。

1. 平移

2. 旋转

3. 缩放

3D标准模型的四个齐次矩阵（mat4）：

1. 投影矩阵
2. 模型矩阵
3. 视图矩阵
4. 法向量矩阵

推荐阅读：

1. The book of shaders
2. Mesh.js
3. glsl-doodle
4. SpriteJS
5. ThreeJS
6. ShaderToy