AI 摘要： 本文详细介绍了如何使用 Three.js 和 GLSL 创建具有互动性的液滴状 metaball 效果。通过片段着色器和光线步进技术，实现了多个球体无缝融合并响应鼠标移动的动态效果。教程从基础设置开始，逐步深入到光线步进、表面法线计算、平滑融合、噪声纹理添加以及鼠标互动的实现，适合对 WebGL 和着色器编程感兴趣的开发者学习和实践。

概览：介绍了演示的整体结构和构建步骤，包括全屏平面的设置、光线步进渲染球体、从球体到 metaball 的平滑过渡、添加噪声以获得液滴外观，以及通过鼠标移动模拟拉伸效果。

1. 全屏平面设置：创建覆盖整个视口的全屏平面，通过 Three.js 设置几何体和材质，并传递画布大小的 uniform 变量到着色器。
2. 光线步进渲染球体：在片段着色器中使用光线步进技术渲染球体，详细解释了光线步进的步骤、SDF（有符号距离函数）的概念，以及如何通过代码实现两个重叠球体的渲染。
3. 从球体到 Metaball：通过 smoothMin 函数平滑融合多个球体的距离值，避免硬边缘，创造出有机融合的 metaball 效果，并通过参数控制融合平滑度。
4. 添加噪声以获得液滴外观：利用 3D 值噪声技术对表面进行扰动，结合反射向量和时间变量生成液滴纹理，并通过后处理增强玻璃般的半透明效果。
5. 通过鼠标移动模拟拉伸液滴：通过记录鼠标轨迹并沿轨迹放置多个球体，实现液滴的拉伸和弹性运动效果，增强互动性。