babylon.lensRenderingPipeline.js 12 KB

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