babylon.postProcess.ts 15 KB

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