diff --git a/examples/webgl_camera_cinematic.html b/examples/webgl_camera_cinematic.html
index beef3372b1095144ac229518b43e4e529984ab46..424e96e5d461fd7b0026f49bec7a2ad8d0a047f5 100644
--- a/examples/webgl_camera_cinematic.html
+++ b/examples/webgl_camera_cinematic.html
@@ -11,14 +11,23 @@
 				margin: 0px;
 				overflow: hidden;
 			}
+			#info {
+				position: absolute;
+				top: 10px;
+				width: 100%;
+				text-align: center;
+			}
 		</style>
 	</head>
 	<body>
 
+		<div id="info">
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - interactive cubes
+		</div>
+
 		<script src="../build/three.js"></script>
 
 		<script src="js/shaders/BokehShader2.js"></script>
-
 		<script src="js/cameras/CinematicCamera.js"></script>
 
 		<script src="js/libs/stats.min.js"></script>
@@ -26,32 +35,19 @@
 
 		<script>
 
-			var container, stats;
-			var camera, scene, raycaster, renderer;
+			var camera, scene, raycaster, renderer, stats;
 
 			var mouse = new THREE.Vector2(), INTERSECTED;
 			var radius = 100, theta = 0;
 
-
-
 			init();
 			animate();
 
 			function init() {
 
-				container = document.createElement( 'div' );
-				document.body.appendChild( container );
-
-				var info = document.createElement( 'div' );
-				info.style.position = 'absolute';
-				info.style.top = '10px';
-				info.style.width = '100%';
-				info.style.textAlign = 'center';
-				info.innerHTML = '<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - interactive cubes';
-				container.appendChild( info );
 				camera = new THREE.CinematicCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
-				camera.setLens(5);
-        		camera.position.set(2, 1, 500);
+				camera.setLens( 5 );
+				camera.position.set( 2, 1, 500 );
 
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xf0f0f0 );
@@ -62,8 +58,7 @@
 				light.position.set( 1, 1, 1 ).normalize();
 				scene.add( light );
 
-
-				var geometry = new THREE.BoxGeometry( 20, 20, 20 );
+				var geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
 
 				for ( var i = 0; i < 1500; i ++ ) {
 
@@ -82,15 +77,13 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				container.appendChild(renderer.domElement);
+				document.body.appendChild( renderer.domElement );
 
 				stats = new Stats();
-				container.appendChild( stats.dom );
+				document.body.appendChild( stats.dom );
 
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
-		
-
 				window.addEventListener( 'resize', onWindowResize, false );
 
 				var effectController  = {
@@ -123,23 +116,31 @@
 
 				var matChanger = function( ) {
 
-					for (var e in effectController) {
-						if (e in camera.postprocessing.bokeh_uniforms)
-						camera.postprocessing.bokeh_uniforms[ e ].value = effectController[ e ];
+					for ( var e in effectController ) {
+
+						if ( e in camera.postprocessing.bokeh_uniforms ) {
+
+							camera.postprocessing.bokeh_uniforms[ e ].value = effectController[ e ];
+
+						}
+
 					}
+
 					camera.postprocessing.bokeh_uniforms[ 'znear' ].value = camera.near;
 					camera.postprocessing.bokeh_uniforms[ 'zfar' ].value = camera.far;
-					camera.setLens(effectController.focalLength, camera.frameHeight ,effectController.fstop, camera.coc);
-					effectController['focalDepth'] = camera.postprocessing.bokeh_uniforms["focalDepth"].value;
+					camera.setLens( effectController.focalLength, camera.frameHeight, effectController.fstop, camera.coc );
+					effectController[ 'focalDepth' ] = camera.postprocessing.bokeh_uniforms[ 'focalDepth' ].value;
+
 				};
 
+				//
 
 				var gui = new dat.GUI();
 
-				gui.add( effectController, "focalLength", 1, 135, 0.01 ).onChange( matChanger );
-				gui.add( effectController, "fstop", 1.8, 22, 0.01 ).onChange( matChanger );
-				gui.add( effectController, "focalDepth", 0.1, 100, 0.001 ).onChange( matChanger );
-				gui.add( effectController, "showFocus", true ).onChange( matChanger );
+				gui.add( effectController, 'focalLength', 1, 135, 0.01 ).onChange( matChanger );
+				gui.add( effectController, 'fstop', 1.8, 22, 0.01 ).onChange( matChanger );
+				gui.add( effectController, 'focalDepth', 0.1, 100, 0.001 ).onChange( matChanger );
+				gui.add( effectController, 'showFocus', true ).onChange( matChanger );
 
 				matChanger();
 
@@ -147,8 +148,7 @@
 
 			}
 
-
-		function onWindowResize() {
+			function onWindowResize() {
 
 				camera.aspect = window.innerWidth / window.innerHeight;
 				camera.updateProjectionMatrix();
@@ -166,7 +166,6 @@
 
 			}
 
-
 			function animate() {
 
 				requestAnimationFrame( animate, renderer.domElement );
@@ -197,9 +196,8 @@
 				if ( intersects.length > 0 ) {
 
 					var targetDistance = intersects[ 0 ].distance;
-					
-					//Using Cinematic camera focusAt method
-					camera.focusAt(targetDistance);
+
+					camera.focusAt( targetDistance );  // using Cinematic camera focusAt method
 
 					if ( INTERSECTED != intersects[ 0 ].object ) {
 
@@ -218,13 +216,13 @@
 
 				}
 
+				//
 
-				if(camera.postprocessing.enabled){
-					//rendering Cinematic Camera effects
-					camera.renderCinematic(scene, renderer);
-				}
+				if ( camera.postprocessing.enabled ) {
 
-				 else {
+					camera.renderCinematic( scene, renderer );
+
+				} else {
 
 					scene.overrideMaterial = null;
 
