Check out a free preview of the full Game Development with Unity for Web Developers course
The "Post Processing" Lesson is part of the full, Game Development with Unity for Web Developers course featured in this preview video. Here's what you'd learn in this lesson:
Nick demonstrates applying post-processing effects to improve the look of a game by applying full-screen effects after a frame is rendered. Bloom, tonemapping, chromatic aberration, vignette, and panini projection are a few post-processing effects
Transcript from the "Post Processing" Lesson
[00:00:00]
>> So let's move on to post processing, the game could still look a little bit better, it kind of looks washed out to me, and kinda needs a little bit more to make it look complete. So post processing can improve the look of a game by applying full screen effects after a frame has been rendered.
[00:00:24]
So you can think of post processing kind of like Photoshop effects or Instagram filters. And many effects tend to simulate the properties of a real world camera. So for example, post processing effects can include bloom, which applies a soft blur to some brighter parts of the image particularly in an HDR rendering pipeline which we are using.
[00:00:53]
Tonemapping remaps HDR images into linear dynamic range for your screen. Chromatic aberration adds subtle color shifting towards the edges of a camera lens. And that kinda simulates the breakdown of light into its component parts. So as you get closer to the curvature of that camera lens, you would expect white light to break down into a rainbow so it kind of gives that effect.
[00:01:23]
You can add a vignette to darken the edges of an image and help highlight the center. And then there's another one I like called Panini projection, which warps the view. Again, similar to a camera lens, you expect a lens to apply some amount of warping to an image.
[00:01:42]
So let's go back to Unity and apply all of those things, I'll go ahead and save this scene. And to do this, we're going to use what's called a volume. So I'll go up to the Create menu here. And I'll go to the Volume menu, and I'm going to create a new global volume.
[00:02:07]
And it's fine if it's just called global volume. I'll reset that to the center. And a lot of the times, you can use volumes as local volumes. So if the player is, say, moving through a space, like a dark cave, and then out into an more open area, you might wanna apply different post processing effects, depending on where the player is.
[00:02:38]
And so these volumes kind of act like trigger colliders. They will trigger different post processing effects and potentially other things if you want them to. And they can be weighted against one another and loop between one another. It's a really cool system, but we're going to use it for post processing.
[00:02:57]
Right now it doesn't have any kind of post processing volume profile. So I'll just hit the New button to create a new one. And I'm gonna switch over to the game view so that we can see what effect each one of these is having as we apply it.
[00:03:14]
So I'm going to add bloom, and there's some checkboxes we need to hit there. So we need to enable the thresholds and intensity, I'll set that to an intensity of, say, 1. And I'll enable high quality filtering there, just so we get a few benefits of higher quality filtering which will allow it to not maybe flicker quite so much.
[00:03:49]
And there's other things you can add here, I encourage you to play with these settings, but let's keep going. We'll add tonemapping, and then we need to check that we want to use that. We'll set the mode to ACES, which I forget exactly what that stands for, but it is a standard set by the academy, as in the Oscars.
[00:04:15]
And so it's a pretty good tone mapping technique. We'll apply chromatic aberration. And for this one, there's just an intensity slider, but as I slide that to a very extreme value, you can see what it's doing at the edges of the image. I don't want it to be quite that intense.
[00:04:36]
So I'll just set it to maybe a value of 0.1, just to give us a little bit of chromatic aberration. And this is one of those things where a lot of subtle effects add up to an image that is greater than the sum of its parts. So we'll have that subtle chromatic aberration.
[00:04:58]
We're going to add a vignette and increase the intensity. Again, this is something that beginners tend to get very carried away with, so that's what an extreme value looks like, we don't want to do that. So we'll just set this to maybe a value of 0.2 or something like that.
[00:05:16]
And I'll turn this on and off so you can see how it's kind of darkening the edges of the image, and that just has a tendency to kind of brighten up the center of the image by contrast. So finally, I'll add Panini projection, And that's going to warp the image so that we get some of the properties of a physical camera.
[00:05:50]
And again, I wanna keep this subtle, so maybe a value of 0.1 should look good. And that's actually pretty intense, let's do that a little less, maybe 0.05. I think that looks good. And something you may have noticed is that when we applied bloom, this collectible kinda got brighter.
[00:06:17]
And it's because it's using an emissive surface that's actually just setting a color as its default color that it's displaying to the world, it's kind of overriding some of the other properties of the shader. So we have this global volume. I'll hit Play. And now we got a much nicer looking image.
[00:06:46]
It's kind of much closer to the physical properties that you would expect from a real world camera.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops