gradient multicolor metaballs with threejs and marchingcubes - three.js

Question

I am looking on how to implement something similar than this work: https://vimeo.com/9121195 . But with explicitly attributing colors to each metaball from an array of given colors. As far as I can see, this is done entirely from the shader side in this example but I was wondering if this could not be implemented with Threejs and marchingcubes.
By creating a new THREE.ShaderMaterial I assume I can pass positions of each metaball to the shader and then evaluate the distance of each vertex with the given positions to finally assign a color to each pixel.
Just to simplify the problem I start with two moving metaballs.
from threejs:
function init() {
//...
var strength = 0.61;
var resolution = 70;
var substract = 25;
var scaleFactor = 1200;
var posData = []; // array storing metaballs positions
var myShaderMaterial = new THREE.ShaderMaterial({ uniforms: THREE.UniformsUtils.clone( shader.uniforms ),
vertexShader: shader.vertexShader,
fragmentShader: shader.fragmentShader,
name:"myShaderMaterial" }); // shader is described below
effect = new THREE.MarchingCubes( resolution, myShaderMaterial,false,true);
effect.position.set( 0, 0, 0 );
effect.scale.set( scaleFactor, scaleFactor, scaleFactor );
effect.enableUvs = true;
effect.enableColors = true;
effect.hasColors = true;
effect.castShadow = true;
//...
scene.add( effect );
}
function render() {
effect.reset();
effect.init(resolution);
for (var i = 0; i <= posData.length - 1; i++) {
item = posData[i];
effect.addBall(item[0], item[1], item[2], strength, substract);
effect.material.uniforms.allPos.value[i] = new THREE.Vector3(item[0],item[1],item[2]).multiplyScalar(1./scaleFactor);
}
//...
}
here is my shader:
'myShaderMaterial' : {
uniforms: {
"colChoice":{type: "v3v", value:[new THREE.Color( 0xef5350 ),
new THREE.Color( 0xffffff )]},
"allPos":{type: "v3v",value:[new THREE.Vector3(0., 0., 0.),
new THREE.Vector3(0., 0., 0.)]},
},
vertexShader: [
"uniform vec3 colChoice[2];",
"varying vec3 vNormal;",
"varying vec3 vRefract;",
"varying vec3 blobColor;",
"varying vec3 otherColor;",
"uniform vec3 allPos[2];",
"varying float mixScale;",
"void main() {",
"vec4 worldPosition = modelMatrix * vec4( position, 1.0 );",
"vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );",
"vec3 worldNormal = normalize ( mat3( modelMatrix[0].xyz, modelMatrix[1].xyz, modelMatrix[2].xyz ) * normal );",
"vNormal = normalize( normalMatrix * normal );",
"gl_Position = projectionMatrix * mvPosition;",
"float distMin = 100000000000000000000000000000000000000.;",
"float distMax = 0.;",
"for (int i=0;i<2;i++){",
"float distV = distance(allPos[i], position );",
"if (distV<distMin){",
"distMin = distV;",
"}",
"if (distV>distMax){",
"distMax = distV;",
"}",
"mixScale = smoothstep(distMin,distMax,distV);",
"if (mod(float(i),2.0)==0.){",
"blobColor = colChoice[0];",
"otherColor = colChoice[1];",
"}",
"else{",
"blobColor = colChoice[1];",
"otherColor = colChoice[0];",
"}",
"}",
"}",
].join( "\n" ),
fragmentShader: [
"varying vec3 blobColor;",
"varying vec3 otherColor;",
"varying vec3 vNormal;",
"varying float mixScale;",
"void main() {",
"vec3 finalColor = (0.3*vNormal) + mix(otherColor,blobColor,mixScale);",
"gl_FragColor = vec4(finalColor,1.0);",
"}",
].join( "\n" )
here is a sample result:
The issue here is that obviously the distance is not calculated properly and the transition between two colors that I tried to do with mixScale also does not work. Any idea?

Answer 1

Yeah it's possible but I don't think it does it out of the box. I peeked at the marchingcubes code you linked, and it has an "enableColor" flag but color seems to be filled with the vertex coordinate instead of interpolating a separate color value from the density field.
I've had to do something very similar in the past to do multi material terrain generation from noise fields. I think I ended up extending the marching cubes to interpolate colors, then assigned each material to a color channel, r, g, b.