• # Effect: Black Hole Background

Graphics and GPU Programming

For one of the upcoming projects (which will follow in some of the following posts), and as it had to fit the lore of the game, a black hole was necessary. Before going forward - let me add an image of what result I want to achieve:

Artist conception of black hole - NASA/JPL-Caltech

While the image is similar to the final effect I wanted to achieve, I did some changes on the effect to be more colorful and bright - but the original idea was from this image.

The effect is actually separated in 3 major parts - Disk, Streaks and Post processing.Of course there is also the core of the black hole (which is just a small sphere, with black color).

### Disk

The disk around black hole is actually just matter that rotates around the core. Depending on the distance from the core the average density will increase near the event horizon and decrease further from it. Near the core the density can be so high that it may eventually have temperature close to star - therefore there might be high emissive energy - and therefore light.

Also, due to the time dilation (and therefore light having hard time escaping near the event horizon), the emissivity is getting lower very close near the event horizon. Anything beyond event horizon is invisible from the outside, because gravity there is so strong, not even photons can escape.

At least that is what I understand from the topic from physics point of view.

This actually explained what can be seen on the image and what is going on graphically, that is:

1. The disk rotates around the core
2. The density of disk decreases further from the core
3. The emissive light decreases further from the core, and therefore some (outer) parts of the disk will be lit by inner part ... although inner part around the core has to be somehow darker

Which can be solved with simple texturing and some basic lighting of the result. Using whirl-like texture as a basis proved to be a good start for me. I started off by creating a whirl-like texture that would define density in various parts of the disk, which resulted in this:

Generating a normal map for lighting from this is actually quite straight forward (and easy in Substance Designer F.e.) - and after short time, I also had a normal map:

Putting just these together with basic diffuse lighting (standard N.L) from the center (slightly above the plane) gives us some basic results:

Next thing is defining emissivity. This is done simply by using 1D gradient texture for which the coordinate will be distance from the center. The gradient I came up with is:

Notice the left part - which is near the event horizon.will give us similar feeling to the image as we're not jumping straight to bright value. Applying emissive value (as both - multiplier for the color, and as emission) gives us this look:

Which looks good enough already - I personally played a bit with values (mainly playing with contrast and other multiplication factors - F.e. for alpha channel/transparency), and ended up with this result:

Resulting pixel shader is as simple as:

fixed4 frag (v2f i) : SV_Target
{
// Calculate texture coordinate for gradient
float2 centric = i.uv * 2.0f - 1.0f;
float dist = min(sqrt(centric.x * centric.x + centric.y * centric.y), 1.0f);

// Light direction (hack - simulates light approx. in the middle, slightly pushed up)
float3 lightDir = normalize(float3(centric.x, -centric.y, -0.5f));

// Use normals from normal map
float3 normals = normalize(tex2D(_NormalsTex, i.uv).xyz * 2.0f - 1.0f);

// Simple N.L is enough for lighting
float bump = max(dot(-lightDir, normals), 0.0f);

// Alpha texture
float alpha = tex2D(_AlphaTex, i.uv).x;

// Mix colors (note. contrast increase required for both - lighting and alpha)
return fixed4((gradient * bump * bump * bump + gradient) * 0.75f, min(alpha * alpha * 6.0f, 1.0f));
}

### Streaks

There are 2 streaks, directing upwards and downwards from the core. My intention was to make them bright compared to the core and blue-ish - to keep the background more colorful in the end.

Each streak is composed from 2 objects, a very bright white sphere (which will take advantage of used post processing effects to feel bright), and a geometry for the streaks (instead of using particles). The geometry is quite simple - looks a bit like rotated and cut hyperbole, notice the UV map on the left (it is important for understanding the next part):

This geometry is there 4 times for each direction of the streak, rotated around the origin by 90, 180 and 270 degrees.

The actual idea for streaks was simple - have a simple geometry of cut surface, and roll a texture over it. Multiplying with correct color and distance from the beginning of the streak adds color effect that nicely fades into the background. To create a particles-like texture that varies in intensity I used Substance Designer again and come up with:

By simply applying this texture as alpha, and moving the X-texture coordinate the streak is animated, like:

Multiplying by wanted color gives us:

And multiplying by factor given by distance from the origin of the streak results in:

Which is actually quite acceptable for me.

For the sake of completeness, here is the full pixel shader:

fixed4 frag (v2f i) : SV_Target
{
// Texture coordinates, offset based on external value (animates streaks)
float2 uv = i.uv.xy + float2(_Offset, 0.0f);

// Alpha texture for streaks
fixed alpha = tex2D(_AlphaTex, uv);

// Distance from origin factor (calculated from texture coordinates of streaks)
float factor = pow(1.0f - i.uv.x, 4.0f);

// Multiplication factor (to 'overbright' the effect - so that it 'blooms properly' when applying post-process)
float exposure = 6.0f;

// Apply resulting color
return fixed4(exposure * 51.0 / 255.0, exposure * 110.0 / 255.0, exposure * 150.0 / 255.0, alpha * factor);
}

Putting the effects together ends up in:

### Post Processing

By using simple bloom effect, we can achieve the resulting final effect as shown in video, which improves this kind of effect a lot. I've added lens dirt texture to bloom. We need to be careful with the actual core - as that needs to stay black (I intentionally let it stay black even through the bloom). You can do this either by using floating-point render target before the bloom and write some low value instead of black (careful with tone mapping though - yet you might want to go even for negative numbers), or just render the core after the bloom effect.

The resulting effect looks like:

And as promised - a video showing the effect:

Report Article

## User Feedback

Posted (edited)

Nice work. Looks great!

Edited by nihiven
typo

##### Share on other sites

Really nice work. Now I just want you to put the black sphere in (or make it bigger if that's already there?), the little black dot in the middle is heavily aliased and letting your effect down imo.

##### Share on other sites

Anyone who can create a three js demo for this ?

##### Share on other sites

@DerekB It is up technically up to think off something with 'event horizon', Physically taken, with the amount of debris you wouldn't most likely see anything (it would just be too small). Using perfect sphere with ray tracer could be a way around (as it's quite easy to do nice antialiasing on it).

@yueyang liu I could build you one with Unity almost instantly. If you really wish for ThreeJS one, if I'm able to find some spare time it may be possible

## Create an account or sign in to comment

You need to be a member in order to leave a comment

## Create an account

Sign up for a new account in our community. It's easy!

Register a new account

• 0
• 0
• 32
• 0
• 1

• 12
• 16
• 26
• 10
• 44
• ### Similar Content

• Hello I am looking for a team that is dedicated in creating a small game. I prefer that the game is already being worked on as that shows determination in terms of completing it. Below is a link to my current resume that has video links on some of the things I have worked on in the past. However, I do have screenshots on various other things I have done and can show. I have some skill in almost everything from Level Design to some C# programming to 3D Modelling.
• By Luno91
Hi Guys. I'm currently working on a puzzle game with the theme elections.

You have a board of hexagons with a color which represents the country and the majority of the voters in this part of the country.
Your task is, to make the whole country vote your party.

The thing I need your help with is the background.

We had two Ideas,

one was to lay the landscape in the further background an make it blurred out. First Screenshot

the other and more useful one was to integrate the hexagons into the landscape to show that they are actually real country borders. Second Screenshot
(both pics are rough designs and will be worked out. They are more like sketches of how they could look like)

I wanted to know which direction seems better or more appealing for you.
Thanks for your help,

Luno

• By jb-dev
This shows a boss telegraphing its attack to the player
• By jb-dev
This is a boss currently spotting the player
• By rogerdv
Im looking for a pixel artist to improve the current graphics of a mobile game. Here is a video of current beta. Knowledge of unity3d is a plus.

×