babylon.lensRenderingPipeline.ts 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283
  1. // BABYLON.JS Chromatic Aberration GLSL Shader
  2. // Author: Olivier Guyot
  3. // Separates very slightly R, G and B colors on the edges of the screen
  4. // Inspired by Francois Tarlier & Martins Upitis
  5. module BABYLON {
  6. export class LensRenderingPipeline extends PostProcessRenderPipeline {
  7. // Lens effects can be of the following:
  8. // - chromatic aberration (slight shift of RGB colors)
  9. // - blur on the edge of the lens
  10. // - lens distortion
  11. // - depth-of-field blur & highlights enhancing
  12. // - depth-of-field 'bokeh' effect (shapes appearing in blurred areas)
  13. // - grain effect (noise or custom texture)
  14. // Two additional texture samplers are needed:
  15. // - depth map (for depth-of-field)
  16. // - grain texture
  17. /**
  18. * The chromatic aberration PostProcess id in the pipeline
  19. * @type {string}
  20. */
  21. public LensChromaticAberrationEffect: string = "LensChromaticAberrationEffect";
  22. /**
  23. * The highlights enhancing PostProcess id in the pipeline
  24. * @type {string}
  25. */
  26. public HighlightsEnhancingEffect: string = "HighlightsEnhancingEffect";
  27. /**
  28. * The depth-of-field PostProcess id in the pipeline
  29. * @type {string}
  30. */
  31. public LensDepthOfFieldEffect: string = "LensDepthOfFieldEffect";
  32. private _scene: Scene;
  33. private _depthTexture: RenderTargetTexture;
  34. private _grainTexture: Texture;
  35. private _chromaticAberrationPostProcess: PostProcess;
  36. private _highlightsPostProcess: PostProcess;
  37. private _depthOfFieldPostProcess: PostProcess;
  38. private _edgeBlur: number;
  39. private _grainAmount: number;
  40. private _chromaticAberration: number;
  41. private _distortion: number;
  42. private _highlightsGain: number;
  43. private _highlightsThreshold: number;
  44. private _dofDistance: number;
  45. private _dofAperture: number;
  46. private _dofDarken: number;
  47. private _dofPentagon: boolean;
  48. private _blurNoise: boolean;
  49. /**
  50. * @constructor
  51. *
  52. * Effect parameters are as follow:
  53. * {
  54. * chromatic_aberration: number; // from 0 to x (1 for realism)
  55. * edge_blur: number; // from 0 to x (1 for realism)
  56. * distortion: number; // from 0 to x (1 for realism)
  57. * grain_amount: number; // from 0 to 1
  58. * grain_texture: BABYLON.Texture; // texture to use for grain effect; if unset, use random B&W noise
  59. * dof_focus_distance: number; // depth-of-field: focus distance; unset to disable (disabled by default)
  60. * dof_aperture: number; // depth-of-field: focus blur bias (default: 1)
  61. * dof_darken: number; // depth-of-field: darken that which is out of focus (from 0 to 1, disabled by default)
  62. * dof_pentagon: boolean; // depth-of-field: makes a pentagon-like "bokeh" effect
  63. * dof_gain: number; // depth-of-field: highlights gain; unset to disable (disabled by default)
  64. * dof_threshold: number; // depth-of-field: highlights threshold (default: 1)
  65. * blur_noise: boolean; // add a little bit of noise to the blur (default: true)
  66. * }
  67. * Note: if an effect parameter is unset, effect is disabled
  68. *
  69. * @param {string} name - The rendering pipeline name
  70. * @param {object} parameters - An object containing all parameters (see above)
  71. * @param {BABYLON.Scene} scene - The scene linked to this pipeline
  72. * @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)
  73. * @param {BABYLON.Camera[]} cameras - The array of cameras that the rendering pipeline will be attached to
  74. */
  75. constructor(name: string, parameters: any, scene: Scene, ratio: number = 1.0, cameras?: Camera[]) {
  76. super(scene.getEngine(), name);
  77. this._scene = scene;
  78. // Fetch texture samplers
  79. this._depthTexture = scene.enableDepthRenderer().getDepthMap(); // Force depth renderer "on"
  80. if (parameters.grain_texture) { this._grainTexture = parameters.grain_texture; }
  81. else { this._createGrainTexture(); }
  82. // save parameters
  83. this._edgeBlur = parameters.edge_blur ? parameters.edge_blur : 0;
  84. this._grainAmount = parameters.grain_amount ? parameters.grain_amount : 0;
  85. this._chromaticAberration = parameters.chromatic_aberration ? parameters.chromatic_aberration : 0;
  86. this._distortion = parameters.distortion ? parameters.distortion : 0;
  87. this._highlightsGain = parameters.dof_gain !== undefined ? parameters.dof_gain : -1;
  88. this._highlightsThreshold = parameters.dof_threshold ? parameters.dof_threshold : 1;
  89. this._dofDistance = parameters.dof_focus_distance !== undefined ? parameters.dof_focus_distance : -1;
  90. this._dofAperture = parameters.dof_aperture ? parameters.dof_aperture : 1;
  91. this._dofDarken = parameters.dof_darken ? parameters.dof_darken : 0;
  92. this._dofPentagon = parameters.dof_pentagon !== undefined ? parameters.dof_pentagon : true;
  93. this._blurNoise = parameters.blur_noise !== undefined ? parameters.blur_noise : true;
  94. // Create effects
  95. this._createChromaticAberrationPostProcess(ratio);
  96. this._createHighlightsPostProcess(ratio);
  97. this._createDepthOfFieldPostProcess(ratio / 4);
  98. // Set up pipeline
  99. this.addEffect(new PostProcessRenderEffect(scene.getEngine(), this.LensChromaticAberrationEffect, () => { return this._chromaticAberrationPostProcess; }, true));
  100. this.addEffect(new PostProcessRenderEffect(scene.getEngine(), this.HighlightsEnhancingEffect, () => { return this._highlightsPostProcess; }, true));
  101. this.addEffect(new PostProcessRenderEffect(scene.getEngine(), this.LensDepthOfFieldEffect, () => { return this._depthOfFieldPostProcess; }, true));
  102. if (this._highlightsGain === -1) {
  103. this._disableEffect(this.HighlightsEnhancingEffect, null);
  104. }
  105. // Finish
  106. scene.postProcessRenderPipelineManager.addPipeline(this);
  107. if (cameras) {
  108. scene.postProcessRenderPipelineManager.attachCamerasToRenderPipeline(name, cameras);
  109. }
  110. }
  111. // public methods (self explanatory)
  112. public setEdgeBlur(amount: number) { this._edgeBlur = amount; }
  113. public disableEdgeBlur() { this._edgeBlur = 0; }
  114. public setGrainAmount(amount: number) { this._grainAmount = amount; }
  115. public disableGrain() { this._grainAmount = 0; }
  116. public setChromaticAberration(amount: number) { this._chromaticAberration = amount; }
  117. public disableChromaticAberration() { this._chromaticAberration = 0; }
  118. public setEdgeDistortion(amount: number) { this._distortion = amount; }
  119. public disableEdgeDistortion() { this._distortion = 0; }
  120. public setFocusDistance(amount: number) { this._dofDistance = amount; }
  121. public disableDepthOfField() { this._dofDistance = -1; }
  122. public setAperture(amount: number) { this._dofAperture = amount; }
  123. public setDarkenOutOfFocus(amount: number) { this._dofDarken = amount; }
  124. public enablePentagonBokeh() {
  125. this._highlightsPostProcess.updateEffect("#define PENTAGON\n");
  126. }
  127. public disablePentagonBokeh() {
  128. this._highlightsPostProcess.updateEffect();
  129. }
  130. public enableNoiseBlur() { this._blurNoise = true; }
  131. public disableNoiseBlur() { this._blurNoise = false; }
  132. public setHighlightsGain(amount: number) {
  133. this._highlightsGain = amount;
  134. }
  135. public setHighlightsThreshold(amount: number) {
  136. if (this._highlightsGain === -1) {
  137. this._highlightsGain = 1.0;
  138. }
  139. this._highlightsThreshold = amount;
  140. }
  141. public disableHighlights() {
  142. this._highlightsGain = -1;
  143. }
  144. /**
  145. * Removes the internal pipeline assets and detaches the pipeline from the scene cameras
  146. */
  147. public dispose(disableDepthRender: boolean = false): void {
  148. this._scene.postProcessRenderPipelineManager.detachCamerasFromRenderPipeline(this._name, this._scene.cameras);
  149. (<any>this._chromaticAberrationPostProcess) = null;
  150. (<any>this._highlightsPostProcess) = null;
  151. (<any>this._depthOfFieldPostProcess) = null;
  152. this._grainTexture.dispose();
  153. if (disableDepthRender)
  154. this._scene.disableDepthRenderer();
  155. }
  156. // colors shifting and distortion
  157. private _createChromaticAberrationPostProcess(ratio: number): void {
  158. this._chromaticAberrationPostProcess = new PostProcess("LensChromaticAberration", "chromaticAberration",
  159. ["chromatic_aberration", "screen_width", "screen_height", "direction", "radialIntensity", "centerPosition"], // uniforms
  160. [], // samplers
  161. ratio, null, Texture.TRILINEAR_SAMPLINGMODE,
  162. this._scene.getEngine(), false);
  163. this._chromaticAberrationPostProcess.onApply = (effect: Effect) => {
  164. effect.setFloat('chromatic_aberration', this._chromaticAberration);
  165. effect.setFloat('screen_width', this._scene.getEngine().getRenderWidth());
  166. effect.setFloat('screen_height', this._scene.getEngine().getRenderHeight());
  167. effect.setFloat('radialIntensity', 1);
  168. effect.setFloat2('direction', 17, 17);
  169. effect.setFloat2('centerPosition', 0.5,0.5);
  170. };
  171. }
  172. // highlights enhancing
  173. private _createHighlightsPostProcess(ratio: number): void {
  174. this._highlightsPostProcess = new PostProcess("LensHighlights", "lensHighlights",
  175. ["gain", "threshold", "screen_width", "screen_height"], // uniforms
  176. [], // samplers
  177. ratio,
  178. null, Texture.TRILINEAR_SAMPLINGMODE,
  179. this._scene.getEngine(), false, this._dofPentagon ? "#define PENTAGON\n" : "");
  180. this._highlightsPostProcess.onApply = (effect: Effect) => {
  181. effect.setFloat('gain', this._highlightsGain);
  182. effect.setFloat('threshold', this._highlightsThreshold);
  183. effect.setTextureFromPostProcess("textureSampler", this._chromaticAberrationPostProcess);
  184. effect.setFloat('screen_width', this._scene.getEngine().getRenderWidth());
  185. effect.setFloat('screen_height', this._scene.getEngine().getRenderHeight());
  186. };
  187. }
  188. // colors shifting and distortion
  189. private _createDepthOfFieldPostProcess(ratio: number): void {
  190. this._depthOfFieldPostProcess = new PostProcess("LensDepthOfField", "depthOfField",
  191. [
  192. "grain_amount", "blur_noise", "screen_width", "screen_height", "distortion", "dof_enabled",
  193. "screen_distance", "aperture", "darken", "edge_blur", "highlights", "near", "far"
  194. ],
  195. ["depthSampler", "grainSampler", "highlightsSampler"],
  196. ratio, null, Texture.TRILINEAR_SAMPLINGMODE,
  197. this._scene.getEngine(), false);
  198. this._depthOfFieldPostProcess.onApply = (effect: Effect) => {
  199. effect.setTexture("depthSampler", this._depthTexture);
  200. effect.setTexture("grainSampler", this._grainTexture);
  201. effect.setTextureFromPostProcess("textureSampler", this._highlightsPostProcess);
  202. effect.setTextureFromPostProcess("highlightsSampler", this._depthOfFieldPostProcess);
  203. effect.setFloat('grain_amount', this._grainAmount);
  204. effect.setBool('blur_noise', this._blurNoise);
  205. effect.setFloat('screen_width', this._scene.getEngine().getRenderWidth());
  206. effect.setFloat('screen_height', this._scene.getEngine().getRenderHeight());
  207. effect.setFloat('distortion', this._distortion);
  208. effect.setBool('dof_enabled', (this._dofDistance !== -1));
  209. effect.setFloat('screen_distance', 1.0 / (0.1 - 1.0 / this._dofDistance));
  210. effect.setFloat('aperture', this._dofAperture);
  211. effect.setFloat('darken', this._dofDarken);
  212. effect.setFloat('edge_blur', this._edgeBlur);
  213. effect.setBool('highlights', (this._highlightsGain !== -1));
  214. if (this._scene.activeCamera) {
  215. effect.setFloat('near', this._scene.activeCamera.minZ);
  216. effect.setFloat('far', this._scene.activeCamera.maxZ);
  217. }
  218. };
  219. }
  220. // creates a black and white random noise texture, 512x512
  221. private _createGrainTexture(): void {
  222. var size = 512;
  223. this._grainTexture = new DynamicTexture("LensNoiseTexture", size, this._scene, false, Texture.BILINEAR_SAMPLINGMODE);
  224. this._grainTexture.wrapU = Texture.WRAP_ADDRESSMODE;
  225. this._grainTexture.wrapV = Texture.WRAP_ADDRESSMODE;
  226. var context = (<DynamicTexture>this._grainTexture).getContext();
  227. var rand = (min: number, max: number) => {
  228. return Math.random() * (max - min) + min;
  229. }
  230. var value;
  231. for (var x = 0; x < size; x++) {
  232. for (var y = 0; y < size; y++) {
  233. value = Math.floor(rand(0.42, 0.58) * 255);
  234. context.fillStyle = 'rgb(' + value + ', ' + value + ', ' + value + ')';
  235. context.fillRect(x, y, 1, 1);
  236. }
  237. }
  238. (<DynamicTexture>this._grainTexture).update(false);
  239. }
  240. }
  241. }