WebGL 缓冲区使用与多点绘制实战

编写渲染逻辑

接下来是关键部分。我们在 main.js 中初始化上下文，编译着色器，并重点演示如何设置缓冲区。

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

if (!gl) {
    alert('Unable to initialize WebGL.');
}

// 简单的顶点着色器：只处理位置
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 initShaderProgram(gl, vsSource, fsSource) {
    const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
    const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
    const shaderProgram = gl.createProgram();
    gl.attachShader(shaderProgram, vertexShader);
    gl.attachShader(shaderProgram, fragmentShader);
    gl.linkProgram(shaderProgram);
    return shaderProgram;
}

function loadShader(gl, type, source) {
    const shader = gl.createShader(type);
    gl.shaderSource(shader, source);
    gl.compileShader(shader);
    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        console.error('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
        gl.deleteShader(shader);
        return null;
    }
    return shader;
}

// 初始化程序
const shaderProgram = initShaderProgram(gl, vsSource, fsSource);
const programInfo = {
    program: shaderProgram,
    attribLocations: {
        vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
    },
};

// 准备顶点数据：500 个随机点
const positions = [];
for (let i = 0; i < 500; i++) {
    positions.push(Math.random() * 2 - 1); // x
    positions.push(Math.random() * 2 - 1); // y
    positions.push(0.0);                    // z
}

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

// 将数据写入 GPU
const floatPositions = new Float32Array(positions);
gl.bufferData(gl.ARRAY_BUFFER, floatPositions, gl.STATIC_DRAW);

// 绘制循环
function drawScene() {
    gl.viewport(0, 0, canvas.width, canvas.height);
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);

    gl.useProgram(programInfo.program);

    // 绑定属性
    gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    
    // 告诉 WebGL 如何读取数据
    const size = 3; // x, y, z
    const type = gl.FLOAT;
    const normalize = false;
    const stride = 0;
    const offset = 0;
    gl.vertexAttribPointer(programInfo.attribLocations.vertexPosition, size, type, normalize, stride, offset);

    // 关键点：一次 drawArrays 调用绘制所有点
    gl.drawArrays(gl.POINTS, 0, 500);
}

drawScene();

关键点解析

注意看 gl.bufferData 这一步，我们将 JS 中的数组转换成了 Float32Array 再传给 GPU。这比直接传普通数组更高效。

在 drawScene 函数中，我们不需要循环 500 次去画点，而是通过 gl.drawArrays(gl.POINTS, 0, 500) 一次性告诉 GPU：'这里有 500 个点，按顺序画出来'。这就是缓冲区带来的性能红利。

实际运行时，你会发现即使点数量增加到几万，帧率依然稳定。如果去掉缓冲区改用逐点绘制，浏览器大概率会卡死。希望这个实战案例能帮你建立起对 WebGL 内存管理的直观认识。