I’ve implemented a PBR.
It’s good but I want it to look more realistic.
Since I haven’t applied any post-processing I feel like there’s more room to improve in that direction.
What kind of post-processing/filter can improve the quality of PBR?
What do you mean by this? Can you share some screenshots or a live example?
I meant I implemented BRDF, Environment Lighting, Tonemapping, gamma correction etc. in a shader language which I think is interchangeable with MeshStandardMaterial. I was trying to be in general. Sorry if it was confusing. 
Here’s an outcome video.
OK, that makes more sense. Thanks for clarifying.
You can add any postprocessing passes you like depending on the final look you want. This is an artistic thing so it’s up to you to decide which effects to add. However, there are some technical constraints.
First up, if you use post then the default antialiasing will stop working, so you need an AA pass. You can achieve this either using a pass like SMAA/FXAA/TAA etc. or (preferably) using a MultisampleRenderTarget which is equivalent to the normal antialiasing.
Personally I recommend using the vanruesc/postprocessing library instead of the default three.js post, it will handle the WebGLMultisampleRenderTarget stuff for you and I find it generally easier to work with. It also does things like automatically combining effects to improve performance.
You will also need to do a tone mapping pass somewhere late in your effect chain.
If you use three.js postprocessing, your very last pass needs to be a gamma correction pass. However, vanruesc/postprocessing will handle that for you.
Next, you need to take care of the order of the passes you apply. Roughly, they need to be performed in this order (taken from here).
SMAA/FXAA
SSR (NYI)
SSAO
DoF
Motion Blur (NYI)
Chromatic Aberration
Bloom
God Rays
Vignette
Tone Mapping
LUT / Color Grading
Noise / Film Grain
The most important distinction here is before/after tone mapping. Most passes need to be done before tone mapping while LUT and color grading (which includes brightness/contrast) definitely need to be done after as that’s how you fine tune the final image and you need to be working on the colors as close as possible to how you will actually see them in the final image.
Another important consideration is that some of these passes are far more performance intensive than other. For example, vignette/tone mapping/color grading/film grain will all have only a minor impact on performance, especially if they are combined in a single pass. FXAA will have a medium impact. SSAO in particular I find can have a big impact and you will need to tune it carefully (esp. the number of samples).
Final note - this is all assuming a final display in standard dynamic range sRGB color space. in the future as we start use HDR displays and wider color spaces on the web the tone mapping/gamma correction stuff may change slightly. Everything else should be the same though.
4 Likes