WebGL - 介绍
你好，未来的WebGL魔法师们！欢迎加入我们激动人心的3D网页图形世界之旅。我很高兴能作为你的向导，一起探索WebGL这个迷人的领域。作为一个教授计算机图形学超过十年的人，我可以向你保证，尽管前方的道路可能看起来令人畏惧，但它同样极其有价值。所以，系好安全带，让我们跳进去吧！
什么是OpenGL？
在我们深入了解WebGL之前，让我们快速了解一下它的前身，OpenGL。想象你是一位试图创作杰作的艺术家。OpenGL就像是你的神奇颜料和画笔套装，让你能在计算机屏幕上创作出令人惊叹的视觉艺术。
OpenGL代表开放图形库，是一个跨平台的API（应用程序编程接口），用于渲染2D和3D矢量图形。自1992年以来，它一直存在，并且成为无数游戏、模拟和视觉应用的基础。
这里有一个简单的类比：如果你的计算机屏幕是一块画布，那么OpenGL就是帮助程序员以惊人的细节和速度在这块画布上绘画的工具集。
什么是WebGL？
现在，让我们将注意力转移到我们节目的明星：WebGL。如果说OpenGL是桌面应用的画笔，那么WebGL就是网络的画笔。它是一个JavaScript API，允许你在不需要任何插件的情况下，直接在网页中创建出色的3D图形。
WebGL将OpenGL ES 2.0（用于嵌入式系统的OpenGL版本）的力量带到了网络，允许开发者通过JavaScript直接利用GPU。
下面是一个简单的WebGL "Hello, World!"示例：
<canvas id="glCanvas" width="640" height="480"></canvas>
<script>
function main() {
const canvas = document.getElementById("glCanvas");
const gl = canvas.getContext("webgl");
if (gl === null) {
alert("无法初始化WebGL。您的浏览器或机器可能不支持。");
return;
}
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
}
window.onload = main;
</script>这段代码在你的网页上创建了一个黑色画布。它可能看起来不多，但这是你进入WebGL世界的第一步！
谁开发了WebGL
WebGL是由Khronos Group开发的，他们是OpenGL背后的同一群人。WebGL首次在2011年推出，自那时起，它改变了我们对网络图形的看法。
有趣的事实：WebGL的开发受到了Vladimir Vukićević在Mozilla的实验的启发。他创建了一个暴露OpenGL ES给JavaScript的canvas元素，这为WebGL的发展奠定了基础。
渲染
渲染是从2D或3D模型生成图像的过程。在WebGL中，这个过程是实时发生的，这意味着图像是在你与之交互时即时生成的。
下面是一个渲染红色三角形的简单示例：
// 顶点着色器程序
const vsSource = `
attribute vec4 aVertexPosition;
void main() {
gl_Position = aVertexPosition;
}
`;
// 片元着色器程序
const fsSource = `
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;
// ...（初始化代码）
// 绘制场景
function drawScene(gl, programInfo, buffers) {
gl.clearColor(0.0, 0.0, 0.0, 1.0); // 清除为黑色，完全不透明
gl.clearDepth(1.0); // 清除所有内容
gl.enable(gl.DEPTH_TEST); // 启用深度测试
gl.depthFunc(gl.LEQUAL); // 近处的物体遮挡远处的物体
// 在开始绘制之前清除画布
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// ...（设置场景）
{
const numComponents = 2; // 每次迭代提取2个值
const type = gl.FLOAT; // 缓冲区中的数据是32位浮点数
const normalize = false; // 不归一化
const stride = 0; // 从一组值到下一组值需要多少字节
const offset = 0; // 缓冲区内部从哪里开始
gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
gl.vertexAttribPointer(
programInfo.attribLocations.vertexPosition,
numComponents,
type,
normalize,
stride,
offset);
gl.enableVertexAttribArray(
programInfo.attribLocations.vertexPosition);
}
// 告诉WebGL在绘制时使用我们的程序
gl.useProgram(programInfo.program);
{
const offset = 0;
const vertexCount = 3;
gl.drawArrays(gl.TRIANGLES, offset, vertexCount);
}
}这段代码设置了必要的着色器和缓冲区，以在屏幕上渲染一个简单的红色三角形。
GPU
GPU代表图形处理单元。它是一种专用处理器，旨在处理渲染图形中涉及的复杂数学运算。虽然CPU非常适合通用计算，但GPU擅长并行执行许多简单计算，这对图形工作非常理想。
可以这样理解：如果渲染一个复杂的3D场景就像绘制一幅巨大的壁画，那么CPU就像一个极其有才华的艺术家，而GPU就像数千个普通艺术家一起工作。
GPU加速计算
GPU加速计算指的是将GPU与CPU结合使用，以加速科学、分析、工程、消费和企业应用程序。在WebGL的背景下，这意味着你的图形计算被卸载到GPU，从而释放CPU处理其他任务，并产生更平滑、更快速的图形。
支持的浏览器
WebGL的美妙之处在于它在现代浏览器中的广泛支持。截至2023年，WebGL支持以下浏览器：
| 浏览器 | 版本 |
|---|---|
| Chrome | 9+ |
| Firefox | 4+ |
| Safari | 5.1+ |
| Opera | 12+ |
| Internet Explorer | 11+ |
| Microsoft Edge | 12+ |
WebGL的优势
WebGL提供了许多优势：
- 跨平台兼容性：一次编写，到处运行（只要浏览器支持）。
- 无需插件：它内置在浏览器中。
- 硬件加速：利用GPU实现更好的性能。
- 与网络技术集成：可以与其他网络API结合，提供丰富的交互体验。
- 开放标准：任何人都可以为其发展做出贡献。
环境设置
设置你的WebGL环境出奇地简单。你需要的只是：
- 一个现代的网络浏览器
- 一个文本编辑器（我推荐Visual Studio Code）
- 一个本地网络服务器（你可以使用Python内置的服务器或Node.js的http-server）
以下是一个简单的设置过程：
- 为你的项目创建一个新的目录
- 创建一个HTML文件（例如，
index.html）和一个JavaScript文件（例如，script.js） - 在你的HTML文件中，包含你的JavaScript文件并设置一个canvas：
<!DOCTYPE html>
<html>
<head>
<title>我的第一个WebGL项目</title>
</head>
<body>
<canvas id="glCanvas" width="640" height="480"></canvas>
<script src="script.js"></script>
</body>
</html>- 在你的JavaScript文件中，初始化WebGL：
function main() {
const canvas = document.getElementById("glCanvas");
const gl = canvas.getContext("webgl");
if (gl === null) {
alert("无法初始化WebGL。您的浏览器或机器可能不支持。");
return;
}
// WebGL代码放在这里
}
window.onload = main;就这样！你现在准备好开始你的WebGL之旅了。记住，学习WebGL就像学习骑自行车 - 起初可能会有些摇晃，但经过练习，你很快就会自如地骑行。快乐编码！
Credits: Image by storyset