babylon.lensRenderingPipeline.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
  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. var _this = this;
  36. if (ratio === void 0) { ratio = 1.0; }
  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. }
  63. else {
  64. this._createGrainTexture();
  65. }
  66. // save parameters
  67. this._edgeBlur = parameters.edge_blur ? parameters.edge_blur : 0;
  68. this._grainAmount = parameters.grain_amount ? parameters.grain_amount : 0;
  69. this._chromaticAberration = parameters.chromatic_aberration ? parameters.chromatic_aberration : 0;
  70. this._distortion = parameters.distortion ? parameters.distortion : 0;
  71. this._highlightsGain = parameters.dof_gain ? parameters.dof_gain : 1;
  72. this._highlightsThreshold = parameters.dof_threshold ? parameters.dof_threshold : 1;
  73. this._dofDepth = parameters.dof_focus_depth !== undefined ? parameters.dof_focus_depth : -1;
  74. this._dofAperture = parameters.dof_aperture ? parameters.dof_aperture : 1;
  75. this._dofPentagon = parameters.dof_pentagon !== undefined ? parameters.dof_pentagon : true;
  76. this._blurNoise = parameters.blur_noise !== undefined ? parameters.blur_noise : true;
  77. // Create effects
  78. this._createChromaticAberrationPostProcess(ratio);
  79. this._createDepthOfFieldPostProcess(ratio);
  80. // Set up pipeline
  81. this.addEffect(new BABYLON.PostProcessRenderEffect(scene.getEngine(), this.LensChromaticAberrationEffect, function () {
  82. return _this._chromaticAberrationPostProcess;
  83. }, true));
  84. this.addEffect(new BABYLON.PostProcessRenderEffect(scene.getEngine(), this.LensDepthOfFieldEffect, function () {
  85. return _this._depthOfFieldPostProcess;
  86. }, true));
  87. // Finish
  88. scene.postProcessRenderPipelineManager.addPipeline(this);
  89. if (cameras) {
  90. scene.postProcessRenderPipelineManager.attachCamerasToRenderPipeline(name, cameras);
  91. }
  92. }
  93. // public methods
  94. LensRenderingPipeline.prototype.setEdgeBlur = function (amount) {
  95. this._edgeBlur = amount;
  96. };
  97. LensRenderingPipeline.prototype.disableEdgeBlur = function () {
  98. this._edgeBlur = 0;
  99. };
  100. LensRenderingPipeline.prototype.setGrainAmount = function (amount) {
  101. this._grainAmount = amount;
  102. };
  103. LensRenderingPipeline.prototype.disableGrain = function () {
  104. this._grainAmount = 0;
  105. };
  106. LensRenderingPipeline.prototype.setChromaticAberration = function (amount) {
  107. this._chromaticAberration = amount;
  108. };
  109. LensRenderingPipeline.prototype.disableChromaticAberration = function () {
  110. this._chromaticAberration = 0;
  111. };
  112. LensRenderingPipeline.prototype.setEdgeDistortion = function (amount) {
  113. this._distortion = amount;
  114. };
  115. LensRenderingPipeline.prototype.disableEdgeDistortion = function () {
  116. this._distortion = 0;
  117. };
  118. LensRenderingPipeline.prototype.setHighlightsGain = function (amount) {
  119. this._highlightsGain = amount;
  120. };
  121. LensRenderingPipeline.prototype.setHighlightsThreshold = function (amount) {
  122. this._highlightsThreshold = amount;
  123. };
  124. LensRenderingPipeline.prototype.setFocusDepth = function (amount) {
  125. this._dofDepth = amount;
  126. };
  127. LensRenderingPipeline.prototype.disableDepthOfField = function () {
  128. this._dofDepth = -1;
  129. };
  130. LensRenderingPipeline.prototype.setAperture = function (amount) {
  131. this._dofAperture = amount;
  132. };
  133. LensRenderingPipeline.prototype.enablePentagonBokeh = function () {
  134. this._dofPentagon = true;
  135. };
  136. LensRenderingPipeline.prototype.disablePentagonBokeh = function () {
  137. this._dofPentagon = false;
  138. };
  139. LensRenderingPipeline.prototype.enableNoiseBlur = function () {
  140. this._blurNoise = true;
  141. };
  142. LensRenderingPipeline.prototype.disableNoiseBlur = function () {
  143. this._blurNoise = false;
  144. };
  145. /**
  146. * Removes the internal pipeline assets and detaches the pipeline from the scene cameras
  147. */
  148. LensRenderingPipeline.prototype.dispose = function (disableDepthRender) {
  149. if (disableDepthRender === void 0) { disableDepthRender = false; }
  150. this._scene.postProcessRenderPipelineManager.detachCamerasFromRenderPipeline(this._name, this._scene.cameras);
  151. // this._originalColorPostProcess = undefined;
  152. this._chromaticAberrationPostProcess = undefined;
  153. this._depthOfFieldPostProcess = undefined;
  154. this._grainTexture.dispose();
  155. if (disableDepthRender)
  156. this._scene.disableDepthRenderer();
  157. };
  158. // colors shifting and distortion
  159. LensRenderingPipeline.prototype._createChromaticAberrationPostProcess = function (ratio) {
  160. var _this = this;
  161. this._chromaticAberrationPostProcess = new BABYLON.PostProcess("LensChromaticAberration", "./chromaticAberration", ["chromatic_aberration", "screen_width", "screen_height"], [], ratio, null, BABYLON.Texture.TRILINEAR_SAMPLINGMODE, this._scene.getEngine(), false);
  162. this._chromaticAberrationPostProcess.onApply = function (effect) {
  163. effect.setFloat('chromatic_aberration', _this._chromaticAberration);
  164. effect.setFloat('screen_width', _this._scene.getEngine().getRenderWidth());
  165. effect.setFloat('screen_height', _this._scene.getEngine().getRenderHeight());
  166. };
  167. };
  168. // colors shifting and distortion
  169. LensRenderingPipeline.prototype._createDepthOfFieldPostProcess = function (ratio) {
  170. var _this = this;
  171. this._depthOfFieldPostProcess = new BABYLON.PostProcess("LensDepthOfField", "./depthOfField", [
  172. "gain",
  173. "threshold",
  174. "focus_depth",
  175. "aperture",
  176. "pentagon",
  177. "maxZ",
  178. "edge_blur",
  179. "chromatic_aberration",
  180. "distortion",
  181. "blur_noise",
  182. "grain_amount",
  183. "screen_width",
  184. "screen_height"
  185. ], ["depthSampler", "grainSampler"], ratio, null, BABYLON.Texture.TRILINEAR_SAMPLINGMODE, this._scene.getEngine(), false);
  186. this._depthOfFieldPostProcess.onApply = function (effect) {
  187. effect.setBool('pentagon', _this._dofPentagon);
  188. effect.setBool('blur_noise', _this._blurNoise);
  189. effect.setFloat('maxZ', _this._scene.activeCamera.maxZ);
  190. effect.setFloat('grain_amount', _this._grainAmount);
  191. effect.setTexture("depthSampler", _this._depthTexture);
  192. effect.setTexture("grainSampler", _this._grainTexture);
  193. effect.setFloat('screen_width', _this._scene.getEngine().getRenderWidth());
  194. effect.setFloat('screen_height', _this._scene.getEngine().getRenderHeight());
  195. effect.setFloat('distortion', _this._distortion);
  196. effect.setFloat('focus_depth', _this._dofDepth);
  197. effect.setFloat('aperture', _this._dofAperture);
  198. effect.setFloat('gain', _this._highlightsGain);
  199. effect.setFloat('threshold', _this._highlightsThreshold);
  200. effect.setFloat('edge_blur', _this._edgeBlur);
  201. };
  202. };
  203. // creates a black and white random noise texture, 512x512
  204. LensRenderingPipeline.prototype._createGrainTexture = function () {
  205. var size = 512;
  206. this._grainTexture = new BABYLON.DynamicTexture("LensNoiseTexture", size, this._scene, false, BABYLON.Texture.BILINEAR_SAMPLINGMODE);
  207. this._grainTexture.wrapU = BABYLON.Texture.WRAP_ADDRESSMODE;
  208. this._grainTexture.wrapV = BABYLON.Texture.WRAP_ADDRESSMODE;
  209. var context = this._grainTexture.getContext();
  210. var rand = function (min, max) {
  211. return Math.random() * (max - min) + min;
  212. };
  213. var value;
  214. for (var x = 0; x < size; x++) {
  215. for (var y = 0; y < size; y++) {
  216. value = Math.floor(rand(0.42, 0.58) * 255);
  217. context.fillStyle = 'rgb(' + value + ', ' + value + ', ' + value + ')';
  218. context.fillRect(x, y, 1, 1);
  219. }
  220. }
  221. this._grainTexture.update(false);
  222. };
  223. return LensRenderingPipeline;
  224. })(BABYLON.PostProcessRenderPipeline);
  225. BABYLON.LensRenderingPipeline = LensRenderingPipeline;
  226. })(BABYLON || (BABYLON = {}));
  227. //# sourceMappingURL=babylon.lensRenderingPipeline.js.map