additional fixes for billboard image coords

Author: donmccurdy

packages/engine/Source/Renderer/TextureAtlas.js

@@ -193,22 +193,21 @@ Object.defineProperties(TextureAtlas.prototype, {
 });
 
 /**
- * Get the texture coordinates for reading the associated image in shaders.
+ * TODO
  * @param {number} index The index of the image region.
  * @param {BoundingRectangle} [result] The object into which to store the result.
  * @return {BoundingRectangle} The modified result parameter or a new BoundingRectangle instance if one was not provided.
  * @private
  * @example
  * const index = await atlas.addImage("myImage", image);
- * const rectangle = atlas.computeTextureCoordinates(index);
+ * const rectangle = atlas.computeImageCoordinates(index);
  * BoundingRectangle.pack(rectangle, bufferView);
  */
-TextureAtlas.prototype.computeTextureCoordinates = function (index, result) {
+TextureAtlas.prototype.computeImageCoordinates = function (index, result) {
   //>>includeStart('debug', pragmas.debug);
   Check.typeOf.number.greaterThanOrEquals("index", index, 0);
   //>>includeEnd('debug');
 
-  const texture = this._texture;
   const rectangle = this._rectangles[index];
 
   if (!defined(result)) {
@@ -224,11 +223,6 @@ TextureAtlas.prototype.computeTextureCoordinates = function (index, result) {
     return result;
   }
 
-  const atlasWidth = texture.width;
-  const atlasHeight = texture.height;
-
-  const width = rectangle.width;
-  const height = rectangle.height;
   let x = rectangle.x;
   let y = rectangle.y;
 
@@ -240,10 +234,36 @@ TextureAtlas.prototype.computeTextureCoordinates = function (index, result) {
     y += parentRectangle.y;
   }
 
-  result.x = x / atlasWidth;
-  result.y = y / atlasHeight;
-  result.width = width / atlasWidth;
-  result.height = height / atlasHeight;
+  result.x = x;
+  result.y = y;
+  result.width = rectangle.width;
+  result.height = rectangle.height;
+
+  return result;
+};
+
+/**
+ * Get the texture coordinates for reading the associated image in shaders.
+ * @param {number} index The index of the image region.
+ * @param {BoundingRectangle} [result] The object into which to store the result.
+ * @return {BoundingRectangle} The modified result parameter or a new BoundingRectangle instance if one was not provided.
+ * @private
+ * @example
+ * const index = await atlas.addImage("myImage", image);
+ * const rectangle = atlas.computeTextureCoordinates(index);
+ * BoundingRectangle.pack(rectangle, bufferView);
+ */
+TextureAtlas.prototype.computeTextureCoordinates = function (index, result) {
+  result = this.computeImageCoordinates(index, result);
+
+  const texture = this._texture;
+  const atlasWidth = texture.width;
+  const atlasHeight = texture.height;
+
+  result.x /= atlasWidth;
+  result.y /= atlasHeight;
+  result.width /= atlasWidth;
+  result.height /= atlasHeight;
 
   return result;
 };

packages/engine/Source/Scene/Billboard.js

@@ -1195,6 +1195,16 @@ Billboard._updateClamping = function (collection, owner) {
   updateFunction(scratchCartographic);
 };
 
+/**
+ * Get the image coordinates for reading the loaded texture in shaders.
+ * @param {BoundingRectangle} [result] The modified result parameter or a new BoundingRectangle instance if one was not provided.
+ * @return {BoundingRectangle} The modified result parameter or a new BoundingRectangle instance if one was not provided.
+ * @private
+ */
+Billboard.prototype.computeImageCoordinates = function (result) {
+  return this._imageTexture.computeImageCoordinates(result);
+};
+
 /**
  * Get the texture coordinates for reading the loaded texture in shaders.
  * @param {BoundingRectangle} [result] The modified result parameter or a new BoundingRectangle instance if one was not provided.

packages/engine/Source/Scene/BillboardCollection.js

@@ -1014,15 +1014,11 @@ function writeCompressedAttrib0(
   let imageWidth = 0;
   let imageHeight = 0;
   if (billboard.ready) {
-    const imageRectangle = billboard.computeTextureCoordinates(
-      scratchBoundingRectangle,
-    );
-    const { width: atlasWidth, height: atlasHeight } =
-      billboardCollection.textureAtlas.texture;
-    imageX = imageRectangle.x * atlasWidth;
-    imageY = imageRectangle.y * atlasHeight;
-    imageWidth = imageRectangle.width * atlasWidth;
-    imageHeight = imageRectangle.height * atlasHeight;
+    billboard.computeImageCoordinates(scratchBoundingRectangle);
+    imageX = scratchBoundingRectangle.x;
+    imageY = scratchBoundingRectangle.y;
+    imageWidth = scratchBoundingRectangle.width;
+    imageHeight = scratchBoundingRectangle.height;
   }
 
   let compressed0 =
@@ -1060,13 +1056,13 @@ function writeCompressedAttrib0(
   compressed1 += upperTranslateY;
   compressed2 += lowerTranslateY;
 
-  // Compress image coordinates (px), integers 0-2^16 from lower-left of atlas. Avoid
+  // Compress image coordinates (px), integers 0-2^12 from lower-left of atlas. Avoid
   // `AttributeCompression.compressTextureCoordinates` for lossless pixel values.
-  const compressedImageLL = imageX * LEFT_SHIFT16 + imageY;
-  const compressedImageLR = (imageX + imageWidth) * LEFT_SHIFT16 + imageY;
+  const compressedImageLL = imageX * LEFT_SHIFT12 + imageY;
+  const compressedImageLR = (imageX + imageWidth) * LEFT_SHIFT12 + imageY;
   const compressedImageUR =
-    (imageX + imageWidth) * LEFT_SHIFT16 + imageY + imageHeight;
-  const compressedImageUL = imageX * LEFT_SHIFT16 + imageY + imageHeight;
+    (imageX + imageWidth) * LEFT_SHIFT12 + imageY + imageHeight;
+  const compressedImageUL = imageX * LEFT_SHIFT12 + imageY + imageHeight;
 
   if (billboardCollection._instanced) {
     i = billboard._index;

packages/engine/Source/Scene/BillboardTexture.js

@@ -334,6 +334,17 @@ BillboardTexture.prototype.setImageSubRegion = function (index, subRegion) {
   this.dirty = true;
 };
 
+/**
+ * Get the image coordinates for reading the loaded texture in shaders.
+ * @private
+ * @param {BoundingRectangle} [result] The modified result parameter or a new BoundingRectangle instance if one was not provided.
+ * @return {BoundingRectangle} The modified result parameter or a new BoundingRectangle instance if one was not provided.
+ */
+BillboardTexture.prototype.computeImageCoordinates = function (result) {
+  const atlas = this._billboardCollection.textureAtlas;
+  return atlas.computeImageCoordinates(this._index, result);
+};
+
 /**
  * Get the texture coordinates for reading the loaded texture in shaders.
  * @private

packages/engine/Source/Shaders/BillboardCollectionVS.glsl

@@ -168,17 +168,17 @@ void main()
     translate.y -= UPPER_BOUND;
     translate.y *= SHIFT_RIGHT2;
 
-    temp = compressedAttribute1.x * SHIFT_RIGHT8;
-    float temp2 = floor(compressedAttribute2.w * SHIFT_RIGHT2);
+    // TODO(donmccurdy): This is billboard size (px) on screen, not image size (px) in atlas?
+    float imageWidth = floor(compressedAttribute1.x * SHIFT_RIGHT8);
+    float imageHeight = floor(compressedAttribute2.w * SHIFT_RIGHT2);
+    vec2 imageSize = vec2(imageWidth, imageHeight);
 
-    vec2 imageSize = vec2(floor(temp), temp2);
-
-    float imageOffsetX = floor(compressedAttribute0.w * SHIFT_RIGHT16);
-    float imageOffsetY = compressedAttribute0.w - (imageOffsetX * SHIFT_LEFT16);
-    vec2 textureCoordinates = vec2(imageOffsetX, imageOffsetY) / u_atlasSize.xy;
+    float imageOffsetX = floor(compressedAttribute0.w * SHIFT_RIGHT12);
+    float imageOffsetY = compressedAttribute0.w - (imageOffsetX * SHIFT_LEFT12);
+    vec2 textureCoordinates = vec2(imageOffsetX + 0.5, imageOffsetY + 0.5) / u_atlasSize.xy;
 
 #ifdef INSTANCED
-    vec2 textureCoordinatesRange = imageSize.xy / u_atlasSize.xy;
+    vec2 textureCoordinatesRange = imageSize.xy / u_atlasSize.xy; // TODO(donmccurdy): Needs -1.0 offset?
     textureCoordinates += direction * textureCoordinatesRange;
 #endif