Three.js Depth of Field effect


Sorry for the shilling, but here’s my upcoming project:

Please register your email address if you’re interested in it.


Utilizing Three.js’ bokeh shader.

Here’s a sample of applying Three.js’ bokeh shader to achieve DoF effect.

Basically it renders the scene to a frame buffer / render texture first, apply depth of field based on the objects depth and other DoF parameters, then finally render it to the screen.

It’s pretty but processing intensive, thus the drop in framerate. I wonder if it’d run better if I were to port it to OpenGL one day.

You can get the codes here:

[1] Three.js

[2] Stanford 3D scanning repository

PS: I didn’t know that YouTube provides free music for video clips. Thus the good old jazz bebop playing in the background.

PPS: I’m glad that WebGL and libraries like Three.js exist, making it possible to render 3D scene on browser. However, internet browsers seem to be memory hog nowadays …

Leave a Reply

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

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

Google photo

You are commenting using your Google 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 )

Connecting to %s