JavaScript WebGL三维图形开发_技术教程_奈瑶·映南科技互联网学院

WebGL是一种基于浏览器的图形技术，无需插件即可通过GPU渲染2D和3D图形。它基于OpenGL ES 2.0，利用HTML5 canvas元素和GLSL语言编写顶点与片段着色器，实现对图形渲染的底层控制。JavaScript负责初始化上下文、管理数据缓冲并驱动绘制流程。要创建一个旋转的3D立方体，需获取WebGL上下文、编写着色器代码、定义顶点与索引数据、设置投影与变换矩阵，并在动画循环中更新姿态。示例中使用mat4矩阵进行模型视图投影变换，并借助gl-matrix库处理数学运算。由于原生WebGL开发复杂，推荐使用Three.js等高级库简化开发。Three.js提供场景、相机、渲染器、几何体和材质等抽象概念，极大提升开发效率。其绘制立方体流程包括：构建场景与透视相机、创建WebGL渲染器、定义几何体与材质、生成网格对象并添加至场景，最后通过requestAnimationFrame循环实现动画。性能优化方面，建议减少绘制调用、压缩纹理、避免频繁数据传输，并采用实例化或合并几何体。交互可通过事件监听或OrbitControls实现相机操控。掌握原生WebGL有助于理解渲染原理，而Three.js更适合实际项目快速开发，后续可逐步深入光照、阴影与后期处理等高级特性。

WebGL 是一种基于浏览器的图形技术，可以直接调用 GPU 来渲染 2D 和 3D 图形。在 JavaScript 中使用 WebGL 开发三维图形虽然底层、复杂，但能提供强大的控制力和性能。不需要依赖插件，只需现代浏览器即可运行。

WebGL 基础原理

WebGL 基于 OpenGL ES 2.0，通过 HTML5 的 canvas 元素进行绘制。它使用着色器（Shader）来控制图形渲染过程，主要包含两种程序：

顶点着色器（Vertex Shader）：处理每个顶点的位置变换
片段着色器（Fragment Shader）：决定像素的颜色

这两个着色器用 GLSL（OpenGL Shading Language）编写，并在运行时编译注入 WebGL 上下文。JavaScript 负责初始化上下文、管理缓冲区、传递数据和触发绘制。

创建一个简单的 3D 立方体

要显示一个旋转的立方体，需完成以下步骤：

获取 canvas 和 WebGL 上下文
编写并编译顶点与片段着色器
定义立方体的顶点坐标、颜色和索引
将数据传入 GPU 缓冲区
设置透视投影和模型视图矩阵
在动画循环中更新旋转角度并重绘

示例关键代码片段：

const gl = canvas.getContext('webgl');
const vertexShaderSource = `
  attribute vec3 a_position;
  uniform mat4 u_modelViewProjection;
  void main() {
    gl_Position = u_modelViewProjection * vec4(a_position, 1.0);
  }
`;
// 片段着色器定义颜色
const fragmentShaderSource = `
  precision mediump float;
  uniform vec3 u_color;
  void main() {
    gl_FragColor = vec4(u_color, 1.0);
  }
`;

通过 mat4 类型的变换矩阵实现平移、旋转和缩放。常用 gl-matrix 库来辅助矩阵运算。

使用 Three.js 简化开发

原生 WebGL 写法繁琐，实际项目中推荐使用封装库，如 Three.js。它提供了场景（Scene）、相机（Camera）、渲染器（Renderer）、几何体（Geometry）等高级抽象。

Scene：容器，存放所有 3D 对象
Camera：定义观察视角，常用透视相机
Mesh：由几何体和材质组成，表示可渲染物体
Renderer：将场景通过相机渲染到 canvas

Three.js 绘制立方体示例：

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas });
renderer.setSize(window.innerWidth, window.innerHeight);
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();