Creating a portal effect (Unity)

I've often been told that mimicking your favorite effects from movies and video games is a great way to learn practical coding. I thought I could apply this approach to my quest to learn shader programming, so I started searching for an effect to try and replicate.

I came across this entrancing effect from a fellow RPI student named Grant Doney. It features a portal effect that allows the player to see into another world. As this would be my first time creating a shader completely on my own, this fairly simple effect seemed like a great place to start.

I recommend watching the short video on his website first so you have an idea of what I'm trying to recreate. It can be found here.

Grant's portal effect showing a room at a different point in history. From GrantDoney.com

I'm going to try to describe the process of creating this effect in a way that makes sense even if you don't code. Hopefully this approach will make the post more readable, as well as give myself practice explaining technical processes to those outside of computer science and game development.

Creating the effect

The first thing to do would be to create the general shape of the portal effect in a shader. And since the shape is roughly a circle, that seemed like a great place to start. I started by making a flat plane to hold the effect, and then drawing a circle right in the center.

I added the ability to change the size of the circle, to allow the portal to be the right size later on

With this in place, I made all of the black pixels of the plane completely transparent. I'll also color the circle red so it's a little easier to see.

Next, I tackled the small variations along the edges as seen in Grant's version. They really bring the effect alive and add a mysterious aura to the portal. The approach I took was by using something called a noisemap.

Noisemaps are used frequently in shader programming. In my water shader blog from last week, I used one to create the ripples on the top of the water. In this project, I am going to use it to alter the outline of the portal.

Here's an example of one. It's just a picture with a bunch of black and white areas on it. Not very interesting.

However, by interpreting the data of this map in the right way, I can use it to create the natural looking variations I am looking for.

This is done by overlaying the noisemap on top of the portal, and saying that white spots add to the circle, whereas black spots subtract from the circle. And because the noisemap is drawn so that the white and black parts fade smoothly between one another (as opposed to each pixel of the picture being completely random, as seen here), it creates a really natural looking edge around the circle.

One important thing to note: the shape only gets affected by the noisemap near the edge of the circle. Otherwise, you might see holes showing up in the middle of the portal.

To animate the edge, I can simply slide the noisemap along the surface of the portal, which leads to this mesmerizing effect:

I then tackled actually seeing through the portal into another world. Luckily, Unity has a great tool for doing exactly this called a render texture.

First, you add a second camera to the game (the first camera being what you are seeing normally). Then, instead of that camera sending what it sees to the screen, it sends it to a picture that you can use in your code. In this case, I just replaced the red pixels with what the second camera sees.

I thought a nice area to show through the portal was my beach scene from my water shader.

There was only one more thing to do - the bright outline around the portal. I changed the very edge of the portal to be emissive, which in this case allows that part of the object to emit light.

And that's it! Like I said previously, this was my first time creating a shader all on my own, but I am really happy with how the effect turned out. The last thing I added were a few variables to allow for some variation in different portals

Here are some more examples of it in action:

This mini-project was a great learning experience for me, and I hope you were able to follow along in my process even if you don't know how to code. See you in the next one!