体积光线行进特效

这是一个基于 GLSL 片元着色器实现的实时“体积光线行进”特效。它通过在三维空间中步进，累积颜色和光照，创造出动态、旋转的科幻能量漩涡效果。

点击上方标签，可以查看不同部分代码的详细解释。

HTML & CSS 结构

页面的骨架由 HTML 搭建，CSS 负责美化。它们协同工作，为我们的特效提供一个展示舞台。

<canvas>: 这是 WebGL 的“画板”，所有的图形都将渲染在这里。
<div class="info-panel">: 您正在阅读的这个面板，通过 CSS 的position: absolute和backdrop-filter实现了浮动和毛玻璃效果。
<script type="x-shader/...">: 一种存放 GLSL 着色器代码的技巧，这样浏览器就不会把它当作普通 JavaScript 执行。

JavaScript 负责初始化 WebGL，并将 HTML 与 GLSL 着色器连接起来，就像一个“项目经理”。

获取上下文: 从 <canvas> 获取 WebGL 渲染上下文 gl。
编译着色器: 读取 HTML 中的 GLSL 代码，编译并链接成一个 GPU 可执行的“程序”。
渲染循环: requestAnimationFrame(render) 创建了一个持续的循环。每一帧，它都会将更新后的时间 iTime 等数据发送给着色器，并命令 GPU 进行绘制。

GLSL 是一种在 GPU 上运行的语言，它决定了每个像素的最终颜色。这是魔法发生的地方。