WebGL 是一项令人兴奋的技术，它赋予了网页浏览器强大的3D图形绘制能力。通过 WebGL，我们可以在浏览器中创建逼真的3D场景、动画和交互体验。本文将带你深入了解 WebGL 的基础知识，并通过简单的示例演示如何利用 WebGL 创建令人惊叹的图形效果，废话不多说，开搞！
什么是WebGL？
WebGL 是一种基于JavaScript的 图形渲染技术，它使用 HTML5 的 <canvas> 元素作为图形容器，并借助 WebGL API 来进行图形渲染。它的目标是将 硬件加速的3D图形能力 引入到网页浏览器中，使开发者能够创建逼真、流畅的图形和动画效果，而无需依赖额外的插件或扩展
WebGL的工作原理
WebGL 基于 图形管道 的概念，通过一系列的处理步骤将 3D图形数据 转化为 屏幕上的像素，下面让我们了解一下 WebGL 的工作原理
- 顶点处理：在这个阶段，你可以对几何数据进行 平移、旋转和缩放 等操作，每个顶点都会经过处理，生成新的位置信息
- 光栅化：光栅化是一个关键的步骤，它将处理后的几何数据转化为 屏幕上的像素，这决定了图形在屏幕上的位置和大小
- 片段处理：在这个阶段，对光栅化后生成的片段进行处理，这包括 纹理应用、光照效果、深度测试 和 颜色插值 等操作
- 像素操作：最后一个阶段是对最终像素进行处理，如 混合和抗锯齿 等
开始WebGL之旅
现在，让我们来编写一个简单的 WebGL 程序，以了解它的基本用法
我们将创建一个着色器程序，通过它来渲染一个彩色的三角形。首先，在你的 HTML 文件中创建一个 <canvas> 元素，用于显示图形，然后，使用 JavaScript 获取 <canvas> 元素的上下文（context），通过它来操作 WebGL
<!DOCTYPE html>
<html>
<head>
<title>探索 WebGL 之旅</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100%; }
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var gl = canvas.getContext("webgl");
// 设置清空画布的颜色
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// 清空画布
gl.clear(gl.COLOR_BUFFER_BIT);
// 顶点着色器源码
var vertexShaderSource = `
attribute vec2 position;
void main() {
gl_Position = vec4(position, 0.0, 1.0);
}
`;
// 片段着色器源码
var fragmentShaderSource = `
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);
// 创建着色器程序
var shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);
// 定义顶点数据
var vertices = [
-0.5, -0.5,
0.5, -0.5,
0.0, 0.5
];
// 创建缓冲区
var vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
// 设置顶点属性指针
var positionAttributeLocation = gl.getAttribLocation(shaderProgram, "position");
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
// 绘制三角形
gl.drawArrays(gl.TRIANGLES, 0, 3);
</script>
</body>
</html>
在上面的代码中，我们定义了 顶点着色器 和 片段着色器 的源码，顶点着色器负责处理 顶点的位置信息，片段着色器负责处理片段（像素）的 颜色信息，这两个着色器一起组成了 着色器程序，用来控制WebGL的渲染过程
在 顶点着色器 中，我们简单地将顶点的位置传递给内置变量 gl_Position，这样 WebGL 就知道如何在屏幕上绘制这些顶点
在 片段着色器 中，我们将颜色设置为红色（1.0, 0.0, 0.0, 1.0），表示绘制的图形将是红色的
通过创建顶点着色器和片段着色器，并将它们编译、链接到着色器程序中，我们能够实现自定义的图形渲染效果
结语
本文通过一个简单的示例介绍了WebGL的入门知识，并且了解了WebGL的工作原理，但这只是WebGL的冰山一角，我相信通过本文的抛砖引玉，一定会勾起你对它的兴趣，所以心动不如行动，赶快学起来吧！
都看到这里啦，如果本篇文章对你有帮助，希望能 点个赞👍 支持下啦，你们的支持才是我最大的动力！😘
