babylon.postProcess.ts 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262
  1. module BABYLON {
  2. export type PostProcessOptions = { width: number, height: number };
  3. export class PostProcess
  4. {
  5. public width = -1;
  6. public height = -1;
  7. public renderTargetSamplingMode: number;
  8. public clearColor: Color4;
  9. /*
  10. Enable Pixel Perfect mode where texture is not scaled to be power of 2.
  11. Can only be used on a single postprocess or on the last one of a chain.
  12. */
  13. public enablePixelPerfectMode = false;
  14. private _camera: Camera;
  15. private _scene: Scene;
  16. private _engine: Engine;
  17. private _renderRatio: number | PostProcessOptions;
  18. private _reusable = false;
  19. private _textureType: number;
  20. public _textures = new SmartArray<WebGLTexture>(2);
  21. public _currentRenderTextureInd = 0;
  22. private _effect: Effect;
  23. private _samplers: string[];
  24. private _fragmentUrl: string;
  25. private _parameters: string[];
  26. private _scaleRatio = new Vector2(1, 1);
  27. // Events
  28. /**
  29. * An event triggered when the postprocess is activated.
  30. * @type {BABYLON.Observable}
  31. */
  32. public onActivateObservable = new Observable<Camera>();
  33. private _onActivateObserver: Observer<Camera>;
  34. public set onActivate(callback: (camera: Camera) => void) {
  35. if (this._onActivateObserver) {
  36. this.onActivateObservable.remove(this._onActivateObserver);
  37. }
  38. this._onActivateObserver = this.onActivateObservable.add(callback);
  39. }
  40. /**
  41. * An event triggered when the postprocess changes its size.
  42. * @type {BABYLON.Observable}
  43. */
  44. public onSizeChangedObservable = new Observable<PostProcess>();
  45. private _onSizeChangedObserver: Observer<PostProcess>;
  46. public set onSizeChanged(callback: (postProcess: PostProcess) => void) {
  47. if (this._onSizeChangedObserver) {
  48. this.onSizeChangedObservable.remove(this._onSizeChangedObserver);
  49. }
  50. this._onSizeChangedObserver = this.onSizeChangedObservable.add(callback);
  51. }
  52. /**
  53. * An event triggered when the postprocess applies its effect.
  54. * @type {BABYLON.Observable}
  55. */
  56. public onApplyObservable = new Observable<Effect>();
  57. private _onApplyObserver: Observer<Effect>;
  58. public set onApply(callback: (effect: Effect) => void) {
  59. if (this._onApplyObserver) {
  60. this.onApplyObservable.remove(this._onApplyObserver);
  61. }
  62. this._onApplyObserver = this.onApplyObservable.add(callback);
  63. }
  64. /**
  65. * An event triggered before rendering the postprocess
  66. * @type {BABYLON.Observable}
  67. */
  68. public onBeforeRenderObservable = new Observable<Effect>();
  69. private _onBeforeRenderObserver: Observer<Effect>;
  70. public set onBeforeRender(callback: (effect: Effect) => void) {
  71. if (this._onBeforeRenderObserver) {
  72. this.onBeforeRenderObservable.remove(this._onBeforeRenderObserver);
  73. }
  74. this._onBeforeRenderObserver = this.onBeforeRenderObservable.add(callback);
  75. }
  76. /**
  77. * An event triggered after rendering the postprocess
  78. * @type {BABYLON.Observable}
  79. */
  80. public onAfterRenderObservable = new Observable<Effect>();
  81. private _onAfterRenderObserver: Observer<Effect>;
  82. public set onAfterRender(callback: (efect: Effect) => void) {
  83. if (this._onAfterRenderObserver) {
  84. this.onAfterRenderObservable.remove(this._onAfterRenderObserver);
  85. }
  86. this._onAfterRenderObserver = this.onAfterRenderObservable.add(callback);
  87. }
  88. constructor(public name: string, fragmentUrl: string, parameters: string[], samplers: string[], ratio: number | PostProcessOptions, camera: Camera, samplingMode: number = Texture.NEAREST_SAMPLINGMODE, engine?: Engine, reusable?: boolean, defines?: string, textureType: number = Engine.TEXTURETYPE_UNSIGNED_INT) {
  89. if (camera != null) {
  90. this._camera = camera;
  91. this._scene = camera.getScene();
  92. camera.attachPostProcess(this);
  93. this._engine = this._scene.getEngine();
  94. }
  95. else {
  96. this._engine = engine;
  97. }
  98. this._renderRatio = ratio;
  99. this.renderTargetSamplingMode = samplingMode ? samplingMode : Texture.NEAREST_SAMPLINGMODE;
  100. this._reusable = reusable || false;
  101. this._textureType = textureType;
  102. this._samplers = samplers || [];
  103. this._samplers.push("textureSampler");
  104. this._fragmentUrl = fragmentUrl;
  105. this._parameters = parameters || [];
  106. this._parameters.push("scale");
  107. this.updateEffect(defines);
  108. }
  109. public updateEffect(defines?: string) {
  110. this._effect = this._engine.createEffect({ vertex: "postprocess", fragment: this._fragmentUrl },
  111. ["position"],
  112. this._parameters,
  113. this._samplers, defines !== undefined ? defines : "");
  114. }
  115. public isReusable(): boolean {
  116. return this._reusable;
  117. }
  118. /** invalidate frameBuffer to hint the postprocess to create a depth buffer */
  119. public markTextureDirty() : void{
  120. this.width = -1;
  121. }
  122. public activate(camera: Camera, sourceTexture?: WebGLTexture): void {
  123. camera = camera || this._camera;
  124. var scene = camera.getScene();
  125. var maxSize = camera.getEngine().getCaps().maxTextureSize;
  126. var requiredWidth = ((sourceTexture ? sourceTexture._width : this._engine.getRenderingCanvas().width) * <number>this._renderRatio) | 0;
  127. var requiredHeight = ((sourceTexture ? sourceTexture._height : this._engine.getRenderingCanvas().height) * <number>this._renderRatio) | 0;
  128. var desiredWidth = (<PostProcessOptions>this._renderRatio).width || requiredWidth;
  129. var desiredHeight = (<PostProcessOptions>this._renderRatio).height || requiredHeight;
  130. if (this.renderTargetSamplingMode !== Texture.NEAREST_SAMPLINGMODE) {
  131. if (!(<PostProcessOptions>this._renderRatio).width) {
  132. desiredWidth = Tools.GetExponentOfTwo(desiredWidth, maxSize);
  133. }
  134. if (!(<PostProcessOptions>this._renderRatio).height) {
  135. desiredHeight = Tools.GetExponentOfTwo(desiredHeight, maxSize);
  136. }
  137. }
  138. if (this.width !== desiredWidth || this.height !== desiredHeight) {
  139. if (this._textures.length > 0) {
  140. for (var i = 0; i < this._textures.length; i++) {
  141. this._engine._releaseTexture(this._textures.data[i]);
  142. }
  143. this._textures.reset();
  144. }
  145. this.width = desiredWidth;
  146. this.height = desiredHeight;
  147. this._textures.push(this._engine.createRenderTargetTexture({ width: this.width, height: this.height }, { generateMipMaps: false, generateDepthBuffer: camera._postProcesses.indexOf(this) === 0, samplingMode: this.renderTargetSamplingMode, type: this._textureType }));
  148. if (this._reusable) {
  149. this._textures.push(this._engine.createRenderTargetTexture({ width: this.width, height: this.height }, { generateMipMaps: false, generateDepthBuffer: camera._postProcesses.indexOf(this) === 0, samplingMode: this.renderTargetSamplingMode, type: this._textureType }));
  150. }
  151. this.onSizeChangedObservable.notifyObservers(this);
  152. }
  153. if (this.enablePixelPerfectMode) {
  154. this._scaleRatio.copyFromFloats(requiredWidth / desiredWidth, requiredHeight / desiredHeight);
  155. this._engine.bindFramebuffer(this._textures.data[this._currentRenderTextureInd], 0, requiredWidth, requiredHeight);
  156. }
  157. else {
  158. this._scaleRatio.copyFromFloats(1, 1);
  159. this._engine.bindFramebuffer(this._textures.data[this._currentRenderTextureInd]);
  160. }
  161. this.onActivateObservable.notifyObservers(camera);
  162. // Clear
  163. if (this.clearColor) {
  164. this._engine.clear(this.clearColor, true, true);
  165. } else {
  166. this._engine.clear(scene.clearColor, scene.autoClear || scene.forceWireframe, true);
  167. }
  168. if (this._reusable) {
  169. this._currentRenderTextureInd = (this._currentRenderTextureInd + 1) % 2;
  170. }
  171. }
  172. public get isSupported(): boolean {
  173. return this._effect.isSupported;
  174. }
  175. public apply(): Effect {
  176. // Check
  177. if (!this._effect.isReady())
  178. return null;
  179. // States
  180. this._engine.enableEffect(this._effect);
  181. this._engine.setState(false);
  182. this._engine.setAlphaMode(Engine.ALPHA_DISABLE);
  183. this._engine.setDepthBuffer(false);
  184. this._engine.setDepthWrite(false);
  185. // Texture
  186. this._effect._bindTexture("textureSampler", this._textures.data[this._currentRenderTextureInd]);
  187. // Parameters
  188. this._effect.setVector2("scale", this._scaleRatio);
  189. this.onApplyObservable.notifyObservers(this._effect);
  190. return this._effect;
  191. }
  192. public dispose(camera?: Camera): void {
  193. camera = camera || this._camera;
  194. if (this._textures.length > 0) {
  195. for (var i = 0; i < this._textures.length; i++) {
  196. this._engine._releaseTexture(this._textures.data[i]);
  197. }
  198. this._textures.reset();
  199. }
  200. if (!camera) {
  201. return;
  202. }
  203. camera.detachPostProcess(this);
  204. var index = camera._postProcesses.indexOf(this);
  205. if (index === 0 && camera._postProcesses.length > 0) {
  206. this._camera._postProcesses[0].markTextureDirty();
  207. }
  208. this.onActivateObservable.clear();
  209. this.onAfterRenderObservable.clear();
  210. this.onApplyObservable.clear();
  211. this.onBeforeRenderObservable.clear();
  212. this.onSizeChangedObservable.clear();
  213. }
  214. }
  215. }