Photospheres are powerful 3D assets that help designers create immersive spaces and a sense of presence in augmented reality apps. Learn how to use the open source 3D authoring tool Blender to make AR-ready photospheres from any 360º panoramic photograph. To see an example of photospheres in use, check out this AR meditation app prototype.
As a designer who came from the 2D world to the world of AR and 3D, I've found many challenges along the way. Sometimes those challenges were an expected part of the natural learning curve. Other times, the challenges I've faced have felt artificial and unnecessary–like the siloed compatibility of 3D file formats.
Last week, a designer in the Torch community asked about why a photosphere she'd created didn’t look right in her app. Having gone through the rigamarole of creating these objects before, I was eager to help. Problem was, I couldn't quite remember the process I'd used. So, working through the process again, I wrote down the steps and made this video, documenting my workflow.
And here we are—photospheres made easy with Blender and Torch.
Fast links to key steps
- 00:40 - Searching for a photosphere in Sketchfab
- 01:15 - Downloading photosphere source from Sketchfab's site
- 01:58 - Resizing the source texture
- 03:40 - Creating the sphere in Blender
- 04:55 - Creating the outer material texture
- 05:48 - Creating the inner material texture
- 07:15 - Exporting for Torch
- 08:15 - Uploading to Torch with Dropbox
- 08:55 - Replacing the bad photosphere with our new content
- 09:40 - Mortality Fight outro
Transcript
One of the promises of AR is being able to take people places where they might not otherwise be able to go physically. An example of this, from a recent blog post we put up, is taking someone to a hotel room in Dubai before they even pay out the thousands of dollars it's going to cost to get them there.
A great way to do this is using photospheres. It's basically a big sphere in space that has a photo mapped to it that you can step inside of and look around. In Torch, we might use Sketchfab to do that. In which case we'd go to the asset drawer and tap the Sketchfab tab and type in something. I happen to know that Mozilla has a few nice panoramics they call Sky Panos. There's one. The Monument Valley Sky Pano. This is one that I've used before.
The problem with panoramas
But there's a problem. When I drag it out into the scene, I notice that it looks really washed out and flushed. That can be problematic when you're trying to find a panoramic that you might not otherwise have. So what can we do about that?
Well in this video we're going to show you how to make the panoramic from scratch. So what I'm going to do is hop over to my desktop.
Okay, so I'm here on the Sketchfab page where I found this photosphere to start with. And panning around, it looks pretty good. There's no washout or anything like that. So that means to me that the texture's actually good. Which is good for us, right?
Download the photosphere source from Sketchfab
So I'm going to download this model and get the texture out of it. I'm going to choose the original .fbx format since the model that we got from Sketchfab in Torch looked funky. I'm a little skeptical of this auto converted one so I'm going to go with the original. Download into .fbx. Okay, let me hop over to Finder, and here in my downloads folder I'm going to unzip that.
And when I get into the folder, I can see there are source and textures. Source is where the actual .fbx model is. Texture is where the image that I want to use for my own custom photosphere lives. Taking a look at this, it looks pretty big. It says 8K. I think is an 8,000-pixel wide image which is quite large. Typically, you know, when we're looking at 3D geometry and stuff, we want to use only the number of polygons we need and only the number of high res images that we need.
Resize the source texture
So I'm going to open this in Photoshop straight away, and I'm going to make it a lot smaller. So let's go ahead and do that.
Here I am, and I'm going to press Option + Command + I to pull up the image size, and yep there it is. You can see it right there. 8,000 wide, 4,000 tall. It's a little big. We don't need it quite that big. I'm going to cut this down about in half, but I'm going to take it to 4,096 wide.
It's good to use powers of 2 whenever you're creating images for UVs. It's just in the way it wraps and the way it unpacks into a 3D space. Powers of two are great. So I'm going to stick with 4,096 since that's about half the size but also in a power of two, and I'm going to choose OK. And I'm going to just save it and get back over to Finder.
Create the sphere in Blender
And now I've got something that's about half as big which is great. Cool. So the next part of the process is opening this up in Blender and getting it actually attached to the sphere. So let's jump over to Blender. Okay, here we are. This is Blender's default project.
When you start up, you open it up, there's a cube in the middle. I'm going to delete that by pressing x and then clicking delete. And then what I want to do is add a sphere to the environment. So I'm going to go up and choose Add (which you can also press Shift + A), and then I'm going to choose mesh and UV sphere. There it is.
Adjust the poly count
If I look at this, though, it looks a little–it's pretty faceted by default. Again, we're trying to keep the polycount low. But if you want this to look smooth, you're going to need to use what's called a subdivision surface. So with the object selected, I can come over here to my little workspace and choose the modifiers tab. And in the modifiers tab in the second column under generate, I'm going to choose subdivision surface.
And you can already see it's starting to get a little better. If I turn this up, even more, say to about three, you can barely even see that there are lines there. So I'm going to leave it at three. I'm not going to go any higher 'cause I don't need to. And I'm just going to click apply to apply this to our sphere.
Create the outer material texture
Now, we need to add a material. That's where we're going to put this image, right? So I'm going to click onto the materials tab, and I'm going to create a new material. Now, this surface principle BSDF is the default that Blender's going to give you. There are other options here, but I'm going to stick with this just because I want a basic surface. I don't really want to get into transparency or anything like that.
But what I am going to do is under base color here instead of having a color, I want an image. So I'm going to click this node and choose Image Texture. And then that gives me the option to either open a file or create a new one. Well, I already have my file so I'm going to open it. I'm going to navigate down to where we save that stuff which was in my Downloads folder. There it is, okay.
Create the inner material texture
So now even though you can't really see it, that image is mapped to the outside of this sphere which is what we want. The only problem is right now if we stepped inside of this sphere in actual 3D space, it would be invisible because there's no texture or image mapped on the inside. So to do that, I'm going to do a nice little trick where I take this sphere and I duplicate it. So I'm going to duplicate it by pressing Shift + D, and then I'm just going to click. Shift + D and click. And there it is.
Okay, I'm going to rename this sphere Inner just so I have a track on it, and while I'm at it I'll rename the other one Outer. My inner sphere is going to be just like my outer sphere except I'm going to flip the image inside out, right? And so what I'm going to do to do that with my inner sphere selected, I'm going to go into Edit Mode which you can either choose from this dropdown menu, or you can press Tab.
Then I'm going to make sure that all of my faces and verts and everything are selected by pressing A. When they glow orange like that, that means they're selected. Then I'm going to go up to Mesh, and then I want to find the Normals submenu. And I'm just going to press Flip Normals. And again, you're not really seeing anything happen here, but what just happened is all of the faces on this sphere just flipped inside out. So now they're all facing in–which is rad.
Export as GLTF
So now I have a surface that's facing out with the image and a surface that's facing in with the image. And that's pretty much all we have to do. Now we just need to export it and get it back into Torch. So I'm going to click the File menu, and I've enabled the GLTF exporter in Blender which works well for me and for using Torch because our native format of choice in Torch is GLTF. So I'm going to go ahead, choose .gltf. If you wanted to export as .fbx you could do that as well. Just saves some conversion.
Down here in the format, I'm going to make sure I choose the GLTF embedded format. What that's going to do is it's going to wrap that texture up into the model and get it ready so I don't have to any extra bundling or zipping or anything like that.
Upload to Torch with Dropbox
And now I'm going to just save it to my desktop. I'm going to call it Monument Valley. And then Export. And while that's thinking we'll come back over here to the Finder and just keep our eye on the folder here. There it is. Grab it. Now to upload it to Torch, I need to zip this file. So I'm just going to right click and zip. And once that's zipped, I'm going to take advantage of the fact that I have linked my Dropbox account to Torch, and I'm going to drop this file directly into the Torch folder in my Dropbox account.
Now, this is great because it puts this file directly in Torch so I can use it right away. Also, if I make any updates to this file and just overwrite the one in my Dropbox folder, that model will automatically update in Torch which is pretty rad.
Alright, let's jump back over to Torch and see what happens when we replace our old washed out photosphere with this brand new one we just made.
Use Replace Asset to swap in the new file
There's that washed out model. Let's get rid of it by replacing it with the new model. I'm going to select that, and then I'm going to open up the asset drawer and dig into my Dropbox folder where I put that other asset that I just created, tapping the Dropbox folder. Ooo, looks like I got a bunch of stuff in here. So I'm going to scroll over. I named it Monument Valley after the image and the place where the image is of. There it is.
So now I'm just going to drag this down to Replace Selection. And once it transfers, there we go. Look at that. The image is there. I can step inside of it. I can look around. Everything's great.
That's how easy it is to make a photosphere that you can use in Torch using an existing image and Blender.
