I'm trying to project a screen/pixel coordinate from an Equirectangular image into an Orthographic coordinate using D3 and it's projection tools (which I hardly understand).
I've found an example that shows how to do this using an interpolation animation to show the results but I can't understand how to achieve the same effect without rendering any canvas/svg while projecting a single coordinate.
https://observablehq.com/@d3/orthographic-to-equirectangular
All I need is to use the calculation D3 does to such coordinates to fix the distortion generated by the Equirectangular image in a different process, where I loop for each pixel in the equirectangular image to convert it into an "undistorted" one.
Here's a picture of what I'm trying to achieve.
My code looks something like this:
// Equirectangular image source size
var width = $("#equirectangular_image").width(); // 1024
var height = $("#equirectangular_image").height(); // 512
// Screen XY into LATLON - 512 and 256 are just an example representing the center of the image.
// This was wrong
// var offsetX = 512 / width * 360;
// var offsetY = 256 / height * 180;
// Edited
var offsetX = 512;
var offsetY = 256;
var projectionOrtho = d3.geoOrthographic();
var projectionEqui = d3.geoEquirectangular();
var ortho_coords = projectionOrtho([offsetX,offsetY]);
var fixed_coords = projectionEqui(ortho_coords);
// fixed_coords isn't returning the expected coordinates
Please, help! Thanks!
PS: I'm looking for a solution to the main topic which is to fix the distortion generated by the equirectangular image. If there's a better approach to do this without using any external libraries I'd be glad to go down that road.