WebGL是一种基于Web标准的图形编程接口，它使用JavaScript和OpenGL ES 2.0来创建交互式3D图形。它可以在所有现代的Web浏览器上运行，并且能够直接在浏览器中渲染3D图形，而不需要额外的插件。
准备工作
在开始编写WebGL代码之前，需要确保你的浏览器支持WebGL。大多数现代浏览器都已经支持了WebGL，但为了确保你的浏览器已启用WebGL，你可以在浏览器中访问chrome://flags，启用WebGL选项。
创建Canvas
我们需要在HTML中创建一个<canvas>元素来展示我们的WebGL图形。<canvas>元素是一个矩形区域，我们可以在其上绘制2D或3D图形。通过JavaScript，我们可以获取到<canvas>元素，并在其上设置WebGL上下文。
<!DOCTYPE html>
<html>
<head>
<title>WebGL入门</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<script src="script.js"></script>
</body>
</html>
在这个例子中，我们在<body>标签中创建了一个宽度和高度都为500像素的<canvas>元素，并指定了一个id为myCanvas。我们还引入了一个名为script.js的JavaScript文件，该文件将包含我们的WebGL代码。
获取WebGL上下文
在JavaScript中，我们需要获取到<canvas>元素的WebGL上下文，才能开始使用WebGL。我们可以使用getContext()方法来获取WebGL上下文。在这个例子中，我们将获取到的上下文保存在一个变量中，方便以后引用。
var canvas = document.getElementById("myCanvas");
var gl = canvas.getContext("webgl");
编写WebGL代码
你现在已经准备好开始编写WebGL代码了。WebGL使用一种类似于OpenGL ES 2.0的着色语言来描述图形的外观和行为。你可以将这种着色语言嵌入在JavaScript代码中。
以下是一个简单的WebGL代码示例，它创建一个三角形并在屏幕上绘制它：
// 顶点着色器代码
var vertexShaderSource = `
attribute vec4 a_position;
void main() {
gl_Position = a_position;
}
`;
// 片段着色器代码
var fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;
// 创建顶点着色器
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
// 创建片段着色器
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
// 创建一个WebGL程序
var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
// 设置顶点属性
var positionAttributeLocation = gl.getAttribLocation(program, "a_position");
var positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
var positions = [
0, 0,
0, 0.5,
0.5, 0,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
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);
在这个例子中，我们首先定义了一个顶点着色器和一个片段着色器。顶点着色器负责定义我们的图形的顶点位置，而片段着色器负责定义图形的颜色。
接下来，我们创建了一个WebGL程序，并将顶点着色器和片段着色器附加到程序中。然后，我们将创建一个缓冲区来存储我们的顶点数据，并将其绑定到WebGL上下文中。
最后，我们设置WebGL的清除颜色，并使用drawArrays()方法绘制我们的三角形。
运行代码
将上面的WebGL代码保存到一个名为script.js的文件中。然后在浏览器中打开上面的HTML文件，你应该能够看到一个红色的三角形在画布上绘制出来。
这只是一个简单的WebGL示例，你可以通过了解更多WebGL的特性来创建更复杂、更精彩的交互式三维图形。
总结
WebGL是一种强大的图形编程接口，它允许我们在Web浏览器中创建交互式的3D图形。通过正确获取WebGL上下文，并编写相应的着色器代码，我们可以使用JavaScript来创建丰富的WebGL应用程序。希望这个简单的入门指南能帮助你快速入门WebGL编程！
本文来自极简博客，作者：星空下的约定，转载请注明原文链接：WebGL入门：创建交互式三维图形
