ImageBasedLighting.js 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514
  1. import Cartesian2 from "../Core/Cartesian2.js";
  2. import Check from "../Core/Check.js";
  3. import defined from "../Core/defined.js";
  4. import defaultValue from "../Core/defaultValue.js";
  5. import destroyObject from "../Core/destroyObject.js";
  6. import DeveloperError from "../Core/DeveloperError.js";
  7. import OctahedralProjectedCubeMap from "./OctahedralProjectedCubeMap.js";
  8. /**
  9. * Properties for managing image-based lighting on tilesets and models.
  10. * Also manages the necessary resources and textures.
  11. * <p>
  12. * If specular environment maps are used, {@link ImageBasedLighting#destroy} must be called
  13. * when the image-based lighting is no longer needed to clean up GPU resources properly.
  14. * If a model or tileset creates an instance of ImageBasedLighting, it will handle this.
  15. * Otherwise, the application is responsible for calling destroy().
  16. *</p>
  17. *
  18. * @alias ImageBasedLighting
  19. * @constructor
  20. *
  21. * @param {Cartesian2} [options.imageBasedLightingFactor=Cartesian2(1.0, 1.0)] Scales diffuse and specular image-based lighting from the earth, sky, atmosphere and star skybox.
  22. * @param {number} [options.luminanceAtZenith=0.2] The sun's luminance at the zenith in kilo candela per meter squared to use for this model's procedural environment map.
  23. * @param {Cartesian3[]} [options.sphericalHarmonicCoefficients] The third order spherical harmonic coefficients used for the diffuse color of image-based lighting.
  24. * @param {string} [options.specularEnvironmentMaps] A URL to a KTX2 file that contains a cube map of the specular lighting and the convoluted specular mipmaps.
  25. */
  26. function ImageBasedLighting(options) {
  27. options = defaultValue(options, defaultValue.EMPTY_OBJECT);
  28. const imageBasedLightingFactor = defined(options.imageBasedLightingFactor)
  29. ? Cartesian2.clone(options.imageBasedLightingFactor)
  30. : new Cartesian2(1.0, 1.0);
  31. //>>includeStart('debug', pragmas.debug);
  32. Check.typeOf.object(
  33. "options.imageBasedLightingFactor",
  34. imageBasedLightingFactor
  35. );
  36. Check.typeOf.number.greaterThanOrEquals(
  37. "options.imageBasedLightingFactor.x",
  38. imageBasedLightingFactor.x,
  39. 0.0
  40. );
  41. Check.typeOf.number.lessThanOrEquals(
  42. "options.imageBasedLightingFactor.x",
  43. imageBasedLightingFactor.x,
  44. 1.0
  45. );
  46. Check.typeOf.number.greaterThanOrEquals(
  47. "options.imageBasedLightingFactor.y",
  48. imageBasedLightingFactor.y,
  49. 0.0
  50. );
  51. Check.typeOf.number.lessThanOrEquals(
  52. "options.imageBasedLightingFactor.y",
  53. imageBasedLightingFactor.y,
  54. 1.0
  55. );
  56. //>>includeEnd('debug');
  57. this._imageBasedLightingFactor = imageBasedLightingFactor;
  58. const luminanceAtZenith = defaultValue(options.luminanceAtZenith, 0.2);
  59. //>>includeStart('debug', pragmas.debug);
  60. Check.typeOf.number("options.luminanceAtZenith", luminanceAtZenith);
  61. //>>includeEnd('debug');
  62. this._luminanceAtZenith = luminanceAtZenith;
  63. const sphericalHarmonicCoefficients = options.sphericalHarmonicCoefficients;
  64. //>>includeStart('debug', pragmas.debug);
  65. if (
  66. defined(sphericalHarmonicCoefficients) &&
  67. (!Array.isArray(sphericalHarmonicCoefficients) ||
  68. sphericalHarmonicCoefficients.length !== 9)
  69. ) {
  70. throw new DeveloperError(
  71. "options.sphericalHarmonicCoefficients must be an array of 9 Cartesian3 values."
  72. );
  73. }
  74. //>>includeEnd('debug');
  75. this._sphericalHarmonicCoefficients = sphericalHarmonicCoefficients;
  76. // The specular environment map texture is created in update();
  77. this._specularEnvironmentMaps = options.specularEnvironmentMaps;
  78. this._specularEnvironmentMapAtlas = undefined;
  79. this._specularEnvironmentMapAtlasDirty = true;
  80. this._specularEnvironmentMapLoaded = false;
  81. this._previousSpecularEnvironmentMapLoaded = false;
  82. this._useDefaultSpecularMaps = false;
  83. this._useDefaultSphericalHarmonics = false;
  84. this._shouldRegenerateShaders = false;
  85. // Store the previous frame number to prevent redundant update calls
  86. this._previousFrameNumber = undefined;
  87. // Keeps track of the last values for use during update logic
  88. this._previousImageBasedLightingFactor = Cartesian2.clone(
  89. imageBasedLightingFactor
  90. );
  91. this._previousLuminanceAtZenith = luminanceAtZenith;
  92. this._previousSphericalHarmonicCoefficients = sphericalHarmonicCoefficients;
  93. this._removeErrorListener = undefined;
  94. }
  95. Object.defineProperties(ImageBasedLighting.prototype, {
  96. /**
  97. * Cesium adds lighting from the earth, sky, atmosphere, and star skybox.
  98. * This cartesian is used to scale the final diffuse and specular lighting
  99. * contribution from those sources to the final color. A value of 0.0 will
  100. * disable those light sources.
  101. *
  102. * @memberof ImageBasedLighting.prototype
  103. *
  104. * @type {Cartesian2}
  105. * @default Cartesian2(1.0, 1.0)
  106. */
  107. imageBasedLightingFactor: {
  108. get: function () {
  109. return this._imageBasedLightingFactor;
  110. },
  111. set: function (value) {
  112. //>>includeStart('debug', pragmas.debug);
  113. Check.typeOf.object("imageBasedLightingFactor", value);
  114. Check.typeOf.number.greaterThanOrEquals(
  115. "imageBasedLightingFactor.x",
  116. value.x,
  117. 0.0
  118. );
  119. Check.typeOf.number.lessThanOrEquals(
  120. "imageBasedLightingFactor.x",
  121. value.x,
  122. 1.0
  123. );
  124. Check.typeOf.number.greaterThanOrEquals(
  125. "imageBasedLightingFactor.y",
  126. value.y,
  127. 0.0
  128. );
  129. Check.typeOf.number.lessThanOrEquals(
  130. "imageBasedLightingFactor.y",
  131. value.y,
  132. 1.0
  133. );
  134. //>>includeEnd('debug');
  135. this._previousImageBasedLightingFactor = Cartesian2.clone(
  136. this._imageBasedLightingFactor,
  137. this._previousImageBasedLightingFactor
  138. );
  139. this._imageBasedLightingFactor = Cartesian2.clone(
  140. value,
  141. this._imageBasedLightingFactor
  142. );
  143. },
  144. },
  145. /**
  146. * The sun's luminance at the zenith in kilo candela per meter squared
  147. * to use for this model's procedural environment map. This is used when
  148. * {@link ImageBasedLighting#specularEnvironmentMaps} and {@link ImageBasedLighting#sphericalHarmonicCoefficients}
  149. * are not defined.
  150. *
  151. * @memberof ImageBasedLighting.prototype
  152. *
  153. * @type {number}
  154. * @default 0.2
  155. */
  156. luminanceAtZenith: {
  157. get: function () {
  158. return this._luminanceAtZenith;
  159. },
  160. set: function (value) {
  161. this._previousLuminanceAtZenith = this._luminanceAtZenith;
  162. this._luminanceAtZenith = value;
  163. },
  164. },
  165. /**
  166. * The third order spherical harmonic coefficients used for the diffuse color of image-based lighting. When <code>undefined</code>, a diffuse irradiance
  167. * computed from the atmosphere color is used.
  168. * <p>
  169. * There are nine <code>Cartesian3</code> coefficients.
  170. * The order of the coefficients is: L<sub>0,0</sub>, L<sub>1,-1</sub>, L<sub>1,0</sub>, L<sub>1,1</sub>, L<sub>2,-2</sub>, L<sub>2,-1</sub>, L<sub>2,0</sub>, L<sub>2,1</sub>, L<sub>2,2</sub>
  171. * </p>
  172. *
  173. * These values can be obtained by preprocessing the environment map using the <code>cmgen</code> tool of
  174. * {@link https://github.com/google/filament/releases|Google's Filament project}. This will also generate a KTX file that can be
  175. * supplied to {@link Model#specularEnvironmentMaps}.
  176. *
  177. * @memberof ImageBasedLighting.prototype
  178. *
  179. * @type {Cartesian3[]}
  180. * @demo {@link https://sandcastle.cesium.com/index.html?src=Image-Based Lighting.html|Sandcastle Image Based Lighting Demo}
  181. * @see {@link https://graphics.stanford.edu/papers/envmap/envmap.pdf|An Efficient Representation for Irradiance Environment Maps}
  182. */
  183. sphericalHarmonicCoefficients: {
  184. get: function () {
  185. return this._sphericalHarmonicCoefficients;
  186. },
  187. set: function (value) {
  188. //>>includeStart('debug', pragmas.debug);
  189. if (defined(value) && (!Array.isArray(value) || value.length !== 9)) {
  190. throw new DeveloperError(
  191. "sphericalHarmonicCoefficients must be an array of 9 Cartesian3 values."
  192. );
  193. }
  194. //>>includeEnd('debug');
  195. this._previousSphericalHarmonicCoefficients = this._sphericalHarmonicCoefficients;
  196. this._sphericalHarmonicCoefficients = value;
  197. },
  198. },
  199. /**
  200. * A URL to a KTX2 file that contains a cube map of the specular lighting and the convoluted specular mipmaps.
  201. *
  202. * @memberof ImageBasedLighting.prototype
  203. * @demo {@link https://sandcastle.cesium.com/index.html?src=Image-Based Lighting.html|Sandcastle Image Based Lighting Demo}
  204. * @type {string}
  205. * @see ImageBasedLighting#sphericalHarmonicCoefficients
  206. */
  207. specularEnvironmentMaps: {
  208. get: function () {
  209. return this._specularEnvironmentMaps;
  210. },
  211. set: function (value) {
  212. if (value !== this._specularEnvironmentMaps) {
  213. this._specularEnvironmentMapAtlasDirty =
  214. this._specularEnvironmentMapAtlasDirty ||
  215. value !== this._specularEnvironmentMaps;
  216. this._specularEnvironmentMapLoaded = false;
  217. }
  218. this._specularEnvironmentMaps = value;
  219. },
  220. },
  221. /**
  222. * Whether or not image-based lighting is enabled.
  223. *
  224. * @memberof ImageBasedLighting.prototype
  225. * @type {boolean}
  226. *
  227. * @private
  228. */
  229. enabled: {
  230. get: function () {
  231. return (
  232. this._imageBasedLightingFactor.x > 0.0 ||
  233. this._imageBasedLightingFactor.y > 0.0
  234. );
  235. },
  236. },
  237. /**
  238. * Whether or not the models that use this lighting should regenerate their shaders,
  239. * based on the properties and resources have changed.
  240. *
  241. * @memberof ImageBasedLighting.prototype
  242. * @type {boolean}
  243. *
  244. * @private
  245. */
  246. shouldRegenerateShaders: {
  247. get: function () {
  248. return this._shouldRegenerateShaders;
  249. },
  250. },
  251. /**
  252. * Whether or not to use the default spherical harmonic coefficients.
  253. *
  254. * @memberof ImageBasedLighting.prototype
  255. * @type {boolean}
  256. *
  257. * @private
  258. */
  259. useDefaultSphericalHarmonics: {
  260. get: function () {
  261. return this._useDefaultSphericalHarmonics;
  262. },
  263. },
  264. /**
  265. * Whether or not the image-based lighting settings use spherical harmonic coefficients.
  266. *
  267. * @memberof ImageBasedLighting.prototype
  268. * @type {boolean}
  269. *
  270. * @private
  271. */
  272. useSphericalHarmonicCoefficients: {
  273. get: function () {
  274. return (
  275. defined(this._sphericalHarmonicCoefficients) ||
  276. this._useDefaultSphericalHarmonics
  277. );
  278. },
  279. },
  280. /**
  281. * The texture atlas for the specular environment maps.
  282. *
  283. * @memberof ImageBasedLighting.prototype
  284. * @type {OctahedralProjectedCubeMap}
  285. *
  286. * @private
  287. */
  288. specularEnvironmentMapAtlas: {
  289. get: function () {
  290. return this._specularEnvironmentMapAtlas;
  291. },
  292. },
  293. /**
  294. * Whether or not to use the default specular environment maps.
  295. *
  296. * @memberof ImageBasedLighting.prototype
  297. * @type {boolean}
  298. *
  299. * @private
  300. */
  301. useDefaultSpecularMaps: {
  302. get: function () {
  303. return this._useDefaultSpecularMaps;
  304. },
  305. },
  306. /**
  307. * Whether or not the image-based lighting settings use specular environment maps.
  308. *
  309. * @memberof ImageBasedLighting.prototype
  310. * @type {boolean}
  311. *
  312. * @private
  313. */
  314. useSpecularEnvironmentMaps: {
  315. get: function () {
  316. return (
  317. (defined(this._specularEnvironmentMapAtlas) &&
  318. this._specularEnvironmentMapAtlas.ready) ||
  319. this._useDefaultSpecularMaps
  320. );
  321. },
  322. },
  323. });
  324. function createSpecularEnvironmentMapAtlas(imageBasedLighting, context) {
  325. if (!OctahedralProjectedCubeMap.isSupported(context)) {
  326. return;
  327. }
  328. imageBasedLighting._specularEnvironmentMapAtlas =
  329. imageBasedLighting._specularEnvironmentMapAtlas &&
  330. imageBasedLighting._specularEnvironmentMapAtlas.destroy();
  331. if (defined(imageBasedLighting._specularEnvironmentMaps)) {
  332. const atlas = new OctahedralProjectedCubeMap(
  333. imageBasedLighting._specularEnvironmentMaps
  334. );
  335. imageBasedLighting._specularEnvironmentMapAtlas = atlas;
  336. imageBasedLighting._removeErrorListener = atlas.errorEvent.addEventListener(
  337. (error) => {
  338. console.error(`Error loading specularEnvironmentMaps: ${error}`);
  339. }
  340. );
  341. }
  342. // Regenerate shaders so they do not use an environment map.
  343. // Will be set to true again if there was a new environment map and it is ready.
  344. imageBasedLighting._shouldRegenerateShaders = true;
  345. }
  346. ImageBasedLighting.prototype.update = function (frameState) {
  347. if (frameState.frameNumber === this._previousFrameNumber) {
  348. return;
  349. }
  350. this._previousFrameNumber = frameState.frameNumber;
  351. const context = frameState.context;
  352. frameState.brdfLutGenerator.update(frameState);
  353. this._shouldRegenerateShaders = false;
  354. const iblFactor = this._imageBasedLightingFactor;
  355. const previousIBLFactor = this._previousImageBasedLightingFactor;
  356. if (!Cartesian2.equals(iblFactor, previousIBLFactor)) {
  357. this._shouldRegenerateShaders =
  358. (iblFactor.x > 0.0 && previousIBLFactor.x === 0.0) ||
  359. (iblFactor.x === 0.0 && previousIBLFactor.x > 0.0);
  360. this._shouldRegenerateShaders =
  361. this._shouldRegenerateShaders ||
  362. (iblFactor.y > 0.0 && previousIBLFactor.y === 0.0) ||
  363. (iblFactor.y === 0.0 && previousIBLFactor.y > 0.0);
  364. this._previousImageBasedLightingFactor = Cartesian2.clone(
  365. this._imageBasedLightingFactor,
  366. this._previousImageBasedLightingFactor
  367. );
  368. }
  369. if (this._luminanceAtZenith !== this._previousLuminanceAtZenith) {
  370. this._shouldRegenerateShaders =
  371. this._shouldRegenerateShaders ||
  372. defined(this._luminanceAtZenith) !==
  373. defined(this._previousLuminanceAtZenith);
  374. this._previousLuminanceAtZenith = this._luminanceAtZenith;
  375. }
  376. if (
  377. this._previousSphericalHarmonicCoefficients !==
  378. this._sphericalHarmonicCoefficients
  379. ) {
  380. this._shouldRegenerateShaders =
  381. this._shouldRegenerateShaders ||
  382. defined(this._previousSphericalHarmonicCoefficients) !==
  383. defined(this._sphericalHarmonicCoefficients);
  384. this._previousSphericalHarmonicCoefficients = this._sphericalHarmonicCoefficients;
  385. }
  386. this._shouldRegenerateShaders =
  387. this._shouldRegenerateShaders ||
  388. this._previousSpecularEnvironmentMapLoaded !==
  389. this._specularEnvironmentMapLoaded;
  390. this._previousSpecularEnvironmentMapLoaded = this._specularEnvironmentMapLoaded;
  391. if (this._specularEnvironmentMapAtlasDirty) {
  392. createSpecularEnvironmentMapAtlas(this, context);
  393. this._specularEnvironmentMapAtlasDirty = false;
  394. }
  395. if (defined(this._specularEnvironmentMapAtlas)) {
  396. this._specularEnvironmentMapAtlas.update(frameState);
  397. if (this._specularEnvironmentMapAtlas.ready) {
  398. this._specularEnvironmentMapLoaded = true;
  399. }
  400. }
  401. const recompileWithDefaultAtlas =
  402. !defined(this._specularEnvironmentMapAtlas) &&
  403. defined(frameState.specularEnvironmentMaps) &&
  404. !this._useDefaultSpecularMaps;
  405. const recompileWithoutDefaultAtlas =
  406. !defined(frameState.specularEnvironmentMaps) &&
  407. this._useDefaultSpecularMaps;
  408. const recompileWithDefaultSHCoeffs =
  409. !defined(this._sphericalHarmonicCoefficients) &&
  410. defined(frameState.sphericalHarmonicCoefficients) &&
  411. !this._useDefaultSphericalHarmonics;
  412. const recompileWithoutDefaultSHCoeffs =
  413. !defined(frameState.sphericalHarmonicCoefficients) &&
  414. this._useDefaultSphericalHarmonics;
  415. this._shouldRegenerateShaders =
  416. this._shouldRegenerateShaders ||
  417. recompileWithDefaultAtlas ||
  418. recompileWithoutDefaultAtlas ||
  419. recompileWithDefaultSHCoeffs ||
  420. recompileWithoutDefaultSHCoeffs;
  421. this._useDefaultSpecularMaps =
  422. !defined(this._specularEnvironmentMapAtlas) &&
  423. defined(frameState.specularEnvironmentMaps);
  424. this._useDefaultSphericalHarmonics =
  425. !defined(this._sphericalHarmonicCoefficients) &&
  426. defined(frameState.sphericalHarmonicCoefficients);
  427. };
  428. /**
  429. * Returns true if this object was destroyed; otherwise, false.
  430. * <br /><br />
  431. * If this object was destroyed, it should not be used; calling any function other than
  432. * <code>isDestroyed</code> will result in a {@link DeveloperError} exception.
  433. *
  434. * @returns {boolean} True if this object was destroyed; otherwise, false.
  435. *
  436. * @see ImageBasedLighting#destroy
  437. * @private
  438. */
  439. ImageBasedLighting.prototype.isDestroyed = function () {
  440. return false;
  441. };
  442. /**
  443. * Destroys the WebGL resources held by this object. Destroying an object allows for deterministic
  444. * release of WebGL resources, instead of relying on the garbage collector to destroy this object.
  445. * <br /><br />
  446. * Once an object is destroyed, it should not be used; calling any function other than
  447. * <code>isDestroyed</code> will result in a {@link DeveloperError} exception. Therefore,
  448. * assign the return value (<code>undefined</code>) to the object as done in the example.
  449. *
  450. * @exception {DeveloperError} This object was destroyed, i.e., destroy() was called.
  451. *
  452. * @example
  453. * imageBasedLighting = imageBasedLighting && imageBasedLighting.destroy();
  454. *
  455. * @see ImageBasedLighting#isDestroyed
  456. * @private
  457. */
  458. ImageBasedLighting.prototype.destroy = function () {
  459. this._specularEnvironmentMapAtlas =
  460. this._specularEnvironmentMapAtlas &&
  461. this._specularEnvironmentMapAtlas.destroy();
  462. this._removeErrorListener =
  463. this._removeErrorListener && this._removeErrorListener();
  464. return destroyObject(this);
  465. };
  466. export default ImageBasedLighting;