BokehBug

by Evan Dulaney

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/postprocessing/EffectComposer.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/postprocessing/RenderPass.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/postprocessing/MaskPass.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/postprocessing/ShaderPass.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/postprocessing/FilmPass.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/postprocessing/BokehPass.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/shaders/CopyShader.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/shaders/FilmShader.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/shaders/BokehShader.js"></script>

JavaScript

$.ajax({
                url: "models/DepthTest.js",
                async: false,
                cache: false,
                dataType: "json",
                success: function(data){
                    for(var i = 0; i < data.materials.length; i++){
                        if(data.materials[i].DbgName.indexOf("Reflective")>-1 ){
                            reflectivity.push(data.materials[i].reflectivity);
                        }
                    }
                }
             });
            
            
            //Standard variables and initialization.
            var scene;
            var controls, camera, aspect, fov, nearClip, farClip;
            var container, composer, renderer, renderPass, copyPass, texLoader, renderWidth, renderHeight;
            var effects = [];
            
            init( 1/1, 50, 0.1, 1000, 800, 800, 0xFFFFFF );        
            function init( initAspect, initFov, initNearClip, initFarClip, initRenderWidth, initRenderHeight, initClearColor ){
                //Create a container for page placement
                container = document.createElement( 'div' );
                container.id = "WebGLRenderer";
                document.body.appendChild( container );
                
                //Camera Attributes
                aspect = initAspect; //Pixel aspect ratio of camera, hard coding can "squish" image
                fov = initFov; //Focal length of camera
                nearClip = initNearClip; //How close objects can be rendered
                farClip = initFarClip; //How far objects can be rendered

                //Set Rendering Canvas Width/Height
                renderWidth = initRenderWidth;
                renderHeight = initRenderHeight;

                //Creates basic scene elements
                scene = new THREE.Scene();
                camera = new THREE.PerspectiveCamera( fov, aspect, nearClip, farClip );
                renderer = new THREE.WebGLRenderer({
                   ...