Calculate distortion in equirectangular projection on a sphere

Question

Following Quote from this source: http://www.cambridgeincolour.com/tutorials/image-projections.htm

Equirectangular image projections map the latitude and longitude coordinates of a spherical globe directly onto horizontal and vertical coordinates of a grid, where this grid is roughly twice as wide as it is tall.

I have a 13312 px width and 6656 pixel height Panorama picture. It's a equirectangular projection of a room and have a 2:1 ratio.

I use following formular to calculate the xPosition:

var xPosition = ( panorama.width / 360 ) * azimuth

Azimuth = Phi = Heading = Angle to the left or right

How do I project this now on a 1366x768px browser screen?

I think my results are wrong, because it's not on the point where it should be.. it could be because the sphere has a distortion on the left and right:

Is there any formular to calculate the position with attention to the distortion and scale it to fit on the browser screen? I looked many (MANY) sources to find a solution for this, but they always just say that equirectangular are just lat and long.. they don't consider the distortion.

Last question: To find a special solution, I tryed to put a plane on the circle and expanded the line which shows the alpha angle. I though with Phytagoras I could find the position.. but this didn't worked either.. maybe I did something wrong? Is this the way even possible or am I doing it wrong?

edit

THIS is what I'm actually looking for: http://othree.github.io/360-panorama/three-2d/

The black grid in the background. What is the name of this? For what do I have to google or look for? When you start the 2D Panorama, if you want to get the coordinations of the top right corner of the window, what do you have to do?

Answer 1

The whole calculation problem was about to create a Google Streetview similiar view from a 2:1 equirectangular image. We already found a solution for this with a great help from Martin Matysiak (https://github.com/marmat | Google).

It's been a while so I can't give a direct answer to what the main solution is, but I can provide a URL to an AddOn Martin wrote for adding the custom Markers that we actually were trying to make.

You can follow https://github.com/marmat/google-maps-api-addons and look for yourself. In the end it helped a lot to solve the main problem and let us continue with our main Framework for Google Business Tours.

Answer 2

If you follow the link in the threejs demo you included, it would take you to the source code.

particularly look at: https://github.com/mrdoob/three.js/blob/dev/examples/webgl_panorama_equirectangular.html

and

https://github.com/mrdoob/three.js/blob/dev/src/geometries/SphereBufferGeometry.js

not sure if there is distortion though. The distortion comes from the fact that the texture is mapped to the sphere, and the sphere is rendered in 3D (openGL).