ImageBasedLighting.js 17 KB

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