Improving BokehShader in three.js’ depth-of-field effect

In the previous post, we have improved tDepth input for BokehShader in three.js depth-of-field example. This spared us of ugly rectangular artifacts, but the result is still far from perfect:

bokeh_before

Well, BokehShader was created 5 years ago, and it is about time that someone made it better ;) In particular, you can see a sort of halo around completely sharp objects (the girl). This happens because BokehShader only takes in account the depth of target pixel, causing nearby objects to leak into the output even if they are in focus. To fight it, we can weight the pixels with abs(theirDepth.x – focus). This obviously doubles the number of texture sampling, so we have to cut the number of samples to maintain reasonable performance. The result, however, looks somewhat better:

bokeh_after

Thoughts?

0 Responses to “Improving BokehShader in three.js’ depth-of-field effect”



  1. Leave a Comment

Ask a Question

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




Old stuff

January 2015
M T W T F S S
« Nov   Mar »
 1234
567891011
12131415161718
19202122232425
262728293031  

Oh, btw…


%d bloggers like this: