babylon.postProcess.ts 13 KB

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