babylon.ssaoRenderingPipeline.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  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 SSAORenderingPipeline = (function (_super) {
  10. __extends(SSAORenderingPipeline, _super);
  11. /**
  12. * @constructor
  13. * @param {string} name - The rendering pipeline name
  14. * @param {BABYLON.Scene} scene - The scene linked to this pipeline
  15. * @param {any} ratio - The size of the postprocesses. Can be a number shared between passes or an object for more precision: { ssaoRatio: 0.5, combineRatio: 1.0 }
  16. * @param {BABYLON.Camera[]} cameras - The array of cameras that the rendering pipeline will be attached to
  17. */
  18. function SSAORenderingPipeline(name, scene, ratio, cameras) {
  19. var _this = this;
  20. _super.call(this, scene.getEngine(), name);
  21. // Members
  22. /**
  23. * The PassPostProcess id in the pipeline that contains the original scene color
  24. * @type {string}
  25. */
  26. this.SSAOOriginalSceneColorEffect = "SSAOOriginalSceneColorEffect";
  27. /**
  28. * The SSAO PostProcess id in the pipeline
  29. * @type {string}
  30. */
  31. this.SSAORenderEffect = "SSAORenderEffect";
  32. /**
  33. * The horizontal blur PostProcess id in the pipeline
  34. * @type {string}
  35. */
  36. this.SSAOBlurHRenderEffect = "SSAOBlurHRenderEffect";
  37. /**
  38. * The vertical blur PostProcess id in the pipeline
  39. * @type {string}
  40. */
  41. this.SSAOBlurVRenderEffect = "SSAOBlurVRenderEffect";
  42. /**
  43. * The PostProcess id in the pipeline that combines the SSAO-Blur output with the original scene color (SSAOOriginalSceneColorEffect)
  44. * @type {string}
  45. */
  46. this.SSAOCombineRenderEffect = "SSAOCombineRenderEffect";
  47. /**
  48. * The output strength of the SSAO post-process. Default value is 1.0.
  49. * @type {number}
  50. */
  51. this.totalStrength = 1.0;
  52. /**
  53. * The radius around the analyzed pixel used by the SSAO post-process. Default value is 0.0002
  54. * @type {number}
  55. */
  56. this.radius = 0.0002;
  57. /**
  58. * Related to fallOff, used to interpolate SSAO samples (first interpolate function input) based on the occlusion difference of each pixel
  59. * Must not be equal to fallOff and superior to fallOff.
  60. * Default value is 0.0075
  61. * @type {number}
  62. */
  63. this.area = 0.0075;
  64. /**
  65. * Related to area, used to interpolate SSAO samples (second interpolate function input) based on the occlusion difference of each pixel
  66. * Must not be equal to area and inferior to area.
  67. * Default value is 0.0002
  68. * @type {number}
  69. */
  70. this.fallOff = 0.0002;
  71. this._firstUpdate = true;
  72. this._scene = scene;
  73. // Set up assets
  74. this._createRandomTexture();
  75. this._depthTexture = scene.enableDepthRenderer().getDepthMap(); // Force depth renderer "on"
  76. var ssaoRatio = ratio.ssaoRatio || ratio;
  77. var combineRatio = ratio.combineRatio || ratio;
  78. this._originalColorPostProcess = new BABYLON.PassPostProcess("SSAOOriginalSceneColor", combineRatio, null, BABYLON.Texture.BILINEAR_SAMPLINGMODE, scene.getEngine(), false);
  79. this._createSSAOPostProcess(ssaoRatio);
  80. this._blurHPostProcess = new BABYLON.BlurPostProcess("SSAOBlurH", new BABYLON.Vector2(2.0, 0.0), 2.0, ssaoRatio, null, BABYLON.Texture.BILINEAR_SAMPLINGMODE, scene.getEngine(), false);
  81. this._blurVPostProcess = new BABYLON.BlurPostProcess("SSAOBlurV", new BABYLON.Vector2(0.0, 2.0), 2.0, ssaoRatio, null, BABYLON.Texture.BILINEAR_SAMPLINGMODE, scene.getEngine(), false);
  82. this._createSSAOCombinePostProcess(combineRatio);
  83. // Set up pipeline
  84. this.addEffect(new BABYLON.PostProcessRenderEffect(scene.getEngine(), this.SSAOOriginalSceneColorEffect, function () { return _this._originalColorPostProcess; }, true));
  85. this.addEffect(new BABYLON.PostProcessRenderEffect(scene.getEngine(), this.SSAORenderEffect, function () { return _this._ssaoPostProcess; }, true));
  86. this.addEffect(new BABYLON.PostProcessRenderEffect(scene.getEngine(), this.SSAOBlurHRenderEffect, function () { return _this._blurHPostProcess; }, true));
  87. this.addEffect(new BABYLON.PostProcessRenderEffect(scene.getEngine(), this.SSAOBlurVRenderEffect, function () { return _this._blurVPostProcess; }, true));
  88. this.addEffect(new BABYLON.PostProcessRenderEffect(scene.getEngine(), this.SSAOCombineRenderEffect, function () { return _this._ssaoCombinePostProcess; }, true));
  89. // Finish
  90. scene.postProcessRenderPipelineManager.addPipeline(this);
  91. if (cameras)
  92. scene.postProcessRenderPipelineManager.attachCamerasToRenderPipeline(name, cameras);
  93. }
  94. // Public Methods
  95. /**
  96. * Returns the horizontal blur PostProcess
  97. * @return {BABYLON.BlurPostProcess} The horizontal blur post-process
  98. */
  99. SSAORenderingPipeline.prototype.getBlurHPostProcess = function () {
  100. return this._blurHPostProcess;
  101. };
  102. /**
  103. * Returns the vertical blur PostProcess
  104. * @return {BABYLON.BlurPostProcess} The vertical blur post-process
  105. */
  106. SSAORenderingPipeline.prototype.getBlurVPostProcess = function () {
  107. return this._blurVPostProcess;
  108. };
  109. /**
  110. * Removes the internal pipeline assets and detatches the pipeline from the scene cameras
  111. */
  112. SSAORenderingPipeline.prototype.dispose = function (disableDepthRender) {
  113. if (disableDepthRender === void 0) { disableDepthRender = false; }
  114. this._scene.postProcessRenderPipelineManager.detachCamerasFromRenderPipeline(this._name, this._scene.cameras);
  115. this._originalColorPostProcess = undefined;
  116. this._ssaoPostProcess = undefined;
  117. this._blurHPostProcess = undefined;
  118. this._blurVPostProcess = undefined;
  119. this._ssaoCombinePostProcess = undefined;
  120. this._randomTexture.dispose();
  121. if (disableDepthRender)
  122. this._scene.disableDepthRenderer();
  123. };
  124. // Private Methods
  125. SSAORenderingPipeline.prototype._createSSAOPostProcess = function (ratio) {
  126. var _this = this;
  127. var sampleSphere = [
  128. 0.5381, 0.1856, -0.4319,
  129. 0.1379, 0.2486, 0.4430,
  130. 0.3371, 0.5679, -0.0057,
  131. -0.6999, -0.0451, -0.0019,
  132. 0.0689, -0.1598, -0.8547,
  133. 0.0560, 0.0069, -0.1843,
  134. -0.0146, 0.1402, 0.0762,
  135. 0.0100, -0.1924, -0.0344,
  136. -0.3577, -0.5301, -0.4358,
  137. -0.3169, 0.1063, 0.0158,
  138. 0.0103, -0.5869, 0.0046,
  139. -0.0897, -0.4940, 0.3287,
  140. 0.7119, -0.0154, -0.0918,
  141. -0.0533, 0.0596, -0.5411,
  142. 0.0352, -0.0631, 0.5460,
  143. -0.4776, 0.2847, -0.0271
  144. ];
  145. var samplesFactor = 1.0 / 16.0;
  146. this._ssaoPostProcess = new BABYLON.PostProcess("ssao", "ssao", ["sampleSphere", "samplesFactor", "randTextureTiles", "totalStrength", "radius", "area", "fallOff"], ["randomSampler"], ratio, null, BABYLON.Texture.BILINEAR_SAMPLINGMODE, this._scene.getEngine(), false);
  147. this._ssaoPostProcess.onApply = function (effect) {
  148. if (_this._firstUpdate) {
  149. effect.setArray3("sampleSphere", sampleSphere);
  150. effect.setFloat("samplesFactor", samplesFactor);
  151. effect.setFloat("randTextureTiles", 4.0 / ratio);
  152. _this._firstUpdate = false;
  153. }
  154. effect.setFloat("totalStrength", _this.totalStrength);
  155. effect.setFloat("radius", _this.radius);
  156. effect.setFloat("area", _this.area);
  157. effect.setFloat("fallOff", _this.fallOff);
  158. effect.setTexture("textureSampler", _this._depthTexture);
  159. effect.setTexture("randomSampler", _this._randomTexture);
  160. };
  161. };
  162. SSAORenderingPipeline.prototype._createSSAOCombinePostProcess = function (ratio) {
  163. var _this = this;
  164. this._ssaoCombinePostProcess = new BABYLON.PostProcess("ssaoCombine", "ssaoCombine", [], ["originalColor"], ratio, null, BABYLON.Texture.BILINEAR_SAMPLINGMODE, this._scene.getEngine(), false);
  165. this._ssaoCombinePostProcess.onApply = function (effect) {
  166. effect.setTextureFromPostProcess("originalColor", _this._originalColorPostProcess);
  167. };
  168. };
  169. SSAORenderingPipeline.prototype._createRandomTexture = function () {
  170. var size = 512;
  171. this._randomTexture = new BABYLON.DynamicTexture("SSAORandomTexture", size, this._scene, false, BABYLON.Texture.BILINEAR_SAMPLINGMODE);
  172. this._randomTexture.wrapU = BABYLON.Texture.WRAP_ADDRESSMODE;
  173. this._randomTexture.wrapV = BABYLON.Texture.WRAP_ADDRESSMODE;
  174. var context = this._randomTexture.getContext();
  175. var rand = function (min, max) {
  176. return Math.random() * (max - min) + min;
  177. };
  178. for (var x = 0; x < size; x++) {
  179. for (var y = 0; y < size; y++) {
  180. var randVector = BABYLON.Vector3.Zero();
  181. randVector.x = Math.floor(rand(0.0, 1.0) * 255);
  182. randVector.y = Math.floor(rand(0.0, 1.0) * 255);
  183. randVector.z = Math.floor(rand(0.0, 1.0) * 255);
  184. context.fillStyle = 'rgb(' + randVector.x + ', ' + randVector.y + ', ' + randVector.z + ')';
  185. context.fillRect(x, y, 1, 1);
  186. }
  187. }
  188. this._randomTexture.update(false);
  189. };
  190. return SSAORenderingPipeline;
  191. })(BABYLON.PostProcessRenderPipeline);
  192. BABYLON.SSAORenderingPipeline = SSAORenderingPipeline;
  193. })(BABYLON || (BABYLON = {}));
  194. //# sourceMappingURL=babylon.ssaoRenderingPipeline.js.map