WebGL-绘制四边形

WebGL是一种基于OpenGL的Web标准，它允许我们通过JavaScript在浏览器中进行硬件加速的3D渲染。绘制四边形是WebGL的一个重要应用，本文将带你学习如何使用WebGL绘制四边形。

WebGL基础知识

在开始绘制四边形之前，我们需要先了解一些WebGL的基础知识。

1. 获取WebGL上下文

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

获取WebGL上下文需要通过使用canvas元素，将其上下文设置为webgl。在这里先用getElementById获取canvas元素，然后在canvas上调用getContext方法并传入webgl参数即可获取WebGL上下文。

2. 清空画布

gl.clear(gl.COLOR_BUFFER_BIT);

默认情况下，canvas的所有像素都是黑色的。为了绘制新的图形，我们必须首先清空画布。可以使用clear方法来完成，将颜色缓冲区设置为指定的值。

3. 创建着色器程序

const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, `
    attribute vec4 position;
    void main() {
        gl_Position = position;
    }
`);
gl.compileShader(vertexShader);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, `
    precision mediump float;
    uniform vec4 color;
    void main() {
        gl_FragColor = color;
    }
`);
gl.compileShader(fragmentShader);

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

WebGL使用着色器程序来表示图形如何在屏幕上呈现。着色器程序由着色器对象组成，包括顶点着色器和片段着色器。顶点着色器将输入的顶点数据转换为屏幕上的坐标，而片段着色器控制每个像素的颜色。在这里，我们定义了一个简单的着色器程序。顶点着色器只需要接受一个4维向量作为顶点位置，并将其传递给gl_Position进行转换。片段着色器用gl_FragColor设置了每个像素的颜色。

4. 绑定缓冲区

const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
    -0.5, 0.5,
    0.5, 0.5,
    -0.5, -0.5,
    0.5, -0.5,
]), gl.STATIC_DRAW);
const positionAttributeLocation = gl.getAttribLocation(program, 'position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

const colorUniformLocation = gl.getUniformLocation(program, 'color');

缓冲区用作在GPU中存储顶点数据的容器。在这里，我们定义了一个缓冲区，并将其绑定到gl.ARRAY_BUFFER上下文中。数据通过bufferData方法写入缓冲区，它接受一个Float32Array，包含四边形各顶点的坐标。缓冲区的位置属性通常是用来传递顶点数据的，因此，我们需要通过getAttribLocation方法获得顶点属性的位置，并用vertexAttribPointer将其与缓冲区中的数据建立关系。最后，我们还需获得uniform变量color的位置。

绘制四边形

绘制四边形需要调用drawArrays方法，它从缓冲区中读取顶点数据，并用着色器程序对其进行处理。在这里，我们只需要将gl.drawArrays传入gl.TRIANGLE_STRIP，即可在屏幕上绘制四边形。

function draw(color) {
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);

    gl.useProgram(program);

    gl.uniform4fv(colorUniformLocation, color);

    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
}

draw([0.5, 0.5, 1.0, 1.0]);

以上代码可以在WebGL上下文中绘制一个带有颜色的矩形。

总结

在本文中，我们学习了如何使用WebGL绘制四边形，包括获取WebGL上下文、清空画布、创建着色器程序、绑定缓冲区和绘制四边形等基本操作。通过使用这些知识，我们可以在浏览器中进行3D渲染。