babylon.lensRenderingPipeline.ts 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  1. module BABYLON {
  2. export class LensRenderingPipeline extends PostProcessRenderPipeline {
  3. // Lens effects can be of the following:
  4. // - chromatic aberration (slight shift of RGB colors)
  5. // - blur on the edge of the lens
  6. // - lens distortion
  7. // - depth-of-field 'bokeh' effect (shapes appearing in blured areas, stronger highlights)
  8. // - grain/dust-on-lens effect
  9. // Two additional texture samplers are needed:
  10. // - depth map (for depth-of-field)
  11. // - grain texture
  12. /**
  13. * The chromatic aberration PostProcess id in the pipeline
  14. * @type {string}
  15. */
  16. public LensChromaticAberrationEffect: string = "LensChromaticAberrationEffect";
  17. /**
  18. * The depth-of-field PostProcess id in the pipeline
  19. * @type {string}
  20. */
  21. public LensDepthOfFieldEffect: string = "LensDepthOfFieldEffect";
  22. private _scene: Scene;
  23. private _depthTexture: RenderTargetTexture;
  24. private _grainTexture: Texture;
  25. private _chromaticAberrationPostProcess: PostProcess;
  26. private _depthOfFieldPostProcess: PostProcess;
  27. private _edgeBlur: number;
  28. private _grainAmount: number;
  29. private _chromaticAberration: number;
  30. private _distortion: number;
  31. private _highlightsGain: number;
  32. private _highlightsThreshold: number;
  33. private _dofDepth: number;
  34. private _dofAperture: number;
  35. private _dofPentagon: boolean;
  36. private _blurNoise: boolean;
  37. /**
  38. * @constructor
  39. * @param {string} name - The rendering pipeline name
  40. * @param {object} parameters - An object containing all parameters (see below)
  41. * @param {BABYLON.Scene} scene - The scene linked to this pipeline
  42. * @param {number} ratio - The size of the postprocesses (0.5 means that your postprocess will have a width = canvas.width 0.5 and a height = canvas.height 0.5)
  43. * @param {BABYLON.Camera[]} cameras - The array of cameras that the rendering pipeline will be attached to
  44. Effect parameters are as follow:
  45. {
  46. chromatic_aberration: number; // from 0 to x (1 for realism)
  47. edge_blur: number; // from 0 to x (1 for realism)
  48. distortion: number; // from 0 to x (1 for realism)
  49. grain_amount: number; // from 0 to 1
  50. grain_texture: BABYLON.Texture; // texture to use for grain effect; if unset, use random B&W noise
  51. dof_focus_depth: number; // depth-of-field: focus depth; unset to disable
  52. dof_aperture: number; // depth-of-field: focus blur bias (default: 1)
  53. dof_pentagon: boolean; // depth-of-field: makes a pentagon-like "bokeh" effect
  54. dof_gain: boolean; // depth-of-field: depthOfField gain (default: 1)
  55. dof_threshold: boolean; // depth-of-field: depthOfField threshold (default: 1)
  56. blur_noise: boolean; // add a little bit of noise to the blur (default: true)
  57. }
  58. Note: if an effect parameter is unset, effect is disabled
  59. */
  60. constructor(name: string, parameters: any, scene: Scene, ratio: number = 1.0, cameras?: Camera[]) {
  61. super(scene.getEngine(), name);
  62. this._scene = scene;
  63. // Fetch texture samplers
  64. this._depthTexture = scene.enableDepthRenderer().getDepthMap(); // Force depth renderer "on"
  65. if (parameters.grain_texture) {
  66. this._grainTexture = parameters.grain_texture;
  67. } else {
  68. this._createGrainTexture();
  69. }
  70. // save parameters
  71. this._edgeBlur = parameters.edge_blur ? parameters.edge_blur : 0;
  72. this._grainAmount = parameters.grain_amount ? parameters.grain_amount : 0;
  73. this._chromaticAberration = parameters.chromatic_aberration ? parameters.chromatic_aberration : 0;
  74. this._distortion = parameters.distortion ? parameters.distortion : 0;
  75. this._highlightsGain = parameters.dof_gain ? parameters.dof_gain : 1;
  76. this._highlightsThreshold = parameters.dof_threshold ? parameters.dof_threshold : 1;
  77. this._dofDepth = parameters.dof_focus_depth !== undefined ? parameters.dof_focus_depth : -1;
  78. this._dofAperture = parameters.dof_aperture ? parameters.dof_aperture : 1;
  79. this._dofPentagon = parameters.dof_pentagon !== undefined ? parameters.dof_pentagon : true;
  80. this._blurNoise = parameters.blur_noise !== undefined ? parameters.blur_noise : true;
  81. // Create effects
  82. this._createChromaticAberrationPostProcess(ratio);
  83. this._createDepthOfFieldPostProcess(ratio);
  84. // Set up pipeline
  85. this.addEffect(new PostProcessRenderEffect(scene.getEngine(), this.LensChromaticAberrationEffect, () => { return this._chromaticAberrationPostProcess; }, true));
  86. this.addEffect(new PostProcessRenderEffect(scene.getEngine(), this.LensDepthOfFieldEffect, () => { return this._depthOfFieldPostProcess; }, true));
  87. // Finish
  88. scene.postProcessRenderPipelineManager.addPipeline(this);
  89. if(cameras) {
  90. scene.postProcessRenderPipelineManager.attachCamerasToRenderPipeline(name, cameras);
  91. }
  92. }
  93. // public methods
  94. public setEdgeBlur(amount: number) { this._edgeBlur = amount; }
  95. public disableEdgeBlur() { this._edgeBlur = 0; }
  96. public setGrainAmount(amount: number) { this._grainAmount = amount; }
  97. public disableGrain() { this._grainAmount = 0; }
  98. public setChromaticAberration(amount: number) { this._chromaticAberration = amount; }
  99. public disableChromaticAberration() { this._chromaticAberration = 0; }
  100. public setEdgeDistortion(amount: number) { this._distortion = amount; }
  101. public disableEdgeDistortion() { this._distortion = 0; }
  102. public setHighlightsGain(amount: number) { this._highlightsGain = amount; }
  103. public setHighlightsThreshold(amount: number) { this._highlightsThreshold = amount; }
  104. public setFocusDepth(amount: number) { this._dofDepth = amount; }
  105. public disableDepthOfField() { this._dofDepth = -1; }
  106. public setAperture(amount: number) { this._dofAperture = amount; }
  107. public enablePentagonBokeh() { this._dofPentagon = true; }
  108. public disablePentagonBokeh() { this._dofPentagon = false; }
  109. public enableNoiseBlur() { this._blurNoise = true; }
  110. public disableNoiseBlur() { this._blurNoise = false; }
  111. /**
  112. * Removes the internal pipeline assets and detaches the pipeline from the scene cameras
  113. */
  114. public dispose(disableDepthRender: boolean = false): void {
  115. this._scene.postProcessRenderPipelineManager.detachCamerasFromRenderPipeline(this._name, this._scene.cameras);
  116. this._chromaticAberrationPostProcess = undefined;
  117. this._depthOfFieldPostProcess = undefined;
  118. this._grainTexture.dispose();
  119. if (disableDepthRender)
  120. this._scene.disableDepthRenderer();
  121. }
  122. // colors shifting and distortion
  123. private _createChromaticAberrationPostProcess(ratio: number): void {
  124. this._chromaticAberrationPostProcess = new PostProcess("LensChromaticAberration", "chromaticAberration",
  125. ["chromatic_aberration", "screen_width", "screen_height"], // uniforms
  126. [], // samplers
  127. ratio, null, Texture.TRILINEAR_SAMPLINGMODE,
  128. this._scene.getEngine(), false);
  129. this._chromaticAberrationPostProcess.onApply = (effect: Effect) => {
  130. effect.setFloat('chromatic_aberration', this._chromaticAberration);
  131. effect.setFloat('screen_width', this._scene.getEngine().getRenderWidth());
  132. effect.setFloat('screen_height', this._scene.getEngine().getRenderHeight());
  133. };
  134. }
  135. // colors shifting and distortion
  136. private _createDepthOfFieldPostProcess(ratio: number): void {
  137. this._depthOfFieldPostProcess = new PostProcess("LensDepthOfField", "depthOfField",
  138. [
  139. "gain", "threshold", "focus_depth", "aperture", "pentagon", "maxZ", "edge_blur",
  140. "chromatic_aberration", "distortion", "blur_noise", "grain_amount", "screen_width", "screen_height"
  141. ],
  142. ["depthSampler", "grainSampler"],
  143. ratio, null, Texture.TRILINEAR_SAMPLINGMODE,
  144. this._scene.getEngine(), false);
  145. this._depthOfFieldPostProcess.onApply = (effect: Effect) => {
  146. effect.setBool('pentagon', this._dofPentagon);
  147. effect.setBool('blur_noise', this._blurNoise);
  148. effect.setFloat('maxZ', this._scene.activeCamera.maxZ);
  149. effect.setFloat('grain_amount', this._grainAmount);
  150. effect.setTexture("depthSampler", this._depthTexture);
  151. effect.setTexture("grainSampler", this._grainTexture);
  152. effect.setFloat('screen_width', this._scene.getEngine().getRenderWidth());
  153. effect.setFloat('screen_height', this._scene.getEngine().getRenderHeight());
  154. effect.setFloat('distortion', this._distortion);
  155. effect.setFloat('focus_depth', this._dofDepth);
  156. effect.setFloat('aperture', this._dofAperture);
  157. effect.setFloat('gain', this._highlightsGain);
  158. effect.setFloat('threshold', this._highlightsThreshold);
  159. effect.setFloat('edge_blur', this._edgeBlur);
  160. };
  161. }
  162. // creates a black and white random noise texture, 512x512
  163. private _createGrainTexture(): void {
  164. var size = 512;
  165. this._grainTexture = new DynamicTexture("LensNoiseTexture", size, this._scene, false, Texture.BILINEAR_SAMPLINGMODE);
  166. this._grainTexture.wrapU = Texture.WRAP_ADDRESSMODE;
  167. this._grainTexture.wrapV = Texture.WRAP_ADDRESSMODE;
  168. var context = (<DynamicTexture>this._grainTexture).getContext();
  169. var rand = (min, max) => {
  170. return Math.random() * (max - min) + min;
  171. }
  172. var value;
  173. for (var x = 0; x < size; x++) {
  174. for (var y = 0; y < size; y++) {
  175. value = Math.floor(rand(0.42,0.58)*255);
  176. context.fillStyle = 'rgb(' + value + ', ' + value + ', ' + value + ')';
  177. context.fillRect(x, y, 1, 1);
  178. }
  179. }
  180. (<DynamicTexture>this._grainTexture).update(false);
  181. }
  182. }
  183. }