Texture on sphere not aligned correctly? Lat/Lon -> Cartesian xyz

Question

I'm wondering if the texture to my sphere is somehow not being applied correctly, and if I can offset it somehow? I am trying to place a box at Sydney, Australia by supplying the lat/lon and converting to cartesian xyz coordinates. However, the box is not places in the correct location. My guess is since the original image is a Mercator map, when it's being applied to the sphere the lat/lon center point is not correct.

The code below is a minimal re-produceable example.

1. I am loading an earth image and applying it to the sphere (radius = 400).
2. I am then supplying the latitude/longitude for Sydney, Australia (33.8688, -151.2093) and converting to radians.
3. Converting lat/lon to cartesian xyz (taken from: https://stackoverflow.com/a/1185413/3723165)
4. Translating and pushing a box to that location.

Here's where that box is placed:

Re-produceable code

var img;
var theta = 0;
var r = 400;
    
function preload() {
  img = loadImage('https://eoimages.gsfc.nasa.gov/images/imagerecords/79000/79765/dnb_land_ocean_ice.2012.3600x1800.jpg');
}
    
function setup() {
  createCanvas(1600, 1200, WEBGL);
}

function draw() {
  background(0);

  rotateY(theta);
  theta += 0.01;

  texture(img);
  sphere(r);

  //Sydney, Australia Latitude/Longtidue
  var lat = radians(33.8688);
  var lon = radians(151.2093);

  //cartesian coordinates
  var x = r * Math.cos(lat) * Math.cos(lon);
  var y = r * Math.cos(lat) * Math.sin(lon);
  var z = r * Math.sin(lat);

  push();
  translate(x, y, z);
  fill(255);
  box(100, 10, 10);
  pop();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.js"></script>

Answer 1

There are a number of issues here:

1) Your coordinates for Sydney are incorrect, the latitude is negative (-33.8688, 151.2093).

2) The vertical (polar) axis corresponds to Y coordinates, not Z coordinates (confusing, I know). So I swapped the Y and Z calculations.

3) There are some offsets needed to get accurate placement. Since you aren't providing texture mapping, all of the texture placement is done behind the scenes, and on a sphere, where to start a texture is pretty ambiguous. Through trial and error, I determined it's just 180 degrees off on longitude.

var img;
var theta = 0;
var r = 400;


function preload() {
  img = loadImage('https://eoimages.gsfc.nasa.gov/images/imagerecords/79000/79765/dnb_land_ocean_ice.2012.3600x1800.jpg');
}

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
}

function draw() {
  background(0);

  camera(0, 0, 200)
  rotateY(theta);
  theta += 0.01;

  texture(img);
  sphere(r);

  //Sydney, Australia Latitude/Longtidue
  var lat = radians(-33.8688);
  var lon = radians(151.2093);

  //cartesian coordinates
  // var x = r * Math.cos(lat) * Math.cos(lon);
  // var y = r * Math.cos(lat) * Math.sin(lon);
  // var z = r * Math.sin(lat);
  var x = r * Math.cos(lat) * Math.sin(lon+radians(180));
  var y = r * Math.sin(-lat);
  var z = r * Math.cos(lat) * Math.cos(lon+radians(180));

  push();
  translate(x, y, z);
  fill(255);
  box(100, 10, 10);
  pop();
}

Here's a working example: https://www.openprocessing.org/sketch/443758