Jump to content
  • Advertisement
  • 07/12/18 03:45 PM

    Effect: Black Hole Background

    Graphics and GPU Programming

    Vilem Otte

    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:

    original.jpg.2a289921b41b9786fbc3ba36eef0f0e4.jpg

    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:

    accertion_base.png.521ffed0062547b64d04cbaf3791e8b7.png

    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:

    acceration_disk_normal.png.7ee61162a0662e8da855d2f574dbb0aa.png

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

    disk_1.jpg.d40bf082089e478392a29b74148f57db.jpg

    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:

    acceration_disk_basecolor.thumb.png.9c316310aad81e4bfb25b9125c426261.png

    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:

    disk_2.jpg.d2b0a1887f3ce304be9ebabeece14e0b.jpg

    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:

    disk_3.jpg.8ad7f678d57204b9c7d149c0f9a07393.jpg

    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);
    
    	// Lookup gradient
    	float3 gradient = tex2D(_GradientTex, float2(dist, 0.0f)).xyz;
    
    	// 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):

    geometry.thumb.jpg.508c618d2d287505304a0edaf5e6ae67.jpg

    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:

    particles.thumb.jpg.c11beaf8a9d2169cdf276c6913367e06.jpg

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

    particles_1.jpg.c964a123d87725408cc479f08c8d8d93.jpg

    Multiplying by wanted color gives us:

    particles_2.jpg.de06f30622aaa3ea2290e410bd0a08b8.jpg

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

    particles_3.jpg.080f74fc0fbd7aec4508430038e09743.jpg

    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:

    effect.jpg.9238c0165b750c44336228baf1ff00dc.jpg

    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:

    result.jpg.b123d0e8af256f01efe310f42dfd50fb.jpg

    And as promised - a video showing the effect:



      Report Article


    User Feedback


    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 this comment


    Link to comment
    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

    Share this comment


    Link to comment
    Share on other sites


    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

    Sign in

    Already have an account? Sign in here.

    Sign In Now

  • Advertisement
  • Game Developer Survey

    completed-task.png

    We are looking for qualified game developers to participate in a 10-minute online survey. Qualified participants will be offered a $15 incentive for your time and insights. Click here to start!

    Take me to the survey!

  • Advertisement
  • Latest Featured Articles

  • Featured Blogs

  • Advertisement
  • Popular Now

  • Similar Content

    • By RoKabium Games
      Aura enemies – ”Heeble” is a spider-like creature that is closely related to the Creeble, Greeble and Beeble and it can crawl across any type of block. The ice-webs this one spins causes a lingering damage so stay clear and burn those webs from afar.
    • By Shadowsane
      My project started in 2014 but recently ended due to no funds.  AltarisNine was a Minecraft project based on RPG. The concept was nine islands that you explore at a time to follow an in depth lore based on our own production team. This is where the 'Nine' comes in. With skepticism of future success we hope to make this tale into chapters. Such as the first one introducing Nine islands at time.
      It wasn't always the same though, my world did evolve over time and now I have a better idea of what it is better than ever. In the first island, Main Isle, is themed around jungles and wilderness. There's lore that stretches throughout the chapter which will engage the player. There would also be kinds of characters you can be such as any other RPG which could be talked about (because i'm still  about what I have lol)
      My former team was designing a world players would get into interact with in various ways. Boss battles would be minigames and the RPG lore would be engaged in and something indie platforms would enjoy and talk about beyond platforms.
      In the minecraft varient I was a builder, the leader, and the story director which everyone respected. I led my own team of builders and story writers. While I chose certain individuals to be the head department of development and art design.
      The reason I am here is to find a new team to help take this away from minecraft and hope we can be successful about it. I'll happily commute each and every person that volunteers and will be accommodated down the line with promotions, wages, and definitely praised for helping start my dream up.

      Here are some questions that were frequently asked and that I can thoroughly answer:
      What is the goal of the game? If you've ever heard of Wizard101. I got inspired by that game a little. I like the concept of making yourself in this world of mystery and impressing people with new mechanics and events that they enjoy. I'd like for the game to be successful and be mostly on PC but if this keeps up we could reach out to other consoles. But for now, PC, one platform at a time lol. My goal personally is to give people the entertainment and enjoyment I think they'll deserve. Something thats not cheesy, not cliche, something new to keep evolving the gaming community Is this in first-person or third-person? This will be a third person game. We can play around with the camera angles but I kind of want it from a aerial pov I saw RPG in the post so can I assume that the game will have generic RPG elements, e.g. quests, npcs, story-line, items? Yes this will have generic RPG elements. But with a few surprises that make the game different. Such as making boss fights some type of minigame. I don't know how the audience will like or even if it'll flow with game play. But I'd still like to take the idea on for now. Will there be combats, e.g. vs. monsters, vs. players(?) ? There will be tons of concepts. As i've said before the 'Nine' comes in the Nine isles of this world we haven't named yet lol. Each nine islands we come up with will not only give players plenty of content to play, but something we break up into story chapters. Each island will have its on set monsters tied to the story or even monsters that are just natural in their environment. There will also be a PvP aspect which can't be brought up too much because its difficult to try to come up with a player style culture that isn't too predictable or generic or even cliche. I was wondering if it should be an initiated fight or a head on duel like world of warcraft. Is this a single player game or a multiplayer one? Definitely multiplayer. Will the game look like Minecraft? like a voxel/blocks game? I imagined it not looking like minecraft but maybe that can be a concept of its own down the line (like an island concept). I was thinking along the lines of a 3D style and not like minecraft. What are the core mechanics to be included, e.g. player movement, enemy movement, enemy AI? This question is more technical but there will be interactive things in the world, things to collect, natural occurring crafting supplies to make new loot and weapons with. There will be NPC's and thats a broad topic enough lol. I'd even a imagine a pet, housing, and gardening system. But thats for accessories in coding and to give more content in the game for later polishing. Is there a storyline already made? There is an indirect storyline. We've made a script for voice actors (and just what to make the NPC's say in general) in A9 v1. Are there goals already planned out? There are many goals to set out. One each at a time for separate upcoming departments The first 8 pictures were of our hub, the other 9 was our factions world. The factions world doesn't retain to this project I wanted you to see how dedicated I was to making this project. I built everything in the hub myself except for the giant pagodas. The last two photos were all the ones I could find of the RPG world
       




















    • By TheAGamer39
      Hi, I'm currently working on this game by myself and was wondering if anyone wanted to help I'm looking for programmers, illustrators, pixel artists, sound designers and developers. I'm a young teen and I prefer to program, I have a basic idea for the game but need help creating it and giving it some more uniqueness. Basically the game is a 2D, could be 3D if someone can teach me how to code games in 3D, and a large world adventure game were you have to fight monsters to level up and collect increasingly powerful items . There is also going to be a mysterious part of the game where you have to find certain artefacts and decode messages to get the best gear. I really hope people are interested please join my discord server: https://discord.gg/c5Ce9Q4 or contact me via email; theagamer39@hotmail.com if you want to help. Hope you have a nice day!
    • By JeremyAlessi
      In PixelCast 7, Jeremy hangs out at Pixels = Pints + Bytes for the latest PixelFest Devs meetup and chats with two local indies about their studios. Joshua Jané demos 'Bouncy Bear' and explains what makes 'Just Bare Games' tick, including the fact that all their games contain bears! Meanwhile, Joseph Musso of Sunset Studios let's us in on the game he's been pondering for 10 years ('Santa's Sleigh Ride Sacrilegious Arcade Action'... say it three times fast), which is now playable after coming out to a PixelFest Devs meetup back in August.
       
       
       

      View full story
    • By JeremyAlessi
      In PixelCast 7, Jeremy hangs out at Pixels = Pints + Bytes for the latest PixelFest Devs meetup and chats with two local indies about their studios. Joshua Jané demos 'Bouncy Bear' and explains what makes 'Just Bare Games' tick, including the fact that all their games contain bears! Meanwhile, Joseph Musso of Sunset Studios let's us in on the game he's been pondering for 10 years ('Santa's Sleigh Ride Sacrilegious Arcade Action'... say it three times fast), which is now playable after coming out to a PixelFest Devs meetup back in August.
       
       
       
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!