3D Modelling/360 Degree Video

From Wikiversity
Jump to navigation Jump to search
Screenshot of Sky Background in AFrame for a 3D model for a crystal lattice with Aframe.
AFrame Example Durlach or AFrame Sample 360 Degree Image - Look around by draging mouse with mouse button pressed

The example on right uses an equirectangular image in Aframe as a static panoramic background. In this learning resource we will address the generation of equirectanglar 360 degree videos in a 3D modelling environment for the web. In the first example we assume to have double fish eye input video that are converted into equirectangular video as living background.

The Open Community Approach is applied in this learning resource and therefore open source software and open educational resource (OER) are used as underlying concept for this Wikiversity module.

Major Steps for the conversion

[edit | edit source]

The video conversion consists of 3 major steps:

  1. Video to Sequence of Images
  2. Dual Fish-Eye images to equirectangular images
  3. Sequence of rectangular Images back into 360 degree video

These steps are explained in details and see video tutorials for further detail.

  • (Convert Video into Sequence of Images with FFmpeg) Decompose the 360 degree double fish eye video into single images. One image per frame can be created with ffmpeg with the following command. To decompose an MPEG2 file to individual frames you would use ffmpeg on the command line of your Linux, MacOSX or Windows computer. ffmpeg is Open Source software, which is used according to the Open Community Approach
     ffmpeg -i inputfile.mp2 -f image2 image-%07d.png 
The code produces PNG images image-01.png, image-02.png, ... as frames of the video. With 25fps (frames per seconds you will get 25 image per second of the video.
  • (Convert Double-FishEye Image into Equirectangular Image) Load one image/frame into Hugin to define the projection of the two fisheye camera images on a sphere. The result is a equirectangular image which should be tested in Aframe as 360 degree background and a mapping, that can be used to convert all the other images (frames of the video) with the same projection. This can be done because the all frames with two fish-eye camera images on it can be converted with the same stitching method for the spherical background. As you might have noticed that dual fish-eye videos with 25fps (frames per seconds you produces 25 image per second for your video. Manual stitching for so many files is not appropriate workflow. This process can be automated with panotoole. You perform the stitching one with Hugin and your create a pto file, that can be used for multiple dual fish-eye images
  • (Convert Sequence of Images into Video with FFmpeg) The list of all equirectangular images are combine into a video. This video is the background video of Aframe and replaces the static image background by a MP4-video.
  • (Add Spherical Video Background 3D Model) The last step is the integration of the MP4-video as Aframe Video background.

360-Degree Video

[edit | edit source]

There are cheap 360 degree cameras on the market that are able to create equirectangular images directly with the camera. But the recorded videos are double fish eye cameras. To use the MP4 video source of these cameras as equirectangular background videos in Aframe, it is necessary to convert the double fish-eye video into an equirectangular MP4 Video.

  • Youtube Example of National Parks - published by Google, select Fullscreen in Youtube Video and use the cursor buttons in the top right to look around in the video.
  • Valiant 360 Degree Video[1] - See top video on the website and drag mouse to look around. Furthermore it contains a repository to create your own 3D videos. Learn how to create the video with Hugin (see also IEEE Viewport-adaptive navigable 360-degree video[2]).

Video Tutorial

[edit | edit source]

Examples of Equirectangular Videos

[edit | edit source]


[edit | edit source]

See also

[edit | edit source]


[edit | edit source]
  1. Charlie Hoey (2017) Valiant360 - 360 degree videos in browser, URL: http://flimshaw.github.io/Valiant360/ (accessed 2019/06/07)
  2. Corbillon, X., Simon, G., Devlic, A., & Chakareski, J. (2017, May). Viewport-adaptive navigable 360-degree video delivery. In 2017 IEEE international conference on communications (ICC) (pp. 1-7). IEEE.
  3. Hugin - panorama from one double fisheye image (2017) Youtube Video by ultramango - URL: https://www.youtube.com/watch?v=QKQGT8VUN8g (accessed 2019)/07/06)
  4. Hugin, Dual Fisheye Stitching (2018) Youtube Video by Hew Hamilton - URL: https://www.youtube.com/watch?v=QKQGT8VUN8g (accessed 2019)/07/06)
  5. FFmpeg Timelapse: Image Sequence to a Movie (2018) Youtube Video by Hew Hamilton - URL: https://www.youtube.com/watch?v=WDV15nm-KJE (accessed 2019)/07/06)
  6. 360 Degree Demo Video for AFrame example - URL: https://ucarecdn.com/fadab25d-0b3a-45f7-8ef5-85318e92a261/city.mp4 - (accessed 2019/07/06)