CinematicCamera clean up.

examples/js/cameras/CinematicCamera.js

@@ -1,181 +1,186 @@
 /**
-  * @author mrdoob / http://mrdoob.com/
-  * @author greggman / http://games.greggman.com/
-  * @author zz85 / http://www.lab4games.net/zz85/blog
-  * @author kaypiKun
-  */
-
-//Inheriting PerspectiveCamera
-
-THREE.CinematicCamera = function(fov, aspect, near, far){
-  THREE.PerspectiveCamera.call(this, fov, aspect, near, far);
-  this.type = "CinematicCamera";
-
-  this.postprocessing = { enabled  : true };
-  this.shaderSettings = {
-    rings: 3,
-    samples: 4
-  };
-
-  this.material_depth = new THREE.MeshDepthMaterial();
-  //In case of cinematicCamera, having a default lens set is important
-  this.setLens();
-
-  this.initPostProcessing();
-  
+ * @author mrdoob / http://mrdoob.com/
+ * @author greggman / http://games.greggman.com/
+ * @author zz85 / http://www.lab4games.net/zz85/blog
+ * @author kaypiKun
+ */
+
+THREE.CinematicCamera = function( fov, aspect, near, far ) {
+
+	THREE.PerspectiveCamera.call( this, fov, aspect, near, far );
+
+	this.type = "CinematicCamera";
+
+	this.postprocessing = { enabled	: true };
+	this.shaderSettings = {
+		rings: 3,
+		samples: 4
+	};
+
+	this.material_depth = new THREE.MeshDepthMaterial();
+
+	// In case of cinematicCamera, having a default lens set is important
+	this.setLens();
+
+	this.initPostProcessing();
+
 };
 
-THREE.CinematicCamera.prototype = Object.create(THREE.PerspectiveCamera.prototype);
+THREE.CinematicCamera.prototype = Object.create( THREE.PerspectiveCamera.prototype );
 THREE.CinematicCamera.prototype.constructor = THREE.CinematicCamera;
 
 
-//providing fnumber and coc(Circle of Confusion) as extra arguments
+// providing fnumber and coc(Circle of Confusion) as extra arguments
 THREE.CinematicCamera.prototype.setLens = function ( focalLength, frameHeight, fNumber, coc ) {
 
-  //In case of cinematicCamera, having a default lens set is important
-  if ( focalLength === undefined ) focalLength = 35;
+	// In case of cinematicCamera, having a default lens set is important
+	if ( focalLength === undefined ) focalLength = 35;
 
-  THREE.PerspectiveCamera.prototype.setLens.call( this, focalLength, frameHeight );
+	THREE.PerspectiveCamera.prototype.setLens.call( this, focalLength, frameHeight );
 
-  //if fnumber and coc are not provided, cinematicCamera tries to act as a basic PerspectiveCamera
-  if ( fNumber === undefined ) fNumber = 8;
-  if ( coc === undefined ) coc = 0.019;
+	// if fnumber and coc are not provided, cinematicCamera tries to act as a basic PerspectiveCamera
+	if ( fNumber === undefined ) fNumber = 8;
+	if ( coc === undefined ) coc = 0.019;
 
+	this.focalLength = focalLength;
+	this.fNumber = fNumber;
+	this.coc = coc;
 
+	// fNumber is focalLength by aperture
+	this.aperture = this.focalLength / this.fNumber;
 
-  this.focalLength = focalLength;
-  this.fNumber = fNumber;
-  this.coc = coc;
+	// hyperFocal is required to calculate depthOfField when a lens tries to focus at a distance with given fNumber and focalLength
+	this.hyperFocal = ( this.focalLength * this.focalLength ) / ( this.aperture * this.coc );
 
-  //fNumber is focalLength by aperture
-  this.aperture = this.focalLength/this.fNumber;
+};
 
-  //hyperFocal is required to calculate depthOfField when a lens tries to focus at a distance with given fNumber and focalLength
-  this.hyperFocal = (this.focalLength*this.focalLength)/(this.aperture*this.coc);
+THREE.CinematicCamera.prototype.linearize = function ( depth ) {
+
+	var zfar = this.far;
+	var znear = this.near;
+	return - zfar * znear / ( depth * ( zfar - znear ) - zfar );
 
 };
 
+THREE.CinematicCamera.prototype.smoothstep = function ( near, far, depth ) {
 
+	var x = this.saturate( ( depth - near ) / ( far - near ) );
+	return x * x * ( 3 - 2 * x );
 
-THREE.CinematicCamera.prototype.linearize = function(depth) {
-	var zfar = this.far;
-	var znear = this.near;
-	return -zfar * znear / (depth * (zfar - znear) - zfar);
-}
+};
 
+THREE.CinematicCamera.prototype.saturate = function ( x ) {
 
-THREE.CinematicCamera.prototype.smoothstep = function(near, far, depth) {
-	var x = this.saturate( (depth - near) / (far - near));
-	return x * x * (3- 2*x);
-}
+	return Math.max( 0, Math.min( 1, x ) );
 
+};
 
-THREE.CinematicCamera.prototype.saturate = function(x) {
-	return Math.max(0, Math.min(1, x));
-}
+// function for focusing at a distance from the camera
+THREE.CinematicCamera.prototype.focusAt = function ( focusDistance ) {
 
+	if ( focusDistance === undefined ) focusDistance = 20;
 
-//function for focusing at a distance from the camera
-THREE.CinematicCamera.prototype.focusAt = function (focusDistance){
+	// distance from the camera (normal to frustrum) to focus on (unused)
+	this.focusDistance = focusDistance;
 
-  if ( focusDistance === undefined ) focusDistance = 20;
+	// the nearest point from the camera which is in focus (unused)
+	this.nearPoint = ( this.hyperFocal * this.focusDistance ) / ( this.hyperFocal + ( this.focusDistance - this.focalLength ) );
 
-  //distance from the camera (normal to frustrum) to focus on (unused)
-  this.focusDistance = focusDistance;
+	// the farthest point from the camera which is in focus (unused)
+	this.farPoint = ( this.hyperFocal * this.focusDistance ) / ( this.hyperFocal - ( this.focusDistance - this.focalLength ) );
 
-  //the nearest point from the camera which is in focus (unused)
-  this.nearPoint = (this.hyperFocal*this.focusDistance)/(this.hyperFocal+(this.focusDistance-this.focalLength));
+	// the gap or width of the space in which is everything is in focus (unused)
+	this.depthOfField = this.farPoint - this.nearPoint;
 
-  //the farthest point from the camera which is in focus (unused)
-  this.farPoint = (this.hyperFocal*this.focusDistance)/(this.hyperFocal-(this.focusDistance-this.focalLength));
+	// Considering minimum distance of focus for a standard lens (unused)
+	if ( this.depthOfField < 0 ) this.depthOfField = 0;
 
-  //the gap or width of the space in which is everything is in focus (unused)
-  this.depthOfField = this.farPoint - this.nearPoint;
+	this.sdistance = this.smoothstep( this.near, this.far, this.focusDistance );
 
-  //Considering minimum distance of focus for a standard lens (unused)
-  if( this.depthOfField < 0) this.depthOfField = 0;
-  
-  this.sdistance = this.smoothstep(this.near, this.far, this.focusDistance);
+	this.ldistance = this.linearize( 1 -	this.sdistance );
 
-	this.ldistance = this.linearize(1 -  this.sdistance);
-	
 	this.postprocessing.bokeh_uniforms[ 'focalDepth' ].value = this.ldistance;
 
 };
 
+THREE.CinematicCamera.prototype.initPostProcessing = function () {
+
+	if ( this.postprocessing.enabled ) {
 
+		this.postprocessing.scene = new THREE.Scene();
 
-THREE.CinematicCamera.prototype.initPostProcessing = function (){
-    if(this.postprocessing.enabled)
-    {
-        this.postprocessing.scene = new THREE.Scene();
+		this.postprocessing.camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2,	window.innerHeight / 2, window.innerHeight / - 2, - 10000, 10000 );
 
-        
-        this.postprocessing.camera = new THREE.OrthographicCamera( window.innerWidth / -2, window.innerWidth / 2,  window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
-        
-    
-        this.postprocessing.scene.add( this.postprocessing.camera );
+		this.postprocessing.scene.add( this.postprocessing.camera );
 
-        var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
-        this.postprocessing.rtTextureDepth = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, pars );
-        this.postprocessing.rtTextureColor = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, pars );
+		var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
+		this.postprocessing.rtTextureDepth = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, pars );
+		this.postprocessing.rtTextureColor = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, pars );
 
+		var bokeh_shader = THREE.BokehShader;
 
-        var bokeh_shader = THREE.BokehShader;
+		this.postprocessing.bokeh_uniforms = THREE.UniformsUtils.clone( bokeh_shader.uniforms );
 
-        this.postprocessing.bokeh_uniforms = THREE.UniformsUtils.clone( bokeh_shader.uniforms );
+		this.postprocessing.bokeh_uniforms[ "tColor" ].value = this.postprocessing.rtTextureColor;
+		this.postprocessing.bokeh_uniforms[ "tDepth" ].value = this.postprocessing.rtTextureDepth;
 
-        this.postprocessing.bokeh_uniforms[ "tColor" ].value = this.postprocessing.rtTextureColor;
-        this.postprocessing.bokeh_uniforms[ "tDepth" ].value = this.postprocessing.rtTextureDepth;
+		this.postprocessing.bokeh_uniforms[ "manualdof" ].value = 0;
+		this.postprocessing.bokeh_uniforms[ "shaderFocus" ].value = 0;
 
-        this.postprocessing.bokeh_uniforms[ "manualdof" ].value = 0;
-				this.postprocessing.bokeh_uniforms[ "shaderFocus" ].value = 0;
+		this.postprocessing.bokeh_uniforms[ "fstop" ].value = 2.8;
 
-        this.postprocessing.bokeh_uniforms[ "fstop" ].value = 2.8;
+		this.postprocessing.bokeh_uniforms[ "showFocus" ].value = 1;
 
-        this.postprocessing.bokeh_uniforms[ "showFocus" ].value = 1;
+		this.postprocessing.bokeh_uniforms[ "focalDepth" ].value = 0.1;
 
-        this.postprocessing.bokeh_uniforms[ "focalDepth" ].value = 0.1;
+		console.log( this.postprocessing.bokeh_uniforms[ "focalDepth" ].value );
 
-        console.log(this.postprocessing.bokeh_uniforms["focalDepth"].value);
+		this.postprocessing.bokeh_uniforms[ "znear" ].value = this.near;
+		this.postprocessing.bokeh_uniforms[ "zfar" ].value = this.near;
 
-				this.postprocessing.bokeh_uniforms[ "znear" ].value = this.near;
-				this.postprocessing.bokeh_uniforms[ "zfar" ].value = this.near;
 
+		this.postprocessing.bokeh_uniforms[ "textureWidth" ].value = window.innerWidth;
 
-        this.postprocessing.bokeh_uniforms[ "textureWidth" ].value = window.innerWidth;
+		this.postprocessing.bokeh_uniforms[ "textureHeight" ].value = window.innerHeight;
 
-        this.postprocessing.bokeh_uniforms[ "textureHeight" ].value = window.innerHeight;
+		this.postprocessing.materialBokeh = new THREE.ShaderMaterial( {
+			uniforms: this.postprocessing.bokeh_uniforms,
+			vertexShader: bokeh_shader.vertexShader,
+			fragmentShader: bokeh_shader.fragmentShader,
+			defines: {
+				RINGS: this.shaderSettings.rings,
+				SAMPLES: this.shaderSettings.samples
+			}
+		} );
 
-        this.postprocessing.materialBokeh = new THREE.ShaderMaterial({uniforms: this.postprocessing.bokeh_uniforms, vertexShader: bokeh_shader.vertexShader, fragmentShader: bokeh_shader.fragmentShader, defines: { RINGS: this.shaderSettings.rings, SAMPLES: this.shaderSettings.samples } } );
+		this.postprocessing.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( window.innerWidth, window.innerHeight ), this.postprocessing.materialBokeh );
+		this.postprocessing.quad.position.z = - 500;
+		this.postprocessing.scene.add( this.postprocessing.quad );
 
-        this.postprocessing.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( window.innerWidth, window.innerHeight ), this.postprocessing.materialBokeh );
-        this.postprocessing.quad.position.z = -500;
-        this.postprocessing.scene.add( this.postprocessing.quad );
-    }
+	}
 
-}
+};
 
-THREE.CinematicCamera.prototype.renderCinematic = function (scene, renderer ){
+THREE.CinematicCamera.prototype.renderCinematic = function ( scene, renderer ) {
 
-    if ( this.postprocessing.enabled ) {
+	if ( this.postprocessing.enabled ) {
 
-      renderer.clear();
+		renderer.clear();
 
-      // Render scene into texture
+		// Render scene into texture
 
-      scene.overrideMaterial = null;
-      renderer.render( scene, camera, this.postprocessing.rtTextureColor, true );
+		scene.overrideMaterial = null;
+		renderer.render( scene, camera, this.postprocessing.rtTextureColor, true );
 
-      // Render depth into texture
+		// Render depth into texture
 
-      scene.overrideMaterial = this.material_depth;
-      renderer.render( scene, camera, this.postprocessing.rtTextureDepth, true );
+		scene.overrideMaterial = this.material_depth;
+		renderer.render( scene, camera, this.postprocessing.rtTextureDepth, true );
 
-      // Render bokeh composite
+		// Render bokeh composite
 
-      renderer.render( this.postprocessing.scene, this.postprocessing.camera );
+		renderer.render( this.postprocessing.scene, this.postprocessing.camera );
 
-    }
+	}
 
-}
+};