引言
WebGL 是一项用于在网页上绘制3D图形的技术，它基于 OpenGL ES 2.0，并通过 JavaScript API 提供了在浏览器中使用底层硬件加速的能力。而 Three.js 是一个基于 WebGL 的开源库，提供了许多简化3D图形开发的功能和方法。本文将介绍如何入门 WebGL，以及如何使用 Three.js 框架进行实践。
WebGL 入门
为了开始使用 WebGL，我们首先需要一个 HTML5 的 canvas 元素，用于在其中绘制3D图形。可以通过以下代码将 canvas 添加到页面中：
<canvas id="myCanvas" width="800" height="600"></canvas>
接下来，我们需要获取到这个 canvas 的 WebGL 上下文，我们可以使用 JavaScript 的 getContext 方法来实现：
const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');
一旦我们获取到了 WebGL 上下文，我们就可以开始进行图形绘制了。WebGL 使用了着色器（shader）来描述图形的外观，我们需要编写着色器的代码并将其上传到 GPU 中执行。一个 WebGL 程序至少需要一个顶点着色器和一个片段着色器。顶点着色器用于处理顶点位置和属性，片段着色器用于计算像素的颜色。
以下是一个简单的顶点着色器代码示例：
const vertexShaderSource = `
attribute vec4 a_position;
void main() {
gl_Position = a_position;
}
`;
以下是一个简单的片段着色器代码示例：
const fragmentShaderSource = `
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;
接下来，我们需要创建这些着色器，并将其链接到 WebGL 程序中：
function createShader(gl, type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error('Failed to compile shader:', gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}
return shader;
}
const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
console.error('Failed to link program:', gl.getProgramInfoLog(program));
gl.deleteProgram(program);
return null;
}
gl.useProgram(program);
在着色器链接成功后，我们可以开始绘制图形了。首先，我们需要将顶点数据上传到 WebGL 中。可以使用以下代码通过缓冲区将数据传递给 GPU：
const positionData = [
-1.0, -1.0,
1.0, -1.0,
0.0, 1.0
];
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positionData), gl.STATIC_DRAW);
const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
接下来，我们可以使用以下代码绘制图形：
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);
至此，我们就完成了一个简单的 WebGL 图形绘制。
Three.js 框架实践
虽然 WebGL 提供了底层的绘制能力，但使用原生 WebGL 进行开发可能会比较繁琐和复杂。这时，Three.js 框架就能帮助我们简化这个过程，提供了许多高级功能和方法。
首先，我们需要引入 Three.js 库到页面中：
<script src="https://threejs.org/build/three.js"></script>
我们可以使用 Three.js 提供的 Scene、Camera、Renderer 类来创建一个场景、相机和渲染器。以下是一个创建场景的示例代码：
const scene = new THREE.Scene();
以下是一个创建相机的示例代码：
const camera = new THREE.PerspectiveCamera(
75, // 视野角度
window.innerWidth / window.innerHeight, // 宽高比
0.1, // 近截面
1000 // 远截面
);
以下是一个创建渲染器的示例代码：
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
在 Three.js 中，我们可以使用 Geometry 类来创建几何体，使用 Material 类来定义材质。以下是一个创建一个红色立方体的示例代码：
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
在渲染循环中，我们将场景和相机传递给渲染器，并调用 render 方法来绘制场景：
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
至此，我们就成功使用 Three.js 创建了一个旋转的红色立方体。
结论
WebGL 是一项强大的技术，可以在网页上绘制出精美的3D图形。通过 Three.js 框架，我们可以更加方便地进行 WebGL 开发，提供了许多高级功能和方法。希望本文能够帮助你入门 WebGL 和 Three.js，并进行一些简单的实践。
参考资料
本文来自极简博客，作者：星空下的约定，转载请注明原文链接：WebGL 入门与 Three.js 框架实践
