Lifecast

Tutorial: Making WebVR 6DOF VR videos and photos from VR180

Converting a VR180 photo to 6DOF

To get started, we'll convert a VR180 photo to Lifecast's 6DOF format.
  • Purchase the VR180 to 6DOF Converter for your operating system and install it.
  • You will need a VR180 format video or photo to use as input. You can download a sample VR180 photo here.
  • Select your photo or video as input, and choose an output directory, then click "Convert". You shouldn't have to change any other settings.
  • Your result will be in the output directory, named 000000.jpg. It should look something like this:

Host the Lifecast VR player on your website

In order to watch the 6DOF VR videos in WebVR, you need to host a simple web page, either on your own web site, or locally for testing. This makes it easy for anyone with a WebVR-compatible VR device to watch your content. We provide an example to help get started:
  • Download the example page from github. (Get everything in lifecast_public/web)
  • Upload the full contents of the /web directory to your site, and visit yoursite.com/index.html. You should see a 3D photo.

Preview the Lifecast VR player locally

It is not necessary to have a public website to preview the Lifecast VR player on your own Desktop computer. This takes a little bit of command line use, but its not too hard with the examples we provide.
  • Use your command-line terminal to navigate to the web directory that you downloaded above.
  • In the terminal, run 
    python local_server.py
    This runs a tiny webserver locally.
  • On some operating systems, you may need to run 'python2' instead.
  • In your web browser, go to http://localhost:8000/index.html
  • That's it, you should see a 6DOF photo.

Change the media URL in the player

By default, the player looks for the image to display at media/000000.jpg. You can change this to point to another video or photo. Open index.html in a text editor, and change this line: 
LifecastVideoPlayer.init({_media_url: "media/000000.jpg"});
For example, you could instead point to a different photo like so: 
LifecastVideoPlayer.init({_media_url: "media/mycoolphoto.jpg"});

Encode h264 and h265 videos for distribution on VR, desktop and mobile

We want to make these videos play well on as many platforms as possible. Different browsers for VR, desktop and mobile have different limitations on what video encodings they support. In this section we'll describe how to make an h264 video file which is compatible with most systems (this is OK but not optimal). For best results, we also show how to encode h265 (which can be played by the Oculus Quest browser for better quality and lower bandwidth), and a 1080p resolution h264 version which is compatible with the iOS mobile browser. We will use ffmpeg for video encoding. Start by installing ffmpeg if you don't have it already.
  • The steps below assume you are using Mac or Linux. If you are using Windows, please refer to this video tutorial for how to use ffmpeg.
  • We will assume you have rendered a video with the output as a directory of frames, located at ~/Desktop/vr180to6dof_frames. It should contain files like 000000.jpg, 000001.jpg, etc.
  • Encode an h264 video file from a directory of images (best for Desktop browsers): 
    ffmpeg -y \
-framerate 30 \
-i ~/Desktop/vr180to6dof_frames/%06d.jpg \
-c:v libx264 -crf 24 -movflags faststart -pix_fmt yuv420p \
~/Desktop/myvid_h264.mp4
  • Update the player to use this video as the source. First move video file that you created (myvid_h264.mp4) to web/media. As before, open index.html in a text editor, and change this line: 
    LifecastVideoPlayer.init({_media_url: "media/000000.jpg"});
    to this: 
    LifecastVideoPlayer.init({_media_url: "media/myvid_h264.mp4"});
    This is enough to play on Desktop and Oculus Browser. You can stop here, but this might not work on iOS, and with some more work we can improve the video quality on Oculus browser.
  • Encode an h265 video (best for Oculus Quest browser): 
    ffmpeg -y \
-framerate 30 \
-i ~/Desktop/vr180to6dof_frames/%06d.jpg \
-c:v libx265 -preset fast -crf 24 -pix_fmt yuv420p -movflags faststart\
~/Desktop/myvid_h265.mp4
  • Encode a 1080p resolution h264 video (works on iOS browser): 
    ffmpeg -y \
-framerate 30 \
-i ~/Desktop/vr180to6dof_frames/%06d.jpg \
-vf scale=1920:1080 \
-c:v libx264 -crf 24 -movflags faststart -pix_fmt yuv420p \
~/Desktop/myvid_1080p_h264.mp4
  • Update the player to use these videos as sources. Move the video files you created to web/media. Open index.html in a text editor, and change this line: 
    LifecastVideoPlayer.init({_media_url: "media/000000.jpg"});
    to this: 
    LifecastVideoPlayer.init({
  _media_url:        "media/myvid_h264.mp4",
  _media_url_oculus: "media/myvid_h265.mp4",
  _media_url_mobile: "media/myvid_1080p_h264.mp4"
});

© Lifecast Incorporated 2022