CinematicCamera.js 6.7 KB

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