BufferPrimitive: Add 'alpha' support

packages/engine/Source/Scene/BufferPrimitiveCollection.js

@@ -11,6 +11,7 @@ import defined from "../Core/defined.js";
 import Check from "../Core/Check.js";
 import SceneMode from "./SceneMode.js";
 import oneTimeWarning from "../Core/oneTimeWarning.js";
+import BlendOption from "../Scene/BlendOption.js";
 
 /** @import { Destroyable, TypedArray, TypedArrayConstructor } from "../Core/globalTypes.js"; */
 /** @import FrameState from "./FrameState.js"; */
@@ -71,6 +72,7 @@ class BufferPrimitiveCollection {
    * @param {ComponentDatatype} [options.positionDatatype=ComponentDatatype.DOUBLE]
    * @param {boolean} [options.allowPicking=false] When <code>true</code>, primitives are pickable with {@link Scene#pick}. When <code>false</code>, memory and initialization cost are lower.
    * @param {boolean} [options.debugShowBoundingVolume=false]
+   * @param {BlendOption} [options.blendOption=BlendOption.TRANSLUCENT]
    */
   constructor(options = Frozen.EMPTY_OBJECT) {
     /**
@@ -80,6 +82,15 @@ class BufferPrimitiveCollection {
      */
     this.show = options.show ?? true;
 
+    /**
+     * Collection blend option; must be OPAQUE or TRANSLUCENT.
+     * @type {BlendOption}
+     * @readonly
+     * @ignore
+     */
+    // @ts-expect-error Requires https://github.com/CesiumGS/cesium/pull/13203.
+    this._blendOption = options.blendOption ?? BlendOption.TRANSLUCENT;
+
     /**
      * Transforms geometry from model to world coordinates.
      * @type {Matrix4}

packages/engine/Source/Scene/renderBufferPointCollection.js

@@ -22,14 +22,15 @@ import AttributeCompression from "../Core/AttributeCompression.js";
 import Matrix4 from "../Core/Matrix4.js";
 import BoundingSphere from "../Core/BoundingSphere.js";
 import BufferPointMaterial from "./BufferPointMaterial.js";
+import BlendOption from "./BlendOption.js";
 
 /** @import FrameState from "./FrameState.js"; */
 /** @import BufferPointCollection from "./BufferPointCollection.js"; */
 /** @import {Destroyable, TypedArray} from "../Core/globalTypes.js"; */
 
 /**
  * TODO(PR#13211): Need 'keyof' syntax to avoid duplicating attribute names.
- * @typedef {'positionHigh' | 'positionLow' | 'pickColor' | 'showSizeAndColor' | 'outlineWidthAndOutlineColor'} BufferPointAttribute
+ * @typedef {'positionHigh' | 'positionLow' | 'pickColor' | 'showSizeColorAlpha' | 'outlineWidthColorAlpha'} BufferPointAttribute
  * @ignore
  */
 
@@ -41,8 +42,8 @@ const BufferPointAttributeLocations = {
   positionHigh: 0,
   positionLow: 1,
   pickColor: 2,
-  showSizeAndColor: 3,
-  outlineWidthAndOutlineColor: 4,
+  showSizeColorAlpha: 3,
+  outlineWidthColorAlpha: 4,
 };
 
 /**
@@ -82,8 +83,8 @@ function renderBufferPointCollection(collection, frameState, renderContext) {
       positionHigh: new Float32Array(featureCountMax * 3),
       positionLow: new Float32Array(featureCountMax * 3),
       pickColor: new Uint8Array(featureCountMax * 4),
-      showSizeAndColor: new Float32Array(featureCountMax * 3),
-      outlineWidthAndOutlineColor: new Float32Array(featureCountMax * 2),
+      showSizeColorAlpha: new Float32Array(featureCountMax * 4),
+      outlineWidthColorAlpha: new Float32Array(featureCountMax * 3),
     };
   }
 
@@ -97,9 +98,8 @@ function renderBufferPointCollection(collection, frameState, renderContext) {
     const positionHighArray = attributeArrays.positionHigh;
     const positionLowArray = attributeArrays.positionLow;
     const pickColorArray = attributeArrays.pickColor;
-    const showSizeAndColorArray = attributeArrays.showSizeAndColor;
-    const outlineWidthAndOutlineColorArray =
-      attributeArrays.outlineWidthAndOutlineColor;
+    const showSizeColorAlphaArray = attributeArrays.showSizeColorAlpha;
+    const outlineWidthColorAlphaArray = attributeArrays.outlineWidthColorAlpha;
 
     const { _dirtyOffset, _dirtyCount } = collection;
 
@@ -141,15 +141,18 @@ function renderBufferPointCollection(collection, frameState, renderContext) {
       pickColorArray[i * 4 + 2] = Color.floatToByte(pickColor.blue);
       pickColorArray[i * 4 + 3] = Color.floatToByte(pickColor.alpha);
 
-      showSizeAndColorArray[i * 3] = point.show ? 1 : 0;
-      showSizeAndColorArray[i * 3 + 1] = material.size;
-      showSizeAndColorArray[i * 3 + 2] = AttributeCompression.encodeRGB8(
+      showSizeColorAlphaArray[i * 4] = point.show ? 1 : 0;
+      showSizeColorAlphaArray[i * 4 + 1] = material.size;
+      showSizeColorAlphaArray[i * 4 + 2] = AttributeCompression.encodeRGB8(
         material.color,
       );
+      showSizeColorAlphaArray[i * 4 + 3] = material.color.alpha;
 
-      outlineWidthAndOutlineColorArray[i * 2] = material.outlineWidth;
-      outlineWidthAndOutlineColorArray[i * 2 + 1] =
-        AttributeCompression.encodeRGB8(material.outlineColor);
+      outlineWidthColorAlphaArray[i * 3] = material.outlineWidth;
+      outlineWidthColorAlphaArray[i * 3 + 1] = AttributeCompression.encodeRGB8(
+        material.outlineColor,
+      );
+      outlineWidthColorAlphaArray[i * 3 + 2] = material.outlineColor.alpha;
 
       point._dirty = false;
     }
@@ -195,22 +198,22 @@ function renderBufferPointCollection(collection, frameState, renderContext) {
           }),
         },
         {
-          index: BufferPointAttributeLocations.showSizeAndColor,
+          index: BufferPointAttributeLocations.showSizeColorAlpha,
           componentDatatype: ComponentDatatype.FLOAT,
-          componentsPerAttribute: 3,
+          componentsPerAttribute: 4,
           vertexBuffer: Buffer.createVertexBuffer({
-            typedArray: attributeArrays.showSizeAndColor,
+            typedArray: attributeArrays.showSizeColorAlpha,
             context,
             // @ts-expect-error Requires https://github.com/CesiumGS/cesium/pull/13203.
             usage: BufferUsage.STATIC_DRAW,
           }),
         },
         {
-          index: BufferPointAttributeLocations.outlineWidthAndOutlineColor,
+          index: BufferPointAttributeLocations.outlineWidthColorAlpha,
           componentDatatype: ComponentDatatype.FLOAT,
-          componentsPerAttribute: 2,
+          componentsPerAttribute: 3,
           vertexBuffer: Buffer.createVertexBuffer({
-            typedArray: attributeArrays.outlineWidthAndOutlineColor,
+            typedArray: attributeArrays.outlineWidthColorAlpha,
             context,
             // @ts-expect-error Requires https://github.com/CesiumGS/cesium/pull/13203.
             usage: BufferUsage.STATIC_DRAW,
@@ -234,7 +237,11 @@ function renderBufferPointCollection(collection, frameState, renderContext) {
 
   if (!defined(renderContext.renderState)) {
     renderContext.renderState = RenderState.fromCache({
-      blending: BlendingState.ALPHA_BLEND,
+      blending:
+        // @ts-expect-error Requires https://github.com/CesiumGS/cesium/pull/13203.
+        collection._blendOption === BlendOption.OPAQUE
+          ? BlendingState.DISABLED
+          : BlendingState.ALPHA_BLEND,
       depthTest: { enabled: true },
     });
   }

packages/engine/Source/Scene/renderBufferPolygonCollection.js

@@ -23,6 +23,7 @@ import IndexDatatype from "../Core/IndexDatatype.js";
 import BoundingSphere from "../Core/BoundingSphere.js";
 import Matrix4 from "../Core/Matrix4.js";
 import BufferPolygonMaterial from "./BufferPolygonMaterial.js";
+import BlendOption from "./BlendOption.js";
 
 /** @import {Destroyable, TypedArray} from "../Core/globalTypes.js"; */
 /** @import FrameState from "./FrameState.js"; */
@@ -266,7 +267,11 @@ function renderBufferPolygonCollection(collection, frameState, renderContext) {
 
   if (!defined(renderContext.renderState)) {
     renderContext.renderState = RenderState.fromCache({
-      blending: BlendingState.DISABLED,
+      blending:
+        // @ts-expect-error Requires https://github.com/CesiumGS/cesium/pull/13203.
+        collection._blendOption === BlendOption.OPAQUE
+          ? BlendingState.DISABLED
+          : BlendingState.ALPHA_BLEND,
       depthTest: { enabled: true },
     });
   }

packages/engine/Source/Scene/renderBufferPolylineCollection.js

@@ -24,14 +24,15 @@ import PolylineCommon from "../Shaders/PolylineCommon.js";
 import Matrix4 from "../Core/Matrix4.js";
 import BoundingSphere from "../Core/BoundingSphere.js";
 import BufferPolylineMaterial from "./BufferPolylineMaterial.js";
+import BlendOption from "./BlendOption.js";
 
 /** @import FrameState from "./FrameState.js"; */
 /** @import BufferPolylineCollection from "./BufferPolylineCollection.js"; */
 /** @import {Destroyable, TypedArray} from "../Core/globalTypes.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
  */
 
@@ -48,6 +49,7 @@ const BufferPolylineAttributeLocations = {
   nextPositionLow: 5,
   pickColor: 6,
   showColorWidthAndTexCoord: 7,
+  alpha: 8,
 };
 
 /**
@@ -123,6 +125,7 @@ function renderBufferPolylineCollection(collection, frameState, renderContext) {
       nextPositionLow: new Float32Array(vertexCountMax * 3),
       pickColor: new Uint8Array(vertexCountMax * 4),
       showColorWidthAndTexCoord: new Float32Array(vertexCountMax * 4),
+      alpha: new Uint8Array(vertexCountMax),
     };
   }
 
@@ -144,6 +147,7 @@ function renderBufferPolylineCollection(collection, frameState, renderContext) {
     const pickColorArray = attributeArrays.pickColor;
     const showColorWidthAndTexCoordArray =
       attributeArrays.showColorWidthAndTexCoord;
+    const alphaArray = attributeArrays.alpha;
 
     for (let i = _dirtyOffset, il = _dirtyOffset + _dirtyCount; i < il; i++) {
       collection.get(i, polyline);
@@ -168,6 +172,7 @@ function renderBufferPolylineCollection(collection, frameState, renderContext) {
       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;
 
@@ -257,6 +262,8 @@ function renderBufferPolylineCollection(collection, frameState, renderContext) {
           showColorWidthAndTexCoordArray[vOffset * 4 + 2] = material.width;
           showColorWidthAndTexCoordArray[vOffset * 4 + 3] = j / (jl - 1); // texcoord.s
 
+          alphaArray[vOffset] = colorAlpha * 255.0;
+
           vOffset++;
         }
       }
@@ -371,6 +378,17 @@ function renderBufferPolylineCollection(collection, frameState, renderContext) {
             usage: BufferUsage.STATIC_DRAW,
           }),
         },
+        {
+          index: BufferPolylineAttributeLocations.alpha,
+          componentDatatype: ComponentDatatype.UNSIGNED_BYTE,
+          componentsPerAttribute: 1,
+          vertexBuffer: Buffer.createVertexBuffer({
+            typedArray: attributeArrays.alpha,
+            context,
+            // @ts-expect-error Requires https://github.com/CesiumGS/cesium/pull/13203.
+            usage: BufferUsage.STATIC_DRAW,
+          }),
+        },
       ],
     });
   } else if (collection._dirtyCount > 0) {
@@ -398,7 +416,11 @@ function renderBufferPolylineCollection(collection, frameState, renderContext) {
 
   if (!defined(renderContext.renderState)) {
     renderContext.renderState = RenderState.fromCache({
-      blending: BlendingState.DISABLED,
+      blending:
+        // @ts-expect-error Requires https://github.com/CesiumGS/cesium/pull/13203.
+        collection._blendOption === BlendOption.OPAQUE
+          ? BlendingState.DISABLED
+          : BlendingState.ALPHA_BLEND,
       depthTest: { enabled: true },
     });
   }

packages/engine/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
     {

packages/engine/Source/Shaders/BufferPointMaterialVS.glsl

@@ -1,8 +1,8 @@
 in vec3 positionHigh;
 in vec3 positionLow;
 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 +12,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;
 
     ///////////////////////////////////////////////////////////////////////////
 
@@ -36,10 +38,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;
 

packages/engine/Source/Shaders/BufferPolylineMaterialVS.glsl

@@ -6,6 +6,7 @@ in vec3 nextPositionHigh;
 in vec3 nextPositionLow;
 in vec4 pickColor;
 in vec4 showColorWidthAndTexCoord;
+in float alpha;
 
 out vec4 v_pickColor;
 out vec4 v_color;
@@ -39,7 +40,7 @@ void main()
     v_pickColor = pickColor / 255.0;
 
     v_color = color;
-    v_color.a *= show;
+    v_color.a *= alpha / 255.0 * show;
 
     v_st.s = texCoord;
     v_st.t = czm_writeNonPerspective(clamp(expandDir, 0.0, 1.0), gl_Position.w);