How to make realistic Skyboxes using Android's photo sphere camera mode (2 free skyboxes provided)

I saw this awesome sunset outside today and remembered that my phone (Google Pixel 3) can take spherical (equirectangular) photos. If you have an Android phone, you might have this feature too. Note that Pixel 8 and upwards seems to have removed this feature, but you may still be able to get an APK.

This tutorial explains how to use this feature to turn pretty sunsets and cloudy days into usable skyboxes for your games. This tutorial does not explain in-depth how to remove the horizon from these images. You are expected to have some amount of photo-editing experience for this.

These are some free-to-take skyboxes created using this method. The raw PNGs are provided at the bottom of this thread.


Requirements

  • Preferably a large flat area outside.
  • An android phone with the photo sphere function.
  • Optionally Photoshop / other photo-editing software and intermediate experience with using it.


Image Capture Instructions

  1. Capture a photo sphere from the middle of a large flat area (i.e. an open field). The larger the flat area, the less visible and cluttered the horizon will be.
    • Be careful not to get people, text, or location-revealing things in your photo if you don’t plan to remove the horizon later. These can get your account moderated.
    • Once you start taking the picture, your phone will guide you to capture a full sphere of images. It’s intuitive, just point your phone at the dots shown on-screen. Your phone will process the images in the background over a few minutes to generate a seamless equirectangular photo.
    • Below are two examples of the kind of output you should expect.


  1. Use an an online converter to break the equirectangular photo into individual cube map images.
    • You could stop here and start importing these images into Roblox right now if you don’t mind leaving the horizon there. You may have to rotate the top and bottom images and reupload to get them oriented the right way.


Photoshop Instructions

  1. Pull these images into Photoshop or other image editing software to remove and replace the horizon.
    • Arrange these images similar to below. You may have a T or off-center + shape, it doesn’t really matter. I don’t know which direction is correct, so you’ll have to experiment with rotating the top and bottom images to get them to orient correctly in Roblox.

  1. If you are using Photoshop, you should use the lasso tool to select objects on the horizon. You can fill these areas in using any method you like.
    • I prefer using content-aware fill to get a believable base to work with (duplicate the image layer and delete all of the surrounding horizon buildings so content-aware fill can only sample from the sky).
    • After using content-aware fill, I use the stamp tool to sample nearby clouds to paint in missing or weird-looking areas. I make sure the fill extends downwards to cover all of the ground.
    • Be mindful of the image boundaries. See how they slope upwards along each seam? Try not to damage this upwards slope, this is required for the spherical illusion of the skybox.
    • Along the 50% horizontal line, I leave a small gradient, but this is just an artistic choice.

Photoshop_2020-06-21_16-20-17 image (Hold alt and click to sample, then paint)

  1. Create the new horizon. Typically a darker color solid color fill or gradient sampled from the sky will almost always look fine.

  1. Fix the left-to-right tiling so the skybox is seamless. I use the offset filter in Photoshop for this (Filter > Other > Offset). This reveals the non-tiling seam left over that you can fix using the stamp tool. Once you’ve fixed the seam, you can move it back by reversing the offset you just applied.

Your finished Photoshop document should look something like this:

  1. Export individual images and slap them into Roblox. You may have to rotate the top and bottom images until they’re oriented correctly. I can’t remember the correct orientation.
    • If you’re interested in uploading your skyboxes, IIRC the front face of the skybox is the one that shows in thumbnails.

https://gfycat.com/LightheartedJovialGalapagoshawk

You’re done!


Sunset: High-def images (Make sure you view full size)

I don’t think the directions in the filenames are right. :eyes:

Cloudy: High-def images (Make sure you view full size)

74 Likes

This is really really cool, I hadn’t thought of anything like it! It’s crazy that stuff like this is even possible, well done!

5 Likes

I think the sunset you have made is cool but not too cool because the sunset low sunray and I really like the way you do
 so great work on the “HD sunset” asset and I wish you make more impressive build, modeling, and also skybox. I hope you have a fantastic day and also stay safe. See you later


4 Likes

To be honest this seems like a good resource on making new skyboxes, great work. I would consider putting it in community resources.

2 Likes

Im gonna bookmark this as a tutorial for making skyboxes

2 Likes

Though I don’t need the skybox, this is a great tutorial for how skyboxes are made!!

Especially cool because I will have a Pixel 3 of my own soon, so
 skyboxes incoming!

3 Likes

Woah, thats really cool. Never thought of this even once.

1 Like

Pixel 3??!?!? THats what i Have!

Seriously though, really nice job. I never knew you could do this type of stuff on a Pixel 3. I think I’ll try it out sometime.

1 Like

Rewrote this into a tutorial and added a second free skybox.

6 Likes