片段着色器处的THREE.JS Metaballs动画

我有一个代码，我试图在粒子之间进行变形球运动过渡，比如Shadertoy sketch

所以，最后，我需要这样的东西：

最终，它也必须被动画化

为此，我创建了另一个着色器[Joint]，其宽度/高度等于粒子之间的距离，并且已经得到了它们的位置，因此如果调用

gl_FragColor=vec4（1.0-圆（fragCoord，startPos，16.0）*圆（fragCoord，endPos，16.0））

这将在他们的位置上透支圈子

但当我试图画变形球时，我什么都没有

我很确定fragCoord初始化有问题，或者我必须调整这些参数：

const float threshold = 3.0;
const float density = 1000.0;
const float norm = 2.0;

及

位置和半径

THREE.TOUCH={}；
var circularPoint='数据：image/svg+xml；utf8'；
var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（35，内宽/内高，11000）；
摄像机位置设置（0,0,20）；
var renderer=new THREE.WebGLRenderer（）；
设置大小（innerWidth，innerHeight）；
renderer.setPixelRatio（window.devicePixelRatio）；
setClearColor（0xEEEE，1.0）；
document.body.appendChild（renderer.doElement）；
var controls=新的三个.OrbitControls（摄影机、渲染器.doElement）；
var N=4，
顶点=[]，
颜色=[]，
半径=[]；
顶点=[
新三个矢量3（0.0,0.0，-4.0），
新的3.Vector3（-4.0,0.0,0.0），
新三个矢量3（4.0,0.0,0.0），
新的3.Vector3（0.0,0.0,4.0）
];
颜色。推送（1.0,0,1.0）；
颜色。推送（1.0,0,1.0）；
颜色.推力（0.847,0.332,0.347）；
颜色.推力（0.457,0.695,0.675）；
对于（变量i=0；i

正文{溢出：隐藏；边距：0；}

3.JS元球
#定义PI 3.141592
属性浮动半径；
属性向量3颜色；
均匀浮动视口；
可变vec3颜色；
void main（）{
vColor=颜色；
vec4 mvPosition=modelViewMatrix*vec4（位置，1.0）；
gl_PointSize=视口*半径*PI/-mvPosition.z；
gl_位置=投影矩阵*mvPosition；
}
可变vec3颜色；
二维纹理均匀；
均匀vec2分辨率；
void main（）{
gl_FragColor=vec4（vColor，1.）*texture2D（texture，gl_PointCoord）；
如果（gl_FragColor.a<0.1）丢弃；
}
#定义PI 3.141592
属性浮动半径；
均匀浮动视口；
均匀vec2分辨率；
均匀vec3启动；
均匀vec3端；
变化的vec2突出部分；
可变vec2外端；
可变vec2 vUv；
vec2项目世界坐标（vec3英寸）{
vec4 p=projectionMatrix*modelViewMatrix*vec4（in.xy，in.z，1.0）；
返回p.xy/p.w；
}
void main（）{
vUv=紫外线；
outStart=项目世界坐标（开始）；
outEnd=项目世界坐标（结束）；
vec4 mvPosition=modelViewMatrix*vec4（位置，1.0）；
gl_PointSize=视口*半径*PI/-mvPosition.z；
gl_位置=投影矩阵*mvPosition；
}
均匀vec2分辨率；
变化的vec2突出部分；
可变vec2外端；
可变vec2 vUv；
常量浮点阈值=3.0；
恒浮密度=1000.0；
常量浮点范数=2.0；
vec2-startPos；
vec2-endPos；
浮动像素功率；
vec2 fragCoord；
vec4混合色；
结构元球{
vec2位置；
浮动半径；
vec3颜色；
浮力；
};
变形球[4]；
浮点范数（浮点数）{返回功率（浮点数，范数）；}
Metaball设置Metaball（vec2位置、浮动半径、vec3颜色）{
Metaball m；
m、 位置=位置；
m、 半径=半径；
m、 颜色=颜色；
vec2像素位置=fragCoord.xy/分辨率.xy；
pixelPosition.x=pixelPosition.x*分辨率.x/分辨率.y；
vec2距离向量=像素位置-位置_
balls[0] = setMetaball(vec2(0.0, 0.0), 0.2, vec3(0.0, 0.0, 1.0));
balls[1] = setMetaball(startPos, 0.05, vec3(0.0, 0.0, 1.0));
balls[2] = setMetaball(endPos, 0.1, vec3(0.0, 1.0, 0.0));
balls[3] = setMetaball(endPos, 0.05, vec3(0.0, 1.0, 0.0));