WebGL 动画实现教程：从零开始创建 3D 图形

WebGL 是一个基于 OpenGL ES 2.0 的 JavaScript API，它可以在浏览器中实现 3D 图形和动画。WebGL 使用 GPU 加速，因此可以在现代浏览器中实现高效的动画效果。

下面是一个基本的 WebGL 动画实现过程：

创建画布和 WebGL 上下文：

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

编写着色器程序（顶点着色器和片元着色器）：

var vertexShaderSrc = `
attribute vec3 aVertexPosition;

uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;

void main() {
  gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aVertexPosition, 1.0);
}
`;

var fragmentShaderSrc = `
precision mediump float;

void main() {
  gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
`;

var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSrc);
gl.compileShader(vertexShader);

var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSrc);
gl.compileShader(fragmentShader);

var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);

创建缓冲区并将数据加载到缓冲区中：

var vertices = [
  -1.0, -1.0, 0.0,
  1.0, -1.0, 0.0,
  0.0,  1.0, 0.0
];

var vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

var vertexPositionAttribute = gl.getAttribLocation(program, 'aVertexPosition');
gl.enableVertexAttribArray(vertexPositionAttribute);
gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);

设置投影矩阵和模型视图矩阵：

var projectionMatrix = mat4.create();
mat4.perspective(projectionMatrix, 45, canvas.width / canvas.height, 0.1, 100.0);

var modelViewMatrix = mat4.create();
mat4.translate(modelViewMatrix, modelViewMatrix, [0.0, 0.0, -5.0]);

渲染：

function render() {
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.uniformMatrix4fv(gl.getUniformLocation(program, 'uProjectionMatrix'), false, projectionMatrix);
gl.uniformMatrix4fv(gl.getUniformLocation(program, 'uModelViewMatrix'), false, modelViewMatrix);
gl.drawArrays(gl.TRIANGLES, 0, 3);
  requestAnimationFrame(render);
}

render();

这段代码实现了一个简单的三角形动画。要实现更复杂的动画效果，需要编写更复杂的着色器程序和渲染逻辑，但这是一个很好的起点。