WebGL绘制正方体：通过drawElements领略顶点复用之妙！

2024-01-30 20:59:09

深入探索WebGL：ELEMENT_ARRAY_BUFFER和drawElements的奥妙，绘制生动三维图形

ELEMENT_ARRAY_BUFFER：提升效率的利器

WebGL作为绘制三维图形的强大平台，ELEMENT_ARRAY_BUFFER可谓是提升效率的利器。它负责存储绘制顺序所需的顶点索引，减少数据传输量，显著提高绘制速度。想象一下，绘制一个复杂的三维模型，需要成千上万个顶点。如果没有ELEMENT_ARRAY_BUFFER，WebGL就必须为每个顶点传输大量数据，这会显著降低渲染效率。

drawElements：点数据复用的精髓

掌握了ELEMENT_ARRAY_BUFFER的奥秘，我们即可揭开drawElements函数的神秘面纱。drawElements函数通过索引间接访问顶点数据，实现点数据的复用。这意味着我们可以使用相同的顶点数据创建多个对象，大大节约内存空间，同时提升渲染效率。就好像一个神奇的复制机，drawElements可以为我们复制点数据，构建出复杂的三维模型。

绘制正方体：魅力三维图形的诞生

现在，让我们将理论付诸实践，亲手构建一个正方体，直观感受drawElements的强大之处。我们将利用六个面、二十四条边和八个顶点，构建出这个三维图形的经典之作。这就像搭建积木，只不过我们的积木是由代码组成。

代码实现：打造正方体的艺术

// 顶点着色器代码
const vertexShaderSource = `
    attribute vec3 a_position;
    uniform mat4 u_modelViewMatrix;
    uniform mat4 u_projectionMatrix;

    void main() {
        gl_Position = u_projectionMatrix * u_modelViewMatrix * vec4(a_position, 1.0);
    }
`;

// 片段着色器代码
const fragmentShaderSource = `
    void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
`;

// 创建WebGL程序
const gl = getWebGLContext();
const program = createProgram(gl, vertexShaderSource, fragmentShaderSource);

// 创建缓冲区对象
const positionBuffer = gl.createBuffer();

// 绑定缓冲区对象
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

// 缓冲区数据
const positions = [
    // 前
    -1.0, -1.0,  1.0,
    1.0, -1.0,  1.0,
    1.0,  1.0,  1.0,
    -1.0,  1.0,  1.0,

    // 右
    1.0, -1.0,  1.0,
    1.0, -1.0, -1.0,
    1.0,  1.0, -1.0,
    1.0,  1.0,  1.0,

    // 后
    1.0, -1.0, -1.0,
    -1.0, -1.0, -1.0,
    -1.0,  1.0, -1.0,
    1.0,  1.0, -1.0,

    // 左
    -1.0, -1.0, -1.0,
    -1.0, -1.0,  1.0,
    -1.0,  1.0,  1.0,
    -1.0,  1.0, -1.0,

    // 上
    -1.0,  1.0,  1.0,
    1.0,  1.0,  1.0,
    1.0,  1.0, -1.0,
    -1.0,  1.0, -1.0,

    // 下
    -1.0, -1.0, -1.0,
    1.0, -1.0, -1.0,
    1.0, -1.0,  1.0,
    -1.0, -1.0,  1.0
];

// 将数据写入缓冲区对象
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

// 创建ELEMENT_ARRAY_BUFFER
const indexBuffer = gl.createBuffer();

// 绑定ELEMENT_ARRAY_BUFFER
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);

// 索引数据
const indices = [
    0,  1,  2,      0,  2,  3,    // 前
    4,  5,  6,      4,  6,  7,    // 右
    8,  9,  10,     8,  10, 11,   // 后
    12, 13, 14,     12, 14, 15,   // 左
    16, 17, 18,     16, 18, 19,   // 上
    20, 21, 22,     20, 22, 23    // 下
];

// 将索引数据写入缓冲区对象
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

// 获取顶点位置属性的指针
const positionAttributeLocation = gl.getAttribLocation(program, "a_position");

// 启用顶点位置属性
gl.enableVertexAttribArray(positionAttributeLocation);

// 将缓冲区对象分配给顶点位置属性
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

// 获取模型视图矩阵和投影矩阵的指针
const modelViewMatrixLocation = gl.getUniformLocation(program, "u_modelViewMatrix");
const projectionMatrixLocation = gl.getUniformLocation(program, "u_projectionMatrix");

// 设置模型视图矩阵
const modelViewMatrix = mat4.create();
mat4.translate(modelViewMatrix, modelViewMatrix, [0.0, 0.0, -7.0]);
mat4.rotateX(modelViewMatrix, modelViewMatrix, degToRad(30));
mat4.rotateY(modelViewMatrix, modelViewMatrix, degToRad(45));

// 设置投影矩阵
const projectionMatrix = mat4.create();
mat4.perspective(projectionMatrix, degToRad(45), gl.canvas.width / gl.canvas.height, 0.1, 100.0);

// 将模型视图矩阵和投影矩阵传给着色器
gl.uniformMatrix4fv(modelViewMatrixLocation, false, modelViewMatrix);
gl.uniformMatrix4fv(projectionMatrixLocation, false, projectionMatrix);

// 清除画布
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

// 开启深度测试
gl.enable(gl.DEPTH_TEST);

// 使用程序
gl.useProgram(program);

// 绘制正方体
gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);