JavaScript WebGL图形编程_技术教程

WebGL是基于OpenGL ES的JavaScript API，可在网页canvas中渲染2D/3D图形，利用GPU加速，无需插件。它通过顶点和片元着色器（用GLSL编写）控制渲染流程，核心步骤包括获取上下文、编译着色器、链接程序、传入顶点数据并绘制。示例中绘制红色三角形需设置顶点位置、颜色，并调用drawArrays。attribute传递顶点数据，uniform传全局参数，varying用于着色器间通信。尽管Three.js等库简化开发，掌握原生WebGL有助于性能优化与调试。

WebGL 让你能在网页上直接绘制高性能的 2D 和 3D 图形，而 JavaScript 是驱动它的核心语言。它不依赖插件，直接利用 GPU 加速，适合做可视化、游戏、动画等图形密集型应用。

WebGL 是什么？

WebGL（Web Graphics Library） 是一套基于 OpenGL ES 的 JavaScript API，可以在 canvas 元素中渲染交互式 3D 和 2D 图形。目前主流浏览器都支持 WebGL 1.0 和 WebGL 2.0。

它通过着色器（Shader）控制图形渲染流程，使用 GLSL（OpenGL Shading Language）编写顶点和片元着色器代码。

基本使用步骤

要在页面中使用 WebGL，需要几个关键步骤：

获取 canvas 元素并创建 WebGL 上下文
编写顶点着色器和片元着色器代码
编译着色器并链接成程序（program）
准备顶点数据并传入 GPU
指定着色器如何读取数据
调用 draw 方法渲染

示例：绘制一个红色三角形

const canvas = document.getElementById('glCanvas');
const gl = canvas.getContext('webgl');

if (!gl) {
  alert('WebGL not supported');
}

// 顶点着色器源码
const vsSource = `
  attribute vec4 aVertexPosition;
  void main() {
    gl_Position = aVertexPosition;
  }
`;

// 片元着色器源码
const fsSource = `
  void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 红色
  }
`;

// 编译着色器函数
function compileShader(gl, source, type) {
  const shader = gl.createShader(type);
  gl.shaderSource(shader, source);
  gl.compileShader(shader);
  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    console.error('Shader compile error:', gl.getShaderInfoLog(shader));
    gl.deleteShader(shader);
    return null;
  }
  return shader;
}

// 初始化 shader 程序
const vertexShader = compileShader(gl, vsSource, gl.VERTEX_SHADER);
const fragmentShader = compileShader(gl, fsSource, gl.FRAGMENT_SHADER);

const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);

if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
  console.error('Program link error:', gl.getProgramInfoLog(shaderProgram));
}

gl.useProgram(shaderProgram);

// 创建顶点数据缓冲区
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

// 三个顶点（x, y）
const positions = [
  0.0,  0.5,
 -0.5, -0.5,
  0.5, -0.5
];

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

// 获取着色器中 attribute 变量的位置
const positionAttributeLocation = gl.getAttribLocation(shaderProgram, 'aVertexPosition');

// 启用 attribute 并配置读取方式
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_BIT);

gl.drawArrays(gl.TRIANGLES, 0, 3);