Gate to another world: Creating Portals


Ever wonder how the Snow Elf Wayshrine Chantry portals manage to project a magic looking portal that renders the worldspace within? These portals are really a fantastic thing and can be created with custom images to project your desired destination, but like the journey of the initiate to the shrine of Auriel, this road is a long one, but I’m here to help guide you.

What you will need:

  • AutoStitch – free program from combining a number of photos into a single panorama
  • Panorama Converter – Free online panorama to cube map converter
  • Graphic program such as Photoshop
  • Capability of saving images as DDS files such as the Nvidia Photoshop DDS plugin
  • The Creation Kit

Fist thing to understand is that you are not actually looking into a rendered 3D space, but instead looking at a texture that emulates a spherical panorama rendered on the inside of a Cube.

pic2.jpgSo Imagine that you are standing at the green portal and looking inside. What you would see is a texture that is rendered across the front, sides, left, right, top, bottom, and back of the cube (though the back you would never see since you are looking through a hole in it).

The way this is achieved is basically with a visual trick. A spherical phot0 (basically a fish eye lens that could capture 360 degrees of imagery in 1 shot) is processed into a flat panorama , resulting in a warped image which then is processed into 6 separate warped images, that when wrapped around the outside of the cube, facing inward, results in a cohesive image where the warpage actually plays to the eye because of perspective, and gives the effect of being a good image that is 3D

Now that you understand the concept, now for how to actually implement it.

1- Create initial source images (screen shots)

pic3.jpgFirst you will need to go inside of your game and go to the cell or worldspace that you want to have the portal lead to. Here you will pick you perfect spot and stand to take pictures in every direction possible. DO NOT MOVE, just look around. Take 1 shot in front, a few off to each side and all around to the back. One at the top and a couple in between front and top, the same with bottom and take a few up and to the right and left shots. Basically you want to capture every object you can see in at least 2 of your screen shots. In the end you should have between 50-100 or so screen shots.

2- Create Panorama


You should already have downloaded Autostitch from the site shown here. Once you have it, launch the program and choose the gear for options and select your desired output location for the finished image to be saved.

After that simply choose “OPEN IMAGES”

Select all of your screen shots that you just took for the panorama.pic5.jpg

After the images are selected, Autostitch will begin processing and will bring the finished image up, saved to your previously chosen location. As you can see below, this example is from my Sancre Tor worldspace portal, and as you can see, is somewhat warped as expected.

The only thing to be aware of is that you do NOT want to have black chunks of the image missing as shown in the bottom left corner of this picture. This means that there was less than 2 screen shots that captured that section of the view. However, on this example it’s fine because the far left and right of the panorama will be BEHIND the player when they view the portal, so it will never been seen. if there are chunks missing anywhere else, you need to redo the screen shot capture step.


3- Convert Panorama to cube map images


At you will see the screen to the left. Simply hit open, select your panorama image you created in the last step and wait for it to process


After it is completed, you will have this screen with a few options. You will want to save each of the 6 sides into individual images (the middle option). Click each facing (front, left, right, etc) and save the image.

So far so good? Good, because now it gets a little more tricky as we prepare and layout the images

4- Prepare source images for layout


From your panorama, the online converter will give you images such as these. Load them all up into your graphics program. The first thing to notice is that the panorama program will have labeled the images incorrectly based on the perspective you want for the portal. Just ignore this for now and make these changes to each of the files as indicated by their file name:

  • LEFT: flip vertical and horizontal
  • RIGHT: flip horizontal
  • TOP: rotate 90 degrees clockwise
  • BOTTOM: rotate 90 degrees clockwise
  • BACK: no change
  • FRONT: no change

5- Create Cube Map layout


Now you must create a new image to lay out these 6 images. Projected cube maps use a single image with each of the 6 faces laid out in a specific order. Your alignment of each facing is now perfect in each of the files, they just have to be dropped together in the right order.

Create a new image that is 6144 piaxels wide by 1024 high at 72dpi resolution with RGB color.pic11.jpgNext, start with the image file FRONT (which is your right side image) and drag it into your new image. Turn on any snap feature you have in the graphics program so it will snap in all the way on the left.

Using the key I loaded in the picture above, continue dragging each of the 6 faces into the new image layout. The labels at the top of each facing on the key show what the FILE NAME is, and the RT, LF, FR, etc show which facing they will end up being in game. RT = Right, LF = Left, FR = Front, BK = Back, BT = Bottom, and TP = Top. The rotation of the facing abbreviation reflects the changes you already made in the previous step, so no alternations need to be done here, they are just shown for comparison. Just make sure to zoom in close and make sure there are no seams between the images and that each facing image is not running off the canvas at all, they are sized exactly 1024 x 1024 so they should snap right together in the new layout with no issues.

Additional Note: The key provided in the above image also has color bars to show which edges will match up together. if you printed this out in color and cut the face out and matches the colors it would make a perfect cube with all faces lined up properly

Lastly, save this working image WITH LAYERS encase you need to make adjustments after trying it in game.

6- Save as a DDS cubemap

pic12.jpgNvidia has a plugin for Photoshop for saving files as DDS format, required by Skyrim. I won’t go into any other specifics and your setup may vary depending on your graphics program and graphic card, but for Photoshop you simply flatten the image and then SAVE AS and select DDS. The window shown in the picture above will appear. The first drop down window should be set to DTX1 no alpha and the second should be set as Cube Map. Make sure “Generate Mip maps” is also ticked and hit save.

Congratulations! you have created a 3D cube map.

7- Implementation steps

Now you get to put all your hard work into use in the creation kitpic13.jpg

The first step is to go to the TEXTURESET object group on the object viewer on the left. if you search for PORTAL you will see the DLC1 entries show in the picture above. Edit any of these entries and immediately rename it to whatever you like and save it as a new object (DO NOT save the old form or rename it by mistake). In the example above you will see the DBM forms listed for the Sancre Tor and Elswyer portals I made.

Open up your newly created copy of the portal form you edited, and simply change the ENVIRONMENT line to point to your newly made Cubemap texture.


Next, you will go to the ACTIVATOR object group and search for ShrinePortal. It will list the actual portals used in the game. Simply edit any one of these and rename it, then save it as a new form. Open that new form back up and edit the model path as shown above.


You will see a preview of the portal and a list of seemingly nonsensical entries below the file selector. Each of these lines refers to an object inside the model’s NIF file. Double click on the Portal:0 entry at the bottom of the list and select your TEXTURESET that you created with your cube map entered into it.After you choose your textureset, you may notice that the preview window shows the BACK image of your cube map rather than the front. This is totally normal, the preview window just renders from a different perspective. Once you drop it into your cell, it will show properly in the render window and in the game.


8- Final steps: Placement and scripting

Now that you have your portal all set up, all that is left to do is place it and make sure it sends you where you want to go.

Drag and drop your portal into the game and place it where you like. Then edit the object and click ADD under the script tab. Select NEW SCRIPT and add the following content:

ObjectReference Property Portmarker Auto

Event OnCellAttach()

Event OnActivate(ObjectReference akActionRef)
if akActionRef == Game.GetPlayer()

Lastly you simply must place an XmarkerHeading static object wherever you want the destination for your portal to be. Select the script tab again on the portal reference and hit PROPERTIES. set the one property listed to point to the XmarkerHeading you placed.

Congratualtions! You should now have a working fancy magical 3D portal… type… thingy.

9- Addendum

Instead of making your portal as an activator, you could create a DOOR form instead, which would then allow you to simply mark a destination door, and avoid having to attach the script. However, you sill still need to attach a script with only the OnCellAttach() block which tells the portal to render when you load into the cell. Without it, the portal will simply look like a stone wall because the portal object has animations which by default use the stone. It’s an animation event that actually starts the portal to look like it does.

The results of the above tutorial will yield a portal that is always on and ready to use. if you wish to make the portals materialize like they do in the vanilla game, or be able to turn them on and off, you should investigate the script attached to the portal gem pedestal in the vanilla game for clues on how to implement that. It will take some scripting knowledge to make it work and retrofit the script to serve your purpose, but it is totally doable, but beyond the scope of this guide.

I hope you have enjoyed this tutorial and that it’s proven useful for you.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s