WebGL入门：将3D世界带入网页的魔法

WebGL，就像是给网页装上了一双3D眼镜，让我们可以在浏览器里看到和操作三维空间的物体。想象一下，就像你可以在电脑屏幕上玩一个立体的乐高游戏，而不只是看平面的图纸。下面，我们将用一些简单的例子来理解WebGL的核心概念，并通过简短的代码示例来加深理解。

1. WebGL是什么？

WebGL是一种在网页上渲染交互式3D图形和2D图形的技术，它不需要任何插件，就像你的手机不需要安装额外的软件就可以拍照一样。WebGL是HTML5的一部分，利用了GPU（图形处理器）的力量，让网页上的图形更加生动、流畅。

2. 坐标系：三维空间的定位

在WebGL中，我们用坐标系来定位三维空间中的物体，就像你在城市里用GPS定位一样。WebGL使用的是右手坐标系，其中x轴指向屏幕的右侧，y轴指向屏幕的上方，z轴则指向屏幕外，就像你把手掌伸向屏幕，手指指向右，拇指指向上的方向。

代码示例：

javascript 复制代码

const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');

// 设置视图矩阵，这就像调整相机的视角
const fieldOfView = 45 * Math.PI / 180;   // 视角，45度
const aspect = canvas.width / canvas.height; // 画布的宽高比
const zNear = 0.1;                         // 最近的可见距离
const zFar = 100.0;                        // 最远的可见距离

// 创建一个4x4矩阵来存储投影矩阵
const projectionMatrix = mat4.create();
// 使用透视投影设置矩阵，这决定了我们如何"看到"3D空间
mat4.perspective(projectionMatrix, fieldOfView, aspect, zNear, zFar);

3. 顶点着色器与片段着色器：给物体上色

想象一下，你在给一个乐高模型上色。顶点着色器负责处理模型的每个顶点（就像模型的每个角落），决定它的位置和颜色。片段着色器则负责处理每个像素点，决定最终屏幕上显示的颜色。

代码示例：

javascript 复制代码

const vertexShaderSource = `
  attribute vec3 a_position; // 输入属性，代表顶点位置
  void main() {
    gl_Position = vec4(a_position, 1.0); // 设置顶点的最终位置
  }
`;

const fragmentShaderSource = `
  precision mediump float; // 精度声明，对于颜色计算很重要
  void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 设置片段（像素）的颜色为红色
  }
`;

// 创建并编译顶点着色器
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

// 创建并编译片段着色器
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

4. 缓冲区：存储顶点数据

缓冲区就像是乐高模型的盒子，里面装着模型的各个部分。在WebGL中，我们使用缓冲区来存储顶点坐标、颜色、纹理坐标等数据。

代码示例：

javascript 复制代码

// 顶点数据，定义一个正方形的四个顶点
const vertices = [
  -0.5, 0.5, 0.0, // 顶点1，左上角
  -0.5, -0.5, 0.0, // 顶点2，左下角
  0.5, 0.5, 0.0, // 顶点3，右上角
  0.5, -0.5, 0.0 // 顶点4，右下角
];

// 创建一个缓冲区对象
const buffer = gl.createBuffer();
// 绑定缓冲区，使其成为当前操作的目标
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
// 将顶点数据填充到缓冲区中
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

通过这些基础知识和代码示例，希望你对WebGL有了初步的了解。WebGL的世界很广阔，从简单的3D模型到复杂的游戏场景，它都能胜任。继续探索，你会发现更多惊喜！