WebGL基本绘图-WebGL开发指南

当前位置:　首页>> 技术小册>> WebGL开发指南

WebGL（Web Graphics Library）是一种基于Web标准的JavaScript API，用于在支持WebGL的浏览器中进行硬件加速的2D和3D图形渲染。它允许开发人员直接访问计算机的GPU（图形处理单元），以实现高性能的图形渲染和交互。在本文中，我们将介绍WebGL的基本绘图功能，并通过示例代码展示其用法。

在开始之前，请确保你已经具备了一定的HTML、JavaScript和基本的图形学知识。同时，你需要一个支持WebGL的浏览器，如Chrome、Firefox或Safari。

--------------------

**1、准备工作**

首先，在HTML文档中创建一个canvas元素，用于显示WebGL图形。可以通过以下代码实现：

```
<!DOCTYPE html>
<html>
<head>
    <title>WebGL Basic Drawing</title>
    <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100%; }
    </style>
</head>
<body>
    <canvas id="myCanvas"></canvas>
</body>
</html>
```

在上面的代码中，我们创建了一个全屏的canvas元素，并给它一个id为"myCanvas"。接下来，我们将使用JavaScript来初始化WebGL上下文，并进行基本的绘图操作。

**2、初始化WebGL上下文**

使用JavaScript代码获取canvas元素，并初始化WebGL上下文。以下是一个示例：

```
const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');
if (!gl) {
    alert('WebGL not supported.');
}

```
在上面的代码中，我们首先使用getElementById方法获取了id为"myCanvas"的canvas元素，然后通过getContext('webgl')方法初始化了WebGL上下文。如果浏览器不支持WebGL，则会显示一个警告框。

**3、绘制一个三角形**

现在，让我们通过WebGL绘制一个简单的三角形。以下是一个示例代码：

```
// 顶点着色器代码
const vertexShaderSource = `
attribute vec2 a_position;

void main() {
    gl_Position = vec4(a_position, 0.0, 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);

// 定义三角形顶点坐标
const vertices = [
    -0.5, -0.5,
    0.5, -0.5,
    0.0, 0.5
];

// 创建顶点缓冲区对象（VBO）
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

// 获取顶点着色器中的属性变量位置
const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

// 清空画布
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

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

在上面的代码中，我们首先定义了一个三角形的顶点坐标，然后创建了一个顶点缓冲区对象（VBO），并将顶点数据存储在其中。接下来，我们获取了顶点着色器中的属性变量位置，并启用顶点属性数组，以便将顶点数据传递到顶点着色器中。然后，我们清空画布，并使用gl.drawArrays方法绘制三角形。

**4、添加变换和交互**

WebGL还支持对图形进行变换和交互操作，例如平移、缩放和旋转。以下是一个示例代码，演示如何平移和缩放三角形：

```
// 获取变换矩阵的uniform变量位置
const transformUniformLocation = gl.getUniformLocation(program, 'u_transform');

// 定义平移和缩放矩阵
const translateMatrix = new Float32Array([
    1.0, 0.0, 0.0, 0.0,
    0.0, 1.0, 0.0, 0.0,
    0.0, 0.0, 1.0, 0.0,
    0.5, 0.5, 0.0, 1.0
]);

const scaleMatrix = new Float32Array([
    1.5, 0.0, 0.0, 0.0,
    0.0, 1.5, 0.0, 0.0,
    0.0, 0.0, 1.0, 0.0,
    0.0, 0.0, 0.0, 1.0
]);

// 传递变换矩阵到着色器程序中
gl.uniformMatrix4fv(transformUniformLocation, false, translateMatrix);

// 清空画布
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

// 绘制变换后的三角形
gl.drawArrays(gl.TRIANGLES, 0, 3);
```

在上面的代码中，我们首先获取了变换矩阵的uniform变量位置，并定义了平移和缩放矩阵。然后，我们使用`gl.uniformMatrix4fv`方法将变换矩阵传递到着色器程序中的uniform变量中。接下来，我们清空画布，并使用`gl.drawArrays`方法绘制变换后的三角形。

除了平移和缩放，WebGL还支持旋转、投影和其他更复杂的变换操作。你可以根据自己的需求进行相应的实现。

**5、小结**

本文介绍了WebGL的基本绘图功能，并通过示例代码演示了绘制一个简单三角形的过程。还展示了如何进行变换操作，如平移和缩放。通过这些基础知识，你可以开始探索更复杂的WebGL图形渲染和交互技术。

该分类下的相关小册推荐：

uniapp快速入门与实战

vue高级应用开发与构建

Web响应式布局入门到实战

web前端面试完全指南