moving from one point to point on sphere

Question

I'm working with a GPU based particle system. There are 1 million particles computed by passing in the x,y,z positions as rgb values on a 1024*1024 texture. The same is being done for their velocities.

I'm trying to make them move from an arbitrary point to a point on sphere.

My current shader, which I'm using for the computation, is moving from one point to another directly.

I'm not using the mass or velocity texture at the moment

// float mass   = texture2D( posArray, texCoord.st).a;
vec3 p      = texture2D( posArray, texCoord.st).rgb;
// vec3 v       = texture2D( velArray, texCoord.st).rgb;

// map into 'cinder space'
p = (p * - 1.0) + 0.5;

// vec3 acc = -0.0002*p; // Centripetal force
// vec3 ayAcc  = 0.00001*normalize(cross(vec3(0, 1 ,0),p)); // Angular force
// vec3 new_v  = v + mass*(acc+ayAcc);

vec3 new_p = p + ((moveToPos - p) / duration);

// map out of 'cinder space'
new_p = (new_p - 0.5) * -1.0;

gl_FragData[0] = vec4(new_p.x, new_p.y, new_p.z, mass);
//gl_FragData[1] = vec4(new_v.x, new_v.y, new_v.z, 1.0);

moveToPos is the mouse pointer as a float (0.0f > 1.0f) the coordinate system is being translated from (0.5,0.5 > -0.5,-0.5) to (0.0,0.0 > 1.0,1.0)

I'm completely new to vector maths, and the calculations that are confusing me. I know I need to use the formula:

x=Rsinϕcosθ

y=Rsinϕsinθ

z=Rcosϕ

but calculating the angles from moveToPos(xyz) > p(xyz) is remaining a problem

Answer 1

I wrote the original version of this GPU-particles shader a few years back (now @: https://github.com/num3ric/Cinder-Particles). Here is one possible approach to your problem.

I would start with a fragment shader applying a spring force to the particles so that they more or less are constrained to the surface of a sphere. Something like this:

uniform sampler2D posArray;
uniform sampler2D velArray;
varying vec4 texCoord;

void main(void)
{   
    float mass  = texture2D( posArray, texCoord.st).a;
    vec3 p      = texture2D( posArray, texCoord.st).rgb;
    vec3 v      = texture2D( velArray, texCoord.st).rgb;

    float x0    = 0.5; //distance from center of sphere to be maintaned
    float x     = distance(p, vec3(0,0,0)); // current distance
    vec3 acc    = -0.0002*(x - x0)*p; //apply spring force (hooke's law)

    vec3 new_v  = v + mass*(acc);
    new_v = 0.999*new_v; // friction to slow down velocities over time
    vec3 new_p  = p + new_v;

    //Render to positions texture
    gl_FragData[0] = vec4(new_p.x, new_p.y, new_p.z, mass);
    //Render to velocities texture
    gl_FragData[1] = vec4(new_v.x, new_v.y, new_v.z, 1.0);
}

Then, I would pass a new vec3 uniform for the mouse position intersecting a sphere of the same radius (done outside the shader in Cinder).

Now, combining this with the previous soft spring constraint. You could add a tangential force towards this attraction point. Start with a simple (mousePos - p) acceleration, and then figure out a way to make this force exclusively tangential using cross-products.

I'm not sure how the spherical coordinates approach would work here.

x=Rsinϕcosθ

y=Rsinϕsinθ

z=Rcosϕ

Where do you get ϕ and θ? The textures stores the positions and velocities in cartesian coordinates. Plus, converting back and forth is not really an option.

My explanation could be too advanced if you are not comfortable with vectors. Unfortunately, shaders and particle animation are very mathematical by nature.

Answer 2

Here is a solution that I've worked out - it works, however if I move the center point of the spheres outside their own bounds, I lose particles.

#define NPEOPLE 5

uniform sampler2D posArray;
uniform sampler2D velArray;

uniform vec3 centerPoint[NPEOPLE];
uniform float radius[NPEOPLE];
uniform float duration;

varying vec4 texCoord;

void main(void) {

    float personToGet   = texture2D( posArray, texCoord.st).a;
    vec3 p              = texture2D( posArray, texCoord.st).rgb;

    float mass          = texture2D( velArray, texCoord.st).a;
    vec3 v              = texture2D( velArray, texCoord.st).rgb;

    // map into 'cinder space'
    p = (p * - 1.0) + 0.5;

    vec3 vec_p = p - centerPoint[int(personToGet)];
    float len_vec_p = sqrt( ( vec_p.x * vec_p.x ) + (vec_p.y * vec_p.y) + (vec_p.z * vec_p.z) );
    vec_p = ( ( radius[int(personToGet)] /* mass */ ) / len_vec_p ) * vec_p;
    vec3 new_p = ( vec_p + centerPoint[int(personToGet)] );
    new_p = p + ( (new_p - p) / (duration) );

    // map out of 'cinder space'
    new_p = (new_p - 0.5) * -1.0;

    vec3 new_v = v;

    gl_FragData[0] = vec4(new_p.x, new_p.y, new_p.z, personToGet);
    gl_FragData[1] = vec4(new_v.x, new_v.y, new_v.z, mass);
}

I'm passing in arrays of 5 vec3f's and a float mapped as 5 center points and radii. The particles are setup with a random position at the beginning and move towards the number in the array mapped to the alpha value of the position array.

My aim is to pass in blob data from openCV and map the spheres to people on a camera feed.

It's really uninteresting visually at the moment, so will need to use the velocity texture to add to the behaviour of the particles.