vr-for-ui-designers:-how-to-make-skyboxes-tutorial

Du Hoang

In Virtual Reality, user interfaces do not exist in a void but within a 3D environment. When designing user interfaces for VR, UI designers have to stretch our skillset to include environment design, because now the UI is an extension of the environment or vice versa.

It can be a daunting task for traditional UX/UI designers to create a 3D scene because it involves completely different tools and domain knowledge than what we were trained for. But fear not UI designers, there are ways to make an environment for your Virtual Reality UI without the need for 3D models or fancy shader graphs. And that is by creating a 360 image, or skybox.

You might have seen 360 photos on Facebook or elsewhere. Viewing a 360 photo is like being transported to that location. And a 360 photo is, just like any other photo, a 2-dimensional image. If you know how to edit images (via Photoshop or other means), then you know how to create 360 photos/skyboxes.

Source: Flickr

You might also have noticed that 360 photos, a.k.a. equirectangular images, are severely distorted. And that both the front and the back of a scene are displayed side-by-side. How does it all work?

An equirectangular image is a type of projection of a 2D image onto a 3D sphere. Imagine printing out a map of the Earth, and then wrapping it around a globe.

In a 3D scene, an equirectagular image can be use as the background image, or skybox, that surrounds the scene. There are other types of skybox projections with their own pros and cons, but for this tutorial we will focus on creating an equirectangular image.

The simplest way to make an equirectangular image is to take a 360 photo with a camera. If you don’t own a 360 camera then most mobile phones can also do the job. Simply go to the location of your choice, snap a 360 photo, and you are done!

But what if you want to create a futuristic scene, or something else that doesn’t exist altogether?

Well, since equirectangular images are just 2D images, you can try to Photoshop/illustrate one, distortions and all. Here is a guide on how to do just that by a talented individual: Drawing a Spherical Panorama.

I personally do not recommend manually drawing equirectangular images. While it is a fun exercise, it takes an expert illustrator to do a convincing job, and no matter how great of an illustrator you are, you will never be able to reproduce the required distortions perfectly.

The easier way to go is to draw/Photoshop images that make up the six directions and put it into a 3D software, then take a 360 screenshot of that scene.

To create a skybox using images alone, you will need Photoshop or equivalent, and a 3D program. In our case we will use Unity.

For this example, I want to create a cartoony environment with clouds and stars against a bright sky. The ground will be a sphere with a cute tree growing out of it.

To start, we make square illustrations of the different objects in the scene with Photoshop, and save them as transparent PNGs.

2D illustrations of the objects in our 3D scene

Next, we create a new 3D project in Unity and import our PNGs. For each illustration we want to create a new Material, set the Shader type to be Unlit/Transparent and assign the PNG as texture.

In our scene, we’ll make a Quad (a square geometry). Go to Create > 3D Object > Quad, and assign the Material to it, by dragging and dropping the Material on top of the Quad. If done correctly, we should see the illustration displayed on the Quad with proper transparency.

Selecting the MainCamera, we need to reposition it at the point of origin (x: 0, y: 0, z: 0). Then we make more Quads of the various objects, place them around the MainCamera, facing it by rotating the Quad to be perpendicular to the camera, and compose our environment in that manner.

Once you have constructed an environment to your liking, you can take a 360 screenshot of it using this Unity plugin: Sky Capture or similar free assets. The result is a perfectly distorted equirectangular image that can be used as a backdrop for your VR applications and prototypes.

Resulting equirectangular image of our skybox

While our example is a cartoony skybox, you can also create photorealistic skyboxes using the same technique. The limit is your imagination!

16 comments

  1. Hey! I know this is somewhat off topic but I was wondering which blog platform are you
    using for this site? I’m getting tired of WordPress because I’ve had
    issues with hackers and I’m looking at options for another platform.
    I would be fantastic if you could point me in the direction of a good
    platform.

  2. With havin so much content do you ever run into any problems of plagorism
    or copyright violation? My blog has a lot of completely unique content I’ve either created myself or outsourced but it
    seems a lot of it is popping it up all over the web without my permission. Do you know any ways to help stop content from being ripped off?
    I’d definitely appreciate it.

  3. Greetings I am so glad I found your webpage, I really found you by accident, while I was
    looking on Google for something else, Regardless I
    am here now and would just like to say thanks for a tremendous post and a all round entertaining blog (I also love the theme/design), I don’t have time to browse it all at the minute but I have bookmarked it and also
    included your RSS feeds, so when I have time I will be back
    to read more, Please do keep up the great b.

  4. When I originally commented I appear to have clicked on the
    -Notify me when new comments are added- checkbox and from now on every time a comment
    is added I get four emails with the exact same comment.
    Perhaps there is an easy method you can remove me from that service?
    Cheers!

  5. Howdy I am so grateful I found your website, I really found
    you by mistake, while I was looking on Bing for something else, Anyhow I am here now
    and would just like to say thanks a lot for a incredible post and a all round
    entertaining blog (I also love the theme/design), I don’t have
    time to read through it all at the moment but I have bookmarked it and also added in your RSS feeds, so
    when I have time I will be back to read more, Please do keep up the awesome work.

  6. Fantastic beat ! I wish to apprentice while you amend your web site, how can i subscribe
    for a blog web site? The account aided me a acceptable deal.
    I had been tiny bit acquainted of this your broadcast
    offered bright clear idea

  7. With havin so much content do you ever run into any problems of plagorism
    or copyright infringement? My website has a
    lot of exclusive content I’ve either created myself or outsourced
    but it seems a lot of it is popping it up all over the internet without my
    permission. Do you know any techniques to help protect against content from being stolen? I’d truly appreciate it.
    asmr https://app.gumroad.com/asmr2021/p/best-asmr-online asmr

  8. Hmm it appears like your website ate my first
    comment (it was super long) so I guess I’ll just sum it up what I had written and say, I’m
    thoroughly enjoying your blog. I as well am an aspiring blog blogger but I’m still new to the
    whole thing. Do you have any tips for newbie blog writers?
    I’d definitely appreciate it. cheap flights http://1704milesapart.tumblr.com/ cheap flights

  9. Its like you read my mind! You appear to know a lot about this, like you wrote the book in it or something.
    I think that you can do with some pics to drive the message home a little bit, but other than that, this is
    wonderful blog. An excellent read. I will certainly be back.
    scoliosis surgery https://0401mm.tumblr.com/ scoliosis surgery

  10. You actually make it appear so easy with your presentation however I in finding
    this matter to be actually one thing which I believe I might never understand.
    It sort of feels too complex and extremely extensive for me.
    I am having a look ahead for your subsequent put
    up, I’ll attempt to get the hang of it! quest bars https://www.iherb.com/search?kw=quest%20bars quest bars

Leave a Reply

Your email address will not be published.