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图形渲染和交互技术。
