depthOfFieldEffect.js 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. import { Vector2 } from "../Maths/math.vector.js";
  2. import { Texture } from "../Materials/Textures/texture.js";
  3. import { PostProcessRenderEffect } from "../PostProcesses/RenderPipeline/postProcessRenderEffect.js";
  4. import { CircleOfConfusionPostProcess } from "./circleOfConfusionPostProcess.js";
  5. import { DepthOfFieldBlurPostProcess } from "./depthOfFieldBlurPostProcess.js";
  6. import { DepthOfFieldMergePostProcess } from "./depthOfFieldMergePostProcess.js";
  7. /**
  8. * Specifies the level of max blur that should be applied when using the depth of field effect
  9. */
  10. export var DepthOfFieldEffectBlurLevel;
  11. (function (DepthOfFieldEffectBlurLevel) {
  12. /**
  13. * Subtle blur
  14. */
  15. DepthOfFieldEffectBlurLevel[DepthOfFieldEffectBlurLevel["Low"] = 0] = "Low";
  16. /**
  17. * Medium blur
  18. */
  19. DepthOfFieldEffectBlurLevel[DepthOfFieldEffectBlurLevel["Medium"] = 1] = "Medium";
  20. /**
  21. * Large blur
  22. */
  23. DepthOfFieldEffectBlurLevel[DepthOfFieldEffectBlurLevel["High"] = 2] = "High";
  24. })(DepthOfFieldEffectBlurLevel || (DepthOfFieldEffectBlurLevel = {}));
  25. /**
  26. * The depth of field effect applies a blur to objects that are closer or further from where the camera is focusing.
  27. */
  28. export class DepthOfFieldEffect extends PostProcessRenderEffect {
  29. /**
  30. * The focal the length of the camera used in the effect in scene units/1000 (eg. millimeter)
  31. */
  32. set focalLength(value) {
  33. this._circleOfConfusion.focalLength = value;
  34. }
  35. get focalLength() {
  36. return this._circleOfConfusion.focalLength;
  37. }
  38. /**
  39. * F-Stop of the effect's camera. The diameter of the resulting aperture can be computed by lensSize/fStop. (default: 1.4)
  40. */
  41. set fStop(value) {
  42. this._circleOfConfusion.fStop = value;
  43. }
  44. get fStop() {
  45. return this._circleOfConfusion.fStop;
  46. }
  47. /**
  48. * Distance away from the camera to focus on in scene units/1000 (eg. millimeter). (default: 2000)
  49. */
  50. set focusDistance(value) {
  51. this._circleOfConfusion.focusDistance = value;
  52. }
  53. get focusDistance() {
  54. return this._circleOfConfusion.focusDistance;
  55. }
  56. /**
  57. * Max lens size in scene units/1000 (eg. millimeter). Standard cameras are 50mm. (default: 50) The diameter of the resulting aperture can be computed by lensSize/fStop.
  58. */
  59. set lensSize(value) {
  60. this._circleOfConfusion.lensSize = value;
  61. }
  62. get lensSize() {
  63. return this._circleOfConfusion.lensSize;
  64. }
  65. /**
  66. * Creates a new instance DepthOfFieldEffect
  67. * @param scene The scene the effect belongs to.
  68. * @param depthTexture The depth texture of the scene to compute the circle of confusion.This must be set in order for this to function but may be set after initialization if needed.
  69. * @param blurLevel
  70. * @param pipelineTextureType The type of texture to be used when performing the post processing.
  71. * @param blockCompilation If compilation of the shader should not be done in the constructor. The updateEffect method can be used to compile the shader at a later time. (default: false)
  72. */
  73. constructor(scene, depthTexture, blurLevel = DepthOfFieldEffectBlurLevel.Low, pipelineTextureType = 0, blockCompilation = false) {
  74. super(scene.getEngine(), "depth of field", () => {
  75. return this._effects;
  76. }, true);
  77. /**
  78. * @internal Internal post processes in depth of field effect
  79. */
  80. this._effects = [];
  81. // Use R-only formats if supported to store the circle of confusion values.
  82. // This should be more space and bandwidth efficient than using RGBA.
  83. const engine = scene.getEngine();
  84. const circleOfConfusionTextureFormat = engine.isWebGPU || engine.version > 1 ? 6 : 5;
  85. // Circle of confusion value for each pixel is used to determine how much to blur that pixel
  86. this._circleOfConfusion = new CircleOfConfusionPostProcess("circleOfConfusion", depthTexture, 1, null, Texture.BILINEAR_SAMPLINGMODE, engine, false, pipelineTextureType, blockCompilation);
  87. // Create a pyramid of blurred images (eg. fullSize 1/4 blur, half size 1/2 blur, quarter size 3/4 blur, eith size 4/4 blur)
  88. // Blur the image but do not blur on sharp far to near distance changes to avoid bleeding artifacts
  89. // See section 2.6.2 http://fileadmin.cs.lth.se/cs/education/edan35/lectures/12dof.pdf
  90. this._depthOfFieldBlurY = [];
  91. this._depthOfFieldBlurX = [];
  92. let blurCount = 1;
  93. let kernelSize = 15;
  94. switch (blurLevel) {
  95. case DepthOfFieldEffectBlurLevel.High: {
  96. blurCount = 3;
  97. kernelSize = 51;
  98. break;
  99. }
  100. case DepthOfFieldEffectBlurLevel.Medium: {
  101. blurCount = 2;
  102. kernelSize = 31;
  103. break;
  104. }
  105. default: {
  106. kernelSize = 15;
  107. blurCount = 1;
  108. break;
  109. }
  110. }
  111. const adjustedKernelSize = kernelSize / Math.pow(2, blurCount - 1);
  112. let ratio = 1.0;
  113. for (let i = 0; i < blurCount; i++) {
  114. const blurY = new DepthOfFieldBlurPostProcess("vertical blur", scene, new Vector2(0, 1.0), adjustedKernelSize, ratio, null, this._circleOfConfusion, i == 0 ? this._circleOfConfusion : null, Texture.BILINEAR_SAMPLINGMODE, engine, false, pipelineTextureType, blockCompilation, i == 0 ? circleOfConfusionTextureFormat : 5);
  115. blurY.autoClear = false;
  116. ratio = 0.75 / Math.pow(2, i);
  117. const blurX = new DepthOfFieldBlurPostProcess("horizontal blur", scene, new Vector2(1.0, 0), adjustedKernelSize, ratio, null, this._circleOfConfusion, null, Texture.BILINEAR_SAMPLINGMODE, engine, false, pipelineTextureType, blockCompilation);
  118. blurX.autoClear = false;
  119. this._depthOfFieldBlurY.push(blurY);
  120. this._depthOfFieldBlurX.push(blurX);
  121. }
  122. // Set all post processes on the effect.
  123. this._effects = [this._circleOfConfusion];
  124. for (let i = 0; i < this._depthOfFieldBlurX.length; i++) {
  125. this._effects.push(this._depthOfFieldBlurY[i]);
  126. this._effects.push(this._depthOfFieldBlurX[i]);
  127. }
  128. // Merge blurred images with original image based on circleOfConfusion
  129. this._dofMerge = new DepthOfFieldMergePostProcess("dofMerge", this._circleOfConfusion, this._circleOfConfusion, this._depthOfFieldBlurX, ratio, null, Texture.BILINEAR_SAMPLINGMODE, engine, false, pipelineTextureType, blockCompilation);
  130. this._dofMerge.autoClear = false;
  131. this._effects.push(this._dofMerge);
  132. }
  133. /**
  134. * Get the current class name of the current effect
  135. * @returns "DepthOfFieldEffect"
  136. */
  137. getClassName() {
  138. return "DepthOfFieldEffect";
  139. }
  140. /**
  141. * Depth texture to be used to compute the circle of confusion. This must be set here or in the constructor in order for the post process to function.
  142. */
  143. set depthTexture(value) {
  144. this._circleOfConfusion.depthTexture = value;
  145. }
  146. /**
  147. * Disposes each of the internal effects for a given camera.
  148. * @param camera The camera to dispose the effect on.
  149. */
  150. disposeEffects(camera) {
  151. for (let effectIndex = 0; effectIndex < this._effects.length; effectIndex++) {
  152. this._effects[effectIndex].dispose(camera);
  153. }
  154. }
  155. /**
  156. * @internal Internal
  157. */
  158. _updateEffects() {
  159. for (let effectIndex = 0; effectIndex < this._effects.length; effectIndex++) {
  160. this._effects[effectIndex].updateEffect();
  161. }
  162. }
  163. /**
  164. * Internal
  165. * @returns if all the contained post processes are ready.
  166. * @internal
  167. */
  168. _isReady() {
  169. for (let effectIndex = 0; effectIndex < this._effects.length; effectIndex++) {
  170. if (!this._effects[effectIndex].isReady()) {
  171. return false;
  172. }
  173. }
  174. return true;
  175. }
  176. }
  177. //# sourceMappingURL=depthOfFieldEffect.js.map