babylon.ssaoRenderingPipeline.ts 9.2 KB

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