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

https://plusplusone.herokuapp.com

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: https://github.com/subokita/WebGL-Sandbox/tree/master/Test%20%23004%20-%20Cubemap%20%2B%20DoF

[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 …