Viewing 360 degree videos

Playing around with texture mapping.
Can render “polar” or “skybox” type videos.
Move the mouse to look around.
If your video has a different mapping, I have not run across it.

 *  Based on "Texture Sphere" example by Gillian Ramsay

Movie movie;

boolean doSphere = false;
float SPH_RAD = 300;
int ptsW, ptsH;
PImage img;
int numPointsW;
int numPointsH_2pi; 
int numPointsH;
float[] coorX;
float[] coorY;
float[] coorZ;
float[] multXZ;

void setup() {
  size(1280, 900, P3D);
  initializeSphere(ptsW, ptsH);
  movie = new Movie(this, "video360.mp4");

void movieEvent(Movie m) {;

void keyPressed() {
  if (key == ' ') doSphere = !doSphere; // toggle sphere/skybox rendering

void draw() {
  float rota = TWO_PI * mouseX / width + PI/2;
  float rotx = cos(rota)*SPH_RAD;
  float rotz = sin(rota)*SPH_RAD;
  camera(0, 0, 0,
         rotx, 2*(mouseY-height/2), rotz,
         0, 1, 0);
  if (doSphere)
    textureSphere(SPH_RAD, SPH_RAD, SPH_RAD, movie);
    skybox(SPH_RAD, movie);

void skybox(float sz, PImage t) {
    float B = sz;
    vertex(-B,-B,-B, t.width*1.0/3, 0.0);
    vertex( B,-B,-B, t.width*2.0/3, 0.0);
    vertex( B, B,-B, t.width*2.0/3, t.height*0.5);
    vertex(-B, B,-B, t.width*1.0/3, t.height*0.5);
    // left
    vertex(-B,-B,-B, t.width*1.0/3, 0.0);
    vertex(-B, B,-B, t.width*1.0/3, t.height*0.5);
    vertex(-B, B, B, 0.0,           t.height*0.5);
    vertex(-B,-B, B, 0.0,           0.0);
    // right
    vertex( B,-B,-B, t.width*2.0/3, 0.0);
    vertex( B,-B, B, t.width,       0.0);
    vertex( B, B, B, t.width,       t.height*0.5);
    vertex( B, B,-B, t.width*2.0/3, t.height*0.5);
    // back
    vertex( B, B, B, t.width*1.0/3, t.height*0.5);
    vertex(-B, B, B, t.width*1.0/3, t.height);
    vertex(-B,-B, B, t.width*2.0/3, t.height);
    vertex( B,-B, B, t.width*2.0/3, t.height*0.5);
    // top
    vertex(-B,-B, B, t.width*2.0/3, t.height);
    vertex(-B,-B,-B, t.width,       t.height);
    vertex( B,-B,-B, t.width,       t.height*0.5);
    vertex( B,-B, B, t.width*2.0/3, t.height*0.5);
    // bottom
    vertex(-B, B, B, t.width*1.0/3, t.height);
    vertex(-B, B,-B, 0.0,           t.height);
    vertex( B, B,-B, 0.0,           t.height*0.5);
    vertex( B, B, B, t.width*1.0/3, t.height*0.5);

void initializeSphere(int numPtsW, int numPtsH_2pi) {

  // The number of points around the width and height
  numPointsH_2pi=numPtsH_2pi;  // How many actual pts around the sphere (not just from top to bottom)
  numPointsH=ceil((float)numPointsH_2pi/2)+1;  // How many pts from top to bottom (abs(....) b/c of the possibility of an odd numPointsH_2pi)

  coorX=new float[numPointsW];   // All the x-coor in a horizontal circle radius 1
  coorY=new float[numPointsH];   // All the y-coor in a vertical circle radius 1
  coorZ=new float[numPointsW];   // All the z-coor in a horizontal circle radius 1
  multXZ=new float[numPointsH];  // The radius of each horizontal circle (that you will multiply with coorX and coorZ)

  for (int i=0; i<numPointsW ;i++) {  // For all the points around the width
    float thetaW=i*2*PI/(numPointsW-1);
  for (int i=0; i<numPointsH; i++) {  // For all points from top to bottom
    if (int(numPointsH_2pi/2) != (float)numPointsH_2pi/2 && i==numPointsH-1) {  // If the numPointsH_2pi is odd and it is at the last pt
      float thetaH=(i-1)*2*PI/(numPointsH_2pi);
    else {
      //The numPointsH_2pi and 2 below allows there to be a flat bottom if the numPointsH is odd
      float thetaH=i*2*PI/(numPointsH_2pi);

      //PI+ below makes the top always the point instead of the bottom.

void textureSphere(float rx, float ry, float rz, PImage t) { 
  // These are so we can map certain parts of the image on to the shape 
  float changeU=t.width/(float)(numPointsW-1); 
  float changeV=t.height/(float)(numPointsH-1); 
  float u=0;  // Width variable for the texture
  float v=0;  // Height variable for the texture

  for (int i=0; i<(numPointsH-1); i++) {  // For all the rings but top and bottom
    // Goes into the array here instead of loop to save time
    float coory=coorY[i];
    float cooryPlus=coorY[i+1];

    float multxz=multXZ[i];
    float multxzPlus=multXZ[i+1];
    for (int j=0; j<numPointsW; j++) { // For all the pts in the ring
      normal(-coorX[j]*multxz, -coory, coorZ[j]*multxz);
      vertex(coorX[j]*multxz*rx, coory*ry, -coorZ[j]*multxz*rz, u, v);
      normal(-coorX[j]*multxzPlus, -cooryPlus, -coorZ[j]*multxzPlus);
      vertex(coorX[j]*multxzPlus*rx, cooryPlus*ry, -coorZ[j]*multxzPlus*rz, u, v+changeV);

Very nice! Thanks for sharing.
If someone needs sample 360 videos; you can download some here.

1 Like

Works for my 360 degrees photo, but not perfect.

working perfectly with the videos i tested!
nice work!

1 Like