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）矩阵实现空间变换。

• 使用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的协作机制，就能在浏览器中构建出丰富、流畅的三维体验。从底层控制到高层抽象，选择合适工具是关键。