CinematicCamera.js 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. /**
  2. * @author mrdoob / http://mrdoob.com/
  3. * @author greggman / http://games.greggman.com/
  4. * @author zz85 / http://www.lab4games.net/zz85/blog
  5. * @author kaypiKun
  6. */
  7. THREE.CinematicCamera = function ( fov, aspect, near, far ) {
  8. THREE.PerspectiveCamera.call( this, fov, aspect, near, far );
  9. this.type = 'CinematicCamera';
  10. this.postprocessing = { enabled: true };
  11. this.shaderSettings = {
  12. rings: 3,
  13. samples: 4
  14. };
  15. var depthShader = THREE.BokehDepthShader;
  16. this.materialDepth = new THREE.ShaderMaterial( {
  17. uniforms: depthShader.uniforms,
  18. vertexShader: depthShader.vertexShader,
  19. fragmentShader: depthShader.fragmentShader
  20. } );
  21. this.materialDepth.uniforms[ 'mNear' ].value = near;
  22. this.materialDepth.uniforms[ 'mFar' ].value = far;
  23. // In case of cinematicCamera, having a default lens set is important
  24. this.setLens();
  25. this.initPostProcessing();
  26. };
  27. THREE.CinematicCamera.prototype = Object.create( THREE.PerspectiveCamera.prototype );
  28. THREE.CinematicCamera.prototype.constructor = THREE.CinematicCamera;
  29. // providing fnumber and coc(Circle of Confusion) as extra arguments
  30. THREE.CinematicCamera.prototype.setLens = function ( focalLength, filmGauge, fNumber, coc ) {
  31. // In case of cinematicCamera, having a default lens set is important
  32. if ( focalLength === undefined ) focalLength = 35;
  33. if ( filmGauge !== undefined ) this.filmGauge = filmGauge;
  34. this.setFocalLength( focalLength );
  35. // if fnumber and coc are not provided, cinematicCamera tries to act as a basic PerspectiveCamera
  36. if ( fNumber === undefined ) fNumber = 8;
  37. if ( coc === undefined ) coc = 0.019;
  38. this.fNumber = fNumber;
  39. this.coc = coc;
  40. // fNumber is focalLength by aperture
  41. this.aperture = focalLength / this.fNumber;
  42. // hyperFocal is required to calculate depthOfField when a lens tries to focus at a distance with given fNumber and focalLength
  43. this.hyperFocal = ( focalLength * focalLength ) / ( this.aperture * this.coc );
  44. };
  45. THREE.CinematicCamera.prototype.linearize = function ( depth ) {
  46. var zfar = this.far;
  47. var znear = this.near;
  48. return - zfar * znear / ( depth * ( zfar - znear ) - zfar );
  49. };
  50. THREE.CinematicCamera.prototype.smoothstep = function ( near, far, depth ) {
  51. var x = this.saturate( ( depth - near ) / ( far - near ) );
  52. return x * x * ( 3 - 2 * x );
  53. };
  54. THREE.CinematicCamera.prototype.saturate = function ( x ) {
  55. return Math.max( 0, Math.min( 1, x ) );
  56. };
  57. // function for focusing at a distance from the camera
  58. THREE.CinematicCamera.prototype.focusAt = function ( focusDistance ) {
  59. if ( focusDistance === undefined ) focusDistance = 20;
  60. var focalLength = this.getFocalLength();
  61. // distance from the camera (normal to frustrum) to focus on
  62. this.focus = focusDistance;
  63. // the nearest point from the camera which is in focus (unused)
  64. this.nearPoint = ( this.hyperFocal * this.focus ) / ( this.hyperFocal + ( this.focus - focalLength ) );
  65. // the farthest point from the camera which is in focus (unused)
  66. this.farPoint = ( this.hyperFocal * this.focus ) / ( this.hyperFocal - ( this.focus - focalLength ) );
  67. // the gap or width of the space in which is everything is in focus (unused)
  68. this.depthOfField = this.farPoint - this.nearPoint;
  69. // Considering minimum distance of focus for a standard lens (unused)
  70. if ( this.depthOfField < 0 ) this.depthOfField = 0;
  71. this.sdistance = this.smoothstep( this.near, this.far, this.focus );
  72. this.ldistance = this.linearize( 1 - this.sdistance );
  73. this.postprocessing.bokeh_uniforms[ 'focalDepth' ].value = this.ldistance;
  74. };
  75. THREE.CinematicCamera.prototype.initPostProcessing = function () {
  76. if ( this.postprocessing.enabled ) {
  77. this.postprocessing.scene = new THREE.Scene();
  78. this.postprocessing.camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, - 10000, 10000 );
  79. this.postprocessing.scene.add( this.postprocessing.camera );
  80. var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
  81. this.postprocessing.rtTextureDepth = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, pars );
  82. this.postprocessing.rtTextureColor = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, pars );
  83. var bokeh_shader = THREE.BokehShader;
  84. this.postprocessing.bokeh_uniforms = THREE.UniformsUtils.clone( bokeh_shader.uniforms );
  85. this.postprocessing.bokeh_uniforms[ "tColor" ].value = this.postprocessing.rtTextureColor.texture;
  86. this.postprocessing.bokeh_uniforms[ "tDepth" ].value = this.postprocessing.rtTextureDepth.texture;
  87. this.postprocessing.bokeh_uniforms[ "manualdof" ].value = 0;
  88. this.postprocessing.bokeh_uniforms[ "shaderFocus" ].value = 0;
  89. this.postprocessing.bokeh_uniforms[ "fstop" ].value = 2.8;
  90. this.postprocessing.bokeh_uniforms[ "showFocus" ].value = 1;
  91. this.postprocessing.bokeh_uniforms[ "focalDepth" ].value = 0.1;
  92. //console.log( this.postprocessing.bokeh_uniforms[ "focalDepth" ].value );
  93. this.postprocessing.bokeh_uniforms[ "znear" ].value = this.near;
  94. this.postprocessing.bokeh_uniforms[ "zfar" ].value = this.near;
  95. this.postprocessing.bokeh_uniforms[ "textureWidth" ].value = window.innerWidth;
  96. this.postprocessing.bokeh_uniforms[ "textureHeight" ].value = window.innerHeight;
  97. this.postprocessing.materialBokeh = new THREE.ShaderMaterial( {
  98. uniforms: this.postprocessing.bokeh_uniforms,
  99. vertexShader: bokeh_shader.vertexShader,
  100. fragmentShader: bokeh_shader.fragmentShader,
  101. defines: {
  102. RINGS: this.shaderSettings.rings,
  103. SAMPLES: this.shaderSettings.samples,
  104. DEPTH_PACKING: 1
  105. }
  106. } );
  107. this.postprocessing.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( window.innerWidth, window.innerHeight ), this.postprocessing.materialBokeh );
  108. this.postprocessing.quad.position.z = - 500;
  109. this.postprocessing.scene.add( this.postprocessing.quad );
  110. }
  111. };
  112. THREE.CinematicCamera.prototype.renderCinematic = function ( scene, renderer ) {
  113. if ( this.postprocessing.enabled ) {
  114. renderer.clear();
  115. // Render scene into texture
  116. scene.overrideMaterial = null;
  117. renderer.render( scene, camera, this.postprocessing.rtTextureColor, true );
  118. // Render depth into texture
  119. scene.overrideMaterial = this.materialDepth;
  120. renderer.render( scene, camera, this.postprocessing.rtTextureDepth, true );
  121. // Render bokeh composite
  122. renderer.render( this.postprocessing.scene, this.postprocessing.camera );
  123. }
  124. };