TextureAtlas.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558
  1. import BoundingRectangle from "../Core/BoundingRectangle.js";
  2. import Cartesian2 from "../Core/Cartesian2.js";
  3. import createGuid from "../Core/createGuid.js";
  4. import defaultValue from "../Core/defaultValue.js";
  5. import defined from "../Core/defined.js";
  6. import destroyObject from "../Core/destroyObject.js";
  7. import DeveloperError from "../Core/DeveloperError.js";
  8. import PixelFormat from "../Core/PixelFormat.js";
  9. import Resource from "../Core/Resource.js";
  10. import RuntimeError from "../Core/RuntimeError.js";
  11. import Framebuffer from "../Renderer/Framebuffer.js";
  12. import Texture from "../Renderer/Texture.js";
  13. // The atlas is made up of regions of space called nodes that contain images or child nodes.
  14. function TextureAtlasNode(
  15. bottomLeft,
  16. topRight,
  17. childNode1,
  18. childNode2,
  19. imageIndex
  20. ) {
  21. this.bottomLeft = defaultValue(bottomLeft, Cartesian2.ZERO);
  22. this.topRight = defaultValue(topRight, Cartesian2.ZERO);
  23. this.childNode1 = childNode1;
  24. this.childNode2 = childNode2;
  25. this.imageIndex = imageIndex;
  26. }
  27. const defaultInitialSize = new Cartesian2(16.0, 16.0);
  28. /**
  29. * A TextureAtlas stores multiple images in one square texture and keeps
  30. * track of the texture coordinates for each image. TextureAtlas is dynamic,
  31. * meaning new images can be added at any point in time.
  32. * Texture coordinates are subject to change if the texture atlas resizes, so it is
  33. * important to check {@link TextureAtlas#getGUID} before using old values.
  34. *
  35. * @alias TextureAtlas
  36. * @constructor
  37. *
  38. * @param {object} options Object with the following properties:
  39. * @param {Scene} options.context The context in which the texture gets created.
  40. * @param {PixelFormat} [options.pixelFormat=PixelFormat.RGBA] The pixel format of the texture.
  41. * @param {number} [options.borderWidthInPixels=1] The amount of spacing between adjacent images in pixels.
  42. * @param {Cartesian2} [options.initialSize=new Cartesian2(16.0, 16.0)] The initial side lengths of the texture.
  43. *
  44. * @exception {DeveloperError} borderWidthInPixels must be greater than or equal to zero.
  45. * @exception {DeveloperError} initialSize must be greater than zero.
  46. *
  47. * @private
  48. */
  49. function TextureAtlas(options) {
  50. options = defaultValue(options, defaultValue.EMPTY_OBJECT);
  51. const borderWidthInPixels = defaultValue(options.borderWidthInPixels, 1.0);
  52. const initialSize = defaultValue(options.initialSize, defaultInitialSize);
  53. //>>includeStart('debug', pragmas.debug);
  54. if (!defined(options.context)) {
  55. throw new DeveloperError("context is required.");
  56. }
  57. if (borderWidthInPixels < 0) {
  58. throw new DeveloperError(
  59. "borderWidthInPixels must be greater than or equal to zero."
  60. );
  61. }
  62. if (initialSize.x < 1 || initialSize.y < 1) {
  63. throw new DeveloperError("initialSize must be greater than zero.");
  64. }
  65. //>>includeEnd('debug');
  66. this._context = options.context;
  67. this._pixelFormat = defaultValue(options.pixelFormat, PixelFormat.RGBA);
  68. this._borderWidthInPixels = borderWidthInPixels;
  69. this._textureCoordinates = [];
  70. this._guid = createGuid();
  71. this._idHash = {};
  72. this._indexHash = {};
  73. this._initialSize = initialSize;
  74. this._root = undefined;
  75. }
  76. Object.defineProperties(TextureAtlas.prototype, {
  77. /**
  78. * The amount of spacing between adjacent images in pixels.
  79. * @memberof TextureAtlas.prototype
  80. * @type {number}
  81. */
  82. borderWidthInPixels: {
  83. get: function () {
  84. return this._borderWidthInPixels;
  85. },
  86. },
  87. /**
  88. * An array of {@link BoundingRectangle} texture coordinate regions for all the images in the texture atlas.
  89. * The x and y values of the rectangle correspond to the bottom-left corner of the texture coordinate.
  90. * The coordinates are in the order that the corresponding images were added to the atlas.
  91. * @memberof TextureAtlas.prototype
  92. * @type {BoundingRectangle[]}
  93. */
  94. textureCoordinates: {
  95. get: function () {
  96. return this._textureCoordinates;
  97. },
  98. },
  99. /**
  100. * The texture that all of the images are being written to.
  101. * @memberof TextureAtlas.prototype
  102. * @type {Texture}
  103. */
  104. texture: {
  105. get: function () {
  106. if (!defined(this._texture)) {
  107. this._texture = new Texture({
  108. context: this._context,
  109. width: this._initialSize.x,
  110. height: this._initialSize.y,
  111. pixelFormat: this._pixelFormat,
  112. });
  113. }
  114. return this._texture;
  115. },
  116. },
  117. /**
  118. * The number of images in the texture atlas. This value increases
  119. * every time addImage or addImages is called.
  120. * Texture coordinates are subject to change if the texture atlas resizes, so it is
  121. * important to check {@link TextureAtlas#getGUID} before using old values.
  122. * @memberof TextureAtlas.prototype
  123. * @type {number}
  124. */
  125. numberOfImages: {
  126. get: function () {
  127. return this._textureCoordinates.length;
  128. },
  129. },
  130. /**
  131. * The atlas' globally unique identifier (GUID).
  132. * The GUID changes whenever the texture atlas is modified.
  133. * Classes that use a texture atlas should check if the GUID
  134. * has changed before processing the atlas data.
  135. * @memberof TextureAtlas.prototype
  136. * @type {string}
  137. */
  138. guid: {
  139. get: function () {
  140. return this._guid;
  141. },
  142. },
  143. });
  144. // Builds a larger texture and copies the old texture into the new one.
  145. function resizeAtlas(textureAtlas, image) {
  146. const context = textureAtlas._context;
  147. const numImages = textureAtlas.numberOfImages;
  148. const scalingFactor = 2.0;
  149. const borderWidthInPixels = textureAtlas._borderWidthInPixels;
  150. if (numImages > 0) {
  151. const oldAtlasWidth = textureAtlas._texture.width;
  152. const oldAtlasHeight = textureAtlas._texture.height;
  153. const atlasWidth =
  154. scalingFactor * (oldAtlasWidth + image.width + borderWidthInPixels);
  155. const atlasHeight =
  156. scalingFactor * (oldAtlasHeight + image.height + borderWidthInPixels);
  157. const widthRatio = oldAtlasWidth / atlasWidth;
  158. const heightRatio = oldAtlasHeight / atlasHeight;
  159. // Create new node structure, putting the old root node in the bottom left.
  160. const nodeBottomRight = new TextureAtlasNode(
  161. new Cartesian2(oldAtlasWidth + borderWidthInPixels, borderWidthInPixels),
  162. new Cartesian2(atlasWidth, oldAtlasHeight)
  163. );
  164. const nodeBottomHalf = new TextureAtlasNode(
  165. new Cartesian2(),
  166. new Cartesian2(atlasWidth, oldAtlasHeight),
  167. textureAtlas._root,
  168. nodeBottomRight
  169. );
  170. const nodeTopHalf = new TextureAtlasNode(
  171. new Cartesian2(borderWidthInPixels, oldAtlasHeight + borderWidthInPixels),
  172. new Cartesian2(atlasWidth, atlasHeight)
  173. );
  174. const nodeMain = new TextureAtlasNode(
  175. new Cartesian2(),
  176. new Cartesian2(atlasWidth, atlasHeight),
  177. nodeBottomHalf,
  178. nodeTopHalf
  179. );
  180. // Resize texture coordinates.
  181. for (let i = 0; i < textureAtlas._textureCoordinates.length; i++) {
  182. const texCoord = textureAtlas._textureCoordinates[i];
  183. if (defined(texCoord)) {
  184. texCoord.x *= widthRatio;
  185. texCoord.y *= heightRatio;
  186. texCoord.width *= widthRatio;
  187. texCoord.height *= heightRatio;
  188. }
  189. }
  190. // Copy larger texture.
  191. const newTexture = new Texture({
  192. context: textureAtlas._context,
  193. width: atlasWidth,
  194. height: atlasHeight,
  195. pixelFormat: textureAtlas._pixelFormat,
  196. });
  197. const framebuffer = new Framebuffer({
  198. context: context,
  199. colorTextures: [textureAtlas._texture],
  200. destroyAttachments: false,
  201. });
  202. framebuffer._bind();
  203. newTexture.copyFromFramebuffer(0, 0, 0, 0, atlasWidth, atlasHeight);
  204. framebuffer._unBind();
  205. framebuffer.destroy();
  206. textureAtlas._texture =
  207. textureAtlas._texture && textureAtlas._texture.destroy();
  208. textureAtlas._texture = newTexture;
  209. textureAtlas._root = nodeMain;
  210. } else {
  211. // First image exceeds initialSize
  212. let initialWidth = scalingFactor * (image.width + 2 * borderWidthInPixels);
  213. let initialHeight =
  214. scalingFactor * (image.height + 2 * borderWidthInPixels);
  215. if (initialWidth < textureAtlas._initialSize.x) {
  216. initialWidth = textureAtlas._initialSize.x;
  217. }
  218. if (initialHeight < textureAtlas._initialSize.y) {
  219. initialHeight = textureAtlas._initialSize.y;
  220. }
  221. textureAtlas._texture =
  222. textureAtlas._texture && textureAtlas._texture.destroy();
  223. textureAtlas._texture = new Texture({
  224. context: textureAtlas._context,
  225. width: initialWidth,
  226. height: initialHeight,
  227. pixelFormat: textureAtlas._pixelFormat,
  228. });
  229. textureAtlas._root = new TextureAtlasNode(
  230. new Cartesian2(borderWidthInPixels, borderWidthInPixels),
  231. new Cartesian2(initialWidth, initialHeight)
  232. );
  233. }
  234. }
  235. // A recursive function that finds the best place to insert
  236. // a new image based on existing image 'nodes'.
  237. // Inspired by: http://blackpawn.com/texts/lightmaps/default.html
  238. function findNode(textureAtlas, node, image) {
  239. if (!defined(node)) {
  240. return undefined;
  241. }
  242. // If a leaf node
  243. if (!defined(node.childNode1) && !defined(node.childNode2)) {
  244. // Node already contains an image, don't add to it.
  245. if (defined(node.imageIndex)) {
  246. return undefined;
  247. }
  248. const nodeWidth = node.topRight.x - node.bottomLeft.x;
  249. const nodeHeight = node.topRight.y - node.bottomLeft.y;
  250. const widthDifference = nodeWidth - image.width;
  251. const heightDifference = nodeHeight - image.height;
  252. // Node is smaller than the image.
  253. if (widthDifference < 0 || heightDifference < 0) {
  254. return undefined;
  255. }
  256. // If the node is the same size as the image, return the node
  257. if (widthDifference === 0 && heightDifference === 0) {
  258. return node;
  259. }
  260. // Vertical split (childNode1 = left half, childNode2 = right half).
  261. if (widthDifference > heightDifference) {
  262. node.childNode1 = new TextureAtlasNode(
  263. new Cartesian2(node.bottomLeft.x, node.bottomLeft.y),
  264. new Cartesian2(node.bottomLeft.x + image.width, node.topRight.y)
  265. );
  266. // Only make a second child if the border gives enough space.
  267. const childNode2BottomLeftX =
  268. node.bottomLeft.x + image.width + textureAtlas._borderWidthInPixels;
  269. if (childNode2BottomLeftX < node.topRight.x) {
  270. node.childNode2 = new TextureAtlasNode(
  271. new Cartesian2(childNode2BottomLeftX, node.bottomLeft.y),
  272. new Cartesian2(node.topRight.x, node.topRight.y)
  273. );
  274. }
  275. }
  276. // Horizontal split (childNode1 = bottom half, childNode2 = top half).
  277. else {
  278. node.childNode1 = new TextureAtlasNode(
  279. new Cartesian2(node.bottomLeft.x, node.bottomLeft.y),
  280. new Cartesian2(node.topRight.x, node.bottomLeft.y + image.height)
  281. );
  282. // Only make a second child if the border gives enough space.
  283. const childNode2BottomLeftY =
  284. node.bottomLeft.y + image.height + textureAtlas._borderWidthInPixels;
  285. if (childNode2BottomLeftY < node.topRight.y) {
  286. node.childNode2 = new TextureAtlasNode(
  287. new Cartesian2(node.bottomLeft.x, childNode2BottomLeftY),
  288. new Cartesian2(node.topRight.x, node.topRight.y)
  289. );
  290. }
  291. }
  292. return findNode(textureAtlas, node.childNode1, image);
  293. }
  294. // If not a leaf node
  295. return (
  296. findNode(textureAtlas, node.childNode1, image) ||
  297. findNode(textureAtlas, node.childNode2, image)
  298. );
  299. }
  300. // Adds image of given index to the texture atlas. Called from addImage and addImages.
  301. function addImage(textureAtlas, image, index) {
  302. const node = findNode(textureAtlas, textureAtlas._root, image);
  303. if (defined(node)) {
  304. // Found a node that can hold the image.
  305. node.imageIndex = index;
  306. // Add texture coordinate and write to texture
  307. const atlasWidth = textureAtlas._texture.width;
  308. const atlasHeight = textureAtlas._texture.height;
  309. const nodeWidth = node.topRight.x - node.bottomLeft.x;
  310. const nodeHeight = node.topRight.y - node.bottomLeft.y;
  311. const x = node.bottomLeft.x / atlasWidth;
  312. const y = node.bottomLeft.y / atlasHeight;
  313. const w = nodeWidth / atlasWidth;
  314. const h = nodeHeight / atlasHeight;
  315. textureAtlas._textureCoordinates[index] = new BoundingRectangle(x, y, w, h);
  316. textureAtlas._texture.copyFrom({
  317. source: image,
  318. xOffset: node.bottomLeft.x,
  319. yOffset: node.bottomLeft.y,
  320. });
  321. } else {
  322. // No node found, must resize the texture atlas.
  323. resizeAtlas(textureAtlas, image);
  324. addImage(textureAtlas, image, index);
  325. }
  326. textureAtlas._guid = createGuid();
  327. }
  328. function getIndex(atlas, image) {
  329. if (!defined(atlas) || atlas.isDestroyed()) {
  330. return -1;
  331. }
  332. const index = atlas.numberOfImages;
  333. addImage(atlas, image, index);
  334. return index;
  335. }
  336. /**
  337. * If the image is already in the atlas, the existing index is returned. Otherwise, the result is undefined.
  338. *
  339. * @param {string} id An identifier to detect whether the image already exists in the atlas.
  340. * @returns {number|undefined} The image index, or undefined if the image does not exist in the atlas.
  341. */
  342. TextureAtlas.prototype.getImageIndex = function (id) {
  343. //>>includeStart('debug', pragmas.debug);
  344. if (!defined(id)) {
  345. throw new DeveloperError("id is required.");
  346. }
  347. //>>includeEnd('debug');
  348. return this._indexHash[id];
  349. };
  350. /**
  351. * Adds an image to the atlas synchronously. If the image is already in the atlas, the atlas is unchanged and
  352. * the existing index is used.
  353. *
  354. * @param {string} id An identifier to detect whether the image already exists in the atlas.
  355. * @param {HTMLImageElement|HTMLCanvasElement} image An image or canvas to add to the texture atlas.
  356. * @returns {number} The image index.
  357. */
  358. TextureAtlas.prototype.addImageSync = function (id, image) {
  359. //>>includeStart('debug', pragmas.debug);
  360. if (!defined(id)) {
  361. throw new DeveloperError("id is required.");
  362. }
  363. if (!defined(image)) {
  364. throw new DeveloperError("image is required.");
  365. }
  366. //>>includeEnd('debug');
  367. let index = this._indexHash[id];
  368. if (defined(index)) {
  369. // we're already aware of this source
  370. return index;
  371. }
  372. index = getIndex(this, image);
  373. // store the promise
  374. this._idHash[id] = Promise.resolve(index);
  375. this._indexHash[id] = index;
  376. // but return the value synchronously
  377. return index;
  378. };
  379. /**
  380. * Adds an image to the atlas. If the image is already in the atlas, the atlas is unchanged and
  381. * the existing index is used.
  382. *
  383. * @param {string} id An identifier to detect whether the image already exists in the atlas.
  384. * @param {HTMLImageElement|HTMLCanvasElement|string|Resource|Promise|TextureAtlas.CreateImageCallback} image An image or canvas to add to the texture atlas,
  385. * or a URL to an Image, or a Promise for an image, or a function that creates an image.
  386. * @returns {Promise<number>} A Promise for the image index.
  387. */
  388. TextureAtlas.prototype.addImage = function (id, image) {
  389. //>>includeStart('debug', pragmas.debug);
  390. if (!defined(id)) {
  391. throw new DeveloperError("id is required.");
  392. }
  393. if (!defined(image)) {
  394. throw new DeveloperError("image is required.");
  395. }
  396. //>>includeEnd('debug');
  397. let indexPromise = this._idHash[id];
  398. if (defined(indexPromise)) {
  399. // we're already aware of this source
  400. return indexPromise;
  401. }
  402. // not in atlas, create the promise for the index
  403. if (typeof image === "function") {
  404. // if image is a function, call it
  405. image = image(id);
  406. //>>includeStart('debug', pragmas.debug);
  407. if (!defined(image)) {
  408. throw new DeveloperError("image is required.");
  409. }
  410. //>>includeEnd('debug');
  411. } else if (typeof image === "string" || image instanceof Resource) {
  412. // Get a resource
  413. const resource = Resource.createIfNeeded(image);
  414. image = resource.fetchImage();
  415. }
  416. const that = this;
  417. indexPromise = Promise.resolve(image).then(function (image) {
  418. const index = getIndex(that, image);
  419. that._indexHash[id] = index;
  420. return index;
  421. });
  422. // store the promise
  423. this._idHash[id] = indexPromise;
  424. return indexPromise;
  425. };
  426. /**
  427. * Add a sub-region of an existing atlas image as additional image indices.
  428. *
  429. * @param {string} id The identifier of the existing image.
  430. * @param {BoundingRectangle} subRegion An {@link BoundingRectangle} sub-region measured in pixels from the bottom-left.
  431. *
  432. * @returns {Promise<number>} A Promise for the image index.
  433. */
  434. TextureAtlas.prototype.addSubRegion = function (id, subRegion) {
  435. //>>includeStart('debug', pragmas.debug);
  436. if (!defined(id)) {
  437. throw new DeveloperError("id is required.");
  438. }
  439. if (!defined(subRegion)) {
  440. throw new DeveloperError("subRegion is required.");
  441. }
  442. //>>includeEnd('debug');
  443. const indexPromise = this._idHash[id];
  444. if (!defined(indexPromise)) {
  445. throw new RuntimeError(`image with id "${id}" not found in the atlas.`);
  446. }
  447. const that = this;
  448. return Promise.resolve(indexPromise).then(function (index) {
  449. if (index === -1) {
  450. // the atlas is destroyed
  451. return -1;
  452. }
  453. const atlasWidth = that._texture.width;
  454. const atlasHeight = that._texture.height;
  455. const baseRegion = that._textureCoordinates[index];
  456. const x = baseRegion.x + subRegion.x / atlasWidth;
  457. const y = baseRegion.y + subRegion.y / atlasHeight;
  458. const w = subRegion.width / atlasWidth;
  459. const h = subRegion.height / atlasHeight;
  460. const newIndex =
  461. that._textureCoordinates.push(new BoundingRectangle(x, y, w, h)) - 1;
  462. that._indexHash[id] = newIndex;
  463. that._guid = createGuid();
  464. return newIndex;
  465. });
  466. };
  467. /**
  468. * Returns true if this object was destroyed; otherwise, false.
  469. * <br /><br />
  470. * If this object was destroyed, it should not be used; calling any function other than
  471. * <code>isDestroyed</code> will result in a {@link DeveloperError} exception.
  472. *
  473. * @returns {boolean} True if this object was destroyed; otherwise, false.
  474. *
  475. * @see TextureAtlas#destroy
  476. */
  477. TextureAtlas.prototype.isDestroyed = function () {
  478. return false;
  479. };
  480. /**
  481. * Destroys the WebGL resources held by this object. Destroying an object allows for deterministic
  482. * release of WebGL resources, instead of relying on the garbage collector to destroy this object.
  483. * <br /><br />
  484. * Once an object is destroyed, it should not be used; calling any function other than
  485. * <code>isDestroyed</code> will result in a {@link DeveloperError} exception. Therefore,
  486. * assign the return value (<code>undefined</code>) to the object as done in the example.
  487. *
  488. * @exception {DeveloperError} This object was destroyed, i.e., destroy() was called.
  489. *
  490. *
  491. * @example
  492. * atlas = atlas && atlas.destroy();
  493. *
  494. * @see TextureAtlas#isDestroyed
  495. */
  496. TextureAtlas.prototype.destroy = function () {
  497. this._texture = this._texture && this._texture.destroy();
  498. return destroyObject(this);
  499. };
  500. /**
  501. * A function that creates an image.
  502. * @callback TextureAtlas.CreateImageCallback
  503. * @param {string} id The identifier of the image to load.
  504. * @returns {HTMLImageElement|Promise<HTMLImageElement>} The image, or a promise that will resolve to an image.
  505. */
  506. export default TextureAtlas;