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.
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.
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.
While our example is a cartoony skybox, you can also create photorealistic skyboxes using the same technique. The limit is your imagination!
16 comments
wonderful points altogether, you just won a
new reader. What could you suggest about your put up that you just made
a few days ago? Any certain?
I am really thankful to the holder of this site who has shared this great post at
at this time.
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.
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.
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.
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!
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.
I am sure this paragraph has touched all the internet
visitors, its really really fastidious paragraph on building up new website.
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
Link exchange is nothing else however it is only placing the
other person’s blog link on your page at proper
place and other person will also do same in support
of you. quest bars http://bitly.com/3C2tkMR quest bars
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
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
Attractive element of content. I just stumbled upon your site and in accession capital to claim that I get actually enjoyed account your weblog posts.
Anyway I’ll be subscribing on your augment or even I fulfillment
you get right of entry to consistently rapidly. ps4 games https://tinyurl.com/45xtc52b ps4 games
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
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
You need to be a part of a contest for one of the greatest sites
on the net. I am going to highly recommend
this web site! scoliosis surgery https://coub.com/stories/962966-scoliosis-surgery scoliosis surgery