Equirectangular projection/SPH2EQUI

The learning unit addresses the following steps of equirectangular conversion and extracting a Planar View from an Equirectangular Image:

• explanation of the mathematical concept
• coding example in Javascript and projection from one HTML canvas to another canvas application of equirectangular projection to the planar image projection e.g. for the 360 degree panorama viewer e.g. used in Open Source frameworks for 360 spherical panoramas.

• Equirectangular projection: A 2‑D map where the horizontal axis is longitude (‑180° → +180°) and the vertical axis is latitude (‑90° → +90°). Every degree of latitude and longitude occupies the same number of pixels → rectangular grid.
• Spherical coordinates: Position on a sphere described by radius ${\displaystyle r}$, polar angle ${\displaystyle \theta }$ (colatitude, measured from the north pole) and azimuth ${\displaystyle \varphi }$ (longitude).
• Perspective (planar) view What a pinhole camera would see when looking from a point on the sphere’s surface toward its interior, with a given field‑of‑view (FOV).
• Field‑of‑view (FOV) Angular width of the view, usually expressed in degrees (e.g., 90°).
• Radius of the sphere ${\displaystyle r}$ determines the size of the equirectangular image with an aspect ratio 2:1 (in general). Equirectangular viewer (see equirectangular projection) can accept other rectangular formats as well because the will interpret the sizes with a scaled 2:1 aspect ratio for the longitude and latitude ${\displaystyle (x_{equi},y_{equi})}$ of the panorama sphere.

Equirectangular images can be created with specific cameras with one shot or with multiple images e.g. Hugin from a centre of view in multiple directions and coving with the images all directions.

Symbol	Meaning	Typical Range
lon ${\displaystyle \lambda _{c}}$	Longitude of the view centre, will refer to the vertical ${\displaystyle x}$-coordinate the centre pixel of the output image	${\displaystyle -180^{o}\leq \lambda _{c}\leq +180^{o}}$
lat ${\displaystyle \varphi _{c}}$	Latitude of the view centre, will refer to the vertical ${\displaystyle y}$-coordinate of centre pixel of the output image	${\displaystyle -90^{o}\leq \varphi _{c}\leq +90^{o}}$
${\displaystyle r\in \mathbb {R} ^{+}}$	Radius of the virtual sphere (any positive number ). At the equator of the sphere there is no distortion of the length and therefore the length of the equator is ${\displaystyle W_{equi}=2\pi r}$ and the width of the equirectangular image ${\displaystyle W_{equi}}$ can be calculated with the radius ${\displaystyle r}$	${\displaystyle r={\frac {W_{equi}}{2\pi }}}$
HFOV ${\displaystyle \lambda _{max}}$	Horizontal Field‑Of‑View (HFOV) camera property of the output image (degrees)	${\displaystyle 30^{o}\leq \lambda _{max}\leq 120^{o}}$
VFOV ${\displaystyle \varphi _{max}}$	Vertical Field‑Of‑View (VFOV) camera property of the output image (degrees)	${\displaystyle 30^{o}\leq \varphi _{max}\leq 120^{o}}$
W_out, H_out Width ${\displaystyle W_{out}}$, Height ${\displaystyle H_{out}}$	Width & height of the output image usually defined by the display sizes, the output will be produced for.	width:height = 9:6
equirectImg ${\displaystyle W_{equi}}$ width, ${\displaystyle H_{equi}}$ height	Source equirectangular image (width ${\displaystyle W_{equi}}$, height ${\displaystyle W_{equi}}$) in general the ratio between ${\displaystyle W_{equi}:H_{equi}=2:1}$. The ratio is reasonable, because the range for ${\displaystyle \theta }$ has a span of ${\displaystyle 360^{o}}$ degrees and the range of ${\displaystyle \varphi }$ is ${\displaystyle 180^{o}}$.	Example ${\displaystyle W_{equi}=2096}$ for width and ${\displaystyle H_{equi}=1048}$. For high resolution equirectangular images created from several camera images with Hugin sizes with ${\displaystyle W_{equi}\geq 10000}$ can be produced.

The unit vector ${\displaystyle u_{out}=(u_{x},u_{y})\in [0,1]\times [0,1]}$ defines the fraction of the width and height of the equirectangular image. Latitude lat and longitude lon are converted into a unit vector for the x and y coordinates.

The usage of a unit vector in ${\displaystyle (u_{x},u_{y})\in [0,1]\times [0,1]\subset \mathbb {R} ^{2}}$ allow easy coordinate calculation even if the equirectangular image does not have the aspect ratio 2:1.

In Linear Algebra the unit vector have the length 1. In this context of an equirectangular image the unit vector refers to the width and height of the equirectangular image as a unit and ${\displaystyle u_{x}}$ is the fraction of width as unit and ${\displaystyle u_{y}}$ is the fraction of the height as unit.

The following code example in Javascript is showing the transformation of angles Longitude and Latitude (lon, lat) into the desired unit vector. This will be transfered into a method getUnitVec(lon,lat) of a Javascript class.

var u_x = (lon+180) * Math.pi/360;          
//  c_x ranges from 0 to 1
var u_y = (-lat + 90) * Math.pi/180;  
//  0 at north pole (+90) and 1 is south pole (-90)

With the unit vector the correponding ${\displaystyle (x,y)}$ coordinates of the equirectangular image can be easily calculated by stretching the unit vector with the width resp. height of the equirectangular image.

var x = Math.floor(equi.width * u_x);          //  x ranges from 0 to width of the equirectangular image
var y = Math.floor(equi.height * u_y);

Create /extend a Javascript class Equirectangular that

• sets the equirectangular width with the method setEquiWidth(pWidth) that sets the width and height with the ratio width:height = 2:1. Take care that the width and height are integer values and not decimal number by using Math.round and

setEquiWidth(pWidth) {
  var height = Math.round(pWidth/2);
  var width = height * 2;
  this.equirect = { 
    "width":width, 
    "height":height
  };
}

• sets the equirectangular height with the method setEquiHeight(pHeight) that sets the width and height with the ratio width:height = 2:1.

setEquiHeight(pHeight) {
  var height = Math.round(pHeight/2);
  this.equirect = { 
    "width": 2*height, 
    "height":height
  };
}

• is able convert the angles into equirectangular image coordinates with the method sph2equi(lon,lat)
• get unit vector ${\displaystyle (u_{x},u_{y})\in [0,1]\times [0,1]}$ for the equirectangular image with:

getUnitVec(lon,lat) {
  //  u.x ranges from 0 to 1
  //  u.y=0 at north pole (+90) 
  //  u.y=1 is south pole (-90)
  return {
    "x": (lon+180) * Math.pi/360,          
    "y": (-lat + 90) * Math.pi/180  
  }

• get rectangular coordinates ${\displaystyle (x_{equi},y_{equi})\in [0,W_{equi}]\times [0,H_{equi}]}$ for the equirectangular image with:

getEquiCoordinates(lon,lat) {
  var u = this.getUnitVec(lon,lat);
  return { 
    "x": Math.floor(u.x * this.equi.width), 
    "y": Math.floor(u.y * this.equi.height)
  };
}

If you prefer to implement an equirectangular image processor in python as a learning task transfer the mathematical approach to a Python class.

• Spherical 360 degree panoramas
• Hugin
• Display sizes
• Equirectangular images in WikiCommons
• Programming Classes in Python - Wikibook