如何使用 Three.js 和 GLSL 创建交互式的水滴状 Metaballs
Fragment shaders allow us to create smooth, organic visuals that are difficult to achieve with standard polygon-based rendering in WebGL. One powerful example is the metaball effect, where multiple objects blend and deform seamlessly. This can be implemented using a technique called ray marching, directly within a fragment shader.
片段着色器允许我们创建平滑、有机的视觉效果，这在 WebGL 的标准多边形渲染中是很难实现的。一个强大的例子是 元球 效果，其中多个对象无缝地融合和变形。这可以通过一种称为光线行进的技术直接在片段着色器中实现。
In this tutorial, we’ll walk you through how to create droplet-like, bubble spheres using Three.js and GLSL—an effect that responds interactively to your mouse movements. But first, take a look at the demo video below to see the final result in action.
在本教程中，我们将带您了解如何使用 Three.js 和 GLSL 创建类似水滴的气泡球体——一种对您的鼠标移动做出互动响应的效果。但首先，请查看下面的演示视频，以查看最终结果的实际效果。
Let’s take a look at the overall structure of the demo and review the steps we’ll follow to build it.
让我们看看演示的整体结构，并回顾一下我们将遵循的构建步骤。
1. Setting Up the Fullscreen Plane
We create a fullscreen plane that covers the entire viewport.
我们创建一个覆盖整个视口的全屏平面。
2. Rendering Spheres with Ray Marching
We’ll render spheres using ray marching in the fragment shader.
我们将在片段着色器中使用光线行进渲染球体。
We blend multiple spheres smoothly to create a metaball effect.
我们平滑地混合多个球体以创建元球效果。
4. Adding Noise for a Droplet-like Appearance
By adding noise to the surface, we create a realistic droplet-like texture.
通过在表面上添加噪声，我们创建了一个逼真的水滴状纹理。
5. Simulating Stretchy Droplets with Mouse Movement
We arrange spheres along the mouse trail to create a stretchy, elastic motion.
我们沿着鼠标轨迹排列球体，以创建一种拉伸、弹性的运动。
Let’s get started!
让我们开始吧！
We render a single fullscreen plane that covers the entire viewport.
我们渲染一个覆盖整个视口的全屏平面。
const planeGeometry = new THREE.PlaneGeometry(2.0, 2.0);
const planeMaterial = new THREE.RawShaderMaterial({ vertexShader: base_vert, fragmentShader: output_frag, uniforms: this.uniforms,
});
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
this.scene.add(plane);
We define a...