hdrCubeTexture.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334
  1. import { Matrix, Vector3 } from "../../Maths/math.vector.js";
  2. import { BaseTexture } from "../../Materials/Textures/baseTexture.js";
  3. import { Texture } from "../../Materials/Textures/texture.js";
  4. import { HDRTools } from "../../Misc/HighDynamicRange/hdr.js";
  5. import { CubeMapToSphericalPolynomialTools } from "../../Misc/HighDynamicRange/cubemapToSphericalPolynomial.js";
  6. import { RegisterClass } from "../../Misc/typeStore.js";
  7. import { Observable } from "../../Misc/observable.js";
  8. import { Tools } from "../../Misc/tools.js";
  9. import { ToGammaSpace } from "../../Maths/math.constants.js";
  10. import { HDRFiltering } from "../../Materials/Textures/Filtering/hdrFiltering.js";
  11. import { ToHalfFloat } from "../../Misc/textureTools.js";
  12. import "../../Engines/Extensions/engine.rawTexture.js";
  13. import "../../Materials/Textures/baseTexture.polynomial.js";
  14. /**
  15. * This represents a texture coming from an HDR input.
  16. *
  17. * The only supported format is currently panorama picture stored in RGBE format.
  18. * Example of such files can be found on Poly Haven: https://polyhaven.com/hdris
  19. */
  20. export class HDRCubeTexture extends BaseTexture {
  21. /**
  22. * Sets whether or not the texture is blocking during loading.
  23. */
  24. set isBlocking(value) {
  25. this._isBlocking = value;
  26. }
  27. /**
  28. * Gets whether or not the texture is blocking during loading.
  29. */
  30. get isBlocking() {
  31. return this._isBlocking;
  32. }
  33. /**
  34. * Sets texture matrix rotation angle around Y axis in radians.
  35. */
  36. set rotationY(value) {
  37. this._rotationY = value;
  38. this.setReflectionTextureMatrix(Matrix.RotationY(this._rotationY));
  39. }
  40. /**
  41. * Gets texture matrix rotation angle around Y axis radians.
  42. */
  43. get rotationY() {
  44. return this._rotationY;
  45. }
  46. /**
  47. * Gets or sets the size of the bounding box associated with the cube texture
  48. * When defined, the cubemap will switch to local mode
  49. * @see https://community.arm.com/graphics/b/blog/posts/reflections-based-on-local-cubemaps-in-unity
  50. * @example https://www.babylonjs-playground.com/#RNASML
  51. */
  52. set boundingBoxSize(value) {
  53. if (this._boundingBoxSize && this._boundingBoxSize.equals(value)) {
  54. return;
  55. }
  56. this._boundingBoxSize = value;
  57. const scene = this.getScene();
  58. if (scene) {
  59. scene.markAllMaterialsAsDirty(1);
  60. }
  61. }
  62. get boundingBoxSize() {
  63. return this._boundingBoxSize;
  64. }
  65. /**
  66. * Instantiates an HDRTexture from the following parameters.
  67. *
  68. * @param url The location of the HDR raw data (Panorama stored in RGBE format)
  69. * @param sceneOrEngine The scene or engine the texture will be used in
  70. * @param size The cubemap desired size (the more it increases the longer the generation will be)
  71. * @param noMipmap Forces to not generate the mipmap if true
  72. * @param generateHarmonics Specifies whether you want to extract the polynomial harmonics during the generation process
  73. * @param gammaSpace Specifies if the texture will be use in gamma or linear space (the PBR material requires those texture in linear space, but the standard material would require them in Gamma space)
  74. * @param prefilterOnLoad Prefilters HDR texture to allow use of this texture as a PBR reflection texture.
  75. * @param onLoad on success callback function
  76. * @param onError on error callback function
  77. * @param supersample Defines if texture must be supersampled (default: false)
  78. */
  79. constructor(url, sceneOrEngine, size, noMipmap = false, generateHarmonics = true, gammaSpace = false, prefilterOnLoad = false, onLoad = null, onError = null, supersample = false) {
  80. super(sceneOrEngine);
  81. this._generateHarmonics = true;
  82. this._onError = null;
  83. this._isBlocking = true;
  84. this._rotationY = 0;
  85. /**
  86. * Gets or sets the center of the bounding box associated with the cube texture
  87. * It must define where the camera used to render the texture was set
  88. */
  89. this.boundingBoxPosition = Vector3.Zero();
  90. /**
  91. * Observable triggered once the texture has been loaded.
  92. */
  93. this.onLoadObservable = new Observable();
  94. if (!url) {
  95. return;
  96. }
  97. this._coordinatesMode = Texture.CUBIC_MODE;
  98. this.name = url;
  99. this.url = url;
  100. this.hasAlpha = false;
  101. this.isCube = true;
  102. this._textureMatrix = Matrix.Identity();
  103. this._prefilterOnLoad = prefilterOnLoad;
  104. this._onLoad = () => {
  105. this.onLoadObservable.notifyObservers(this);
  106. if (onLoad) {
  107. onLoad();
  108. }
  109. };
  110. this._onError = onError;
  111. this.gammaSpace = gammaSpace;
  112. this._noMipmap = noMipmap;
  113. this._size = size;
  114. this._supersample = supersample;
  115. this._generateHarmonics = generateHarmonics;
  116. this._texture = this._getFromCache(url, this._noMipmap, undefined, undefined, undefined, this.isCube);
  117. if (!this._texture) {
  118. if (!this.getScene()?.useDelayedTextureLoading) {
  119. this._loadTexture();
  120. }
  121. else {
  122. this.delayLoadState = 4;
  123. }
  124. }
  125. else {
  126. if (this._texture.isReady) {
  127. Tools.SetImmediate(() => this._onLoad());
  128. }
  129. else {
  130. this._texture.onLoadedObservable.add(this._onLoad);
  131. }
  132. }
  133. }
  134. /**
  135. * Get the current class name of the texture useful for serialization or dynamic coding.
  136. * @returns "HDRCubeTexture"
  137. */
  138. getClassName() {
  139. return "HDRCubeTexture";
  140. }
  141. /**
  142. * Occurs when the file is raw .hdr file.
  143. */
  144. _loadTexture() {
  145. const engine = this._getEngine();
  146. const caps = engine.getCaps();
  147. let textureType = 0;
  148. if (caps.textureFloat && caps.textureFloatLinearFiltering) {
  149. textureType = 1;
  150. }
  151. else if (caps.textureHalfFloat && caps.textureHalfFloatLinearFiltering) {
  152. textureType = 2;
  153. }
  154. const callback = (buffer) => {
  155. this.lodGenerationOffset = 0.0;
  156. this.lodGenerationScale = 0.8;
  157. // Extract the raw linear data.
  158. const data = HDRTools.GetCubeMapTextureData(buffer, this._size, this._supersample);
  159. // Generate harmonics if needed.
  160. if (this._generateHarmonics) {
  161. const sphericalPolynomial = CubeMapToSphericalPolynomialTools.ConvertCubeMapToSphericalPolynomial(data);
  162. this.sphericalPolynomial = sphericalPolynomial;
  163. }
  164. const results = [];
  165. let byteArray = null;
  166. let shortArray = null;
  167. // Push each faces.
  168. for (let j = 0; j < 6; j++) {
  169. // Create fallback array
  170. if (textureType === 2) {
  171. shortArray = new Uint16Array(this._size * this._size * 3);
  172. }
  173. else if (textureType === 0) {
  174. // 3 channels of 1 bytes per pixel in bytes.
  175. byteArray = new Uint8Array(this._size * this._size * 3);
  176. }
  177. const dataFace = data[HDRCubeTexture._FacesMapping[j]];
  178. // If special cases.
  179. if (this.gammaSpace || shortArray || byteArray) {
  180. for (let i = 0; i < this._size * this._size; i++) {
  181. // Put in gamma space if requested.
  182. if (this.gammaSpace) {
  183. dataFace[i * 3 + 0] = Math.pow(dataFace[i * 3 + 0], ToGammaSpace);
  184. dataFace[i * 3 + 1] = Math.pow(dataFace[i * 3 + 1], ToGammaSpace);
  185. dataFace[i * 3 + 2] = Math.pow(dataFace[i * 3 + 2], ToGammaSpace);
  186. }
  187. // Convert to half float texture for fallback.
  188. if (shortArray) {
  189. shortArray[i * 3 + 0] = ToHalfFloat(dataFace[i * 3 + 0]);
  190. shortArray[i * 3 + 1] = ToHalfFloat(dataFace[i * 3 + 1]);
  191. shortArray[i * 3 + 2] = ToHalfFloat(dataFace[i * 3 + 2]);
  192. }
  193. // Convert to int texture for fallback.
  194. if (byteArray) {
  195. let r = Math.max(dataFace[i * 3 + 0] * 255, 0);
  196. let g = Math.max(dataFace[i * 3 + 1] * 255, 0);
  197. let b = Math.max(dataFace[i * 3 + 2] * 255, 0);
  198. // May use luminance instead if the result is not accurate.
  199. const max = Math.max(Math.max(r, g), b);
  200. if (max > 255) {
  201. const scale = 255 / max;
  202. r *= scale;
  203. g *= scale;
  204. b *= scale;
  205. }
  206. byteArray[i * 3 + 0] = r;
  207. byteArray[i * 3 + 1] = g;
  208. byteArray[i * 3 + 2] = b;
  209. }
  210. }
  211. }
  212. if (shortArray) {
  213. results.push(shortArray);
  214. }
  215. else if (byteArray) {
  216. results.push(byteArray);
  217. }
  218. else {
  219. results.push(dataFace);
  220. }
  221. }
  222. return results;
  223. };
  224. if (engine._features.allowTexturePrefiltering && this._prefilterOnLoad) {
  225. const previousOnLoad = this._onLoad;
  226. const hdrFiltering = new HDRFiltering(engine);
  227. this._onLoad = () => {
  228. hdrFiltering.prefilter(this, previousOnLoad);
  229. };
  230. }
  231. this._texture = engine.createRawCubeTextureFromUrl(this.url, this.getScene(), this._size, 4, textureType, this._noMipmap, callback, null, this._onLoad, this._onError);
  232. }
  233. clone() {
  234. const newTexture = new HDRCubeTexture(this.url, this.getScene() || this._getEngine(), this._size, this._noMipmap, this._generateHarmonics, this.gammaSpace);
  235. // Base texture
  236. newTexture.level = this.level;
  237. newTexture.wrapU = this.wrapU;
  238. newTexture.wrapV = this.wrapV;
  239. newTexture.coordinatesIndex = this.coordinatesIndex;
  240. newTexture.coordinatesMode = this.coordinatesMode;
  241. return newTexture;
  242. }
  243. // Methods
  244. delayLoad() {
  245. if (this.delayLoadState !== 4) {
  246. return;
  247. }
  248. this.delayLoadState = 1;
  249. this._texture = this._getFromCache(this.url, this._noMipmap);
  250. if (!this._texture) {
  251. this._loadTexture();
  252. }
  253. }
  254. /**
  255. * Get the texture reflection matrix used to rotate/transform the reflection.
  256. * @returns the reflection matrix
  257. */
  258. getReflectionTextureMatrix() {
  259. return this._textureMatrix;
  260. }
  261. /**
  262. * Set the texture reflection matrix used to rotate/transform the reflection.
  263. * @param value Define the reflection matrix to set
  264. */
  265. setReflectionTextureMatrix(value) {
  266. this._textureMatrix = value;
  267. if (value.updateFlag === this._textureMatrix.updateFlag) {
  268. return;
  269. }
  270. if (value.isIdentity() !== this._textureMatrix.isIdentity()) {
  271. this.getScene()?.markAllMaterialsAsDirty(1, (mat) => mat.getActiveTextures().indexOf(this) !== -1);
  272. }
  273. }
  274. /**
  275. * Dispose the texture and release its associated resources.
  276. */
  277. dispose() {
  278. this.onLoadObservable.clear();
  279. super.dispose();
  280. }
  281. /**
  282. * Parses a JSON representation of an HDR Texture in order to create the texture
  283. * @param parsedTexture Define the JSON representation
  284. * @param scene Define the scene the texture should be created in
  285. * @param rootUrl Define the root url in case we need to load relative dependencies
  286. * @returns the newly created texture after parsing
  287. */
  288. static Parse(parsedTexture, scene, rootUrl) {
  289. let texture = null;
  290. if (parsedTexture.name && !parsedTexture.isRenderTarget) {
  291. texture = new HDRCubeTexture(rootUrl + parsedTexture.name, scene, parsedTexture.size, parsedTexture.noMipmap, parsedTexture.generateHarmonics, parsedTexture.useInGammaSpace);
  292. texture.name = parsedTexture.name;
  293. texture.hasAlpha = parsedTexture.hasAlpha;
  294. texture.level = parsedTexture.level;
  295. texture.coordinatesMode = parsedTexture.coordinatesMode;
  296. texture.isBlocking = parsedTexture.isBlocking;
  297. }
  298. if (texture) {
  299. if (parsedTexture.boundingBoxPosition) {
  300. texture.boundingBoxPosition = Vector3.FromArray(parsedTexture.boundingBoxPosition);
  301. }
  302. if (parsedTexture.boundingBoxSize) {
  303. texture.boundingBoxSize = Vector3.FromArray(parsedTexture.boundingBoxSize);
  304. }
  305. if (parsedTexture.rotationY) {
  306. texture.rotationY = parsedTexture.rotationY;
  307. }
  308. }
  309. return texture;
  310. }
  311. serialize() {
  312. if (!this.name) {
  313. return null;
  314. }
  315. const serializationObject = {};
  316. serializationObject.name = this.name;
  317. serializationObject.hasAlpha = this.hasAlpha;
  318. serializationObject.isCube = true;
  319. serializationObject.level = this.level;
  320. serializationObject.size = this._size;
  321. serializationObject.coordinatesMode = this.coordinatesMode;
  322. serializationObject.useInGammaSpace = this.gammaSpace;
  323. serializationObject.generateHarmonics = this._generateHarmonics;
  324. serializationObject.customType = "BABYLON.HDRCubeTexture";
  325. serializationObject.noMipmap = this._noMipmap;
  326. serializationObject.isBlocking = this._isBlocking;
  327. serializationObject.rotationY = this._rotationY;
  328. return serializationObject;
  329. }
  330. }
  331. HDRCubeTexture._FacesMapping = ["right", "left", "up", "down", "front", "back"];
  332. RegisterClass("BABYLON.HDRCubeTexture", HDRCubeTexture);
  333. //# sourceMappingURL=hdrCubeTexture.js.map