babylon.ssaoRenderingPipeline.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267
  1. var __extends = (this && 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. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  5. };
  6. var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
  7. var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  8. if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  9. else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  10. return c > 3 && r && Object.defineProperty(target, key, r), r;
  11. };
  12. var BABYLON;
  13. (function (BABYLON) {
  14. var SSAORenderingPipeline = (function (_super) {
  15. __extends(SSAORenderingPipeline, _super);
  16. /**
  17. * @constructor
  18. * @param {string} name - The rendering pipeline name
  19. * @param {BABYLON.Scene} scene - The scene linked to this pipeline
  20. * @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 }
  21. * @param {BABYLON.Camera[]} cameras - The array of cameras that the rendering pipeline will be attached to
  22. */
  23. function SSAORenderingPipeline(name, scene, ratio, cameras) {
  24. var _this = this;
  25. _super.call(this, scene.getEngine(), name);
  26. // Members
  27. /**
  28. * The PassPostProcess id in the pipeline that contains the original scene color
  29. * @type {string}
  30. */
  31. this.SSAOOriginalSceneColorEffect = "SSAOOriginalSceneColorEffect";
  32. /**
  33. * The SSAO PostProcess id in the pipeline
  34. * @type {string}
  35. */
  36. this.SSAORenderEffect = "SSAORenderEffect";
  37. /**
  38. * The horizontal blur PostProcess id in the pipeline
  39. * @type {string}
  40. */
  41. this.SSAOBlurHRenderEffect = "SSAOBlurHRenderEffect";
  42. /**
  43. * The vertical blur PostProcess id in the pipeline
  44. * @type {string}
  45. */
  46. this.SSAOBlurVRenderEffect = "SSAOBlurVRenderEffect";
  47. /**
  48. * The PostProcess id in the pipeline that combines the SSAO-Blur output with the original scene color (SSAOOriginalSceneColorEffect)
  49. * @type {string}
  50. */
  51. this.SSAOCombineRenderEffect = "SSAOCombineRenderEffect";
  52. /**
  53. * The output strength of the SSAO post-process. Default value is 1.0.
  54. * @type {number}
  55. */
  56. this.totalStrength = 1.0;
  57. /**
  58. * The radius around the analyzed pixel used by the SSAO post-process. Default value is 0.0006
  59. * @type {number}
  60. */
  61. this.radius = 0.0001;
  62. /**
  63. * Related to fallOff, used to interpolate SSAO samples (first interpolate function input) based on the occlusion difference of each pixel
  64. * Must not be equal to fallOff and superior to fallOff.
  65. * Default value is 0.975
  66. * @type {number}
  67. */
  68. this.area = 0.0075;
  69. /**
  70. * Related to area, used to interpolate SSAO samples (second interpolate function input) based on the occlusion difference of each pixel
  71. * Must not be equal to area and inferior to area.
  72. * Default value is 0.0
  73. * @type {number}
  74. */
  75. this.fallOff = 0.000001;
  76. /**
  77. * The base color of the SSAO post-process
  78. * The final result is "base + ssao" between [0, 1]
  79. * @type {number}
  80. */
  81. this.base = 0.5;
  82. this._firstUpdate = true;
  83. this._scene = scene;
  84. // Set up assets
  85. this._createRandomTexture();
  86. this._depthTexture = scene.enableDepthRenderer().getDepthMap(); // Force depth renderer "on"
  87. var ssaoRatio = ratio.ssaoRatio || ratio;
  88. var combineRatio = ratio.combineRatio || ratio;
  89. this._ratio = {
  90. ssaoRatio: ssaoRatio,
  91. combineRatio: combineRatio
  92. };
  93. this._originalColorPostProcess = new BABYLON.PassPostProcess("SSAOOriginalSceneColor", combineRatio, null, BABYLON.Texture.BILINEAR_SAMPLINGMODE, scene.getEngine(), false);
  94. this._createSSAOPostProcess(ssaoRatio);
  95. this._createBlurPostProcess(ssaoRatio);
  96. this._createSSAOCombinePostProcess(combineRatio);
  97. // Set up pipeline
  98. this.addEffect(new BABYLON.PostProcessRenderEffect(scene.getEngine(), this.SSAOOriginalSceneColorEffect, function () { return _this._originalColorPostProcess; }, true));
  99. this.addEffect(new BABYLON.PostProcessRenderEffect(scene.getEngine(), this.SSAORenderEffect, function () { return _this._ssaoPostProcess; }, true));
  100. this.addEffect(new BABYLON.PostProcessRenderEffect(scene.getEngine(), this.SSAOBlurHRenderEffect, function () { return _this._blurHPostProcess; }, true));
  101. this.addEffect(new BABYLON.PostProcessRenderEffect(scene.getEngine(), this.SSAOBlurVRenderEffect, function () { return _this._blurVPostProcess; }, true));
  102. this.addEffect(new BABYLON.PostProcessRenderEffect(scene.getEngine(), this.SSAOCombineRenderEffect, function () { return _this._ssaoCombinePostProcess; }, true));
  103. // Finish
  104. scene.postProcessRenderPipelineManager.addPipeline(this);
  105. if (cameras)
  106. scene.postProcessRenderPipelineManager.attachCamerasToRenderPipeline(name, cameras);
  107. }
  108. // Public Methods
  109. /**
  110. * Returns the horizontal blur PostProcess
  111. * @return {BABYLON.BlurPostProcess} The horizontal blur post-process
  112. */
  113. SSAORenderingPipeline.prototype.getBlurHPostProcess = function () {
  114. BABYLON.Tools.Error("SSAORenderinPipeline.getBlurHPostProcess() is deprecated, no more blur post-process exists");
  115. return null;
  116. };
  117. /**
  118. * Returns the vertical blur PostProcess
  119. * @return {BABYLON.BlurPostProcess} The vertical blur post-process
  120. */
  121. SSAORenderingPipeline.prototype.getBlurVPostProcess = function () {
  122. BABYLON.Tools.Error("SSAORenderinPipeline.getBlurVPostProcess() is deprecated, no more blur post-process exists");
  123. return null;
  124. };
  125. /**
  126. * Removes the internal pipeline assets and detatches the pipeline from the scene cameras
  127. */
  128. SSAORenderingPipeline.prototype.dispose = function (disableDepthRender) {
  129. if (disableDepthRender === void 0) { disableDepthRender = false; }
  130. for (var i = 0; i < this._scene.cameras.length; i++) {
  131. var camera = this._scene.cameras[i];
  132. this._originalColorPostProcess.dispose(camera);
  133. this._ssaoPostProcess.dispose(camera);
  134. this._blurHPostProcess.dispose(camera);
  135. this._blurVPostProcess.dispose(camera);
  136. this._ssaoCombinePostProcess.dispose(camera);
  137. }
  138. this._randomTexture.dispose();
  139. if (disableDepthRender)
  140. this._scene.disableDepthRenderer();
  141. this._scene.postProcessRenderPipelineManager.detachCamerasFromRenderPipeline(this._name, this._scene.cameras);
  142. };
  143. // Private Methods
  144. SSAORenderingPipeline.prototype._createBlurPostProcess = function (ratio) {
  145. var _this = this;
  146. /*
  147. var samplerOffsets = [
  148. -8.0, -6.0, -4.0, -2.0,
  149. 0.0,
  150. 2.0, 4.0, 6.0, 8.0
  151. ];
  152. */
  153. var samples = 16;
  154. var samplerOffsets = [];
  155. for (var i = -8; i < 8; i++) {
  156. samplerOffsets.push(i * 2);
  157. }
  158. this._blurHPostProcess = new BABYLON.PostProcess("BlurH", "ssao", ["outSize", "samplerOffsets"], ["depthSampler"], ratio, null, BABYLON.Texture.TRILINEAR_SAMPLINGMODE, this._scene.getEngine(), false, "#define BILATERAL_BLUR\n#define BILATERAL_BLUR_H\n#define SAMPLES 16");
  159. this._blurHPostProcess.onApply = function (effect) {
  160. effect.setFloat("outSize", _this._ssaoCombinePostProcess.width);
  161. effect.setTexture("depthSampler", _this._depthTexture);
  162. if (_this._firstUpdate) {
  163. effect.setArray("samplerOffsets", samplerOffsets);
  164. }
  165. };
  166. this._blurVPostProcess = new BABYLON.PostProcess("BlurV", "ssao", ["outSize", "samplerOffsets"], ["depthSampler"], ratio, null, BABYLON.Texture.TRILINEAR_SAMPLINGMODE, this._scene.getEngine(), false, "#define BILATERAL_BLUR\n#define SAMPLES 16");
  167. this._blurVPostProcess.onApply = function (effect) {
  168. effect.setFloat("outSize", _this._ssaoCombinePostProcess.height);
  169. effect.setTexture("depthSampler", _this._depthTexture);
  170. if (_this._firstUpdate) {
  171. effect.setArray("samplerOffsets", samplerOffsets);
  172. _this._firstUpdate = false;
  173. }
  174. };
  175. };
  176. SSAORenderingPipeline.prototype._createSSAOPostProcess = function (ratio) {
  177. var _this = this;
  178. var numSamples = 16;
  179. var sampleSphere = [
  180. 0.5381, 0.1856, -0.4319,
  181. 0.1379, 0.2486, 0.4430,
  182. 0.3371, 0.5679, -0.0057,
  183. -0.6999, -0.0451, -0.0019,
  184. 0.0689, -0.1598, -0.8547,
  185. 0.0560, 0.0069, -0.1843,
  186. -0.0146, 0.1402, 0.0762,
  187. 0.0100, -0.1924, -0.0344,
  188. -0.3577, -0.5301, -0.4358,
  189. -0.3169, 0.1063, 0.0158,
  190. 0.0103, -0.5869, 0.0046,
  191. -0.0897, -0.4940, 0.3287,
  192. 0.7119, -0.0154, -0.0918,
  193. -0.0533, 0.0596, -0.5411,
  194. 0.0352, -0.0631, 0.5460,
  195. -0.4776, 0.2847, -0.0271
  196. ];
  197. var samplesFactor = 1.0 / numSamples;
  198. this._ssaoPostProcess = new BABYLON.PostProcess("ssao", "ssao", [
  199. "sampleSphere", "samplesFactor", "randTextureTiles", "totalStrength", "radius",
  200. "area", "fallOff", "base", "range", "viewport"
  201. ], ["randomSampler"], ratio, null, BABYLON.Texture.BILINEAR_SAMPLINGMODE, this._scene.getEngine(), false, "#define SAMPLES " + numSamples + "\n#define SSAO");
  202. var viewport = new BABYLON.Vector2(0, 0);
  203. this._ssaoPostProcess.onApply = function (effect) {
  204. if (_this._firstUpdate) {
  205. effect.setArray3("sampleSphere", sampleSphere);
  206. effect.setFloat("samplesFactor", samplesFactor);
  207. effect.setFloat("randTextureTiles", 4.0);
  208. }
  209. effect.setFloat("totalStrength", _this.totalStrength);
  210. effect.setFloat("radius", _this.radius);
  211. effect.setFloat("area", _this.area);
  212. effect.setFloat("fallOff", _this.fallOff);
  213. effect.setFloat("base", _this.base);
  214. effect.setTexture("textureSampler", _this._depthTexture);
  215. effect.setTexture("randomSampler", _this._randomTexture);
  216. };
  217. };
  218. SSAORenderingPipeline.prototype._createSSAOCombinePostProcess = function (ratio) {
  219. var _this = this;
  220. this._ssaoCombinePostProcess = new BABYLON.PostProcess("ssaoCombine", "ssaoCombine", [], ["originalColor"], ratio, null, BABYLON.Texture.BILINEAR_SAMPLINGMODE, this._scene.getEngine(), false);
  221. this._ssaoCombinePostProcess.onApply = function (effect) {
  222. effect.setTextureFromPostProcess("originalColor", _this._originalColorPostProcess);
  223. };
  224. };
  225. SSAORenderingPipeline.prototype._createRandomTexture = function () {
  226. var size = 512;
  227. this._randomTexture = new BABYLON.DynamicTexture("SSAORandomTexture", size, this._scene, false, BABYLON.Texture.TRILINEAR_SAMPLINGMODE);
  228. this._randomTexture.wrapU = BABYLON.Texture.WRAP_ADDRESSMODE;
  229. this._randomTexture.wrapV = BABYLON.Texture.WRAP_ADDRESSMODE;
  230. var context = this._randomTexture.getContext();
  231. var rand = function (min, max) {
  232. return Math.random() * (max - min) + min;
  233. };
  234. var randVector = BABYLON.Vector3.Zero();
  235. for (var x = 0; x < size; x++) {
  236. for (var y = 0; y < size; y++) {
  237. randVector.x = Math.floor(rand(-1.0, 1.0) * 255);
  238. randVector.y = Math.floor(rand(-1.0, 1.0) * 255);
  239. randVector.z = Math.floor(rand(-1.0, 1.0) * 255);
  240. context.fillStyle = 'rgb(' + randVector.x + ', ' + randVector.y + ', ' + randVector.z + ')';
  241. context.fillRect(x, y, 1, 1);
  242. }
  243. }
  244. this._randomTexture.update(false);
  245. };
  246. __decorate([
  247. BABYLON.serialize()
  248. ], SSAORenderingPipeline.prototype, "totalStrength", void 0);
  249. __decorate([
  250. BABYLON.serialize()
  251. ], SSAORenderingPipeline.prototype, "radius", void 0);
  252. __decorate([
  253. BABYLON.serialize()
  254. ], SSAORenderingPipeline.prototype, "area", void 0);
  255. __decorate([
  256. BABYLON.serialize()
  257. ], SSAORenderingPipeline.prototype, "fallOff", void 0);
  258. __decorate([
  259. BABYLON.serialize()
  260. ], SSAORenderingPipeline.prototype, "base", void 0);
  261. __decorate([
  262. BABYLON.serialize()
  263. ], SSAORenderingPipeline.prototype, "_ratio", void 0);
  264. return SSAORenderingPipeline;
  265. })(BABYLON.PostProcessRenderPipeline);
  266. BABYLON.SSAORenderingPipeline = SSAORenderingPipeline;
  267. })(BABYLON || (BABYLON = {}));