Implement spherical mapping for texture coordinates

Question

I am using a texture of a world map and I am trying to put that image on a sphere made up of many triangles. Each triangle has points a,b,c with their own (x,y,z) coordinates.

I am trying to use the coordinate system conversions formula from Wikipedia. This is my world to spherical coordinates function:

function worldToSpherical(p) {   

  const r = Math.sqrt(Math.pow(p[0],2)+ Math.pow(p[1],2) + Math.pow(p[2],2));
  const u = Math.atan2(p[1],p[0]);
  const i = Math.atan2(Math.sqrt(Math.pow(p[0],2)+Math.pow(p[1],2)),p[2]);

  const s =  r * Math.sin(i) * Math.cos(u);
  const t =  r * Math.sin(i) * Math.sin(u);  
  return [s, t];

}

But this is what my output looks like:

It seems to be wrapping around twice. Am I using the wrong formula, or using it wrong?

Answer 1

You just went to a lot of trouble to undo the trig on your u and i variables! Don't re-trig them with cos and sin! Just compress the range from the radian angles to your 0...1 texture coordinate space.

function worldToSpherical(p) {

   const radius = Math.sqrt(p[0]*p[0] + p[1]*p[1] + p[2]*p[2]);
   const longitudeRadians = Math.atan2(p[1], p[0]);
   const latitudeRadians = Math.asin(p[2]/radius);

   // Convert range -PI...PI to 0...1
   const s =  longitudeRadians/(2 * Math.PI) + 0.5;

   // Convert range -PI/2...PI/2 to 0...1
   const t =  latitudeRadians/Math.PI + 0.5;  
   return [s, t];
}