Three.js Post Processing Tutorial | Easy & Quick for Beginners (JavaScript)

today we're covering how to use 3gs post-processing good by the end of this tutorial you will understand what post-processing is not just like a bunch of code but fundamentally how it works in big games the 3gs apis for post processing and how to actually code this up so let's dive in right away on what exactly post processing is now you can skip this part jump right to the code but you may pick up some things you didn't know okay so what's post-processing you can probably guess from the name it's some sort of processing that happens after ie the post part there's some parallels with other forms of media for example in movies these days you always have some form of post-production easy example here's a behind the scenes on the avengers and here you've got all the actors green screens then you have various bits of background and cgi that are composited in there maybe some passives for the overall look and tone of the movie playing with color and all that crap another example you can see from these shots here's some of the behind the scenes work on mad max fury road and a lot of effort went into transforming the scenes from what was filmed into the final shot here's a few quick examples never mind the introduction of additional scenery but there's been a bunch of work including color grading to get that final stylistic effect the movie has but it's not just limited to slight color changes and that kind of thing here they actually took day shots and those can be transformed into super stylized night shots through post work and you can do similar types of things on your home computer bring up photoshop or the poor man's photoshop which is what i use and let's just load up an image i'll just pick something to get us started and i'll reproduce some common easy post effects right here in so for example you might want to play with the saturation of the scene so i can just go here into the menu here's the saturation menu and by sliding this back and forth see i can completely desaturate the entire thing giving me a black and white scene or i can pump it up giving me i don't know let's call it stylized let's pull up one of the mad max fury road scenes so here's that desert shot no idea what was going on there but maybe i can go re-watch it anyway i'll just go screw with some of the parameters so let's go fiddle with the color temperature and just drop it the way the hell down not bad but now let's go into the color balance and here i can play with the overall color in the scene and i'll just crank the blue a bit finally let's head over to the levels menu and this kind of lets me set the color range of the image and i'll just slide this up a bit here the final shot kinda looks night timey not bad i mean i don't do this for a living so this is the best you're getting from me but you're not just totally limited just messing around with color your effect can be multi-stage like here's a random city shot i found off google images and we take this and i'll duplicate the layer next i'll go into the levels editor and we'll screw around a bit just to mostly leave the lights and bright objects in the scene that way we're left with everything bright and shiny next we can go into the contrast and boost that and this can have the effect of making what we're going to bloom out really colorful or you could go the other way too desaturate it or skip this step altogether up to you once we're done there we can go here to the blur filter and we'll apply a gaussian blur over the layer so what we're left with is this kind of blurry unfocused image now when we take that layer we can additively blend it over the original image and voila you've got a basic bloom effect the point is post processing is pretty much like taking your image and photoshopping it so how do games do post processing it's not that dissimilar typically you'll see a setup like this where you're done rendering your scene and you've got something like this here's your color buffer here's your depth buffer and now you're going to take these inputs and whatever others you decide to pass in and you'll likely apply it to a texture as a quad and render it out with a custom vertex or fragment shader or both so for example you start with this game scene and maybe you have this custom fragment shader that contrasts the scene so you take your input image apply this chunk of shader code that does the simple contrast and out comes the contrasted image maybe in the next stage you take that as an input and now you want to grayscale things so you apply another custom shader here that converts to grayscale and out comes the grayscaled image so overall we've got this whole post-processing pipeline here where you start with the game's rendered image and then you've got this series of steps where some sort of image manipulation occurs and it's important to note although in our specific examples each step was just a simple operation they don't have to be each step may do a whole bunch of crap just like we did with the bloomed image now let's take a look at 3js's post-processing docs first up you've got this effect composer and as it says right here in the docs this class manages a chain of post-processing passes to produce the final visual result you can think of the effect composer as the pipeline from before it's responsible for managing each of these steps and producing the final image and the way that you would use the effect composer is by instantiating what are called passes and adding those to the effect composer instance using this add pass function and passes are essentially the steps in the post-processing pipeline they're the ones that do all the heavy lifting of actual image manipulation so let's dive into the code like always i'm going to skip some basic steps and just work with what's already been made so i'll start by creating a new directory let's call it 3gs tutorial post processing and i'm going to copy everything from the basic 3d world tutorial into there most of this is just setup code to get us going there's nothing to be gained by rewriting this boilerplate after you've already done it once in the code here we need to import the required files first at the top of the file here i've just added these two lines to import both the effect composer and the render pass which is enough to get us started now down here in the init code we need to do some basic changes to start using post-processing first thing we need to do is actually instantiate an effect composer and that's just a quick one line of code where we knew an instance of effect composer and pass it the webgl renderer instance as a parameter now we need to add the first pass to it and this is why we imported render pass render pass's job is to actually render the scene same way we normally do when we call 3gs.render and pass the scene in camera we actually have to pass the scene and camera as parameters so that it can do just that render the scene for us and save it to a texture the next change we need to make is down in the render call instead of calling 3gs render we're switching that to composer.render load this up and you see well a basic scene but it's running through the effect composer now instead of just being composited directly onto the scene so that's something it's not much but it's something back in the code we'll actually have to do something so first thing we'll do is go to the top and import unreal bloom pass which is one of the built-in passes that 3js already offers and this pass does something pretty similar to what we did in our photoshop example earlier down in the main code after the effect composer has been instantiated we just need to instantiate an instance of the unreal bloom pass and we'll set some of the parameters you don't need to worry too much about them they're mostly self-explanatory but since there doesn't seem to be any documentation on it i get to make up a bunch of crap resolution refers to the internal size of the render target it uses to create the bloom buffer strength refers to the strength of the bloom effect radius refers to the size of the bloom threshold controls how bright things need to be before they bloom so now that we've got a bloom pass in let's load this up and voila bunch of bloom on the screen kinda neat it gives a very dreamy vibe to things and you could imagine having a city scene at night neon lights and this could be really cool there's a whole lot more built-in passes in fact there's a whole directory full of them here you can scroll through and check them out and of course you can always go to the 3gs examples and see what many of them look like i'm going to add glitch pass now just to show you that it can be done so here i'll have to import it again at the top pretty much the same thing as we did with unreal bloom pass with the name glitch path subbed subduen then down in the effect composer it's a simple matter of instantiating an instance of a glitch pass so we'll write the line out nude glitch pass and luckily this one doesn't take any parameters so all we have to do is create it and add it and once that's done you can load it and if you wait a second you'll see it go off alright cool so we have a couple passes i'm going to mention another one that's super accessible for beginners you can define your own basic passes using shader pass as long as you supply a vertex and fragment shader definition there's a whole bunch of pre-built ones already on github you can scroll through and see the full list i'll just add the luminosity shader here just to show how it's done so up at the top you import the shader this time and it's in a slightly different directory but pretty much the same thing as importing the passes you also need to import this new shader pass class and we'll use that for creating a pass out of a shader now down in the effect composer it's just a tiny bit of extra work you have to instantiate an instance of a shader pass and we pass in the shader and then of course add it to the effect composer loading that up should show off the new pass so now you've got bloom glitch and you luminosity passes running the luminosity past being just a grayscale thing where we visualize the brightness of the scene of course you can also just define your own shader so here i've quickly crapped out a quick one that does contrast so the shader definition is pretty simple i've got my uniforms in this case i only need the previous render target vertex shader does nothing except transform the position and pass the uv coordinates down in the fragment shader we do a quick texture lookup and then a contrast operation this line here all it does is you set a midpoint value in my case i use 0.5 then you subtract that multiply by a contrast value and add that 0.5 back in the end result will be like pushing the colors away from the midpoint down here in the effect composer i'm just going to remove the luminosity pass and i'll swap it from my new shader so that means i had to change the parameter that's all now when i load it up it's all super contrasty and i could of course go into the shader and do a lot more but we're going to end things here since this is just a beginner tutorial there's a lot more material to cover with post effects like rolling your own paths but that's more involved maybe it needs to down raise the image and filter it or do some blurring all of which is possible but way beyond a beginner level hope this was interesting make sure to like and subscribe codes on github see you next time cheers

Channel: SimonDev

Views: 9,109

Rating: 4.9719625 out of 5

Keywords: simondev, game development, programming tutorial, three js, three js tutorial, three js postprocessing, post processing

Id: _da8WNeZZ4w

Length: 10min 56sec (656 seconds)

Published: Mon Nov 23 2020