WebGL依赖JavaScript实现网页三维图形渲染，通过canvas获取上下文并编写着色器完成场景绘制；利用Three.js等库可简化开发流程，广泛应用于可视化、游戏和模拟等领域。
三维图形在网页中的呈现离不开WebGL技术，而JavaScript正是驱动这一过程的核心语言。WebGL（Web Graphics Library）是一种基于OpenGL ES的低级3D图形API，能够在浏览器中无需插件直接渲染复杂的三维场景。通过JavaScript调用WebGL接口，开发者可以实现交互式3D可视化、游戏、数据模拟等应用。
WebGL基础与JavaScript集成
WebGL本身不提供高级建模工具，它依赖JavaScript来设置着色器、管理缓冲区、传递矩阵和处理用户输入。要开始使用WebGL，首先需要获取一个canvas元素的WebGL上下文：
const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
console.error('WebGL not supported');
}
接下来，必须编写顶点着色器和片元着色器（使用GLSL语言），并通过JavaScript编译、链接成着色程序。这个过程涉及创建着色器对象、上传源码、编译、附加到程序并链接。
关键步骤包括：- 编写GLSL着色器代码并注入到JavaScript字符串中
- 使用
gl.createShader()创建着色器实例 - 调用
gl.shaderSource()和gl.compileShader()完成编译 - 用
gl.createProgram()创建程序，并gl.attachShader()后链接 - 启用该程序：
gl.useProgram(program)
绘制一个简单3D立方体
要在页面上显示一个旋转的立方体，需定义其8个顶点坐标和6个面的索引。将顶点数据传入GPU缓冲区，并在顶点着色器中应用模型-视图-投影（MVP）矩阵实现空间变换。
立即学习“Java免费学习笔记（深入）”；
实现要点：- 使用
gl.createBuffer()创建缓冲区，绑定为ARRAY_BUFFER - 将顶点数组写入缓冲：
gl.bufferData() - 在着色器中通过
attribute变量接收顶点位置 - 使用
uniform变量传递MVP矩阵，由JavaScript计算并更新 - 启用深度测试：
gl.enable(gl.DEPTH_TEST)避免渲染错乱
动画效果可通过requestAnimationFrame循环实现，每一帧更新旋转角度并重新绘制。
借助Three.js简化开发
原生WebGL编码繁琐，实际项目中常使用Three.js这类高级库。它封装了底层细节，提供Scene、Camera、Mesh、Renderer等直观对象。
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas: myCanvas });
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();
Three.js自动处理着色器、缓冲、矩阵运算，极大提升开发效率，适合快速构建三维内容。
应用场景与性能优化
WebGL结合JavaScript广泛应用于地理信息系统（如Cesium）、在线产品展示、科学数据可视化、教育模拟和轻量级网页游戏。
提升性能的常见做法：- 合并几何体以减少绘制调用（draw calls）
- 使用纹理图集降低材质切换开销
- 控制帧率或按需渲染静态场景
- 避免频繁向GPU传输大数据
- 利用LOD（Level of Detail）根据距离切换模型精度
基本上就这些。掌握JavaScript与WebGL的协作机制，就能在浏览器中构建出丰富、流畅的三维体验。从底层控制到高层抽象，选择合适工具是关键。
