@cesium/engine 25.0.0 → 26.1.0

package/Source/Scene/renderBufferPolylineCollection.js

@@ -22,6 +22,7 @@ import AttributeCompression from "../Core/AttributeCompression.js";
 import IndexDatatype from "../Core/IndexDatatype.js";
 import PolylineCommon from "../Shaders/PolylineCommon.js";
 import BufferPolylineMaterial from "./BufferPolylineMaterial.js";
+import BlendOption from "./BlendOption.js";
 
 /** @import FrameState from "./FrameState.js"; */
 /** @import BufferPolylineCollection from "./BufferPolylineCollection.js"; */
@@ -29,15 +30,16 @@ import BufferPolylineMaterial from "./BufferPolylineMaterial.js";
 
 /**
  * TODO(PR#13211): Need 'keyof' syntax to avoid duplicating attribute names.
- * @typedef {'positionHigh' | 'positionLow' | 'prevPositionHigh' | 'prevPositionLow' | 'nextPositionHigh' | 'nextPositionLow' | 'pickColor' | 'showColorWidthAndTexCoord'} BufferPolylineAttribute
+ * @typedef {'positionHigh' | 'positionLow' | 'prevPositionHigh' | 'prevPositionLow' | 'nextPositionHigh' | 'nextPositionLow' | 'pickColor' | 'showColorWidthAndTexCoord' | 'alpha'} BufferPolylineAttribute
  * @ignore
  */
 
 /**
+ * Attribute locations when using 64-bit position precision.
  * @type {Record<BufferPolylineAttribute, number>}
  * @ignore
  */
-const BufferPolylineAttributeLocations = {
+const BufferPolylineAttributeLocationsFloat64 = {
   positionHigh: 0,
   positionLow: 1,
   prevPositionHigh: 2,
@@ -46,12 +48,27 @@ const BufferPolylineAttributeLocations = {
   nextPositionLow: 5,
   pickColor: 6,
   showColorWidthAndTexCoord: 7,
+  alpha: 8,
+};
+
+/**
+ * Attribute locations when using <= 32-bit position precision.
+ * @type {Record<string, number>}
+ * @ignore
+ */
+const BufferPolylineAttributeLocations = {
+  position: 0,
+  prevPosition: 1,
+  nextPosition: 2,
+  pickColor: 3,
+  showColorWidthAndTexCoord: 4,
+  alpha: 5,
 };
 
 /**
  * @typedef {object} BufferPolylineRenderContext
  * @property {VertexArray} [vertexArray]
- * @property {Record<BufferPolylineAttribute, TypedArray>} [attributeArrays]
+ * @property {Record<string, TypedArray>} [attributeArrays]
  * @property {TypedArray} [indexArray]
  * @property {RenderState} [renderState]
  * @property {ShaderProgram} [shaderProgram]
@@ -67,9 +84,9 @@ const pickColor = new Color();
 const cartesian = new Cartesian3();
 const prevCartesian = new Cartesian3();
 const nextCartesian = new Cartesian3();
-const cartesianEnc = new EncodedCartesian3();
-const prevCartesianEnc = new EncodedCartesian3();
-const nextCartesianEnc = new EncodedCartesian3();
+const encodedC = new EncodedCartesian3();
+const encodedP = new EncodedCartesian3();
+const encodedN = new EncodedCartesian3();
 
 /**
  * Renders line segments as quads, each composed of two triangles. Writes each
@@ -94,6 +111,10 @@ const nextCartesianEnc = new EncodedCartesian3();
 function renderBufferPolylineCollection(collection, frameState, renderContext) {
   const context = frameState.context;
   renderContext = renderContext || { destroy: destroyRenderContext };
+  const useFloat64 = collection._positionDatatype === ComponentDatatype.DOUBLE;
+  const attributeLocations = useFloat64
+    ? BufferPolylineAttributeLocationsFloat64
+    : BufferPolylineAttributeLocations;
 
   if (
     !defined(renderContext.attributeArrays) ||
@@ -112,31 +133,62 @@ function renderBufferPolylineCollection(collection, frameState, renderContext) {
     );
 
     renderContext.attributeArrays = {
-      positionHigh: new Float32Array(vertexCountMax * 3),
-      positionLow: new Float32Array(vertexCountMax * 3),
-      prevPositionHigh: new Float32Array(vertexCountMax * 3),
-      prevPositionLow: new Float32Array(vertexCountMax * 3),
-      nextPositionHigh: new Float32Array(vertexCountMax * 3),
-      nextPositionLow: new Float32Array(vertexCountMax * 3),
+      ...(!useFloat64
+        ? {
+            // @ts-expect-error https://github.com/CesiumGS/cesium/issues/13420
+            position: ComponentDatatype.createTypedArray(
+              collection._positionDatatype,
+              vertexCountMax * 3,
+            ),
+            // @ts-expect-error https://github.com/CesiumGS/cesium/issues/13420
+            prevPosition: ComponentDatatype.createTypedArray(
+              collection._positionDatatype,
+              vertexCountMax * 3,
+            ),
+            // @ts-expect-error https://github.com/CesiumGS/cesium/issues/13420
+            nextPosition: ComponentDatatype.createTypedArray(
+              collection._positionDatatype,
+              vertexCountMax * 3,
+            ),
+          }
+        : {
+            positionHigh: new Float32Array(vertexCountMax * 3),
+            positionLow: new Float32Array(vertexCountMax * 3),
+            prevPositionHigh: new Float32Array(vertexCountMax * 3),
+            prevPositionLow: new Float32Array(vertexCountMax * 3),
+            nextPositionHigh: new Float32Array(vertexCountMax * 3),
+            nextPositionLow: new Float32Array(vertexCountMax * 3),
+          }),
       pickColor: new Uint8Array(vertexCountMax * 4),
       showColorWidthAndTexCoord: new Float32Array(vertexCountMax * 4),
+      alpha: new Uint8Array(vertexCountMax),
     };
   }
 
   if (collection._dirtyCount > 0) {
     const { _dirtyOffset, _dirtyCount } = collection;
-    const { attributeArrays } = renderContext;
 
     const indexArray = renderContext.indexArray;
-    const positionHighArray = attributeArrays.positionHigh;
-    const positionLowArray = attributeArrays.positionLow;
-    const prevPositionHighArray = attributeArrays.prevPositionHigh;
-    const prevPositionLowArray = attributeArrays.prevPositionLow;
-    const nextPositionHighArray = attributeArrays.nextPositionHigh;
-    const nextPositionLowArray = attributeArrays.nextPositionLow;
-    const pickColorArray = attributeArrays.pickColor;
-    const showColorWidthAndTexCoordArray =
-      attributeArrays.showColorWidthAndTexCoord;
+
+    const {
+      // Common.
+      pickColor: pickColorArray,
+      showColorWidthAndTexCoord: showColorWidthAndTexCoordArray,
+      alpha: alphaArray,
+
+      // 8-32 bit.
+      position,
+      prevPosition,
+      nextPosition,
+
+      // 64 bit.
+      positionHigh,
+      positionLow,
+      prevPositionHigh,
+      prevPositionLow,
+      nextPositionHigh,
+      nextPositionLow,
+    } = renderContext.attributeArrays;
 
     for (let i = _dirtyOffset, il = _dirtyOffset + _dirtyCount; i < il; i++) {
       collection.get(i, polyline);
@@ -145,97 +197,119 @@ function renderBufferPolylineCollection(collection, frameState, renderContext) {
         continue;
       }
 
-      const cartesianArray = polyline.getPositions();
       polyline.getMaterial(material);
       const encodedColor = AttributeCompression.encodeRGB8(material.color);
+      const colorAlpha = material.color.alpha;
       Color.fromRgba(polyline._pickId, pickColor);
       const show = polyline.show;
 
       let vOffset = polyline.vertexOffset * 2; // vertex offset
       let iOffset = (polyline.vertexOffset - i) * 6; // index offset
 
+      const posView = collection._positionView;
+      const posStart = polyline.vertexOffset * 3;
+
       for (let j = 0, jl = polyline.vertexCount; j < jl; j++) {
         const isFirstSegment = j === 0;
         const isLastSegment = j === jl - 1;
 
-        // For first/last vertices, infer missing vertices by mirroring the segment.
-        // @ts-expect-error TODO(tsd-jsdoc): See https://github.com/CesiumGS/cesium/pull/13302.
-        Cartesian3.fromArray(cartesianArray, j * 3, cartesian);
+        // c=current, p=previous, n=next
+
+        const cx = posView[posStart + j * 3];
+        const cy = posView[posStart + j * 3 + 1];
+        const cz = posView[posStart + j * 3 + 2];
+
+        let px, py, pz, nx, ny, nz;
+
         if (isFirstSegment) {
-          // @ts-expect-error TODO(tsd-jsdoc): See https://github.com/CesiumGS/cesium/pull/13302.
-          Cartesian3.fromArray(cartesianArray, (j + 1) * 3, nextCartesian);
-          Cartesian3.subtract(cartesian, nextCartesian, prevCartesian);
-          Cartesian3.add(cartesian, prevCartesian, prevCartesian);
+          nx = posView[posStart + 1 * 3];
+          ny = posView[posStart + 1 * 3 + 1];
+          nz = posView[posStart + 1 * 3 + 2];
+          // Mirror current over next to get synthetic prev.
+          px = 2 * cx - nx;
+          py = 2 * cy - ny;
+          pz = 2 * cz - nz;
         } else if (isLastSegment) {
-          // @ts-expect-error TODO(tsd-jsdoc): See https://github.com/CesiumGS/cesium/pull/13302.
-          Cartesian3.fromArray(cartesianArray, (j - 1) * 3, prevCartesian);
-          Cartesian3.subtract(cartesian, prevCartesian, nextCartesian);
-          Cartesian3.add(cartesian, nextCartesian, nextCartesian);
+          px = posView[posStart + (j - 1) * 3];
+          py = posView[posStart + (j - 1) * 3 + 1];
+          pz = posView[posStart + (j - 1) * 3 + 2];
+          // Mirror current over prev to get synthetic next.
+          nx = 2 * cx - px;
+          ny = 2 * cy - py;
+          nz = 2 * cz - pz;
         } else {
-          // @ts-expect-error TODO(tsd-jsdoc): See https://github.com/CesiumGS/cesium/pull/13302.
-          Cartesian3.fromArray(cartesianArray, (j - 1) * 3, prevCartesian);
-          // @ts-expect-error TODO(tsd-jsdoc): See https://github.com/CesiumGS/cesium/pull/13302.
-          Cartesian3.fromArray(cartesianArray, (j + 1) * 3, nextCartesian);
+          px = posView[posStart + (j - 1) * 3];
+          py = posView[posStart + (j - 1) * 3 + 1];
+          pz = posView[posStart + (j - 1) * 3 + 2];
+          nx = posView[posStart + (j + 1) * 3];
+          ny = posView[posStart + (j + 1) * 3 + 1];
+          nz = posView[posStart + (j + 1) * 3 + 2];
         }
 
-        // For each segment, draw two triangles.
         if (!isLastSegment) {
           indexArray[iOffset] = vOffset;
           indexArray[iOffset + 1] = vOffset + 1;
           indexArray[iOffset + 2] = vOffset + 2;
-
           indexArray[iOffset + 3] = vOffset + 2;
           indexArray[iOffset + 4] = vOffset + 1;
           indexArray[iOffset + 5] = vOffset + 3;
-
           iOffset += 6;
         }
 
-        EncodedCartesian3.fromCartesian(cartesian, cartesianEnc);
-        EncodedCartesian3.fromCartesian(prevCartesian, prevCartesianEnc);
-        EncodedCartesian3.fromCartesian(nextCartesian, nextCartesianEnc);
+        if (useFloat64) {
+          Cartesian3.fromElements(cx, cy, cz, cartesian);
+          Cartesian3.fromElements(px, py, pz, prevCartesian);
+          Cartesian3.fromElements(nx, ny, nz, nextCartesian);
+          EncodedCartesian3.fromCartesian(cartesian, encodedC);
+          EncodedCartesian3.fromCartesian(prevCartesian, encodedP);
+          EncodedCartesian3.fromCartesian(nextCartesian, encodedN);
+        }
 
         // TODO(donmccurdy): Diverging from PolylineCollection.js, which writes
         // internal vertices to buffer 4x, not 2x. Not sure that's needed?
+
+        // Write each vertex twice for the quad.
         for (let k = 0; k < 2; k++) {
-          // Position.
-          positionHighArray[vOffset * 3] = cartesianEnc.high.x;
-          positionHighArray[vOffset * 3 + 1] = cartesianEnc.high.y;
-          positionHighArray[vOffset * 3 + 2] = cartesianEnc.high.z;
-
-          positionLowArray[vOffset * 3] = cartesianEnc.low.x;
-          positionLowArray[vOffset * 3 + 1] = cartesianEnc.low.y;
-          positionLowArray[vOffset * 3 + 2] = cartesianEnc.low.z;
-
-          // Previous position.
-          prevPositionHighArray[vOffset * 3] = prevCartesianEnc.high.x;
-          prevPositionHighArray[vOffset * 3 + 1] = prevCartesianEnc.high.y;
-          prevPositionHighArray[vOffset * 3 + 2] = prevCartesianEnc.high.z;
-
-          prevPositionLowArray[vOffset * 3] = prevCartesianEnc.low.x;
-          prevPositionLowArray[vOffset * 3 + 1] = prevCartesianEnc.low.y;
-          prevPositionLowArray[vOffset * 3 + 2] = prevCartesianEnc.low.z;
-
-          // Next position.
-          nextPositionHighArray[vOffset * 3] = nextCartesianEnc.high.x;
-          nextPositionHighArray[vOffset * 3 + 1] = nextCartesianEnc.high.y;
-          nextPositionHighArray[vOffset * 3 + 2] = nextCartesianEnc.high.z;
-
-          nextPositionLowArray[vOffset * 3] = nextCartesianEnc.low.x;
-          nextPositionLowArray[vOffset * 3 + 1] = nextCartesianEnc.low.y;
-          nextPositionLowArray[vOffset * 3 + 2] = nextCartesianEnc.low.z;
-
-          // Pick ID.
+          if (!useFloat64) {
+            position[vOffset * 3] = cx;
+            position[vOffset * 3 + 1] = cy;
+            position[vOffset * 3 + 2] = cz;
+
+            prevPosition[vOffset * 3] = px;
+            prevPosition[vOffset * 3 + 1] = py;
+            prevPosition[vOffset * 3 + 2] = pz;
+
+            nextPosition[vOffset * 3] = nx;
+            nextPosition[vOffset * 3 + 1] = ny;
+            nextPosition[vOffset * 3 + 2] = nz;
+          } else {
+            // @ts-expect-error https://github.com/CesiumGS/cesium/pull/13302
+            Cartesian3.pack(encodedC.high, positionHigh, vOffset * 3);
+            // @ts-expect-error https://github.com/CesiumGS/cesium/pull/13302
+            Cartesian3.pack(encodedC.low, positionLow, vOffset * 3);
+
+            // @ts-expect-error https://github.com/CesiumGS/cesium/pull/13302
+            Cartesian3.pack(encodedP.high, prevPositionHigh, vOffset * 3);
+            // @ts-expect-error https://github.com/CesiumGS/cesium/pull/13302
+            Cartesian3.pack(encodedP.low, prevPositionLow, vOffset * 3);
+
+            // @ts-expect-error https://github.com/CesiumGS/cesium/pull/13302
+            Cartesian3.pack(encodedN.high, nextPositionHigh, vOffset * 3);
+            // @ts-expect-error https://github.com/CesiumGS/cesium/pull/13302
+            Cartesian3.pack(encodedN.low, nextPositionLow, vOffset * 3);
+          }
+
           pickColorArray[vOffset * 4] = Color.floatToByte(pickColor.red);
           pickColorArray[vOffset * 4 + 1] = Color.floatToByte(pickColor.green);
           pickColorArray[vOffset * 4 + 2] = Color.floatToByte(pickColor.blue);
           pickColorArray[vOffset * 4 + 3] = Color.floatToByte(pickColor.alpha);
 
-          // Properties.
           showColorWidthAndTexCoordArray[vOffset * 4] = show ? 1 : 0;
           showColorWidthAndTexCoordArray[vOffset * 4 + 1] = encodedColor;
           showColorWidthAndTexCoordArray[vOffset * 4 + 2] = material.width;
-          showColorWidthAndTexCoordArray[vOffset * 4 + 3] = j / (jl - 1); // texcoord.s
+          showColorWidthAndTexCoordArray[vOffset * 4 + 3] = j / (jl - 1);
+
+          alphaArray[vOffset] = colorAlpha * 255.0;
 
           vOffset++;
         }
@@ -260,84 +334,130 @@ function renderBufferPolylineCollection(collection, frameState, renderContext) {
       }),
 
       attributes: [
+        ...(!useFloat64
+          ? [
+              {
+                index: BufferPolylineAttributeLocations.position,
+                componentDatatype: collection._positionDatatype,
+                componentsPerAttribute: 3,
+                normalize: collection._positionNormalized,
+                vertexBuffer: Buffer.createVertexBuffer({
+                  typedArray: attributeArrays.position,
+                  context,
+                  usage: BufferUsage.STATIC_DRAW,
+                }),
+              },
+              {
+                index: BufferPolylineAttributeLocations.prevPosition,
+                componentDatatype: collection._positionDatatype,
+                componentsPerAttribute: 3,
+                normalize: collection._positionNormalized,
+                vertexBuffer: Buffer.createVertexBuffer({
+                  typedArray: attributeArrays.prevPosition,
+                  context,
+                  usage: BufferUsage.STATIC_DRAW,
+                }),
+              },
+              {
+                index: BufferPolylineAttributeLocations.nextPosition,
+                componentDatatype: collection._positionDatatype,
+                componentsPerAttribute: 3,
+                normalize: collection._positionNormalized,
+                vertexBuffer: Buffer.createVertexBuffer({
+                  typedArray: attributeArrays.nextPosition,
+                  context,
+                  usage: BufferUsage.STATIC_DRAW,
+                }),
+              },
+            ]
+          : [
+              {
+                index: BufferPolylineAttributeLocationsFloat64.positionHigh,
+                componentDatatype: ComponentDatatype.FLOAT,
+                componentsPerAttribute: 3,
+                vertexBuffer: Buffer.createVertexBuffer({
+                  typedArray: attributeArrays.positionHigh,
+                  context,
+                  usage: BufferUsage.STATIC_DRAW,
+                }),
+              },
+              {
+                index: BufferPolylineAttributeLocationsFloat64.positionLow,
+                componentDatatype: ComponentDatatype.FLOAT,
+                componentsPerAttribute: 3,
+                vertexBuffer: Buffer.createVertexBuffer({
+                  typedArray: attributeArrays.positionLow,
+                  context,
+                  usage: BufferUsage.STATIC_DRAW,
+                }),
+              },
+              {
+                index: BufferPolylineAttributeLocationsFloat64.prevPositionHigh,
+                componentDatatype: ComponentDatatype.FLOAT,
+                componentsPerAttribute: 3,
+                vertexBuffer: Buffer.createVertexBuffer({
+                  typedArray: attributeArrays.prevPositionHigh,
+                  context,
+                  usage: BufferUsage.STATIC_DRAW,
+                }),
+              },
+              {
+                index: BufferPolylineAttributeLocationsFloat64.prevPositionLow,
+                componentDatatype: ComponentDatatype.FLOAT,
+                componentsPerAttribute: 3,
+                vertexBuffer: Buffer.createVertexBuffer({
+                  typedArray: attributeArrays.prevPositionLow,
+                  context,
+                  usage: BufferUsage.STATIC_DRAW,
+                }),
+              },
+              {
+                index: BufferPolylineAttributeLocationsFloat64.nextPositionHigh,
+                componentDatatype: ComponentDatatype.FLOAT,
+                componentsPerAttribute: 3,
+                vertexBuffer: Buffer.createVertexBuffer({
+                  typedArray: attributeArrays.nextPositionHigh,
+                  context,
+                  usage: BufferUsage.STATIC_DRAW,
+                }),
+              },
+              {
+                index: BufferPolylineAttributeLocationsFloat64.nextPositionLow,
+                componentDatatype: ComponentDatatype.FLOAT,
+                componentsPerAttribute: 3,
+                vertexBuffer: Buffer.createVertexBuffer({
+                  typedArray: attributeArrays.nextPositionLow,
+                  context,
+                  usage: BufferUsage.STATIC_DRAW,
+                }),
+              },
+            ]),
         {
-          index: BufferPolylineAttributeLocations.positionHigh,
-          componentDatatype: ComponentDatatype.FLOAT,
-          componentsPerAttribute: 3,
-          vertexBuffer: Buffer.createVertexBuffer({
-            typedArray: attributeArrays.positionHigh,
-            context,
-            usage: BufferUsage.STATIC_DRAW,
-          }),
-        },
-        {
-          index: BufferPolylineAttributeLocations.positionLow,
-          componentDatatype: ComponentDatatype.FLOAT,
-          componentsPerAttribute: 3,
-          vertexBuffer: Buffer.createVertexBuffer({
-            typedArray: attributeArrays.positionLow,
-            context,
-            usage: BufferUsage.STATIC_DRAW,
-          }),
-        },
-
-        {
-          index: BufferPolylineAttributeLocations.prevPositionHigh,
-          componentDatatype: ComponentDatatype.FLOAT,
-          componentsPerAttribute: 3,
-          vertexBuffer: Buffer.createVertexBuffer({
-            typedArray: attributeArrays.prevPositionHigh,
-            context,
-            usage: BufferUsage.STATIC_DRAW,
-          }),
-        },
-        {
-          index: BufferPolylineAttributeLocations.prevPositionLow,
-          componentDatatype: ComponentDatatype.FLOAT,
-          componentsPerAttribute: 3,
-          vertexBuffer: Buffer.createVertexBuffer({
-            typedArray: attributeArrays.prevPositionLow,
-            context,
-            usage: BufferUsage.STATIC_DRAW,
-          }),
-        },
-
-        {
-          index: BufferPolylineAttributeLocations.nextPositionHigh,
-          componentDatatype: ComponentDatatype.FLOAT,
-          componentsPerAttribute: 3,
+          index: attributeLocations.pickColor,
+          componentDatatype: ComponentDatatype.UNSIGNED_BYTE,
+          componentsPerAttribute: 4,
           vertexBuffer: Buffer.createVertexBuffer({
-            typedArray: attributeArrays.nextPositionHigh,
+            typedArray: attributeArrays.pickColor,
             context,
             usage: BufferUsage.STATIC_DRAW,
           }),
         },
         {
-          index: BufferPolylineAttributeLocations.nextPositionLow,
+          index: attributeLocations.showColorWidthAndTexCoord,
           componentDatatype: ComponentDatatype.FLOAT,
-          componentsPerAttribute: 3,
-          vertexBuffer: Buffer.createVertexBuffer({
-            typedArray: attributeArrays.nextPositionLow,
-            context,
-            usage: BufferUsage.STATIC_DRAW,
-          }),
-        },
-        {
-          index: BufferPolylineAttributeLocations.pickColor,
-          componentDatatype: ComponentDatatype.UNSIGNED_BYTE,
           componentsPerAttribute: 4,
           vertexBuffer: Buffer.createVertexBuffer({
-            typedArray: attributeArrays.pickColor,
+            typedArray: attributeArrays.showColorWidthAndTexCoord,
             context,
             usage: BufferUsage.STATIC_DRAW,
           }),
         },
         {
-          index: BufferPolylineAttributeLocations.showColorWidthAndTexCoord,
-          componentDatatype: ComponentDatatype.FLOAT,
-          componentsPerAttribute: 4,
+          index: attributeLocations.alpha,
+          componentDatatype: ComponentDatatype.UNSIGNED_BYTE,
+          componentsPerAttribute: 1,
           vertexBuffer: Buffer.createVertexBuffer({
-            typedArray: attributeArrays.showColorWidthAndTexCoord,
+            typedArray: attributeArrays.alpha,
             context,
             usage: BufferUsage.STATIC_DRAW,
           }),
@@ -354,11 +474,11 @@ function renderBufferPolylineCollection(collection, frameState, renderContext) {
       indexCount,
     );
 
-    for (const key in BufferPolylineAttributeLocations) {
-      if (Object.hasOwn(BufferPolylineAttributeLocations, key)) {
+    for (const key in attributeLocations) {
+      if (Object.hasOwn(attributeLocations, key)) {
         const attribute = /** @type {BufferPolylineAttribute} */ (key);
         renderContext.vertexArray.copyAttributeFromRange(
-          BufferPolylineAttributeLocations[attribute],
+          attributeLocations[attribute],
           renderContext.attributeArrays[attribute],
           vertexOffset,
           vertexCount,
@@ -369,7 +489,10 @@ function renderBufferPolylineCollection(collection, frameState, renderContext) {
 
   if (!defined(renderContext.renderState)) {
     renderContext.renderState = RenderState.fromCache({
-      blending: BlendingState.DISABLED,
+      blending:
+        collection._blendOption === BlendOption.OPAQUE
+          ? BlendingState.DISABLED
+          : BlendingState.ALPHA_BLEND,
       depthTest: { enabled: true },
     });
   }
@@ -379,11 +502,12 @@ function renderBufferPolylineCollection(collection, frameState, renderContext) {
       context,
       vertexShaderSource: new ShaderSource({
         sources: [PolylineCommon, BufferPolylineMaterialVS],
+        defines: useFloat64 ? ["USE_FLOAT64"] : [],
       }),
       fragmentShaderSource: new ShaderSource({
         sources: [BufferPolylineMaterialFS],
       }),
-      attributeLocations: BufferPolylineAttributeLocations,
+      attributeLocations,
     });
   }
 
@@ -395,12 +519,15 @@ function renderBufferPolylineCollection(collection, frameState, renderContext) {
       renderState: renderContext.renderState,
       shaderProgram: renderContext.shaderProgram,
       primitiveType: PrimitiveType.TRIANGLES,
-      pass: Pass.OPAQUE,
+      pass:
+        collection._blendOption === BlendOption.OPAQUE
+          ? Pass.OPAQUE
+          : Pass.TRANSLUCENT,
       pickId: collection._allowPicking ? "v_pickColor" : undefined,
       owner: collection,
       count: drawCount,
       modelMatrix: collection.modelMatrix, // shared reference
-      boundingVolume: collection.boundingVolumeWC, // shared reference
+      boundingVolume: collection.boundingVolume, // shared reference
       debugShowBoundingVolume: collection.debugShowBoundingVolume,
     });
   }

package/Source/Shaders/BufferPointMaterialFS.glsl

@@ -16,6 +16,7 @@ void main()
     float innerAlpha = 1.0 - smoothstep(innerLimit - delta, innerLimit, distanceToCenter);
 
     vec4 color = vec4(mix(v_outlineColor.rgb, v_color.rgb, innerAlpha), outerAlpha);
+    color.a *= mix(v_outlineColor.a, v_color.a, innerAlpha);
 
     if (color.a < 0.005)   // matches 0/255 and 1/255
     {

package/Source/Shaders/BufferPointMaterialFS.js

@@ -17,6 +17,7 @@ void main()\n\
     float innerAlpha = 1.0 - smoothstep(innerLimit - delta, innerLimit, distanceToCenter);\n\
 \n\
     vec4 color = vec4(mix(v_outlineColor.rgb, v_color.rgb, innerAlpha), outerAlpha);\n\
+    color.a *= mix(v_outlineColor.a, v_color.a, innerAlpha);\n\
 \n\
     if (color.a < 0.005)   // matches 0/255 and 1/255\n\
     {\n\

package/Source/Shaders/BufferPointMaterialVS.glsl

@@ -1,8 +1,12 @@
+#ifdef USE_FLOAT64
 in vec3 positionHigh;
 in vec3 positionLow;
+#else
+in vec3 position;
+#endif
 in vec4 pickColor;
-in vec3 showPixelSizeAndColor;
-in vec2 outlineWidthAndOutlineColor;
+in vec4 showPixelSizeColorAlpha;
+in vec3 outlineWidthColorAlpha;
 
 out vec4 v_pickColor;
 out vec4 v_color;
@@ -12,11 +16,13 @@ out float v_innerRadiusFrac;
 void main()
 {
     // Unpack attributes.
-    float show = showPixelSizeAndColor.x;
-    float pixelSize = showPixelSizeAndColor.y;
-    vec4 color = czm_decodeRGB8(showPixelSizeAndColor.z);
-    float outlineWidth = outlineWidthAndOutlineColor.x;
-    vec4 outlineColor = czm_decodeRGB8(outlineWidthAndOutlineColor.y);
+    float show = showPixelSizeColorAlpha.x;
+    float pixelSize = showPixelSizeColorAlpha.y;
+    vec4 color = czm_decodeRGB8(showPixelSizeColorAlpha.z);
+    float alpha = showPixelSizeColorAlpha.w;
+    float outlineWidth = outlineWidthColorAlpha.x;
+    vec4 outlineColor = czm_decodeRGB8(outlineWidthColorAlpha.y);
+    float outlineAlpha = outlineWidthColorAlpha.z;
 
     ///////////////////////////////////////////////////////////////////////////
 
@@ -25,8 +31,12 @@ void main()
 
     ///////////////////////////////////////////////////////////////////////////
 
+#ifdef USE_FLOAT64
     vec4 p = czm_translateRelativeToEye(positionHigh, positionLow);
     vec4 positionEC = czm_modelViewRelativeToEye * p;
+#else
+    vec4 positionEC = czm_modelView * vec4(position, 1.0);
+#endif
 
     ///////////////////////////////////////////////////////////////////////////
 
@@ -36,10 +46,10 @@ void main()
     v_pickColor = pickColor / 255.0;
 
     v_color = color;
-    v_color.a *= show;
+    v_color.a *= alpha * show;
 
     v_outlineColor = outlineColor;
-    v_outlineColor.a *= show;
+    v_outlineColor.a *= outlineAlpha * show;
 
     v_innerRadiusFrac = innerRadius / outerRadius;