TextureAtlas.js 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501
  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. import when from "../ThirdParty/when.js";
  14. // The atlas is made up of regions of space called nodes that contain images or child nodes.
  15. function TextureAtlasNode(
  16. bottomLeft,
  17. topRight,
  18. childNode1,
  19. childNode2,
  20. imageIndex
  21. ) {
  22. this.bottomLeft = defaultValue(bottomLeft, Cartesian2.ZERO);
  23. this.topRight = defaultValue(topRight, Cartesian2.ZERO);
  24. this.childNode1 = childNode1;
  25. this.childNode2 = childNode2;
  26. this.imageIndex = imageIndex;
  27. }
  28. var defaultInitialSize = new Cartesian2(16.0, 16.0);
  29. /**
  30. * A TextureAtlas stores multiple images in one square texture and keeps
  31. * track of the texture coordinates for each image. TextureAtlas is dynamic,
  32. * meaning new images can be added at any point in time.
  33. * Texture coordinates are subject to change if the texture atlas resizes, so it is
  34. * important to check {@link TextureAtlas#getGUID} before using old values.
  35. *
  36. * @alias TextureAtlas
  37. * @constructor
  38. *
  39. * @param {Object} options Object with the following properties:
  40. * @param {Scene} options.context The context in which the texture gets created.
  41. * @param {PixelFormat} [options.pixelFormat=PixelFormat.RGBA] The pixel format of the texture.
  42. * @param {Number} [options.borderWidthInPixels=1] The amount of spacing between adjacent images in pixels.
  43. * @param {Cartesian2} [options.initialSize=new Cartesian2(16.0, 16.0)] The initial side lengths of the texture.
  44. *
  45. * @exception {DeveloperError} borderWidthInPixels must be greater than or equal to zero.
  46. * @exception {DeveloperError} initialSize must be greater than zero.
  47. *
  48. * @private
  49. */
  50. function TextureAtlas(options) {
  51. options = defaultValue(options, defaultValue.EMPTY_OBJECT);
  52. var borderWidthInPixels = defaultValue(options.borderWidthInPixels, 1.0);
  53. var initialSize = defaultValue(options.initialSize, defaultInitialSize);
  54. //>>includeStart('debug', pragmas.debug);
  55. if (!defined(options.context)) {
  56. throw new DeveloperError("context is required.");
  57. }
  58. if (borderWidthInPixels < 0) {
  59. throw new DeveloperError(
  60. "borderWidthInPixels must be greater than or equal to zero."
  61. );
  62. }
  63. if (initialSize.x < 1 || initialSize.y < 1) {
  64. throw new DeveloperError("initialSize must be greater than zero.");
  65. }
  66. //>>includeEnd('debug');
  67. this._context = options.context;
  68. this._pixelFormat = defaultValue(options.pixelFormat, PixelFormat.RGBA);
  69. this._borderWidthInPixels = borderWidthInPixels;
  70. this._textureCoordinates = [];
  71. this._guid = createGuid();
  72. this._idHash = {};
  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. var context = textureAtlas._context;
  147. var numImages = textureAtlas.numberOfImages;
  148. var scalingFactor = 2.0;
  149. var borderWidthInPixels = textureAtlas._borderWidthInPixels;
  150. if (numImages > 0) {
  151. var oldAtlasWidth = textureAtlas._texture.width;
  152. var oldAtlasHeight = textureAtlas._texture.height;
  153. var atlasWidth =
  154. scalingFactor * (oldAtlasWidth + image.width + borderWidthInPixels);
  155. var atlasHeight =
  156. scalingFactor * (oldAtlasHeight + image.height + borderWidthInPixels);
  157. var widthRatio = oldAtlasWidth / atlasWidth;
  158. var heightRatio = oldAtlasHeight / atlasHeight;
  159. // Create new node structure, putting the old root node in the bottom left.
  160. var nodeBottomRight = new TextureAtlasNode(
  161. new Cartesian2(oldAtlasWidth + borderWidthInPixels, borderWidthInPixels),
  162. new Cartesian2(atlasWidth, oldAtlasHeight)
  163. );
  164. var nodeBottomHalf = new TextureAtlasNode(
  165. new Cartesian2(),
  166. new Cartesian2(atlasWidth, oldAtlasHeight),
  167. textureAtlas._root,
  168. nodeBottomRight
  169. );
  170. var nodeTopHalf = new TextureAtlasNode(
  171. new Cartesian2(borderWidthInPixels, oldAtlasHeight + borderWidthInPixels),
  172. new Cartesian2(atlasWidth, atlasHeight)
  173. );
  174. var nodeMain = new TextureAtlasNode(
  175. new Cartesian2(),
  176. new Cartesian2(atlasWidth, atlasHeight),
  177. nodeBottomHalf,
  178. nodeTopHalf
  179. );
  180. // Resize texture coordinates.
  181. for (var i = 0; i < textureAtlas._textureCoordinates.length; i++) {
  182. var 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. var newTexture = new Texture({
  192. context: textureAtlas._context,
  193. width: atlasWidth,
  194. height: atlasHeight,
  195. pixelFormat: textureAtlas._pixelFormat,
  196. });
  197. var 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. var initialWidth = scalingFactor * (image.width + 2 * borderWidthInPixels);
  213. var 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. var nodeWidth = node.topRight.x - node.bottomLeft.x;
  249. var nodeHeight = node.topRight.y - node.bottomLeft.y;
  250. var widthDifference = nodeWidth - image.width;
  251. var 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. var 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. var 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. var 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. var atlasWidth = textureAtlas._texture.width;
  308. var atlasHeight = textureAtlas._texture.height;
  309. var nodeWidth = node.topRight.x - node.bottomLeft.x;
  310. var nodeHeight = node.topRight.y - node.bottomLeft.y;
  311. var x = node.bottomLeft.x / atlasWidth;
  312. var y = node.bottomLeft.y / atlasHeight;
  313. var w = nodeWidth / atlasWidth;
  314. var h = nodeHeight / atlasHeight;
  315. textureAtlas._textureCoordinates[index] = new BoundingRectangle(x, y, w, h);
  316. textureAtlas._texture.copyFrom(image, node.bottomLeft.x, node.bottomLeft.y);
  317. } else {
  318. // No node found, must resize the texture atlas.
  319. resizeAtlas(textureAtlas, image);
  320. addImage(textureAtlas, image, index);
  321. }
  322. textureAtlas._guid = createGuid();
  323. }
  324. /**
  325. * Adds an image to the atlas. If the image is already in the atlas, the atlas is unchanged and
  326. * the existing index is used.
  327. *
  328. * @param {String} id An identifier to detect whether the image already exists in the atlas.
  329. * @param {HTMLImageElement|HTMLCanvasElement|String|Resource|Promise|TextureAtlas.CreateImageCallback} image An image or canvas to add to the texture atlas,
  330. * or a URL to an Image, or a Promise for an image, or a function that creates an image.
  331. * @returns {Promise.<Number>} A Promise for the image index.
  332. */
  333. TextureAtlas.prototype.addImage = function (id, image) {
  334. //>>includeStart('debug', pragmas.debug);
  335. if (!defined(id)) {
  336. throw new DeveloperError("id is required.");
  337. }
  338. if (!defined(image)) {
  339. throw new DeveloperError("image is required.");
  340. }
  341. //>>includeEnd('debug');
  342. var indexPromise = this._idHash[id];
  343. if (defined(indexPromise)) {
  344. // we're already aware of this source
  345. return indexPromise;
  346. }
  347. // not in atlas, create the promise for the index
  348. if (typeof image === "function") {
  349. // if image is a function, call it
  350. image = image(id);
  351. //>>includeStart('debug', pragmas.debug);
  352. if (!defined(image)) {
  353. throw new DeveloperError("image is required.");
  354. }
  355. //>>includeEnd('debug');
  356. } else if (typeof image === "string" || image instanceof Resource) {
  357. // Get a resource
  358. var resource = Resource.createIfNeeded(image);
  359. image = resource.fetchImage();
  360. }
  361. var that = this;
  362. indexPromise = when(image, function (image) {
  363. if (that.isDestroyed()) {
  364. return -1;
  365. }
  366. var index = that.numberOfImages;
  367. addImage(that, image, index);
  368. return index;
  369. });
  370. // store the promise
  371. this._idHash[id] = indexPromise;
  372. return indexPromise;
  373. };
  374. /**
  375. * Add a sub-region of an existing atlas image as additional image indices.
  376. *
  377. * @param {String} id The identifier of the existing image.
  378. * @param {BoundingRectangle} subRegion An {@link BoundingRectangle} sub-region measured in pixels from the bottom-left.
  379. *
  380. * @returns {Promise.<Number>} A Promise for the image index.
  381. */
  382. TextureAtlas.prototype.addSubRegion = function (id, subRegion) {
  383. //>>includeStart('debug', pragmas.debug);
  384. if (!defined(id)) {
  385. throw new DeveloperError("id is required.");
  386. }
  387. if (!defined(subRegion)) {
  388. throw new DeveloperError("subRegion is required.");
  389. }
  390. //>>includeEnd('debug');
  391. var indexPromise = this._idHash[id];
  392. if (!defined(indexPromise)) {
  393. throw new RuntimeError(
  394. 'image with id "' + id + '" not found in the atlas.'
  395. );
  396. }
  397. var that = this;
  398. return when(indexPromise, function (index) {
  399. if (index === -1) {
  400. // the atlas is destroyed
  401. return -1;
  402. }
  403. var atlasWidth = that._texture.width;
  404. var atlasHeight = that._texture.height;
  405. var numImages = that.numberOfImages;
  406. var baseRegion = that._textureCoordinates[index];
  407. var x = baseRegion.x + subRegion.x / atlasWidth;
  408. var y = baseRegion.y + subRegion.y / atlasHeight;
  409. var w = subRegion.width / atlasWidth;
  410. var h = subRegion.height / atlasHeight;
  411. that._textureCoordinates.push(new BoundingRectangle(x, y, w, h));
  412. that._guid = createGuid();
  413. return numImages;
  414. });
  415. };
  416. /**
  417. * Returns true if this object was destroyed; otherwise, false.
  418. * <br /><br />
  419. * If this object was destroyed, it should not be used; calling any function other than
  420. * <code>isDestroyed</code> will result in a {@link DeveloperError} exception.
  421. *
  422. * @returns {Boolean} True if this object was destroyed; otherwise, false.
  423. *
  424. * @see TextureAtlas#destroy
  425. */
  426. TextureAtlas.prototype.isDestroyed = function () {
  427. return false;
  428. };
  429. /**
  430. * Destroys the WebGL resources held by this object. Destroying an object allows for deterministic
  431. * release of WebGL resources, instead of relying on the garbage collector to destroy this object.
  432. * <br /><br />
  433. * Once an object is destroyed, it should not be used; calling any function other than
  434. * <code>isDestroyed</code> will result in a {@link DeveloperError} exception. Therefore,
  435. * assign the return value (<code>undefined</code>) to the object as done in the example.
  436. *
  437. * @exception {DeveloperError} This object was destroyed, i.e., destroy() was called.
  438. *
  439. *
  440. * @example
  441. * atlas = atlas && atlas.destroy();
  442. *
  443. * @see TextureAtlas#isDestroyed
  444. */
  445. TextureAtlas.prototype.destroy = function () {
  446. this._texture = this._texture && this._texture.destroy();
  447. return destroyObject(this);
  448. };
  449. /**
  450. * A function that creates an image.
  451. * @callback TextureAtlas.CreateImageCallback
  452. * @param {String} id The identifier of the image to load.
  453. * @returns {HTMLImageElement|Promise<HTMLImageElement>} The image, or a promise that will resolve to an image.
  454. */
  455. export default TextureAtlas;