WebGL入门（001）：简介、示例、应用场景
一、简介
WebGL（Web Graphics Library）是一个JavaScript API，允许在网页中渲染2D和3D图形，而不需要使用插件。它基于OpenGL ES（一个用于嵌入式系统的图形API），能利用计算机的GPU（图形处理单元）进行高性能图形绘制。这使得WebGL成为创建互动图形应用和游戏的强大工具。
WebGL的主要特色在于它的跨平台性。无论是在Windows、Mac OS还是Linux，只要使用支持WebGL的浏览器（如Chrome、Firefox、Safari等），用户都能得到一致的图形体验。此外，WebGL也能够与其他现代Web技术如HTML5、CSS3和JavaScript无缝结合，使得开发者可以创建出复杂且富有吸引力的网页应用。
二、示例
下面我们将用一个简单的WebGL程序展示如何打开一个网页并绘制一个基本的三角形。
HTML结构
首先，我们需要创建一个HTML文件来容纳我们的WebGL绘图区域。以下是一个简单的HTML结构：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebGL 三角形示例</title>
<style>
canvas { width: 100%; height: 100%; }
</style>
</head>
<body>
<canvas id="glCanvas"></canvas>
<script src="app.js"></script>
</body>
</html>
JavaScript代码
接下来，在app.js中添加以下JavaScript代码，来启动WebGL并绘制三角形：
// 获取canvas元素
var canvas = document.getElementById("glCanvas");
// 初始化WebGL上下文
var gl = canvas.getContext("webgl");
// 设置视口
gl.viewport(0, 0, canvas.width, canvas.height);
gl.clearColor(0.0, 0.0, 0.0, 1.0); // 设置背景色为黑色
gl.clear(gl.COLOR_BUFFER_BIT); // 清空颜色缓冲区
// 定义三角形的顶点坐标
var vertices = new Float32Array([
0.0, 0.5, // 顶部顶点
-0.5, -0.5, // 左下角
0.5, -0.5 // 右下角
]);
// 创建缓冲区
var vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
// 创建着色器
var vertexShaderSource = `
attribute vec2 coordinates;
void main(void) {
gl_Position = vec4(coordinates, 0.0, 1.0);
}`;
var fragmentShaderSource = `
void main(void) {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 将颜色设置为红色
}`;
// 编译着色器
function compileShader(source, type) {
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;
}
// 创建和链接程序
var vertexShader = compileShader(vertexShaderSource, gl.VERTEX_SHADER);
var fragmentShader = compileShader(fragmentShaderSource, gl.FRAGMENT_SHADER);
var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);
// 将数据传递给着色器
var coordinates = gl.getAttribLocation(shaderProgram, "coordinates");
gl.vertexAttribPointer(coordinates, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(coordinates);
// 绘制三角形
gl.drawArrays(gl.TRIANGLES, 0, 3);
三、应用场景
WebGL的应用场景非常广泛，包括但不限于以下几个方面：
- 网页游戏：使用WebGL可以创建高性能的3D游戏，提供更好的用户体验。
- 数据可视化：借助WebGL，开发者可以将复杂数据以3D模型的形式进行可视化，帮助用户更好地理解数据。
- 虚拟现实/增强现实：与WebXR结合，WebGL可以实现沉浸式的虚拟现实或增强现实体验。
- 科学仿真：WebGL可用于科学可视化或物理仿真，如分子结构模拟。
- 艺术与设计：艺术家和设计师可以利用WebGL进行交互式的艺术表现。
通过以上的介绍和示例，我们对WebGL有了初步的认识。希望你在后续学习中可以探索更多WebGL的强大功能和应用场景！
