WebGL着色器—绘制形状

在WebGL中绘制形状是创建图形应用程序的基础。通过使用WebGL着色器和顶点缓冲区，我们可以绘制各种2D和3D形状。以下是如何使用WebGL绘制简单形状的入门指南。

1. 初始化WebGL环境

首先，确保你已经创建了一个基本的WebGL上下文。

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

if (!gl) {
    console.error('WebGL not supported');
}

2. 编写着色器

着色器是WebGL渲染管线中的关键部分。我们需要编写顶点着色器和片段着色器。

顶点着色器：

attribute vec4 a_Position;

void main() {
    gl_Position = a_Position;
}

这个顶点着色器简单地将传入的顶点位置设置为OpenGL的内置变量gl_Position。

片段着色器：

precision mediump float;

uniform vec4 u_Color;

void main() {
    gl_FragColor = u_Color;
}

片段着色器将每个片段的颜色设置为我们传入的u_Color变量。

3. 创建着色器程序

将上述着色器代码编译并链接成一个WebGL程序。

function createShader(gl, type, source) {
    var shader = gl.createShader(type);
    gl.shaderSource(shader, source);
    gl.compileShader(shader);
    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        console.error(gl.getShaderInfoLog(shader));
        gl.deleteShader(shader);
        return null;
    }
    return shader;
}

function createProgram(gl, vertexShader, fragmentShader) {
    var program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);
    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
        console.error(gl.getProgramInfoLog(program));
        gl.deleteProgram(program);
        return null;
    }
    return program;
}

var vertexShaderSource = `...`;  // 顶点着色器代码
var fragmentShaderSource = `...`;  // 片段着色器代码

var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
var program = createProgram(gl, vertexShader, fragmentShader);

gl.useProgram(program);

4. 定义形状的顶点数据

在WebGL中，形状是通过顶点构成的。以下是如何定义和缓冲三角形的顶点数据。

var vertices = new Float32Array([
    0.0,  0.5,  // 顶点1 (x, y)
   -0.5, -0.5,  // 顶点2 (x, y)
    0.5, -0.5   // 顶点3 (x, y)
]);

var buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

var a_Position = gl.getAttribLocation(program, 'a_Position');
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(a_Position);

5. 设置颜色

使用u_Color来定义形状的颜色。

var u_Color = gl.getUniformLocation(program, 'u_Color');
gl.uniform4f(u_Color, 1.0, 0.0, 0.0, 1.0);  // 设置颜色为红色

6. 绘制形状

现在我们可以调用WebGL的绘图函数来渲染形状。

gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

gl.drawArrays(gl.TRIANGLES, 0, 3);  // 绘制三角形

7. 绘制更多形状

为了绘制其他形状，比如矩形或多边形，你可以在顶点缓冲区中定义更多的顶点，并适当调整绘制模式。下面是如何绘制一个矩形的示例：

var vertices = new Float32Array([
    -0.5,  0.5,  // 顶点1
    -0.5, -0.5,  // 顶点2
     0.5,  0.5,  // 顶点3
     0.5, -0.5   // 顶点4
]);

// 将两个三角形的顶点数据放入缓冲区以形成矩形
var indices = new Uint16Array([
    0, 1, 2,  // 三角形1
    2, 1, 3   // 三角形2
]);

var indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);

gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);  // 绘制矩形

8. 总结

通过上述步骤，你已经学习了如何使用WebGL绘制基本的2D形状，如三角形和矩形。你可以通过调整顶点数据和绘制模式，进一步绘制更多复杂的形状，甚至是3D对象。熟悉这些基础之后，你可以尝试添加纹理、光照等效果，使你的WebGL应用更加丰富和生动。