babylon.ssaoRenderingPipeline.ts 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250
  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. */
  7. public SSAOOriginalSceneColorEffect: string = "SSAOOriginalSceneColorEffect";
  8. /**
  9. * The SSAO PostProcess id in the pipeline
  10. */
  11. public SSAORenderEffect: string = "SSAORenderEffect";
  12. /**
  13. * The horizontal blur PostProcess id in the pipeline
  14. */
  15. public SSAOBlurHRenderEffect: string = "SSAOBlurHRenderEffect";
  16. /**
  17. * The vertical blur PostProcess id in the pipeline
  18. */
  19. public SSAOBlurVRenderEffect: string = "SSAOBlurVRenderEffect";
  20. /**
  21. * The PostProcess id in the pipeline that combines the SSAO-Blur output with the original scene color (SSAOOriginalSceneColorEffect)
  22. */
  23. public SSAOCombineRenderEffect: string = "SSAOCombineRenderEffect";
  24. /**
  25. * The output strength of the SSAO post-process. Default value is 1.0.
  26. */
  27. @serialize()
  28. public totalStrength: number = 1.0;
  29. /**
  30. * The radius around the analyzed pixel used by the SSAO post-process. Default value is 0.0006
  31. */
  32. @serialize()
  33. public radius: number = 0.0001;
  34. /**
  35. * Related to fallOff, used to interpolate SSAO samples (first interpolate function input) based on the occlusion difference of each pixel
  36. * Must not be equal to fallOff and superior to fallOff.
  37. * Default value is 0.975
  38. */
  39. @serialize()
  40. public area: number = 0.0075;
  41. /**
  42. * Related to area, used to interpolate SSAO samples (second interpolate function input) based on the occlusion difference of each pixel
  43. * Must not be equal to area and inferior to area.
  44. * Default value is 0.0
  45. */
  46. @serialize()
  47. public fallOff: number = 0.000001;
  48. /**
  49. * The base color of the SSAO post-process
  50. * The final result is "base + ssao" between [0, 1]
  51. */
  52. @serialize()
  53. public base: number = 0.5;
  54. private _scene: Scene;
  55. private _depthTexture: RenderTargetTexture;
  56. private _randomTexture: DynamicTexture;
  57. private _originalColorPostProcess: PassPostProcess;
  58. private _ssaoPostProcess: PostProcess;
  59. private _blurHPostProcess: BlurPostProcess;
  60. private _blurVPostProcess: BlurPostProcess;
  61. private _ssaoCombinePostProcess: PostProcess;
  62. private _firstUpdate: boolean = true;
  63. /**
  64. * @constructor
  65. * @param {string} name - The rendering pipeline name
  66. * @param {BABYLON.Scene} scene - The scene linked to this pipeline
  67. * @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 }
  68. * @param {BABYLON.Camera[]} cameras - The array of cameras that the rendering pipeline will be attached to
  69. */
  70. constructor(name: string, scene: Scene, ratio: any, cameras?: Camera[]) {
  71. super(scene.getEngine(), name);
  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 PassPostProcess("SSAOOriginalSceneColor", combineRatio, null, Texture.BILINEAR_SAMPLINGMODE, scene.getEngine(), false);
  79. this._createSSAOPostProcess(ssaoRatio);
  80. this._createBlurPostProcess(ssaoRatio);
  81. this._createSSAOCombinePostProcess(combineRatio);
  82. // Set up pipeline
  83. this.addEffect(new PostProcessRenderEffect(scene.getEngine(), this.SSAOOriginalSceneColorEffect, () => { return this._originalColorPostProcess; }, true));
  84. this.addEffect(new PostProcessRenderEffect(scene.getEngine(), this.SSAORenderEffect, () => { return this._ssaoPostProcess; }, true));
  85. this.addEffect(new PostProcessRenderEffect(scene.getEngine(), this.SSAOBlurHRenderEffect, () => { return this._blurHPostProcess; }, true));
  86. this.addEffect(new PostProcessRenderEffect(scene.getEngine(), this.SSAOBlurVRenderEffect, () => { return this._blurVPostProcess; }, true));
  87. this.addEffect(new PostProcessRenderEffect(scene.getEngine(), this.SSAOCombineRenderEffect, () => { return this._ssaoCombinePostProcess; }, true));
  88. // Finish
  89. scene.postProcessRenderPipelineManager.addPipeline(this);
  90. if (cameras)
  91. scene.postProcessRenderPipelineManager.attachCamerasToRenderPipeline(name, cameras);
  92. }
  93. // Public Methods
  94. /**
  95. * Removes the internal pipeline assets and detatches the pipeline from the scene cameras
  96. */
  97. public dispose(disableDepthRender: boolean = false): void {
  98. for (var i = 0; i < this._scene.cameras.length; i++) {
  99. var camera = this._scene.cameras[i];
  100. this._originalColorPostProcess.dispose(camera);
  101. this._ssaoPostProcess.dispose(camera);
  102. this._blurHPostProcess.dispose(camera);
  103. this._blurVPostProcess.dispose(camera);
  104. this._ssaoCombinePostProcess.dispose(camera);
  105. }
  106. this._randomTexture.dispose();
  107. if (disableDepthRender)
  108. this._scene.disableDepthRenderer();
  109. this._scene.postProcessRenderPipelineManager.detachCamerasFromRenderPipeline(this._name, this._scene.cameras);
  110. super.dispose();
  111. }
  112. // Private Methods
  113. private _createBlurPostProcess(ratio: number): void {
  114. var size = 16;
  115. this._blurHPostProcess = new BlurPostProcess("BlurH", new Vector2(1, 0), size, ratio, null, Texture.BILINEAR_SAMPLINGMODE, this._scene.getEngine(), false, Engine.TEXTURETYPE_UNSIGNED_INT);
  116. this._blurVPostProcess = new BlurPostProcess("BlurV", new Vector2(0, 1), size, ratio, null, Texture.BILINEAR_SAMPLINGMODE, this._scene.getEngine(), false, Engine.TEXTURETYPE_UNSIGNED_INT);
  117. this._blurHPostProcess.onActivateObservable.add(() => {
  118. let dw = this._blurHPostProcess.width / this._scene.getEngine().getRenderWidth();
  119. this._blurHPostProcess.kernel = size * dw;
  120. });
  121. this._blurVPostProcess.onActivateObservable.add(() => {
  122. let dw = this._blurVPostProcess.height / this._scene.getEngine().getRenderHeight();
  123. this._blurVPostProcess.kernel = size * dw;
  124. });
  125. }
  126. public _rebuild() {
  127. this._firstUpdate = true;
  128. super._rebuild();
  129. }
  130. private _createSSAOPostProcess(ratio: number): void {
  131. var numSamples = 16;
  132. var sampleSphere = [
  133. 0.5381, 0.1856, -0.4319,
  134. 0.1379, 0.2486, 0.4430,
  135. 0.3371, 0.5679, -0.0057,
  136. -0.6999, -0.0451, -0.0019,
  137. 0.0689, -0.1598, -0.8547,
  138. 0.0560, 0.0069, -0.1843,
  139. -0.0146, 0.1402, 0.0762,
  140. 0.0100, -0.1924, -0.0344,
  141. -0.3577, -0.5301, -0.4358,
  142. -0.3169, 0.1063, 0.0158,
  143. 0.0103, -0.5869, 0.0046,
  144. -0.0897, -0.4940, 0.3287,
  145. 0.7119, -0.0154, -0.0918,
  146. -0.0533, 0.0596, -0.5411,
  147. 0.0352, -0.0631, 0.5460,
  148. -0.4776, 0.2847, -0.0271
  149. ];
  150. var samplesFactor = 1.0 / numSamples;
  151. this._ssaoPostProcess = new PostProcess("ssao", "ssao",
  152. [
  153. "sampleSphere", "samplesFactor", "randTextureTiles", "totalStrength", "radius",
  154. "area", "fallOff", "base", "range", "viewport"
  155. ],
  156. ["randomSampler"],
  157. ratio, null, Texture.BILINEAR_SAMPLINGMODE,
  158. this._scene.getEngine(), false,
  159. "#define SAMPLES " + numSamples + "\n#define SSAO");
  160. this._ssaoPostProcess.onApply = (effect: Effect) => {
  161. if (this._firstUpdate) {
  162. effect.setArray3("sampleSphere", sampleSphere);
  163. effect.setFloat("samplesFactor", samplesFactor);
  164. effect.setFloat("randTextureTiles", 4.0);
  165. }
  166. effect.setFloat("totalStrength", this.totalStrength);
  167. effect.setFloat("radius", this.radius);
  168. effect.setFloat("area", this.area);
  169. effect.setFloat("fallOff", this.fallOff);
  170. effect.setFloat("base", this.base);
  171. effect.setTexture("textureSampler", this._depthTexture);
  172. effect.setTexture("randomSampler", this._randomTexture);
  173. };
  174. }
  175. private _createSSAOCombinePostProcess(ratio: number): void {
  176. this._ssaoCombinePostProcess = new PostProcess("ssaoCombine", "ssaoCombine", [], ["originalColor", "viewport"],
  177. ratio, null, Texture.BILINEAR_SAMPLINGMODE,
  178. this._scene.getEngine(), false);
  179. this._ssaoCombinePostProcess.onApply = (effect: Effect) => {
  180. effect.setVector4("viewport", Tmp.Vector4[0].copyFromFloats(0, 0, 1.0, 1.0));
  181. effect.setTextureFromPostProcess("originalColor", this._originalColorPostProcess);
  182. };
  183. }
  184. private _createRandomTexture(): void {
  185. var size = 512;
  186. this._randomTexture = new DynamicTexture("SSAORandomTexture", size, this._scene, false, Texture.TRILINEAR_SAMPLINGMODE);
  187. this._randomTexture.wrapU = Texture.WRAP_ADDRESSMODE;
  188. this._randomTexture.wrapV = Texture.WRAP_ADDRESSMODE;
  189. var context = this._randomTexture.getContext();
  190. var rand = (min: number, max: number) => {
  191. return Math.random() * (max - min) + min;
  192. }
  193. var randVector = Vector3.Zero();
  194. for (var x = 0; x < size; x++) {
  195. for (var y = 0; y < size; y++) {
  196. randVector.x = Math.floor(rand(-1.0, 1.0) * 255);
  197. randVector.y = Math.floor(rand(-1.0, 1.0) * 255);
  198. randVector.z = Math.floor(rand(-1.0, 1.0) * 255);
  199. context.fillStyle = 'rgb(' + randVector.x + ', ' + randVector.y + ', ' + randVector.z + ')';
  200. context.fillRect(x, y, 1, 1);
  201. }
  202. }
  203. this._randomTexture.update(false);
  204. }
  205. }
  206. }