Looking at the Sun
The sunrise at the beginning of the Lion King has never left my head. From the moment I saw it, from the moment I heard the opening cry of The Circle of Life, this sequence of the sunrise has taken a permanent residence in my head.
For all of the sun’s importance to the opening sequence, it is ironically only in the shot for about seven seconds. Once in the beginning, for the aforementioned seven seconds, and then once more two minutes later when Rafiki opens the gourd to rub Simba’s head. This second glimpse is so brief that I actually missed it until I was scrubbing this footage for this documentation exercise. My sun would need to the two states of the sun from the movie.
The main point of this project was to create a circle with the intense, inky lines that I first saw in the Lion King. In reality, the distortion of light is due to heat on particles in the air. But the lines in the movie are obviously not literally heat distortion, but an artist’s hand. I love how they moved across the sun and made it feel intense. Now I wanted to do it in the shader.
I’m not the first person to want to recreate this either. The sun has been reproduced for Lion King The Musical productions. These productions also emphasized the distortion of the sun. I’m glad that I’m not the only one who cares about this part of it.
Unfortunately, the movie’s few seconds of the sun are not enough for me to build an entire shader around. To supplement these five seconds, I consulted promotional material for the DVD and VHS releases — the distortion is definitely present, and in different configurations for each. This is what I would end up using for reference.
As a result, my shader is more “artistically inspired by the original” than a direct recreation. I think in a future experiment, I might try for a more exact replication of the movie’s sun.
The Shader Circle of Life
Created in Unity’s Shader Graph environment, this is a physically-based rendering shader graph effect. In addition, it is completely procedural. There are no textures within the shader, just a lot of math running on a single quad.
It has a highly configurable set of properties. It is modifiable at run time and can move across the horizon as an object. These properties allow control over the various colors, sun size, how much distortion you can see, as well as how the sun moves across the sky. It even has a directional light attached that changes color to match the color properties of the sun itself so the world is colored with the intensities of the sun.
Each part of it is additive. Color, sun shape, and distortion each contribute a part to this overall effect and build off one another.
Color
The simplest part of the effect is assigning the color, so I’ll start there.
The sun in the movie has three colors to my eye. It has the color when it crests the horizon, a middle color where it is still near the horizon but is starting to mix a little, and a final color at the apex. One could interpolate between just the horizon and the peak color, but I’ve gone with a three-color option that allows for a smoother mix and continuity between them.
To make this calculation consistent, I created this subgraph. It takes a number range and an arbitrary value. The function returns the value’s relative distance between the ends of the range as a normalized value from 0 to 1. So if you give it 2.5 and the range of 2 and 3, the return is 0.5. This would be used for every color range. I could hypothetically make different interpolation functions with curvature, but that would also change how the returned value moves between multiple ranges. And I didn’t want to mess with that at this time.
Then it is a question of how to move between those colors. I gave the sun properties for monitoring its position in the world and four additional values that it can use to determine its color.
The first is the peak height, the value used to determine if the peak color should be used. Then it has two values for the “horizon range.” This range determines how to blend the middle color. Above that range, it mixes the peak color; below, the horizon color. The final value is the horizon cutoff. This is so the sun actually disappears at a certain point.
Easy part is done. Now for the shape.
Shaping a Sun
You would be hard-pressed to even look at the real sun without pain. So I turned to other recreations that have noted the different types of gradient on the edge. It usually blends from white to bright orange to deeper orange then again blending into the sky color behind it. That color mixture is why I needed the three colors from before. It also informed how I could calculate the sun’s shapes. This full, undistorted sun would be the foundation for the effect, so it had to be generally true to the original.
For this technique, I started with polar coordinates to create a base, gradient circle. Then based on the sun’s position in the sky, I increased the value of the internal intensity. This creates a “core” whitening effect.
Using that core, I added a second, wavy circle that would add the basics of a corona effect. On top of that, there is a set of five more wave circles that act as smaller distortions on top of that. These distorted portions could create the blur and the transition into the background sky color. Because they all have different magnitudes and directions, it adds a nice bit of noise to the procedure. The sun looks like it is shining rather than spinning, which is what would happen if the sun only had one of these effects on it.
For this part of the graph, I ran into one of Shader Graph’s little peculiarities. If you use a custom node, the preview will default to sphere. You can see that in the upper left image, following the bottom path. I created a basic subgraph to perform a sine wave calculation to make a wavy circle along the radius. Since this made adding the values hard to visualize, I forced myself to wait before converting it all into this subgraph.
Heat Distortion
For the bleed-through color, all I had to do was change the render mode to transparent and made it respect the alpha channel. Boom that was easy. But this did have the knock-on effect that my sun would need a sky background that was the correct colors. Maybe not the best solution, but it worked.
In the same vein, I set the distortion to only be visible when the sun was in between a range of positional values. With these simpler details out of the way, I worked on actual behavior of the lines.
The protected region is simple enough. I created a rotating rectangular mask in the center of the distortion. It is stronger in the middle and weaker at the edges. This makes sure that the central region is always “protected” from distortion to some degree. When it spins, it creates a subtle fan effect that gives the off-angle look.
And how? Well, the horizontal bars are created by a series of waves that add up to where horizontal lines could be. If it added up to a certain amount, then the color should be dropped out. This is achieved with waves of various levels of power, periodicity, and offset. The distortion is actually just a series of sine waves that are summed up. Essentially the same technique as the corona, but this time it is only four of the waves, and they do not need polar coordinates. When combined with the rotating bar, the waves then get a nice tilt to their values as the rotation shifts their values.
And that was it! After adding some properties, this gave me control over how fast the distortion could move, how strong the distortion could be, and where in the world positions that distortion should exist.
Finishing Touches
Now it was about combining everything together, which was conveniently a mixture of multiply and addition nodes. Using the distortion properties I set earlier, I was able to interpolate how much distortion would exist on the sun image. With the distance equation from before, I could mix between the two with the position of the sun itself.
Since I had every step of the shader available to manipulate and duplicate, I also hooked up the colors from the very beginning to each of the appropriate shapes and then set it to the output. This part is blissfully easy and straightforward compared to before.
At this point, I knew I had what I needed to make the sun work. But the properties themselves needed tweaking. What was the right distortion amount? What colors to use for the sun? What speed should the corona move at? What about the distortion? What positional range should the distortion cut out at? What is the right sun intensity? And so on. Fortunately, these were all answered relatively easily by playing with the shader itself and just looking at it. The ironic benefit of having only a few seconds of reference footage meant it was easy to check against my initial conditions. After hours of testing, I settled on these values that I used to take most of the screenshots in this documentation.
You can even go off the rails and create a sun with weird colors! But for my purposes at least, I was finished with this.
Zooming back out, there was a lot to take in. This shader had come a long way from just being a circle on a quad. Two subgraphs and lots of sine wave manipulation were used to make this possible. I believe there are several points where improvements could be made. The shape could be tuned better, the sky color could be adapted to be part of the shader itself, and the distortion could be handled in a simpler and more proficient way.
With Shader Graph and Unity, there are tons of different control points to modify, and art direct the effect. While I did make a C# script to hook scene properties into the sun, I could have managed the sun’s state to transition between things as well. Those things would have to wait for another day, for now, I am pleased with the final result.
Thanks for reading along with this journey. Maybe I’ll find another animated sun to explore next?
Created for Experimental Shaders class in Parsons Design and Technology. Special thanks to Justin Bakse for teaching the class and getting me started on this path with shaders. Additional thanks to Ket Ng for editing
