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

Follow me on:
Patreon: / simondevyt
Twitter: / iced_coffee_dev
Instagram: / beer_and_code
Github: github.com/simondevyoutube/
In this project we're looking at Three.js post processing in a bit of detailing, starting with how post processing works in general, looking at some examples of how to do post fx by hand using an image editor, and finally diving into three.js's apis looking at classes like EffectComposer, RenderPass, and ShaderPass. We'll walk through the code step by step, getting a few different post processing effects up and running, including both built-in ones and we'll touch on how to build your own using ShaderPass.
This is another in a series of Three.js beginner tutorials, aimed at helping you get setup right from the ground up. Since these are beginners courses, they're aimed at people with no background and assume very little prior experience. With each project, you should have a solid understand of both the code as well as the concepts involved, in this case being what the three.js post processing framework is capable of.
The three.js library is available in JavaScript for cross-browser 3d graphics, wrapping webgl and making high level functionality available in the web browser. It’s an extremely mature and well maintained library that I use for many of these videos.
In the video, we cover:
* Post Processing, what is it, including examples from other forms of media.
* Three.js API's like EffectComposer, RenderPass, ShaderPass, GlitchPass, and UnrealBloomPass
* How to instantiate and use post-fx in JavaScript.

[@AndriyYurchenko]

You definitely have the talent to make condensed and clear explanations.

[@simondev758]

Awesome, wanted to make sure it was super clear, thanks!

[@albertkovtoun662]

This channel is so so underrated. Love the content!

[@Gigatless]

Just a month after you uploaded this video I needed this like air. Thank you!

[@pist5343]

Awesome! Would love to see an extensive dive into post processing some day

[@simondev758]

I think I can swing that at some point

[@TerminalStage]

One of the best explanation of how to work with postprocessing in three.js

[@simondev758]

Thanks! Let me know if there's anything unclear in there so I can work on it in the future.

[@aliphian]

Super easy to understand. I hope you keep this amazing content coming!

[@jerrylee1657]

Professional, clearly explained, Awesome!

[@dushyantm9579]

Love your content and pacing - relaxed delivery, but, dense technically so it covers a lot of ground Keep up the good work!

[@user-wd8hm2ro8e]

Great explanation, thanks!

[@userrrfriendly1908]

I'm happy that I stumbled upon your channel on reddit, thanks for doing this.

[@simondev758]

Glad you're getting value from them, let me know if you have suggestions for future vids

[@JayPatel-bk1ub]

just simple amazing explaination

[@swoorp]

love you Simon. I'm just 13 and I started earning. I am gonna support you! Love you...

[@BrettKromkamp]

Great tutorial, as always!

[@simondev758]

thx!

[@victorjuwa2087]

awesome stuffs.I am so thankful

[@dez7852]

Dude! I love your tutorials!! Down to earth and now " HEEEEEYYY everybody! TODAAYA WE"RE'paj'aorinba[or You get the idea. Calm , direct, and easy to follow! Sub'd and Bell'd

[@srikanthganta3945]

You're amazing!

[@TheCodingOdyssey]

I just discovered your channel. I like your sense of humour lol

[@simondev758]

ty

[@in2minutesorless64]

Just discovered your channel. AWESOME! I'm subscribed. However on the tutorial for Shaders you didn't take us all the way through to the advertised finished product, which is why I clicked! Otherwise, great channel!!

[@AddyVDH]

Great video, as always!

[@simondev758]

Thx, got ideas you want to see for future vids?

[@AddyVDH]

@@simondev758 Not a video idea I guess... Are your project's hosted / accessible via github pages? Some way of fiddling around with what we see in the video would be really cool. Sentdex runs pythonprogramming.net/ which bassically contains writeups of his videos and that is really great even for python code which is far less interactive and visual then what you are showcasing here. Since you are using threejs, I see there being a lot of potential to embedding the contents of these videos into a larger site or even just exposing what you are showing here via an endpoint.

[@AddyVDH]

Your github already has a bunch of projects which might be easy to do this for with a simple toggle in the repo settings + potentially a simple PR.

[@AddyVDH]

Here is an example of Ben Eater + 3b1b kind of doing something like this: eater.net/quaternions. This is obviously an extreme example but showcases the power of using three.js.

[@simondev758]

Great ideas, really would like to get a site setup. Maybe something I can do over the xmas holidays since nobody can go anywhere this year!

[@johnwildauer]

thanks for the awesome content, always stellar work. have you ever tried the depth of field 2 postprocesser? I can never seem to get that one to work..

[@simondev758]

Nah, I've tried a few of three.js's post fx. I find a lot of them difficult to get working well, like I tried the Scalable Ambient Occlusion one and couldn't figure out the params to not make it look terrible.

[@juju_be]

is it possible to apply an effect like bloom to one of the geometry and not the other?

Thanks Simon, I came here to learn a little bit about post processing and ended up also learning some Gimp tricks. 🏆🎉 By the way, I have been watching your videos about Three.js. I admit it has not been easy to implement some stuff but your explanations are always very clear. ✌🏻😊 Is it my impression or sometimes advanced Math are needed in order to implement some features? Keep the good work and thanks for sharing knowledge. 🙏

[@simondev758]

Things like three.js and Unity definitely make it a lot easier to approach and use more advanced concepts and features. It's always helpful to understand and capable of more advanced math though, otherwise you're kinda stuck in the position of gluing opaque parts today.

@@simondev758 I really appreciate you taking time to answer, Simon. Thank you. Well, it is time to learn some Math I guess. 🤣

[@IljaDidDevs2]

Are all of these vids leading up to a bigger project i.e Game at some point? I find these so insanely useful and clear to follow, would love to see something structured like a game dev course with three.js from you

[@simondev758]

I have no coherent plan, no hah. Yeah they're more in depth bits of larger projects, I realized recently that I could dump out a quick game but I'd have to skip over a million details, so you'll probably get a mix in the future of smaller ones when I feel like explaining the finer details, and larger projects when I just feel like banging out some code.A

Great explanation but there is something I don't understand... If I have multiple elements in my scene, and I want to add the bloom effect only to one specific element, how can I do it?

[@simondev758]

So many different ways, dead easy one would be to render that specific thing to a "bloom" buffer, then blur and additive blend that.

[@chasercode1349]

Thanks for particles sorting by Z-axe. I create script which merge all "sprites" into one instance with several textures array and sorting and rotating, following to xz, xyz.

[@simondev758]

Ooh nice, is that shared somewhere?

[@chasercode1349]

@@simondev758 Its not finished and while only into video kzbin.info/www/bejne/Z3q4gYuwiJ6eaM0

[@ryu-xd]

Controler For mobile ?

[@norliegh]

Awesome Tut, but Can you upload code to your github repo?

[@simondev758]

Oops, it should be there now.

[@norliegh]

@@simondev758 Thank you so much. You got a nice humor, and a clear way of explanation. Looking forward for more awesome tutorials. ❤️👍

[@danielapro9755]

CrapShader! I'm dying! 😂😂😂😂

[@aryajpegasus]

poor man's photoshop is krita :3

[@MetalStorm66]

LOL what is WAP

[@simondev758]

Heh

[@31337flamer]

original scenes look so much better

[@simondev758]

?

[@31337flamer]

​@@simondev758 im refering to the movie scenes in 1:23 and 1:28 not your 3d scenes :D .. just not a big fan of these "lets shoot it .. we can color adjust and postprocess later" movies .. i just thought the original scenes have more depth :) thanks for sharing your knowledge about gameprogramming and threeJS they helped me a lot!

[@valencefootball9740]

"What is my IP" "What does wap mean" "What is wap" "What to do in Montreal" "What does simp mean"

[@valencefootball9740]

"What is pansexual"

[@valencefootball9740]

Something to do with having pans being your gender

[@simondev758]

lol

[@valencefootball9740]

lmaoo