loadCubeMap.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. import Check from "../Core/Check.js";
  2. import defined from "../Core/defined.js";
  3. import DeveloperError from "../Core/DeveloperError.js";
  4. import Resource from "../Core/Resource.js";
  5. import CubeMap from "./CubeMap.js";
  6. /**
  7. * Asynchronously loads six images and creates a cube map. Returns a promise that
  8. * will resolve to a {@link CubeMap} once loaded, or reject if any image fails to load.
  9. *
  10. * @function loadCubeMap
  11. *
  12. * @param {Context} context The context to use to create the cube map.
  13. * @param {object} urls The source URL of each image. See the example below.
  14. * @param {boolean} [skipColorSpaceConversion=false] If true, any custom gamma or color profiles in the images will be ignored.
  15. * @returns {Promise<CubeMap>} a promise that will resolve to the requested {@link CubeMap} when loaded.
  16. *
  17. * @exception {DeveloperError} context is required.
  18. * @exception {DeveloperError} urls is required and must have positiveX, negativeX, positiveY, negativeY, positiveZ, and negativeZ properties.
  19. *
  20. *
  21. * @example
  22. * Cesium.loadCubeMap(context, {
  23. * positiveX : 'skybox_px.png',
  24. * negativeX : 'skybox_nx.png',
  25. * positiveY : 'skybox_py.png',
  26. * negativeY : 'skybox_ny.png',
  27. * positiveZ : 'skybox_pz.png',
  28. * negativeZ : 'skybox_nz.png'
  29. * }).then(function(cubeMap) {
  30. * // use the cubemap
  31. * }).catch(function(error) {
  32. * // an error occurred
  33. * });
  34. *
  35. * @see {@link http://www.w3.org/TR/cors/|Cross-Origin Resource Sharing}
  36. * @see {@link http://wiki.commonjs.org/wiki/Promises/A|CommonJS Promises/A}
  37. *
  38. * @private
  39. */
  40. function loadCubeMap(context, urls, skipColorSpaceConversion) {
  41. //>>includeStart('debug', pragmas.debug);
  42. Check.defined("context", context);
  43. if (
  44. !defined(urls) ||
  45. !defined(urls.positiveX) ||
  46. !defined(urls.negativeX) ||
  47. !defined(urls.positiveY) ||
  48. !defined(urls.negativeY) ||
  49. !defined(urls.positiveZ) ||
  50. !defined(urls.negativeZ)
  51. ) {
  52. throw new DeveloperError(
  53. "urls is required and must have positiveX, negativeX, positiveY, negativeY, positiveZ, and negativeZ properties."
  54. );
  55. }
  56. //>>includeEnd('debug');
  57. // PERFORMANCE_IDEA: Given the size of some cube maps, we should consider tiling them, which
  58. // would prevent hiccups when uploading, for example, six 4096x4096 textures to the GPU.
  59. //
  60. // Also, it is perhaps acceptable to use the context here in the callbacks, but
  61. // ideally, we would do it in the primitive's update function.
  62. const flipOptions = {
  63. flipY: true,
  64. skipColorSpaceConversion: skipColorSpaceConversion,
  65. preferImageBitmap: true,
  66. };
  67. const facePromises = [
  68. Resource.createIfNeeded(urls.positiveX).fetchImage(flipOptions),
  69. Resource.createIfNeeded(urls.negativeX).fetchImage(flipOptions),
  70. Resource.createIfNeeded(urls.positiveY).fetchImage(flipOptions),
  71. Resource.createIfNeeded(urls.negativeY).fetchImage(flipOptions),
  72. Resource.createIfNeeded(urls.positiveZ).fetchImage(flipOptions),
  73. Resource.createIfNeeded(urls.negativeZ).fetchImage(flipOptions),
  74. ];
  75. return Promise.all(facePromises).then(function (images) {
  76. return new CubeMap({
  77. context: context,
  78. source: {
  79. positiveX: images[0],
  80. negativeX: images[1],
  81. positiveY: images[2],
  82. negativeY: images[3],
  83. positiveZ: images[4],
  84. negativeZ: images[5],
  85. },
  86. });
  87. });
  88. }
  89. export default loadCubeMap;