Unreal Engine to Sketchfab, Panoramic Environment Tutorial

We have been intending on having panoramas of some of the rooms for a while now but I have been dreading the process for some reason. Turns out, it is very straightforward and easy (dare I say). It takes around 15 minutes to get the panorama working in Sketchfab, so if you are following along, that’s approximately how much time you will need, you mileage may vary of course.

Resulting Panorama

Click the play button to view the scene in 3D.  If you go to Settings->Rendering->Wireframe and select a color, you can see how the environment is merely a cubemap applied to a sphere’s inner faces as texture.

 Capturing the Cubemap in Unreal Engine

Place a Scene Capture Cube in your scene. From my experience, I suggest placing it in the middle of the volume you are trying to capture as having it closer to the edges resulted in perspective distortions for me in the panoramas when the view is rotated.

After you place your Scene Capture Cube object in your scene, check it’s details and uncheck “Capture Every Frame”. You don’t have to, but it really adds up when you have a large cubemap that’s being written every frame and may cripple your system if you have numerous captures going on.

 

You will notice the Texture Target is set to None as default. We need to create a Cube Render Target and assign it in there so the object knows where to store the cubemap it captures. You can create one by right-clicking in your content browser, selecting the Materials & Textures menu and selecting the Cube Render Target option as shown on the right.

After you create and name your Cube Render Target, drag it on the empty slot to assign it on your Scene Capture Cube object.

You should see a thumbnail generated, if not move your camera a bit so it triggers a capture event. This is necessary if you turned off Capture Every Frame option on the Scene Capture Cube as it now only captures on movement.

Now, double click on your cube render target to open it’s details. I only change the resolution to 2048 (from the default 256) and leave the rest alone. The HDR adjustment options will also be available in Photoshop where you can save presets so you can apply the same settings to all your captures.

Now, all there is left to do is, exporting the resulting HDR image from Unreal. To do so, right-click your cube render target in the content browser and go to the Asset Actions menu and select Export.

So far, we have captured our cubemap and exported it so we can make some adjustments and use it as a texture.

 

 

HDR Adjustments in Photoshop

Open you HDR image in Photoshop and go to Image->Adjustments and select HDR Toning. The dialogue shown above will pop-up and you will be able to adjust the same parameters you could in Unreal. I prefer doing it in Photoshop since it lets you save your settings as a preset (the little gear icon next to the dropdown), so you can apply the same settings to other images.

Now, we can export our image from Photoshop, you can use any format you wish to use. I exported as a PNG but I imagine anything compatible with your 3D editing tool would work at.

Using the Cubemap as a Texture

I will be using Maya for the tutorial but any 3D software that is capable of creating a sphere would work. I made a cube and gave it some segments (60×60) and put it up right by rotating it 90 degrees on the X-axis. If we assign a texture now, the texture will be visible from the “outside” of the sphere but not from the inside. To see the texture from within the sphere, we need to “flip” the normals of all the polygons that make up our sphere.

Go to your Mesh Display menu (if not visible, make sure you are in Modeling mode, check the drop-down to the left of your shelves) and select Reverse from the list. This will reverse which way the polygons are facing so the textures we apply on these surfaces will be visible from within the object.

Now assign the cubemap you exported from Photoshop as a Color Texture. When zoomed into the sphere, you should be able to see the texture applied.

 

Uploading to Sketchfab

Now we just have to export the model and the textures to an FBX and upload the resulting FBX to Sketchfab.

In Maya, go to File->Export All and export your object as an FBX, making sure in your settings, the media files are embedded (Embed Media) so the textures end up being included in your file.

Now, login to your Sketchfab account and upload your model just like any other model. When the upload is complete, go to your 3D settings. You fill see that we are viewing the mesh from the “outside”, unlike Maya where we were zoomed in.

Zoom in and position your camera inside the sphere in Sketchfab scene and click the “Save View” button on the upper-left corner of your viewport.

That’s it! You should be able to see your cubemap as a panorama now!

follow on twitter

 

Modular Spook Sequencer Blueprint

We created a spook sequencer for some of the events and thought might be useful for some. It has a trigger area that the player can walk in and it fires off some common events such as shutting a door, knocking something over, making a sound or spawn some particles somewhere. By introducing delays, we piggyback some events.

Here is how tit looks like in action. The player steps in, The razorblade particles are spawned in the room with a 3 sec kill delay. The door is also set to slam shut in 2 seconds and a commentary by the player character is triggered right then.

In this instance, this specific door is the door that will do something when the player triggers the event. We can slam it shut or open it. The door is slightly ajar at 50 degrees. When we fire off the slam shut event, it calls the “slam shut” function in the door class. The razorblade particle system is set to die off at 3 seconds and is dissolved as the player enters the room. This Blueprint will surely expand as our needs grow but so far we have used it in 3 scripted events and works pretty good.

 

follow on twitter