imageProcessingPostProcess.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425
  1. import { __decorate } from "../tslib.es6.js";
  2. import { serialize } from "../Misc/decorators.js";
  3. import { ImageProcessingConfiguration } from "../Materials/imageProcessingConfiguration.js";
  4. import { PostProcess } from "./postProcess.js";
  5. import { EngineStore } from "../Engines/engineStore.js";
  6. import "../Shaders/imageProcessing.fragment.js";
  7. import "../Shaders/postprocess.vertex.js";
  8. /**
  9. * ImageProcessingPostProcess
  10. * @see https://doc.babylonjs.com/features/featuresDeepDive/postProcesses/usePostProcesses#imageprocessing
  11. */
  12. export class ImageProcessingPostProcess extends PostProcess {
  13. /**
  14. * Gets the image processing configuration used either in this material.
  15. */
  16. get imageProcessingConfiguration() {
  17. return this._imageProcessingConfiguration;
  18. }
  19. /**
  20. * Sets the Default image processing configuration used either in the this material.
  21. *
  22. * If sets to null, the scene one is in use.
  23. */
  24. set imageProcessingConfiguration(value) {
  25. // We are almost sure it is applied by post process as
  26. // We are in the post process :-)
  27. value.applyByPostProcess = true;
  28. this._attachImageProcessingConfiguration(value);
  29. }
  30. /**
  31. * Attaches a new image processing configuration to the PBR Material.
  32. * @param configuration
  33. * @param doNotBuild
  34. */
  35. _attachImageProcessingConfiguration(configuration, doNotBuild = false) {
  36. if (configuration === this._imageProcessingConfiguration) {
  37. return;
  38. }
  39. // Detaches observer.
  40. if (this._imageProcessingConfiguration && this._imageProcessingObserver) {
  41. this._imageProcessingConfiguration.onUpdateParameters.remove(this._imageProcessingObserver);
  42. }
  43. // Pick the scene configuration if needed.
  44. if (!configuration) {
  45. let scene = null;
  46. const engine = this.getEngine();
  47. const camera = this.getCamera();
  48. if (camera) {
  49. scene = camera.getScene();
  50. }
  51. else if (engine && engine.scenes) {
  52. const scenes = engine.scenes;
  53. scene = scenes[scenes.length - 1];
  54. }
  55. else {
  56. scene = EngineStore.LastCreatedScene;
  57. }
  58. if (scene) {
  59. this._imageProcessingConfiguration = scene.imageProcessingConfiguration;
  60. }
  61. else {
  62. this._imageProcessingConfiguration = new ImageProcessingConfiguration();
  63. }
  64. }
  65. else {
  66. this._imageProcessingConfiguration = configuration;
  67. }
  68. // Attaches observer.
  69. if (this._imageProcessingConfiguration) {
  70. this._imageProcessingObserver = this._imageProcessingConfiguration.onUpdateParameters.add(() => {
  71. this._updateParameters();
  72. });
  73. }
  74. // Ensure the effect will be rebuilt.
  75. if (!doNotBuild) {
  76. this._updateParameters();
  77. }
  78. }
  79. /**
  80. * If the post process is supported.
  81. */
  82. get isSupported() {
  83. const effect = this.getEffect();
  84. return !effect || effect.isSupported;
  85. }
  86. /**
  87. * Gets Color curves setup used in the effect if colorCurvesEnabled is set to true .
  88. */
  89. get colorCurves() {
  90. return this.imageProcessingConfiguration.colorCurves;
  91. }
  92. /**
  93. * Sets Color curves setup used in the effect if colorCurvesEnabled is set to true .
  94. */
  95. set colorCurves(value) {
  96. this.imageProcessingConfiguration.colorCurves = value;
  97. }
  98. /**
  99. * Gets whether the color curves effect is enabled.
  100. */
  101. get colorCurvesEnabled() {
  102. return this.imageProcessingConfiguration.colorCurvesEnabled;
  103. }
  104. /**
  105. * Sets whether the color curves effect is enabled.
  106. */
  107. set colorCurvesEnabled(value) {
  108. this.imageProcessingConfiguration.colorCurvesEnabled = value;
  109. }
  110. /**
  111. * Gets Color grading LUT texture used in the effect if colorGradingEnabled is set to true.
  112. */
  113. get colorGradingTexture() {
  114. return this.imageProcessingConfiguration.colorGradingTexture;
  115. }
  116. /**
  117. * Sets Color grading LUT texture used in the effect if colorGradingEnabled is set to true.
  118. */
  119. set colorGradingTexture(value) {
  120. this.imageProcessingConfiguration.colorGradingTexture = value;
  121. }
  122. /**
  123. * Gets whether the color grading effect is enabled.
  124. */
  125. get colorGradingEnabled() {
  126. return this.imageProcessingConfiguration.colorGradingEnabled;
  127. }
  128. /**
  129. * Gets whether the color grading effect is enabled.
  130. */
  131. set colorGradingEnabled(value) {
  132. this.imageProcessingConfiguration.colorGradingEnabled = value;
  133. }
  134. /**
  135. * Gets exposure used in the effect.
  136. */
  137. get exposure() {
  138. return this.imageProcessingConfiguration.exposure;
  139. }
  140. /**
  141. * Sets exposure used in the effect.
  142. */
  143. set exposure(value) {
  144. this.imageProcessingConfiguration.exposure = value;
  145. }
  146. /**
  147. * Gets whether tonemapping is enabled or not.
  148. */
  149. get toneMappingEnabled() {
  150. return this._imageProcessingConfiguration.toneMappingEnabled;
  151. }
  152. /**
  153. * Sets whether tonemapping is enabled or not
  154. */
  155. set toneMappingEnabled(value) {
  156. this._imageProcessingConfiguration.toneMappingEnabled = value;
  157. }
  158. /**
  159. * Gets the type of tone mapping effect.
  160. */
  161. get toneMappingType() {
  162. return this._imageProcessingConfiguration.toneMappingType;
  163. }
  164. /**
  165. * Sets the type of tone mapping effect.
  166. */
  167. set toneMappingType(value) {
  168. this._imageProcessingConfiguration.toneMappingType = value;
  169. }
  170. /**
  171. * Gets contrast used in the effect.
  172. */
  173. get contrast() {
  174. return this.imageProcessingConfiguration.contrast;
  175. }
  176. /**
  177. * Sets contrast used in the effect.
  178. */
  179. set contrast(value) {
  180. this.imageProcessingConfiguration.contrast = value;
  181. }
  182. /**
  183. * Gets Vignette stretch size.
  184. */
  185. get vignetteStretch() {
  186. return this.imageProcessingConfiguration.vignetteStretch;
  187. }
  188. /**
  189. * Sets Vignette stretch size.
  190. */
  191. set vignetteStretch(value) {
  192. this.imageProcessingConfiguration.vignetteStretch = value;
  193. }
  194. /**
  195. * Gets Vignette center X Offset.
  196. * @deprecated use vignetteCenterX instead
  197. */
  198. get vignetteCentreX() {
  199. return this.imageProcessingConfiguration.vignetteCenterX;
  200. }
  201. /**
  202. * Sets Vignette center X Offset.
  203. * @deprecated use vignetteCenterX instead
  204. */
  205. set vignetteCentreX(value) {
  206. this.imageProcessingConfiguration.vignetteCenterX = value;
  207. }
  208. /**
  209. * Gets Vignette center Y Offset.
  210. * @deprecated use vignetteCenterY instead
  211. */
  212. get vignetteCentreY() {
  213. return this.imageProcessingConfiguration.vignetteCenterY;
  214. }
  215. /**
  216. * Sets Vignette center Y Offset.
  217. * @deprecated use vignetteCenterY instead
  218. */
  219. set vignetteCentreY(value) {
  220. this.imageProcessingConfiguration.vignetteCenterY = value;
  221. }
  222. /**
  223. * Vignette center Y Offset.
  224. */
  225. get vignetteCenterY() {
  226. return this.imageProcessingConfiguration.vignetteCenterY;
  227. }
  228. set vignetteCenterY(value) {
  229. this.imageProcessingConfiguration.vignetteCenterY = value;
  230. }
  231. /**
  232. * Vignette center X Offset.
  233. */
  234. get vignetteCenterX() {
  235. return this.imageProcessingConfiguration.vignetteCenterX;
  236. }
  237. set vignetteCenterX(value) {
  238. this.imageProcessingConfiguration.vignetteCenterX = value;
  239. }
  240. /**
  241. * Gets Vignette weight or intensity of the vignette effect.
  242. */
  243. get vignetteWeight() {
  244. return this.imageProcessingConfiguration.vignetteWeight;
  245. }
  246. /**
  247. * Sets Vignette weight or intensity of the vignette effect.
  248. */
  249. set vignetteWeight(value) {
  250. this.imageProcessingConfiguration.vignetteWeight = value;
  251. }
  252. /**
  253. * Gets Color of the vignette applied on the screen through the chosen blend mode (vignetteBlendMode)
  254. * if vignetteEnabled is set to true.
  255. */
  256. get vignetteColor() {
  257. return this.imageProcessingConfiguration.vignetteColor;
  258. }
  259. /**
  260. * Sets Color of the vignette applied on the screen through the chosen blend mode (vignetteBlendMode)
  261. * if vignetteEnabled is set to true.
  262. */
  263. set vignetteColor(value) {
  264. this.imageProcessingConfiguration.vignetteColor = value;
  265. }
  266. /**
  267. * Gets Camera field of view used by the Vignette effect.
  268. */
  269. get vignetteCameraFov() {
  270. return this.imageProcessingConfiguration.vignetteCameraFov;
  271. }
  272. /**
  273. * Sets Camera field of view used by the Vignette effect.
  274. */
  275. set vignetteCameraFov(value) {
  276. this.imageProcessingConfiguration.vignetteCameraFov = value;
  277. }
  278. /**
  279. * Gets the vignette blend mode allowing different kind of effect.
  280. */
  281. get vignetteBlendMode() {
  282. return this.imageProcessingConfiguration.vignetteBlendMode;
  283. }
  284. /**
  285. * Sets the vignette blend mode allowing different kind of effect.
  286. */
  287. set vignetteBlendMode(value) {
  288. this.imageProcessingConfiguration.vignetteBlendMode = value;
  289. }
  290. /**
  291. * Gets whether the vignette effect is enabled.
  292. */
  293. get vignetteEnabled() {
  294. return this.imageProcessingConfiguration.vignetteEnabled;
  295. }
  296. /**
  297. * Sets whether the vignette effect is enabled.
  298. */
  299. set vignetteEnabled(value) {
  300. this.imageProcessingConfiguration.vignetteEnabled = value;
  301. }
  302. /**
  303. * Gets intensity of the dithering effect.
  304. */
  305. get ditheringIntensity() {
  306. return this.imageProcessingConfiguration.ditheringIntensity;
  307. }
  308. /**
  309. * Sets intensity of the dithering effect.
  310. */
  311. set ditheringIntensity(value) {
  312. this.imageProcessingConfiguration.ditheringIntensity = value;
  313. }
  314. /**
  315. * Gets whether the dithering effect is enabled.
  316. */
  317. get ditheringEnabled() {
  318. return this.imageProcessingConfiguration.ditheringEnabled;
  319. }
  320. /**
  321. * Sets whether the dithering effect is enabled.
  322. */
  323. set ditheringEnabled(value) {
  324. this.imageProcessingConfiguration.ditheringEnabled = value;
  325. }
  326. /**
  327. * Gets whether the input of the processing is in Gamma or Linear Space.
  328. */
  329. get fromLinearSpace() {
  330. return this._fromLinearSpace;
  331. }
  332. /**
  333. * Sets whether the input of the processing is in Gamma or Linear Space.
  334. */
  335. set fromLinearSpace(value) {
  336. if (this._fromLinearSpace === value) {
  337. return;
  338. }
  339. this._fromLinearSpace = value;
  340. this._updateParameters();
  341. }
  342. constructor(name, options, camera = null, samplingMode, engine, reusable, textureType = 0, imageProcessingConfiguration) {
  343. super(name, "imageProcessing", [], [], options, camera, samplingMode, engine, reusable, null, textureType, "postprocess", null, true);
  344. this._fromLinearSpace = true;
  345. /**
  346. * Defines cache preventing GC.
  347. */
  348. this._defines = {
  349. IMAGEPROCESSING: false,
  350. VIGNETTE: false,
  351. VIGNETTEBLENDMODEMULTIPLY: false,
  352. VIGNETTEBLENDMODEOPAQUE: false,
  353. TONEMAPPING: false,
  354. TONEMAPPING_ACES: false,
  355. CONTRAST: false,
  356. COLORCURVES: false,
  357. COLORGRADING: false,
  358. COLORGRADING3D: false,
  359. FROMLINEARSPACE: false,
  360. SAMPLER3DGREENDEPTH: false,
  361. SAMPLER3DBGRMAP: false,
  362. DITHER: false,
  363. IMAGEPROCESSINGPOSTPROCESS: false,
  364. EXPOSURE: false,
  365. SKIPFINALCOLORCLAMP: false,
  366. };
  367. // Setup the configuration as forced by the constructor. This would then not force the
  368. // scene materials output in linear space and let untouched the default forward pass.
  369. if (imageProcessingConfiguration) {
  370. imageProcessingConfiguration.applyByPostProcess = true;
  371. this._attachImageProcessingConfiguration(imageProcessingConfiguration, true);
  372. // This will cause the shader to be compiled
  373. this._updateParameters();
  374. }
  375. // Setup the default processing configuration to the scene.
  376. else {
  377. this._attachImageProcessingConfiguration(null, true);
  378. this.imageProcessingConfiguration.applyByPostProcess = true;
  379. }
  380. this.onApply = (effect) => {
  381. this.imageProcessingConfiguration.bind(effect, this.aspectRatio);
  382. };
  383. }
  384. /**
  385. * "ImageProcessingPostProcess"
  386. * @returns "ImageProcessingPostProcess"
  387. */
  388. getClassName() {
  389. return "ImageProcessingPostProcess";
  390. }
  391. /**
  392. * @internal
  393. */
  394. _updateParameters() {
  395. this._defines.FROMLINEARSPACE = this._fromLinearSpace;
  396. this.imageProcessingConfiguration.prepareDefines(this._defines, true);
  397. let defines = "";
  398. for (const define in this._defines) {
  399. if (this._defines[define]) {
  400. defines += `#define ${define};\n`;
  401. }
  402. }
  403. const samplers = ["textureSampler"];
  404. const uniforms = ["scale"];
  405. if (ImageProcessingConfiguration) {
  406. ImageProcessingConfiguration.PrepareSamplers(samplers, this._defines);
  407. ImageProcessingConfiguration.PrepareUniforms(uniforms, this._defines);
  408. }
  409. this.updateEffect(defines, uniforms, samplers);
  410. }
  411. dispose(camera) {
  412. super.dispose(camera);
  413. if (this._imageProcessingConfiguration && this._imageProcessingObserver) {
  414. this._imageProcessingConfiguration.onUpdateParameters.remove(this._imageProcessingObserver);
  415. }
  416. if (this._imageProcessingConfiguration) {
  417. this.imageProcessingConfiguration.applyByPostProcess = false;
  418. }
  419. }
  420. }
  421. __decorate([
  422. serialize()
  423. ], ImageProcessingPostProcess.prototype, "_fromLinearSpace", void 0);
  424. //# sourceMappingURL=imageProcessingPostProcess.js.map