babylon.postProcess.ts 11 KB

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