| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162 | ( function () {	class CinematicCamera extends THREE.PerspectiveCamera {		constructor( fov, aspect, near, far ) {			super( fov, aspect, near, far );			this.type = 'CinematicCamera';			this.postprocessing = {				enabled: true			};			this.shaderSettings = {				rings: 3,				samples: 4			};			const depthShader = THREE.BokehDepthShader;			this.materialDepth = new THREE.ShaderMaterial( {				uniforms: depthShader.uniforms,				vertexShader: depthShader.vertexShader,				fragmentShader: depthShader.fragmentShader			} );			this.materialDepth.uniforms[ 'mNear' ].value = near;			this.materialDepth.uniforms[ 'mFar' ].value = far; // In case of cinematicCamera, having a default lens set is important			this.setLens();			this.initPostProcessing();		} // providing fnumber and coc(Circle of Confusion) as extra arguments		// In case of cinematicCamera, having a default lens set is important		// if fnumber and coc are not provided, cinematicCamera tries to act as a basic THREE.PerspectiveCamera		setLens( focalLength = 35, filmGauge = 35, fNumber = 8, coc = 0.019 ) {			this.filmGauge = filmGauge;			this.setFocalLength( focalLength );			this.fNumber = fNumber;			this.coc = coc; // fNumber is focalLength by aperture			this.aperture = 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 = focalLength * focalLength / ( this.aperture * this.coc );		}		linearize( depth ) {			const zfar = this.far;			const znear = this.near;			return - zfar * znear / ( depth * ( zfar - znear ) - zfar );		}		smoothstep( near, far, depth ) {			const x = this.saturate( ( depth - near ) / ( far - near ) );			return x * x * ( 3 - 2 * x );		}		saturate( x ) {			return Math.max( 0, Math.min( 1, x ) );		} // function for focusing at a distance from the camera		focusAt( focusDistance = 20 ) {			const focalLength = this.getFocalLength(); // distance from the camera (normal to frustrum) to focus on			this.focus = focusDistance; // the nearest point from the camera which is in focus (unused)			this.nearPoint = this.hyperFocal * this.focus / ( this.hyperFocal + ( this.focus - focalLength ) ); // the farthest point from the camera which is in focus (unused)			this.farPoint = this.hyperFocal * this.focus / ( this.hyperFocal - ( this.focus - focalLength ) ); // the gap or width of the space in which is everything is in focus (unused)			this.depthOfField = this.farPoint - this.nearPoint; // 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.focus );			this.ldistance = this.linearize( 1 - this.sdistance );			this.postprocessing.bokeh_uniforms[ 'focalDepth' ].value = this.ldistance;		}		initPostProcessing() {			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.scene.add( this.postprocessing.camera );				const 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 );				const bokeh_shader = THREE.BokehShader;				this.postprocessing.bokeh_uniforms = THREE.UniformsUtils.clone( bokeh_shader.uniforms );				this.postprocessing.bokeh_uniforms[ 'tColor' ].value = this.postprocessing.rtTextureColor.texture;				this.postprocessing.bokeh_uniforms[ 'tDepth' ].value = this.postprocessing.rtTextureDepth.texture;				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[ 'showFocus' ].value = 1;				this.postprocessing.bokeh_uniforms[ 'focalDepth' ].value = 0.1; //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[ 'textureWidth' ].value = window.innerWidth;				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,						DEPTH_PACKING: 1					}				} );				this.postprocessing.quad = new THREE.Mesh( new THREE.PlaneGeometry( window.innerWidth, window.innerHeight ), this.postprocessing.materialBokeh );				this.postprocessing.quad.position.z = - 500;				this.postprocessing.scene.add( this.postprocessing.quad );			}		}		renderCinematic( scene, renderer ) {			if ( this.postprocessing.enabled ) {				const currentRenderTarget = renderer.getRenderTarget();				renderer.clear(); // Render scene into texture				scene.overrideMaterial = null;				renderer.setRenderTarget( this.postprocessing.rtTextureColor );				renderer.clear();				renderer.render( scene, this ); // Render depth into texture				scene.overrideMaterial = this.materialDepth;				renderer.setRenderTarget( this.postprocessing.rtTextureDepth );				renderer.clear();				renderer.render( scene, this ); // Render bokeh composite				renderer.setRenderTarget( null );				renderer.render( this.postprocessing.scene, this.postprocessing.camera );				renderer.setRenderTarget( currentRenderTarget );			}		}	}	THREE.CinematicCamera = CinematicCamera;} )();
 |