Skip to content

This is an experiment using THREE.js and WebGL in creating a depth of field effect.

Notifications You must be signed in to change notification settings

ajlende/WebGL-DoF

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Depth of Field

The depth of field effects used in this demo are based off of BokehPass.js and BokehShader.js from the three.js website which is in turn based off of a GLSL shader from a blog post by Martins Upitis.

Additionally, my shader gives the option to choose from a number of additional bokeh shapes including a triangle, pentagon, and star.

This shader approximates the depth of field and bokeh in a simple manner. Martin Upitis has also created a more sophisticated bokeh shader which is described in this blog post and can be seen in action here.

I did a presentation on depth of field and this project for a computer graphics class I took that can be viewed here.

Screenshots

TODO

About

This is an experiment using THREE.js and WebGL in creating a depth of field effect.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published