WebGL简介与基本概念

WebGL是一种基于OpenGL ES的JavaScript API，允许在浏览器中渲染交互式3D和2D图形。它直接利用GPU加速，无需插件即可实现高性能图形处理，广泛应用于游戏、数据可视化、工程建模等领域。

WebGL的核心技术原理

WebGL基于OpenGL ES 2.0规范，通过HTML5 Canvas元素提供绘图上下文。其核心在于着色器编程，使用GLSL（OpenGL Shading Language）编写顶点着色器和片元着色器：

// 顶点着色器示例
const vertexShaderSource = `
  attribute vec2 aPosition;
  void main() {
    gl_Position = vec4(aPosition, 0.0, 1.0);
  }
`;

// 片元着色器示例
const fragmentShaderSource = `
  precision mediump float;
  void main() {
    gl_FragColor = vec4(1.0, 0.5, 0.2, 1.0);
  }
`;

渲染管线包含以下关键阶段：

1. 顶点处理：通过顶点着色器转换坐标
2. 图元装配：将顶点连接成三角形/线条等
3. 光栅化：将图元转换为像素
4. 片段处理：通过片元着色器计算颜色

基础渲染流程

完整的WebGL程序通常包含以下步骤：

// 1. 获取Canvas元素
const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');

// 2. 创建着色器程序
function createShader(gl, type, source) {
  const shader = gl.createShader(type);
  gl.shaderSource(shader, source);
  gl.compileShader(shader);
  return shader;
}

// 3. 初始化缓冲区
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
const positions = [0, 1, -1, -1, 1, -1]; // 三角形顶点
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

// 4. 渲染循环
function drawScene() {
  gl.clearColor(0, 0, 0, 1);
  gl.clear(gl.COLOR_BUFFER_BIT);
  
  gl.drawArrays(gl.TRIANGLES, 0, 3);
  requestAnimationFrame(drawScene);
}
drawScene();

坐标系系统

WebGL使用右手坐标系系统，特点包括：

• X轴向右为正方向
• Y轴向上为正方向
• Z轴向屏幕外为正方向
• 标准设备坐标范围[-1,1]

坐标转换通常需要多个矩阵：

// 模型矩阵
const modelMatrix = mat4.create();
mat4.translate(modelMatrix, modelMatrix, [0.5, 0, 0]);

// 视图矩阵
const viewMatrix = mat4.create();
mat4.lookAt(viewMatrix, [0, 0, 5], [0, 0, 0], [0, 1, 0]);

// 投影矩阵
const projectionMatrix = mat4.create();
mat4.perspective(projectionMatrix, 45 * Math.PI/180, canvas.width/canvas.height, 0.1, 100);

纹理与材质

纹理映射是3D渲染的关键技术，典型流程：

// 创建纹理
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);

// 设置参数
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

// 加载图像
const image = new Image();
image.onload = function() {
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
};
image.src = "texture.png";

材质属性可通过uniform变量传递：

// 片元着色器中定义材质
uniform vec3 uAmbientColor;
uniform vec3 uDiffuseColor;
uniform float uShininess;

光照模型实现

Phong光照模型包含三个分量：

// 顶点着色器计算法线
varying vec3 vNormal;
varying vec3 vPosition;

void main() {
  vNormal = normalize(normalMatrix * normal);
  vPosition = vec3(modelViewMatrix * vec4(position, 1.0));
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

// 片元着色器计算光照
vec3 calculateLight(vec3 normal, vec3 lightDir, vec3 viewDir) {
  // 环境光
  vec3 ambient = uLightColor * uAmbientStrength;
  
  // 漫反射
  float diff = max(dot(normal, lightDir), 0.0);
  vec3 diffuse = diff * uLightColor;
  
  // 镜面反射
  vec3 reflectDir = reflect(-lightDir, normal);
  float spec = pow(max(dot(viewDir, reflectDir), 0.0), uShininess);
  vec3 specular = uSpecularStrength * spec * uLightColor;
  
  return ambient + diffuse + specular;
}

性能优化策略

1. 实例化渲染：使用ANGLE_instanced_arrays扩展

const ext = gl.getExtension('ANGLE_instanced_arrays');
ext.vertexAttribDivisorANGLE(positionLoc, 0); // 每实例
ext.vertexAttribDivisorANGLE(offsetLoc, 1); // 每顶点
ext.drawArraysInstancedANGLE(gl.TRIANGLES, 0, 6, 1000);

2. 缓冲区管理：

// 使用VAO（顶点数组对象）
const vao = gl.createVertexArray();
gl.bindVertexArray(vao);

// 设置顶点属性
gl.enableVertexAttribArray(positionLoc);
gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);

3. 着色器优化：

• 避免动态循环
• 减少分支语句
• 使用内置函数代替自定义实现

现代WebGL开发工具

1. 调试工具：

• WebGL Inspector
• Spector.js

2. 高级框架：

// 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();

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

3. 着色器编辑器：

• ShaderToy
• GLSL Sandbox

WebGL 2.0新特性

1. 增强的纹理支持：

• 3D纹理和纹理数组
• 非2幂次纹理完全支持
• ETC2/EAC纹理压缩

2. 高级着色功能：

// 计算着色器示例
#version 300 es
layout(local_size_x = 16, local_size_y = 16) in;
layout(rgba32f) uniform image2D outputTexture;

void main() {
  ivec2 storePos = ivec2(gl_GlobalInvocationID.xy);
  imageStore(outputTexture, storePos, vec4(1.0, 0.0, 0.0, 1.0));
}

3. 变换反馈：

const transformFeedback = gl.createTransformFeedback();
gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, transformFeedback);
gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, outputBuffer);
gl.beginTransformFeedback(gl.POINTS);
gl.drawArrays(gl.POINTS, 0, particleCount);
gl.endTransformFeedback();