WebGL 小白入门学习
1. WebGL是什么？
WebGL（Web Graphics Library）是一种JavaScript API，它允许你在不需要安装任何额外插件的情况下，直接在浏览器中渲染高性能的2D和3D图形。WebGL利用了用户的图形处理单元（GPU）来加快渲染速度，这意味着你可以在网页上创建类似桌面应用程序的视觉效果。
1.1 WebGL入门代码实现如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>给画布换个颜色</title>
</head>
<body><canvas id="canvas" width="400" height="400">此浏览器不支持canvas</canvas><script>const ctx = document.getElementById('canvas')const gl = ctx.getContext('webgl')gl.clearColor(1.0, 0.0, 0.0, 1.0)gl.clear(gl.COLOR_BUFFER_BIT)</script>
</body>
</html>1.2 方法详解
（1）gl.clearColor(r,g,b,a) 指定清空<canvas>的颜色，接收四个参数取值区间为 0.0~1.0)
（2）gl.clear(buffer) 清空canvas参数分为三项
- gl.COLOR_BUFFER_BIT 清空颜色缓存
- gl.DEPTH_BUFFER_BIT 清空深度缓冲区
- gl.STENCIL_BUFFER_BIT 清空模板缓冲区
（3）gl.clear 需要和 gl.clearColor 提到的函数搭配使用
- gl.clear(gl.COLOR_BUFFER_BIT) 和 gl.clearColor(0.0,0.0,0.0,1.0)
- gl.clear(gl.DEPTH_BUFFER_BIT) 和 gl.clearDepth(1.0)
- gl.clear(gl.STENCIL_BUFFER_BIT) 和 gl.clearStencil(0)
2. WebGL的基本组件
2.1 什么是着色器
（1）着色器：就是让开发者自己去编写一段程序，用来代替固定渲染管线，来处理图像的渲染。
- 顶点着色器：处理每个顶点的数据，如位置、颜色和纹理坐标。
- 片元着色器：处理每个像素（片元）的颜色和其他属性，最终决定屏幕上显示的颜色。
2.2 webgl 绘制一个点的流程
2.2.1 创建着色器源码
// 顶点着色器源码
const vertexShaderSource = `
// 必须要存在 main 函数
void main() {// 要绘制的点的坐标gl_Position = vec4(0.0,0.0,0.0,1.0); // x, y, z, w齐次坐标(x/w，y/w， z/w)// 点的大小gl_PointSize = 10.0;
}`// 片源着色器源码
const fragmentShaderSource = `
// 必须要存在 main 函数
void main() {gl_FragColor = vec4(0.0,0.0,0.0,1.0); // r, g, b, a
}`2.2.2 创建着色器
// 创建顶点着色器对象
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
// 创建片段着色器对象
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);2.2.3 指定关联着色器源码
// 设置顶点着色器源代码
gl.shaderSource(vertexShader, vertexShaderSource);
// 设置片段着色器源代码
gl.shaderSource(fragmentShader, fragmentShaderSource);2.2.4 编译着色器
// 编译顶点着色器
gl.compileShader(vertexShader);
// 编译片段着色器
gl.compileShader(fragmentShader);2.2.5 创建程序对象
const program = gl.createProgram();
gl.attachShader(program,vertexShader)
gl.attachShader(program,fragmentShader)
gl.linkProgram(program)
gl.useProgram(program)2.2.6 执行绘制
gl.drawArrays(gl.POINTS,0,1); // 绘制一个点，需要1个点