WebGL绘制三角形的编程之旅

2023-09-14 23:39:35

## WebGL绘图入门

WebGL(Web Graphics Library)是一种JavaScript API，用于在支持WebGL的浏览器中渲染交互式3D图形和2D图形，它允许您在Web上创建和渲染复杂的3D场景，而无需任何插件或外部应用程序。WebGL基于OpenGL ES 2.0，并由Khronos Group维护。

## 使用WebGL绘制三角形

本指南将介绍如何使用WebGL绘制三角形，三角形是最简单的几何图形，也是学习WebGL图形编程的起点。

步骤1：获取canvas元素

首先，需要创建一个canvas元素，该元素将用作WebGL的绘图表面。这可以通过以下代码实现：

<canvas id="my-canvas" width="400" height="300"></canvas>

步骤2：获取WebGL绘图上下文

接下来，需要从canvas元素中获取WebGL绘图上下文。这可以通过以下代码实现：

const canvas = document.getElementById("my-canvas");
const gl = canvas.getContext("webgl");

步骤3：初始化着色器

着色器是用于指定如何渲染几何图形的程序，它包含两个部分：顶点着色器和片元着色器。顶点着色器用于处理顶点数据，片元着色器用于处理每个像素的数据。

const vertexShaderSource = `
attribute vec3 position;
void main() {
  gl_Position = vec4(position, 1.0);
}
`;

const fragmentShaderSource = `
void main() {
  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;

const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

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

步骤4：设置canvas背景色

接下来，需要设置canvas的背景色，这可以通过以下代码实现：

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

步骤5：清除之前的绘图内容

在每次绘制新的图形之前，需要清除之前的绘图内容，这可以通过以下代码实现：

gl.clear(gl.COLOR_BUFFER_BIT);

步骤6：绘制三角形

最后，需要使用WebGL的绘图命令绘制三角形，这可以通过以下代码实现：

const vertices = [
  -0.5, -0.5, 0.0,
  0.5, -0.5, 0.0,
  0.0, 0.5, 0.0
];

const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

const positionAttributeLocation = gl.getAttribLocation(program, "position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

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