CinematicCamera.js 6.0 KB

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