fix(BillboardCollection): Fix precision loss in billboard image texcoords

Author: donmccurdy

packages/engine/Source/Scene/BillboardCollection.js

@@ -57,14 +57,16 @@ const SDF_INDEX = Billboard.SDF_INDEX;
 const SPLIT_DIRECTION_INDEX = Billboard.SPLIT_DIRECTION_INDEX;
 const NUMBER_OF_PROPERTIES = Billboard.NUMBER_OF_PROPERTIES;
 
+const scratchTextureSize = new Cartesian2();
+
 const attributeLocations = {
   direction: 0,
   positionHighAndScale: 1,
   positionLowAndRotation: 2, // texture offset in w
   compressedAttribute0: 3,
   compressedAttribute1: 4,
   compressedAttribute2: 5,
-  eyeOffset: 6, // texture range in w
+  eyeOffset: 6,
   scaleByDistance: 7,
   pixelOffsetScaleByDistance: 8,
   compressedAttribute3: 9,
@@ -304,6 +306,10 @@ function BillboardCollection(options) {
     u_atlas: () => {
       return this.textureAtlas.texture;
     },
+    u_atlasSize: () => {
+      const { width, height } = this.textureAtlas.texture;
+      return Cartesian2.fromElements(width, height, scratchTextureSize);
+    },
     u_highlightColor: () => {
       return this._highlightColor;
     },
@@ -858,8 +864,6 @@ function writePositionScaleAndRotation(
   positionLowWriter(i, low.x, low.y, low.z, rotation);
 }
 
-const scratchCartesian2 = new Cartesian2();
-
 const UPPER_BOUND = 32768.0; // 2^15
 
 const LEFT_SHIFT16 = 65536.0; // 2^16
@@ -917,15 +921,17 @@ function writeCompressedAttrib0(
     billboardCollection._allVerticalCenter &&
     verticalOrigin === VerticalOrigin.CENTER;
 
-  let bottomLeftX = 0;
-  let bottomLeftY = 0;
+  // Compute offset (in pixels) from lower-left of the texture atlas.
+  let imageOffsetX = 0;
+  let imageOffsetY = 0;
   if (billboard.ready) {
     const imageRectangle = billboard.computeTextureCoordinates(
       scratchBoundingRectangle,
     );
-
-    bottomLeftX = imageRectangle.x;
-    bottomLeftY = imageRectangle.y;
+    const { width: atlasWidth, height: atlasHeight } =
+      billboardCollection.textureAtlas.texture;
+    imageOffsetX = imageRectangle.x * atlasWidth;
+    imageOffsetY = imageRectangle.y * atlasHeight;
   }
 
   let compressed0 =
@@ -963,13 +969,10 @@ function writeCompressedAttrib0(
   compressed1 += upperTranslateY;
   compressed2 += lowerTranslateY;
 
-  scratchCartesian2.x = bottomLeftX;
-  scratchCartesian2.y = bottomLeftY;
-  const compressedTexCoordsLL =
-    AttributeCompression.compressTextureCoordinates(scratchCartesian2);
+  const compressedImageOffsetLL = imageOffsetX * LEFT_SHIFT16 + imageOffsetY;
 
   const i = billboard._index;
-  writer(i, compressed0, compressed1, compressed2, compressedTexCoordsLL);
+  writer(i, compressed0, compressed1, compressed2, compressedImageOffsetLL);
 }
 
 function writeCompressedAttrib1(
@@ -1101,23 +1104,8 @@ function writeEyeOffset(
     Math.abs(eyeOffsetZ),
   );
 
-  scratchCartesian2.x = 0;
-  scratchCartesian2.y = 0;
-
-  if (billboard.ready) {
-    const imageRectangle = billboard.computeTextureCoordinates(
-      scratchBoundingRectangle,
-    );
-
-    scratchCartesian2.x = imageRectangle.width;
-    scratchCartesian2.y = imageRectangle.height;
-  }
-
-  const compressedTexCoordsRange =
-    AttributeCompression.compressTextureCoordinates(scratchCartesian2);
-
   const i = billboard._index;
-  writer(i, eyeOffset.x, eyeOffset.y, eyeOffsetZ, compressedTexCoordsRange);
+  writer(i, eyeOffset.x, eyeOffset.y, eyeOffsetZ, 0.0);
 }
 
 function writeScaleByDistance(

packages/engine/Source/Shaders/BillboardCollectionVS.glsl

@@ -1,3 +1,4 @@
+uniform vec2 u_atlasSize;
 uniform float u_threePointDepthTestDistance;
 in vec2 direction;
 in vec4 positionHighAndScale;
@@ -45,6 +46,7 @@ const float SHIFT_LEFT3 = 8.0;
 const float SHIFT_LEFT2 = 4.0;
 const float SHIFT_LEFT1 = 2.0;
 
+const float SHIFT_RIGHT16 = 1.0 / 65536.0;
 const float SHIFT_RIGHT12 = 1.0 / 4096.0;
 const float SHIFT_RIGHT8 = 1.0 / 256.0;
 const float SHIFT_RIGHT7 = 1.0 / 128.0;
@@ -144,10 +146,6 @@ void main()
     float show = floor(compressed * SHIFT_RIGHT2);
     compressed -= show * SHIFT_LEFT2;
 
-    vec2 textureCoordinatesBottomLeft = czm_decompressTextureCoordinates(compressedAttribute0.w);
-    vec2 textureCoordinatesRange = czm_decompressTextureCoordinates(eyeOffset.w);
-    vec2 textureCoordinates = textureCoordinatesBottomLeft + direction * textureCoordinatesRange;
-
     float temp = compressedAttribute0.y  * SHIFT_RIGHT8;
     pixelOffset.y = -(floor(temp) - UPPER_BOUND);
 
@@ -167,6 +165,12 @@ void main()
 
     vec2 imageSize = vec2(floor(temp), temp2);
 
+    float imageOffsetX = floor(compressedAttribute0.w * SHIFT_RIGHT16);
+    float imageOffsetY = compressedAttribute0.w - (imageOffsetX * SHIFT_LEFT16);
+    vec2 textureCoordinatesBottomLeft = vec2(imageOffsetX, imageOffsetY) / u_atlasSize.xy;
+    vec2 textureCoordinatesRange = imageSize.xy / u_atlasSize.xy;
+    vec2 textureCoordinates = textureCoordinatesBottomLeft + direction * textureCoordinatesRange;
+
 #ifdef FS_THREE_POINT_DEPTH_CHECK
     float labelHorizontalOrigin = floor(compressedAttribute2.w - (temp2 * SHIFT_LEFT2));
     float applyTranslate = 0.0;