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!

63 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

  11. We’re a bunch of volunteers and opening a new scheme in our community.
    Your site offered us with valuable information to work on. You’ve done a formidable
    process and our whole community will be grateful to you.

  12. I’ve been surfing online more than 4 hours today, yet I never found any interesting article
    like yours. It’s pretty worth enough for me. In my view,
    if all site owners and bloggers made good content as you
    did, the internet will be a lot more useful than ever before.

  13. Having read this I believed it was rather enlightening.
    I appreciate you finding the time and effort to put this article together.
    I once again find myself personally spending way too much time both reading and leaving comments.

    But so what, it was still worthwhile!

  14. Hi there! Do you use Twitter? I’d like to follow you if
    that would be ok. I’m absolutely enjoying your blog and look forward to new updates.

  15. Nice post. I was checking continuously this weblog and I’m
    impressed! Extremely useful information specially the
    ultimate part 🙂 I maintain such information a lot.
    I used to be looking for this certain information for
    a very lengthy time. Thank you and best of luck.

  16. We are a gaggle of volunteers and opening a brand new
    scheme in our community. Your website provided us with helpful information to
    work on. You have performed an impressive task and our entire neighborhood will be grateful to you.

  17. Hey there! I just want to offer you a huge thumbs up for
    your excellent info you’ve got right here
    on this post. I will be coming back to your web
    site for more soon.

  18. Heya! I know this is somewhat off-topic but I had to ask.
    Does operating a well-established website like yours take
    a large amount of work? I’m completely new to blogging but
    I do write in my journal daily. I’d like to start a blog so I can easily share my own experience and views
    online. Please let me know if you have any recommendations or tips for new aspiring blog owners.

    Appreciate it!

  19. Do you have a spam issue on this website; I also am a blogger, and I was
    wanting to know your situation; many of us have created some nice procedures
    and we are looking to trade methods with others, please shoot
    me an email if interested.

  20. Hi, I do believe this is an excellent website. I stumbledupon it
    😉 I’m going to come back yet again since i have book-marked it.
    Money and freedom is the best way to change, may you be rich and continue to guide other people.

  21. I am really enjoying the theme/design of your blog.
    Do you ever run into any browser compatibility problems?
    A small number of my blog visitors have complained about my blog not operating correctly in Explorer but looks great in Chrome.
    Do you have any suggestions to help fix this issue?

  22. Do you have a spam problem on this website; I also am a blogger, and
    I was wondering your situation; we have developed
    some nice practices and we are looking to swap techniques with other folks, be sure to
    shoot me an e-mail if interested.

  23. Hello there! I know this is kinda off topic however
    , I’d figured I’d ask. Would you be interested in trading links or maybe guest writing a blog article or vice-versa?
    My website covers a lot of the same subjects as yours and I feel we could
    greatly benefit from each other. If you might
    be interested feel free to send me an e-mail.
    I look forward to hearing from you! Wonderful blog by the way!

  24. Your style is unique compared to other people I’ve
    read stuff from. Thank you for posting when you have the opportunity,
    Guess I’ll just book mark this blog.

  25. After looking into a few of the articles on your blog, I really
    like your technique of blogging. I bookmarked it to my bookmark website list and will be checking
    back in the near future. Please visit my web site too and tell me what you think.

  26. What’s Going down i’m new to this, I stumbled upon this I’ve discovered It absolutely helpful and it has helped me out loads.
    I hope to contribute & aid different customers like its helped me.
    Great job.

  27. Wow, fantastic blog layout! How long have you been blogging for?
    you made blogging look easy. The overall look of your web site is magnificent,
    as well as the content!

  28. I’m amazed, I have to admit. Rarely do I come across a blog
    that’s both equally educative and entertaining,
    and let me tell you, you have hit the nail on the head.
    The issue is something which too few people are speaking intelligently about.
    I am very happy that I stumbled across this in my hunt
    for something regarding this.

  29. magnificent put up, very informative. I ponder why
    the opposite specialists of this sector do not
    realize this. You should continue your writing. I am sure,
    you have a huge readers’ base already!

  30. Hi would you mind letting me know which hosting company you’re
    using? I’ve loaded your blog in 3 completely different browsers and
    I must say this blog loads a lot faster then most.
    Can you recommend a good hosting provider at a reasonable price?
    Cheers, I appreciate it!

  31. Thank you for the good writeup. It in fact was
    a amusement account it. Look advanced to far added agreeable from
    you! By the way, how can we communicate?

  32. A person necessarily lend a hand to make significantly articles I might state.
    That is the very first time I frequented your website
    page and thus far? I surprised with the analysis you made to make this actual post extraordinary.
    Wonderful job!

  33. I read this post fully regarding the comparison of newest and previous technologies, it’s amazing
    article.

  34. I know this site offers quality based articles or reviews and
    extra material, is there any other website which provides such stuff in quality?

  35. I’m not sure the place you’re getting your information, however
    good topic. I needs to spend some time learning much more or understanding more.
    Thanks for magnificent info I used to be looking for this info for my mission.

  36. Very nice post. I simply stumbled upon your blog and wished to mention that I’ve really enjoyed surfing around your blog posts.
    After all I will be subscribing to your rss feed and I hope you write once
    more very soon!

  37. I think the admin of this web page is in fact working hard in favor of his site,
    because here every data is quality based data.

  38. Ahaa, its pleasant conversation concerning this piece of writing at this place at this weblog, I have
    read all that, so now me also commenting at this place.

  39. What you said made a lot of sense. But, think about this, suppose you
    composed a catchier post title? I ain’t saying your
    information isn’t good., however suppose you added a title that grabbed folk’s attention? I mean VR
    for UI Designers: How to Make Skyboxes Tutorial – Pavvy
    Designs is a little plain. You might glance at Yahoo’s home page and watch how they write news titles to get viewers interested.

    You might try adding a video or a picture or two to grab readers interested about everything’ve got
    to say. In my opinion, it would bring your blog a little livelier.

  40. Thank you for the auspicious writeup. It in fact was a amusement account it.

    Look advanced to more added agreeable from you! However, how can we communicate?

  41. My family all the time say that I am killing my time here at net, except I know I am getting
    familiarity daily by reading such fastidious posts.

  42. Valuable information. Fortunate me I found your site accidentally, and I’m shocked why this accident did
    not came about earlier! I bookmarked it.

  43. Hi there! This blog post couldn’t be written any better!
    Reading through this post reminds me of my previous roommate!
    He continually kept preaching about this. I am going to send this article to him.

    Fairly certain he will have a good read. I appreciate you for
    sharing!

  44. Greetings from Los angeles! I’m bored to tears at work
    so I decided to check out your website on my iphone during
    lunch break. I enjoy the information you provide here and can’t wait to take a look when I get
    home. I’m shocked at how fast your blog loaded on my phone ..
    I’m not even using WIFI, just 3G .. Anyhow, good site!

  45. I’m really enjoying the theme/design of your web site.
    Do you ever run into any web browser compatibility problems?
    A few of my blog visitors have complained about my blog not
    working correctly in Explorer but looks great in Chrome.

    Do you have any suggestions to help fix this problem?

Leave a Reply

Your email address will not be published.