3D Modelling/360 Degree Video

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

The video conversion consists of 3 major steps:

Video to Sequence of Images
Dual Fish-Eye images to equirectangular images
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

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

Examples of Equirectangular Videos

Example of 360 Video in Aframe with the following equirectangular source video^[6]
https://www.mettle.com/360vr-master-series-free-360-downloads-page/ including drone flight video recording.

Software

FFmpeg - Wikipedia - Download: FFmpeg-Homepage
Hugin - Wikiversity - Hugin-Software
PanoTools - Panorama Tools
OpenDroneMap - Open Source tool to create a 3D model of a landscape with drone images.

References

↑ Charlie Hoey (2017) Valiant360 - 360 degree videos in browser, URL: http://flimshaw.github.io/Valiant360/ (accessed 2019/06/07)
↑ 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.
↑ Hugin - panorama from one double fisheye image (2017) Youtube Video by ultramango - URL: https://www.youtube.com/watch?v=QKQGT8VUN8g (accessed 2019)/07/06)
↑ Hugin, Dual Fisheye Stitching (2018) Youtube Video by Hew Hamilton - URL: https://www.youtube.com/watch?v=QKQGT8VUN8g (accessed 2019)/07/06)
↑ 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)
↑ 360 Degree Demo Video for AFrame example - URL: https://ucarecdn.com/fadab25d-0b3a-45f7-8ef5-85318e92a261/city.mp4 - (accessed 2019/07/06)

[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)

[1]

[2]

[3]

[4]

[5]

[6]