@cesium/engine 23.0.1 → 24.0.0

package/Source/Scene/Model/EdgeVisibilityPipelineStage.js

@@ -5,13 +5,17 @@ import defined from "../../Core/defined.js";
 import IndexDatatype from "../../Core/IndexDatatype.js";
 import ComponentDatatype from "../../Core/ComponentDatatype.js";
 import PrimitiveType from "../../Core/PrimitiveType.js";
+import Cartesian2 from "../../Core/Cartesian2.js";
 import Cartesian3 from "../../Core/Cartesian3.js";
+import AttributeCompression from "../../Core/AttributeCompression.js";
 import Pass from "../../Renderer/Pass.js";
 import ShaderDestination from "../../Renderer/ShaderDestination.js";
 import EdgeVisibilityStageFS from "../../Shaders/Model/EdgeVisibilityStageFS.js";
+import EdgeVisibilityStageVS from "../../Shaders/Model/EdgeVisibilityStageVS.js";
 import ModelUtility from "./ModelUtility.js";
 import ModelReader from "./ModelReader.js";
 import VertexAttributeSemantic from "../VertexAttributeSemantic.js";
+import AttributeType from "../AttributeType.js";
 
 /**
  * Builds derived line geometry for model edges using EXT_mesh_primitive_edge_visibility data.
@@ -69,10 +73,18 @@ EdgeVisibilityPipelineStage.process = function (
     ShaderDestination.FRAGMENT,
   );
   shaderBuilder.addFragmentLines(EdgeVisibilityStageFS);
+  shaderBuilder.addVertexLines(EdgeVisibilityStageVS);
 
   // Add a uniform to distinguish between original geometry pass and edge pass
   shaderBuilder.addUniform("bool", "u_isEdgePass", ShaderDestination.BOTH);
 
+  // Add line width uniform for edge expansion if not already added by MaterialPipelineStage
+  const material = primitive.material;
+  const lineStyle = defined(material) ? material.lineStyle : undefined;
+  if (!defined(lineStyle) || !defined(lineStyle.width)) {
+    shaderBuilder.addUniform("float", "u_lineWidth", ShaderDestination.VERTEX);
+  }
+
   // Add edge type attribute and varying
   const edgeTypeLocation = shaderBuilder.addAttribute("float", "a_edgeType");
   shaderBuilder.addVarying("float", "v_edgeType", "flat");
@@ -102,23 +114,21 @@ EdgeVisibilityPipelineStage.process = function (
   shaderBuilder.addVarying("vec3", "v_faceNormalAView", "flat");
   shaderBuilder.addVarying("vec3", "v_faceNormalBView", "flat");
 
-  // Add varying for view space position for perspective-correct silhouette detection
+  // Add varying for silhouette discard decision in vertex shader
+  shaderBuilder.addVarying("float", "v_shouldDiscard", "flat");
+
+  // Add attributes and varyings for quad-based wide line rendering
+  const edgeOtherPosLocation = shaderBuilder.addAttribute(
+    "vec3",
+    "a_edgeOtherPos",
+  );
+  const edgeOffsetLocation = shaderBuilder.addAttribute(
+    "float",
+    "a_edgeOffset",
+  );
+  shaderBuilder.addVarying("float", "v_edgeOffset");
 
-  // Pass edge type, silhouette normal, and face normals from vertex to fragment shader
-  shaderBuilder.addFunctionLines("setDynamicVaryingsVS", [
-    "#ifdef HAS_EDGE_VISIBILITY",
-    "  if (u_isEdgePass) {",
-    "    v_edgeType = a_edgeType;",
-    "#ifdef HAS_EDGE_FEATURE_ID",
-    "    v_featureId_0 = a_edgeFeatureId;",
-    "#endif",
-    "    // Transform normals from model space to view space",
-    "    v_silhouetteNormalView = czm_normal * a_silhouetteNormal;",
-    "    v_faceNormalAView = czm_normal * a_faceNormalA;",
-    "    v_faceNormalBView = czm_normal * a_faceNormalB;",
-    "  }",
-    "#endif",
-  ]);
+  // Add varying for view space position for perspective-correct silhouette detection
 
   // Build triangle adjacency (mapping edges to adjacent triangles) and compute per-triangle face normals.
   const adjacencyData = buildTriangleAdjacency(primitive);
@@ -133,14 +143,56 @@ EdgeVisibilityPipelineStage.process = function (
     return;
   }
 
+  const runtimePrimitive = renderResources.runtimePrimitive.primitive;
+  const vertexColorInfo = collectVertexColors(runtimePrimitive);
+  const hasEdgeColorOverride = edgeResult.edgeData.some(function (edge) {
+    return defined(edge.color);
+  });
+
+  const needsEdgeColorAttribute =
+    hasEdgeColorOverride || defined(vertexColorInfo);
+
+  let edgeColorLocation;
+  if (needsEdgeColorAttribute) {
+    edgeColorLocation = shaderBuilder.addAttribute("vec4", "a_edgeColor");
+    shaderBuilder.addVarying("vec4", "v_edgeColor", "flat");
+    shaderBuilder.addDefine(
+      "HAS_EDGE_COLOR_ATTRIBUTE",
+      undefined,
+      ShaderDestination.BOTH,
+    );
+  }
+
+  let cumDistAttribute;
+  let edgeCumDistLocation;
+  const cumDistAttr = ModelUtility.getAttributeBySemantic(
+    primitive,
+    "BENTLEY_materials_line_style:CUMULATIVE_DISTANCE",
+  );
+
+  if (defined(cumDistAttr)) {
+    cumDistAttribute = cumDistAttr;
+    edgeCumDistLocation = shaderBuilder.addAttribute(
+      "float",
+      "a_edgeCumulativeDistance",
+    );
+    shaderBuilder.addDefine(
+      "HAS_EDGE_CUMULATIVE_DISTANCE",
+      undefined,
+      ShaderDestination.VERTEX,
+    );
+  }
+
   // Generate paired face normals for each unique edge (used to classify silhouette edges in the shader).
   const edgeFaceNormals = generateEdgeFaceNormals(
     adjacencyData,
     edgeResult.edgeIndices,
+    edgeResult.edgeData,
+    primitive.edgeVisibility,
   );
 
-  // Create edge-domain line list geometry (2 vertices per edge) with all required attributes.
-  const edgeGeometry = createCPULineEdgeGeometry(
+  // Create edge-domain quad geometry (4 vertices per edge) with all required attributes for wide line rendering.
+  const edgeGeometry = createQuadEdgeGeometry(
     edgeResult.edgeIndices,
     edgeResult.edgeData,
     renderResources,
@@ -150,8 +202,14 @@ EdgeVisibilityPipelineStage.process = function (
     faceNormalALocation,
     faceNormalBLocation,
     edgeFeatureIdLocation,
+    edgeColorLocation,
+    edgeOtherPosLocation,
+    edgeOffsetLocation,
+    vertexColorInfo,
     primitive.edgeVisibility,
     edgeFaceNormals,
+    cumDistAttribute,
+    edgeCumDistLocation,
   );
 
   if (!defined(edgeGeometry)) {
@@ -171,12 +229,34 @@ EdgeVisibilityPipelineStage.process = function (
     return false;
   };
 
+  // Provide a fallback line width when the material did not define one.
+  if (!defined(renderResources.uniformMap.u_lineWidth)) {
+    renderResources.uniformMap.u_lineWidth = function () {
+      return 1.0;
+    };
+  }
+
+  if (defined(cumDistAttribute)) {
+    if (!defined(renderResources.uniformMap.u_pixelsPerWorld)) {
+      renderResources.uniformMap.u_pixelsPerWorld = function () {
+        return 1.0;
+      };
+    }
+  }
+
+  const lineWidth =
+    defined(lineStyle) && defined(lineStyle.width)
+      ? lineStyle.width * frameState.pixelRatio
+      : undefined;
+
   // Store edge geometry metadata so the renderer can issue a separate edges pass.
+  // Use TRIANGLES instead of LINES to support wide lines via quad tessellation
   renderResources.edgeGeometry = {
     vertexArray: edgeGeometry.vertexArray,
     indexCount: edgeGeometry.indexCount,
-    primitiveType: PrimitiveType.LINES,
+    primitiveType: PrimitiveType.TRIANGLES,
     pass: Pass.CESIUM_3D_TILE_EDGES,
+    lineWidth: lineWidth,
   };
 };
 
@@ -284,7 +364,7 @@ function buildTriangleAdjacency(primitive) {
     faceNormals[base + 1] = scratchCross.y;
     faceNormals[base + 2] = scratchCross.z;
 
-    // Edges
+    // Register edges
     processEdge(i0, i1, t);
     processEdge(i1, i2, t);
     processEdge(i2, i0, t);
@@ -294,21 +374,83 @@ function buildTriangleAdjacency(primitive) {
 }
 
 /**
- * For each unique edge produce a pair of face normals (A,B). For boundary edges where only a single
- * adjacent triangle exists, the second normal is synthesized as the negation of the first to allow
- * the shader to reason about front/back facing transitions uniformly.
+ * Generate face normal pairs for each edge. Silhouette edges use normals from the GLB
+ * silhouetteNormals accessor if available. Boundary edges synthesize the opposite normal
+ * as the negation of the first triangle's normal.
  *
- * @param {{edgeMap:Map<string,number[]>, faceNormals:Float32Array}} adjacencyData The adjacency data from buildTriangleAdjacency
+ * @param {{edgeMap:Map<string,number[]>, faceNormals:Float32Array}} adjacencyData Triangle adjacency data
  * @param {number[]} edgeIndices Packed array of 2 vertex indices per edge
+ * @param {Object[]} edgeData Array of edge metadata (edgeType, mateVertexIndex)
+ * @param {Object} edgeVisibility Edge visibility extension data
  * @returns {Float32Array} Packed array: 6 floats per edge (normalA.xyz, normalB.xyz)
  * @private
  */
-function generateEdgeFaceNormals(adjacencyData, edgeIndices) {
+function generateEdgeFaceNormals(
+  adjacencyData,
+  edgeIndices,
+  edgeData,
+  edgeVisibility,
+) {
   const { edgeMap, faceNormals } = adjacencyData;
   const numEdges = edgeIndices.length / 2;
+  const edgeFaceNormals = new Float32Array(numEdges * 6);
+
+  const hasGLBSilhouetteNormals =
+    defined(edgeVisibility) && defined(edgeVisibility.silhouetteNormals);
+  let silhouetteNormalsUint32 = null;
+  const scratchDecodedA = new Cartesian3();
+  const scratchDecodedB = new Cartesian3();
+
+  if (hasGLBSilhouetteNormals) {
+    // GLB stores VEC3 BYTE as normalized normal vectors (signed bytes).
+    // Decode from signed bytes to normalized vectors, then re-encode to 16-bit octahedral format.
+    const decodeSignedByte = (val) => 2 * ((val + 128) / 255) - 1;
+
+    // Re-encode each VEC3 BYTE to 16-bit oct-encoded normal using AttributeCompression
+    const uint16Normals = new Uint16Array(
+      edgeVisibility.silhouetteNormals.length,
+    );
+    const scratchNormal = new Cartesian3();
+    const scratchEncoded = new Cartesian2();
+
+    for (let i = 0; i < edgeVisibility.silhouetteNormals.length; i++) {
+      const vec3 = edgeVisibility.silhouetteNormals[i];
+
+      // Decode from signed byte to normal vector
+      scratchNormal.x = decodeSignedByte(vec3.x);
+      scratchNormal.y = decodeSignedByte(vec3.y);
+      scratchNormal.z = decodeSignedByte(vec3.z);
+
+      // Normalize to unit vector
+      const magnitude = Cartesian3.magnitude(scratchNormal);
+      if (magnitude > 0) {
+        Cartesian3.normalize(scratchNormal, scratchNormal);
+      } else {
+        // Handle zero vector - use default up vector
+        scratchNormal.x = 0;
+        scratchNormal.y = 0;
+        scratchNormal.z = 1;
+      }
+
+      // Use Cesium's octahedral encoding (returns 0-255 integers)
+      AttributeCompression.octEncodeInRange(scratchNormal, 255, scratchEncoded);
+
+      // Convert to 16-bit integer: (y << 8) | x
+      const byteX = scratchEncoded.x & 0xff;
+      const byteY = scratchEncoded.y & 0xff;
+      uint16Normals[i] = (byteY << 8) | byteX;
+    }
 
-  // Each edge needs 2 face normals (left and right side)
-  const edgeFaceNormals = new Float32Array(numEdges * 6); // 2 normals * 3 components each
+    // Pack pairs into Uint32Array (little-endian: normalA|normalB<<16)
+    const numPairs = Math.floor(uint16Normals.length / 2);
+    silhouetteNormalsUint32 = new Uint32Array(numPairs);
+
+    for (let i = 0; i < numPairs; i++) {
+      const normalA = uint16Normals[i * 2];
+      const normalB = uint16Normals[i * 2 + 1];
+      silhouetteNormalsUint32[i] = normalA | (normalB << 16);
+    }
+  }
 
   for (let i = 0; i < numEdges; i++) {
     const a = edgeIndices[i * 2];
@@ -316,31 +458,77 @@ function generateEdgeFaceNormals(adjacencyData, edgeIndices) {
     const edgeKey = `${a < b ? a : b},${a < b ? b : a}`;
     const triangleList = edgeMap.get(edgeKey);
 
-    // Expect at least one triangle; silently skip if not found (defensive)
-    if (!defined(triangleList) || triangleList.length === 0) {
-      continue;
+    const { edgeType, mateVertexIndex } = edgeData[i];
+
+    let nAx, nAy, nAz, nBx, nBy, nBz;
+    let usedGLBNormals = false;
+
+    // Use GLB silhouetteNormals for type=1 (SILHOUETTE) edges if available
+    if (
+      hasGLBSilhouetteNormals &&
+      silhouetteNormalsUint32 &&
+      edgeType === 1 &&
+      mateVertexIndex >= 0
+    ) {
+      // Each OctEncodedNormalPair is stored as one Uint32 value
+      // Uint32 contains 4 bytes: [byte0, byte1, byte2, byte3]
+      // normalA = byte0 | (byte1 << 8)  - little endian
+      // normalB = byte2 | (byte3 << 8)  - little endian
+
+      if (mateVertexIndex < silhouetteNormalsUint32.length) {
+        const uint32Value = silhouetteNormalsUint32[mateVertexIndex];
+
+        // Uint32 contains 4 bytes: [xA, yA, xB, yB]
+        // Extract and decode using octDecode (rangeMax=255)
+        AttributeCompression.octDecode(
+          uint32Value & 0xff, // xA
+          (uint32Value >> 8) & 0xff, // yA
+          scratchDecodedA,
+        );
+        AttributeCompression.octDecode(
+          (uint32Value >> 16) & 0xff, // xB
+          (uint32Value >> 24) & 0xff, // yB
+          scratchDecodedB,
+        );
+
+        nAx = scratchDecodedA.x;
+        nAy = scratchDecodedA.y;
+        nAz = scratchDecodedA.z;
+        nBx = scratchDecodedB.x;
+        nBy = scratchDecodedB.y;
+        nBz = scratchDecodedB.z;
+
+        usedGLBNormals = true;
+      }
     }
 
-    const tA = triangleList[0];
-    const aBase = tA * 3;
-    const nAx = faceNormals[aBase];
-    const nAy = faceNormals[aBase + 1];
-    const nAz = faceNormals[aBase + 2];
-
-    let nBx;
-    let nBy;
-    let nBz;
-    if (triangleList.length > 1) {
-      const tB = triangleList[1];
-      const bBase = tB * 3;
-      nBx = faceNormals[bBase];
-      nBy = faceNormals[bBase + 1];
-      nBz = faceNormals[bBase + 2];
-    } else {
-      // Boundary edge – synthesize opposite normal
-      nBx = -nAx;
-      nBy = -nAy;
-      nBz = -nAz;
+    // Fallback to triangle adjacency if GLB normals not used
+    if (!usedGLBNormals) {
+      // Expect at least one triangle; silently skip if not found (defensive)
+      if (!defined(triangleList) || triangleList.length === 0) {
+        continue;
+      }
+
+      const tA = triangleList[0];
+      const aBase = tA * 3;
+      nAx = faceNormals[aBase];
+      nAy = faceNormals[aBase + 1];
+      nAz = faceNormals[aBase + 2];
+
+      const isManifold = triangleList.length > 1;
+
+      if (isManifold) {
+        const tB = triangleList[1];
+        const bBase = tB * 3;
+        nBx = faceNormals[bBase];
+        nBy = faceNormals[bBase + 1];
+        nBz = faceNormals[bBase + 2];
+      } else {
+        // Boundary edge – synthesize opposite normal
+        nBx = -nAx;
+        nBy = -nAy;
+        nBz = -nAz;
+      }
     }
 
     const baseIdx = i * 6;
@@ -372,91 +560,167 @@ function generateEdgeFaceNormals(adjacencyData, edgeIndices) {
  */
 function extractVisibleEdges(primitive) {
   const edgeVisibility = primitive.edgeVisibility;
+  if (!defined(edgeVisibility)) {
+    return [];
+  }
+
   const visibility = edgeVisibility.visibility;
   const indices = primitive.indices;
+  const lineStrings = edgeVisibility.lineStrings;
+
+  const attributes = primitive.attributes;
+  const vertexCount =
+    defined(attributes) && attributes.length > 0 ? attributes[0].count : 0;
 
-  if (!defined(visibility) || !defined(indices)) {
+  const hasVisibilityData =
+    defined(visibility) &&
+    defined(indices) &&
+    defined(indices.typedArray) &&
+    indices.typedArray.length > 0;
+  const hasLineStrings = defined(lineStrings) && lineStrings.length > 0;
+
+  if (!hasVisibilityData && !hasLineStrings) {
     return [];
   }
 
-  const triangleIndexArray = indices.typedArray;
-  const vertexCount = primitive.attributes[0].count;
+  const triangleIndexArray = hasVisibilityData ? indices.typedArray : undefined;
   const edgeIndices = [];
   const edgeData = [];
   const seenEdgeHashes = new Set();
   let silhouetteEdgeCount = 0;
+  const globalColor = edgeVisibility.materialColor;
+
+  if (hasVisibilityData) {
+    let edgeIndex = 0;
+    const totalIndices = triangleIndexArray.length;
+    const visibilityArray = visibility;
+
+    for (let i = 0; i + 2 < totalIndices; i += 3) {
+      const v0 = triangleIndexArray[i];
+      const v1 = triangleIndexArray[i + 1];
+      const v2 = triangleIndexArray[i + 2];
+      for (let e = 0; e < 3; e++) {
+        let a;
+        let b;
+        if (e === 0) {
+          a = v0;
+          b = v1;
+        } else if (e === 1) {
+          a = v1;
+          b = v2;
+        } else {
+          a = v2;
+          b = v0;
+        }
 
-  // Process triangles and extract edges (2 bits per edge)
-  let edgeIndex = 0;
-  const totalIndices = triangleIndexArray.length;
-
-  for (let i = 0; i + 2 < totalIndices; i += 3) {
-    const v0 = triangleIndexArray[i];
-    const v1 = triangleIndexArray[i + 1];
-    const v2 = triangleIndexArray[i + 2];
-    for (let e = 0; e < 3; e++) {
-      let a, b;
-      if (e === 0) {
-        a = v0;
-        b = v1;
-      } else if (e === 1) {
-        a = v1;
-        b = v2;
-      } else if (e === 2) {
-        a = v2;
-        b = v0;
-      }
-      const byteIndex = Math.floor(edgeIndex / 4);
-      const bitPairOffset = (edgeIndex % 4) * 2;
-      edgeIndex++;
+        const byteIndex = Math.floor(edgeIndex / 4);
+        const bitPairOffset = (edgeIndex % 4) * 2;
+        edgeIndex++;
 
-      if (byteIndex >= visibility.length) {
-        break;
-      }
+        if (byteIndex >= visibilityArray.length) {
+          break;
+        }
 
-      const byte = visibility[byteIndex];
-      const visibility2Bit = (byte >> bitPairOffset) & 0x3;
+        const byte = visibilityArray[byteIndex];
+        const visibility2Bit = (byte >> bitPairOffset) & 0x3;
 
-      // Only include visible edge types according to EXT_mesh_primitive_edge_visibility spec
-      let shouldIncludeEdge = false;
-      switch (visibility2Bit) {
-        case 0: // HIDDEN - never draw
-          shouldIncludeEdge = false;
-          break;
-        case 1: // SILHOUETTE - conditionally visible (front-facing vs back-facing)
-          shouldIncludeEdge = true;
-          break;
-        case 2: // HARD - always draw (primary encoding)
-          shouldIncludeEdge = true;
-          break;
-        case 3: // REPEATED - always draw (secondary encoding of a hard edge already encoded as 2)
-          shouldIncludeEdge = true;
-          break;
-      }
+        if (visibility2Bit === 0) {
+          continue;
+        }
 
-      if (shouldIncludeEdge) {
         const small = Math.min(a, b);
         const big = Math.max(a, b);
-        const hash = small * vertexCount + big;
+        const edgeKey = `${small},${big}`;
 
-        if (!seenEdgeHashes.has(hash)) {
-          seenEdgeHashes.add(hash);
-          edgeIndices.push(a, b);
+        if (seenEdgeHashes.has(edgeKey)) {
+          continue;
+        }
+        seenEdgeHashes.add(edgeKey);
+        edgeIndices.push(a, b);
+
+        // Only process silhouette edges (type=1) as marked in GLB
+        // Use computed edge index for boundary edges
+        let mateVertexIndex = -1;
+        if (visibility2Bit === 1) {
+          mateVertexIndex = silhouetteEdgeCount;
+          silhouetteEdgeCount++;
+        }
 
-          let mateVertexIndex = -1;
-          if (visibility2Bit === 1) {
-            mateVertexIndex = silhouetteEdgeCount;
-            silhouetteEdgeCount++;
-          }
+        edgeData.push({
+          edgeType: visibility2Bit, // Use original GLB edge type
+          triangleIndex: Math.floor(i / 3),
+          edgeIndex: e,
+          mateVertexIndex: mateVertexIndex,
+          currentTriangleVertices: [v0, v1, v2],
+          color: globalColor,
+        });
+      }
+    }
+  }
 
-          edgeData.push({
-            edgeType: visibility2Bit,
-            triangleIndex: Math.floor(i / 3),
-            edgeIndex: e,
-            mateVertexIndex: mateVertexIndex,
-            currentTriangleVertices: [v0, v1, v2],
-          });
+  if (hasLineStrings) {
+    for (let i = 0; i < lineStrings.length; i++) {
+      const lineString = lineStrings[i];
+      if (!defined(lineString) || !defined(lineString.indices)) {
+        continue;
+      }
+
+      const indicesArray = lineString.indices;
+      if (!defined(indicesArray) || indicesArray.length < 2) {
+        continue;
+      }
+
+      const restartValue = lineString.restartIndex;
+      const lineColor = defined(lineString.materialColor)
+        ? lineString.materialColor
+        : globalColor;
+
+      let previous;
+      for (let j = 0; j < indicesArray.length; j++) {
+        const currentIndex = indicesArray[j];
+        if (defined(restartValue) && currentIndex === restartValue) {
+          previous = undefined;
+          continue;
+        }
+
+        if (!defined(previous)) {
+          previous = currentIndex;
+          continue;
+        }
+
+        const a = previous;
+        const b = currentIndex;
+        previous = currentIndex;
+
+        if (a === b) {
+          continue;
+        }
+
+        if (
+          vertexCount > 0 &&
+          (a < 0 || a >= vertexCount || b < 0 || b >= vertexCount)
+        ) {
+          continue;
+        }
+
+        const small = Math.min(a, b);
+        const big = Math.max(a, b);
+        const edgeKey = `${small},${big}`;
+
+        if (seenEdgeHashes.has(edgeKey)) {
+          continue;
         }
+
+        seenEdgeHashes.add(edgeKey);
+        edgeIndices.push(a, b);
+        edgeData.push({
+          edgeType: 2,
+          triangleIndex: -1,
+          edgeIndex: -1,
+          mateVertexIndex: -1,
+          currentTriangleVertices: undefined,
+          color: defined(lineColor) ? lineColor : undefined,
+        });
       }
     }
   }
@@ -464,10 +728,91 @@ function extractVisibleEdges(primitive) {
   return { edgeIndices, edgeData, silhouetteEdgeCount };
 }
 
+function collectVertexColors(runtimePrimitive) {
+  if (!defined(runtimePrimitive)) {
+    return undefined;
+  }
+
+  const colorAttribute = ModelUtility.getAttributeBySemantic(
+    runtimePrimitive,
+    VertexAttributeSemantic.COLOR,
+  );
+  if (!defined(colorAttribute)) {
+    return undefined;
+  }
+
+  const components = AttributeType.getNumberOfComponents(colorAttribute.type);
+  if (components !== 3 && components !== 4) {
+    return undefined;
+  }
+
+  let colorData = colorAttribute.typedArray;
+  if (!defined(colorData)) {
+    colorData = ModelReader.readAttributeAsTypedArray(colorAttribute);
+  }
+  if (!defined(colorData)) {
+    return undefined;
+  }
+  const count = colorAttribute.count;
+  if (!defined(count) || count === 0) {
+    return undefined;
+  }
+
+  if (colorData.length < count * components) {
+    return undefined;
+  }
+
+  const isFloatArray =
+    colorData instanceof Float32Array || colorData instanceof Float64Array;
+  const isUint8Array = colorData instanceof Uint8Array;
+  const isUint16Array = colorData instanceof Uint16Array;
+
+  if (!isFloatArray && !isUint8Array && !isUint16Array) {
+    return undefined;
+  }
+
+  const colors = new Float32Array(count * 4);
+
+  const convertComponent = function (value) {
+    let converted;
+    if (isFloatArray) {
+      converted = value;
+    } else if (isUint8Array) {
+      converted = value / 255.0;
+    } else if (isUint16Array) {
+      converted = value / 65535.0;
+    }
+    return Math.min(Math.max(converted, 0.0), 1.0);
+  };
+
+  for (let i = 0; i < count; i++) {
+    const srcBase = i * components;
+    const destBase = i * 4;
+    colors[destBase] = convertComponent(colorData[srcBase]);
+    colors[destBase + 1] = convertComponent(colorData[srcBase + 1]);
+    colors[destBase + 2] = convertComponent(colorData[srcBase + 2]);
+    if (components === 4) {
+      colors[destBase + 3] = convertComponent(colorData[srcBase + 3]);
+    } else {
+      colors[destBase + 3] = 1.0;
+    }
+  }
+
+  return {
+    colors: colors,
+    count: count,
+  };
+}
+
 /**
- * Create a derived line list geometry representing edges. A new vertex domain is used so we can pack
- * per-edge attributes (silhouette normal, face normal pair, edge type, optional feature ID) without
- * modifying or duplicating the original triangle mesh. Two vertices are generated per unique edge.
+ * @typedef {object} VertexColorInfo
+ * @property {Float32Array} colors The packed per-vertex colors.
+ * @property {number} count The number of vertices.
+ */
+
+/**
+ * Create quad-based edge geometry for wide line rendering. Each edge becomes a quad (4 vertices, 2 triangles).
+ * This allows proper line width rendering in the vertex shader by extruding perpendicular to the line direction.
  *
  * @param {number[]} edgeIndices Packed array [a0,b0, a1,b1, ...] of vertex indices into the source mesh
  * @param {Object[]} edgeData Array of edge metadata including edge type and silhouette normal lookup index
@@ -478,12 +823,18 @@ function extractVisibleEdges(primitive) {
  * @param {number} faceNormalALocation Shader attribute location for face normal A
  * @param {number} faceNormalBLocation Shader attribute location for face normal B
  * @param {number} edgeFeatureIdLocation Shader attribute location for optional edge feature ID
+ * @param {number} edgeColorLocation Shader attribute location for optional edge color data
+ * @param {number} edgeOtherPosLocation Shader attribute location for the other endpoint position
+ * @param {number} edgeOffsetLocation Shader attribute location for edge offset (-1 or +1)
+ * @param {VertexColorInfo} [vertexColorInfo] Packed per-vertex colors (optional)
  * @param {Object} edgeVisibility Edge visibility extension object (may contain silhouetteNormals[])
  * @param {Float32Array} edgeFaceNormals Packed face normals (6 floats per edge)
- * @returns {Object|undefined} Object with {vertexArray, indexBuffer, indexCount} or undefined on failure
+ * @param {Object} [cumDistAttribute] Cumulative distance attribute
+ * @param {number} [edgeCumDistLocation] Cumulative distance location
+ * @returns {Object|undefined} Object with {vertexArray, indexCount, hasEdgeFeatureIds} or undefined on failure
  * @private
  */
-function createCPULineEdgeGeometry(
+function createQuadEdgeGeometry(
   edgeIndices,
   edgeData,
   renderResources,
@@ -493,18 +844,24 @@ function createCPULineEdgeGeometry(
   faceNormalALocation,
   faceNormalBLocation,
   edgeFeatureIdLocation,
+  edgeColorLocation,
+  edgeOtherPosLocation,
+  edgeOffsetLocation,
+  vertexColorInfo,
   edgeVisibility,
   edgeFaceNormals,
+  cumDistAttribute,
+  edgeCumDistLocation,
 ) {
   if (!defined(edgeIndices) || edgeIndices.length === 0) {
     return undefined;
   }
 
   const numEdges = edgeData.length;
-  const vertsPerEdge = 2;
+  const vertsPerEdge = 4; // Each edge becomes a quad (4 vertices)
   const totalVerts = numEdges * vertsPerEdge;
 
-  // Always use location 0 for position to avoid conflicts
+  // Always use location 0 for position
   const positionLocation = 0;
 
   // Get original vertex positions
@@ -516,57 +873,85 @@ function createCPULineEdgeGeometry(
     ? positionAttribute.typedArray
     : ModelReader.readAttributeAsTypedArray(positionAttribute);
 
-  // Create edge-domain vertices (2 per edge)
+  // Create arrays for quad vertices
   const edgePosArray = new Float32Array(totalVerts * 3);
   const edgeTypeArray = new Float32Array(totalVerts);
   const silhouetteNormalArray = new Float32Array(totalVerts * 3);
   const faceNormalAArray = new Float32Array(totalVerts * 3);
   const faceNormalBArray = new Float32Array(totalVerts * 3);
-  let p = 0;
+  const edgeOtherPosArray = new Float32Array(totalVerts * 3);
+  const edgeOffsetArray = new Float32Array(totalVerts);
+
+  const needsCumulativeDistance = defined(cumDistAttribute);
+  const edgeCumDistArray = needsCumulativeDistance
+    ? new Float32Array(totalVerts)
+    : undefined;
+  let srcCumDist;
+  if (needsCumulativeDistance) {
+    srcCumDist = defined(cumDistAttribute.typedArray)
+      ? cumDistAttribute.typedArray
+      : ModelReader.readAttributeAsTypedArray(cumDistAttribute);
+  }
 
-  const maxSrcVertex = srcPos.length / 3 - 1;
+  const needsEdgeColorAttribute = defined(edgeColorLocation);
+  const edgeColorArray = needsEdgeColorAttribute
+    ? new Float32Array(totalVerts * 4)
+    : undefined;
+  const vertexColors = defined(vertexColorInfo)
+    ? vertexColorInfo.colors
+    : undefined;
+  const vertexColorCount = defined(vertexColorInfo) ? vertexColorInfo.count : 0;
+
+  function setNoColor(destVertexIndex) {
+    if (!needsEdgeColorAttribute) {
+      return;
+    }
+    const destOffset = destVertexIndex * 4;
+    edgeColorArray[destOffset] = 0.0;
+    edgeColorArray[destOffset + 1] = 0.0;
+    edgeColorArray[destOffset + 2] = 0.0;
+    edgeColorArray[destOffset + 3] = -1.0;
+  }
+
+  function setColorFromOverride(destVertexIndex, color) {
+    if (!needsEdgeColorAttribute) {
+      return;
+    }
+    const destOffset = destVertexIndex * 4;
+    const r = defined(color.x) ? color.x : color[0];
+    const g = defined(color.y) ? color.y : color[1];
+    const b = defined(color.z) ? color.z : color[2];
+    const a = defined(color.w) ? color.w : defined(color[3]) ? color[3] : 1.0;
+    edgeColorArray[destOffset] = r;
+    edgeColorArray[destOffset + 1] = g;
+    edgeColorArray[destOffset + 2] = b;
+    edgeColorArray[destOffset + 3] = a;
+  }
 
+  function assignVertexColor(destVertexIndex, srcVertexIndex) {
+    if (!needsEdgeColorAttribute) {
+      return;
+    }
+    if (srcVertexIndex >= vertexColorCount) {
+      setNoColor(destVertexIndex);
+      return;
+    }
+    const srcOffset = srcVertexIndex * 4;
+    const destOffset = destVertexIndex * 4;
+    edgeColorArray[destOffset] = vertexColors[srcOffset];
+    edgeColorArray[destOffset + 1] = vertexColors[srcOffset + 1];
+    edgeColorArray[destOffset + 2] = vertexColors[srcOffset + 2];
+    edgeColorArray[destOffset + 3] = vertexColors[srcOffset + 3];
+  }
+
+  // Generate quad vertices for each edge
   for (let i = 0; i < numEdges; i++) {
     const a = edgeIndices[i * 2];
     const b = edgeIndices[i * 2 + 1];
+    const rawType = edgeData[i].edgeType;
+    const normalizedType = rawType / 255.0;
 
-    // Validate vertex indices
-    if (a < 0 || b < 0 || a > maxSrcVertex || b > maxSrcVertex) {
-      // Fill with zeros to maintain indexing
-      edgePosArray[p++] = 0;
-      edgePosArray[p++] = 0;
-      edgePosArray[p++] = 0;
-      edgePosArray[p++] = 0;
-      edgePosArray[p++] = 0;
-      edgePosArray[p++] = 0;
-      edgeTypeArray[i * 2] = 0;
-      edgeTypeArray[i * 2 + 1] = 0;
-      // Fill with default values
-      const normalIdx = i * 2;
-      silhouetteNormalArray[normalIdx * 3] = 0;
-      silhouetteNormalArray[normalIdx * 3 + 1] = 0;
-      silhouetteNormalArray[normalIdx * 3 + 2] = 1;
-      silhouetteNormalArray[(normalIdx + 1) * 3] = 0;
-      silhouetteNormalArray[(normalIdx + 1) * 3 + 1] = 0;
-      silhouetteNormalArray[(normalIdx + 1) * 3 + 2] = 1;
-
-      // Fill face normals with default values
-      faceNormalAArray[normalIdx * 3] = 0;
-      faceNormalAArray[normalIdx * 3 + 1] = 0;
-      faceNormalAArray[normalIdx * 3 + 2] = 1;
-      faceNormalAArray[(normalIdx + 1) * 3] = 0;
-      faceNormalAArray[(normalIdx + 1) * 3 + 1] = 0;
-      faceNormalAArray[(normalIdx + 1) * 3 + 2] = 1;
-
-      faceNormalBArray[normalIdx * 3] = 0;
-      faceNormalBArray[normalIdx * 3 + 1] = 0;
-      faceNormalBArray[normalIdx * 3 + 2] = 1;
-      faceNormalBArray[(normalIdx + 1) * 3] = 0;
-      faceNormalBArray[(normalIdx + 1) * 3 + 1] = 0;
-      faceNormalBArray[(normalIdx + 1) * 3 + 2] = 1;
-      continue;
-    }
-
+    // Get positions
     const ax = srcPos[a * 3];
     const ay = srcPos[a * 3 + 1];
     const az = srcPos[a * 3 + 2];
@@ -574,24 +959,80 @@ function createCPULineEdgeGeometry(
     const by = srcPos[b * 3 + 1];
     const bz = srcPos[b * 3 + 2];
 
-    // Add edge endpoints
-    edgePosArray[p++] = ax;
-    edgePosArray[p++] = ay;
-    edgePosArray[p++] = az;
-    edgePosArray[p++] = bx;
-    edgePosArray[p++] = by;
-    edgePosArray[p++] = bz;
-
-    const rawType = edgeData[i].edgeType;
-    const t = rawType / 255.0;
+    // Create 4 vertices for this edge: (A-, A+, B+, B-)
+    // where +/- indicates offset perpendicular to the line
+    // Store the other endpoint position for each vertex
+    const baseVertexIndex = i * 4;
+
+    // Vertex 0: position at A, other endpoint is B, offset -1
+    edgePosArray[baseVertexIndex * 3] = ax;
+    edgePosArray[baseVertexIndex * 3 + 1] = ay;
+    edgePosArray[baseVertexIndex * 3 + 2] = az;
+    edgeOtherPosArray[baseVertexIndex * 3] = bx;
+    edgeOtherPosArray[baseVertexIndex * 3 + 1] = by;
+    edgeOtherPosArray[baseVertexIndex * 3 + 2] = bz;
+    edgeOffsetArray[baseVertexIndex] = -1.0;
+    edgeTypeArray[baseVertexIndex] = normalizedType;
+
+    // Vertex 1: position at A, other endpoint is B, offset +1
+    edgePosArray[(baseVertexIndex + 1) * 3] = ax;
+    edgePosArray[(baseVertexIndex + 1) * 3 + 1] = ay;
+    edgePosArray[(baseVertexIndex + 1) * 3 + 2] = az;
+    edgeOtherPosArray[(baseVertexIndex + 1) * 3] = bx;
+    edgeOtherPosArray[(baseVertexIndex + 1) * 3 + 1] = by;
+    edgeOtherPosArray[(baseVertexIndex + 1) * 3 + 2] = bz;
+    edgeOffsetArray[baseVertexIndex + 1] = 1.0;
+    edgeTypeArray[baseVertexIndex + 1] = normalizedType;
+
+    // Vertex 2: position at B, other endpoint is A, offset +1
+    edgePosArray[(baseVertexIndex + 2) * 3] = bx;
+    edgePosArray[(baseVertexIndex + 2) * 3 + 1] = by;
+    edgePosArray[(baseVertexIndex + 2) * 3 + 2] = bz;
+    edgeOtherPosArray[(baseVertexIndex + 2) * 3] = ax;
+    edgeOtherPosArray[(baseVertexIndex + 2) * 3 + 1] = ay;
+    edgeOtherPosArray[(baseVertexIndex + 2) * 3 + 2] = az;
+    edgeOffsetArray[baseVertexIndex + 2] = 1.0;
+    edgeTypeArray[baseVertexIndex + 2] = normalizedType;
+
+    // Vertex 3: position at B, other endpoint is A, offset -1
+    edgePosArray[(baseVertexIndex + 3) * 3] = bx;
+    edgePosArray[(baseVertexIndex + 3) * 3 + 1] = by;
+    edgePosArray[(baseVertexIndex + 3) * 3 + 2] = bz;
+    edgeOtherPosArray[(baseVertexIndex + 3) * 3] = ax;
+    edgeOtherPosArray[(baseVertexIndex + 3) * 3 + 1] = ay;
+    edgeOtherPosArray[(baseVertexIndex + 3) * 3 + 2] = az;
+    edgeOffsetArray[baseVertexIndex + 3] = -1.0;
+    edgeTypeArray[baseVertexIndex + 3] = normalizedType;
+
+    // Handle edge colors
+    const edgeOverrideColor = edgeData[i].color;
+    if (defined(edgeOverrideColor)) {
+      for (let v = 0; v < 4; v++) {
+        setColorFromOverride(baseVertexIndex + v, edgeOverrideColor);
+      }
+    } else if (defined(vertexColors)) {
+      for (let v = 0; v < 4; v++) {
+        assignVertexColor(baseVertexIndex + v, a);
+      }
+    } else {
+      for (let v = 0; v < 4; v++) {
+        setNoColor(baseVertexIndex + v);
+      }
+    }
 
-    edgeTypeArray[i * 2] = t;
-    edgeTypeArray[i * 2 + 1] = t;
+    if (needsCumulativeDistance) {
+      const cumDistA = srcCumDist[a];
+      const cumDistB = srcCumDist[b];
+      edgeCumDistArray[baseVertexIndex] = cumDistA;
+      edgeCumDistArray[baseVertexIndex + 1] = cumDistA;
+      edgeCumDistArray[baseVertexIndex + 2] = cumDistB;
+      edgeCumDistArray[baseVertexIndex + 3] = cumDistB;
+    }
 
-    // Add silhouette normal for silhouette edges (type 1)
+    // Set silhouette normal (same for all 4 vertices)
     let normalX = 0,
       normalY = 0,
-      normalZ = 1; // Default normal pointing up
+      normalZ = 1;
 
     if (rawType === 1 && defined(edgeVisibility.silhouetteNormals)) {
       const mateVertexIndex = edgeData[i].mateVertexIndex;
@@ -599,9 +1040,7 @@ function createCPULineEdgeGeometry(
         mateVertexIndex >= 0 &&
         mateVertexIndex < edgeVisibility.silhouetteNormals.length
       ) {
-        const silhouetteNormals = edgeVisibility.silhouetteNormals;
-        const normal = silhouetteNormals[mateVertexIndex];
-
+        const normal = edgeVisibility.silhouetteNormals[mateVertexIndex];
         if (defined(normal)) {
           normalX = normal.x;
           normalY = normal.y;
@@ -610,17 +1049,14 @@ function createCPULineEdgeGeometry(
       }
     }
 
-    // Set silhouette normal for both edge endpoints
-    const normalIdx = i * 2;
-    silhouetteNormalArray[normalIdx * 3] = normalX;
-    silhouetteNormalArray[normalIdx * 3 + 1] = normalY;
-    silhouetteNormalArray[normalIdx * 3 + 2] = normalZ;
-    silhouetteNormalArray[(normalIdx + 1) * 3] = normalX;
-    silhouetteNormalArray[(normalIdx + 1) * 3 + 1] = normalY;
-    silhouetteNormalArray[(normalIdx + 1) * 3 + 2] = normalZ;
-
-    // Set face normals for both edge endpoints
-    const faceNormalIdx = i * 6; // 6 floats per edge (2 normals * 3 components)
+    for (let v = 0; v < 4; v++) {
+      silhouetteNormalArray[(baseVertexIndex + v) * 3] = normalX;
+      silhouetteNormalArray[(baseVertexIndex + v) * 3 + 1] = normalY;
+      silhouetteNormalArray[(baseVertexIndex + v) * 3 + 2] = normalZ;
+    }
+
+    // Set face normals (same for all 4 vertices)
+    const faceNormalIdx = i * 6;
     const normalAX = edgeFaceNormals[faceNormalIdx];
     const normalAY = edgeFaceNormals[faceNormalIdx + 1];
     const normalAZ = edgeFaceNormals[faceNormalIdx + 2];
@@ -628,21 +1064,14 @@ function createCPULineEdgeGeometry(
     const normalBY = edgeFaceNormals[faceNormalIdx + 4];
     const normalBZ = edgeFaceNormals[faceNormalIdx + 5];
 
-    // Face normal A for both endpoints
-    faceNormalAArray[normalIdx * 3] = normalAX;
-    faceNormalAArray[normalIdx * 3 + 1] = normalAY;
-    faceNormalAArray[normalIdx * 3 + 2] = normalAZ;
-    faceNormalAArray[(normalIdx + 1) * 3] = normalAX;
-    faceNormalAArray[(normalIdx + 1) * 3 + 1] = normalAY;
-    faceNormalAArray[(normalIdx + 1) * 3 + 2] = normalAZ;
-
-    // Face normal B for both endpoints
-    faceNormalBArray[normalIdx * 3] = normalBX;
-    faceNormalBArray[normalIdx * 3 + 1] = normalBY;
-    faceNormalBArray[normalIdx * 3 + 2] = normalBZ;
-    faceNormalBArray[(normalIdx + 1) * 3] = normalBX;
-    faceNormalBArray[(normalIdx + 1) * 3 + 1] = normalBY;
-    faceNormalBArray[(normalIdx + 1) * 3 + 2] = normalBZ;
+    for (let v = 0; v < 4; v++) {
+      faceNormalAArray[(baseVertexIndex + v) * 3] = normalAX;
+      faceNormalAArray[(baseVertexIndex + v) * 3 + 1] = normalAY;
+      faceNormalAArray[(baseVertexIndex + v) * 3 + 2] = normalAZ;
+      faceNormalBArray[(baseVertexIndex + v) * 3] = normalBX;
+      faceNormalBArray[(baseVertexIndex + v) * 3 + 1] = normalBY;
+      faceNormalBArray[(baseVertexIndex + v) * 3 + 2] = normalBZ;
+    }
   }
 
   // Create vertex buffers
@@ -651,44 +1080,92 @@ function createCPULineEdgeGeometry(
     typedArray: edgePosArray,
     usage: BufferUsage.STATIC_DRAW,
   });
+
   const edgeTypeBuffer = Buffer.createVertexBuffer({
     context,
     typedArray: edgeTypeArray,
     usage: BufferUsage.STATIC_DRAW,
   });
+
   const silhouetteNormalBuffer = Buffer.createVertexBuffer({
     context,
     typedArray: silhouetteNormalArray,
     usage: BufferUsage.STATIC_DRAW,
   });
+
   const faceNormalABuffer = Buffer.createVertexBuffer({
     context,
     typedArray: faceNormalAArray,
     usage: BufferUsage.STATIC_DRAW,
   });
+
   const faceNormalBBuffer = Buffer.createVertexBuffer({
     context,
     typedArray: faceNormalBArray,
     usage: BufferUsage.STATIC_DRAW,
   });
 
-  // Create sequential indices for line pairs
+  const edgeOtherPosBuffer = Buffer.createVertexBuffer({
+    context,
+    typedArray: edgeOtherPosArray,
+    usage: BufferUsage.STATIC_DRAW,
+  });
+
+  const edgeOffsetBuffer = Buffer.createVertexBuffer({
+    context,
+    typedArray: edgeOffsetArray,
+    usage: BufferUsage.STATIC_DRAW,
+  });
+
+  const edgeColorBuffer = needsEdgeColorAttribute
+    ? Buffer.createVertexBuffer({
+        context,
+        typedArray: edgeColorArray,
+        usage: BufferUsage.STATIC_DRAW,
+      })
+    : undefined;
+
+  const edgeCumDistBuffer = needsCumulativeDistance
+    ? Buffer.createVertexBuffer({
+        context,
+        typedArray: edgeCumDistArray,
+        usage: BufferUsage.STATIC_DRAW,
+      })
+    : undefined;
+
+  // Create triangle indices for quads: (0,1,2, 0,2,3) for each quad
+  const numTriangles = numEdges * 2;
+  const numIndices = numTriangles * 3;
   const useU32 = totalVerts > 65534;
-  const idx = new Array(totalVerts);
-  for (let i = 0; i < totalVerts; i++) {
-    idx[i] = i;
+  const indices = useU32
+    ? new Uint32Array(numIndices)
+    : new Uint16Array(numIndices);
+
+  for (let i = 0; i < numEdges; i++) {
+    const baseVertex = i * 4;
+    const baseIndex = i * 6;
+
+    // Triangle 1: (v0, v1, v2)
+    indices[baseIndex] = baseVertex;
+    indices[baseIndex + 1] = baseVertex + 1;
+    indices[baseIndex + 2] = baseVertex + 2;
+
+    // Triangle 2: (v0, v2, v3)
+    indices[baseIndex + 3] = baseVertex;
+    indices[baseIndex + 4] = baseVertex + 2;
+    indices[baseIndex + 5] = baseVertex + 3;
   }
 
   const indexBuffer = Buffer.createIndexBuffer({
     context,
-    typedArray: useU32 ? new Uint32Array(idx) : new Uint16Array(idx),
+    typedArray: indices,
     usage: BufferUsage.STATIC_DRAW,
     indexDatatype: useU32
       ? IndexDatatype.UNSIGNED_INT
       : IndexDatatype.UNSIGNED_SHORT,
   });
 
-  // Create vertex array with position, edge type, silhouette normal, and face normal attributes
+  // Create vertex array with all attributes
   const attributes = [
     {
       index: positionLocation,
@@ -725,75 +1202,96 @@ function createCPULineEdgeGeometry(
       componentDatatype: ComponentDatatype.FLOAT,
       normalize: false,
     },
+    {
+      index: edgeOtherPosLocation,
+      vertexBuffer: edgeOtherPosBuffer,
+      componentsPerAttribute: 3,
+      componentDatatype: ComponentDatatype.FLOAT,
+      normalize: false,
+    },
+    {
+      index: edgeOffsetLocation,
+      vertexBuffer: edgeOffsetBuffer,
+      componentsPerAttribute: 1,
+      componentDatatype: ComponentDatatype.FLOAT,
+      normalize: false,
+    },
   ];
 
-  // Get feature ID from original geometry
-  const primitive = renderResources.runtimePrimitive.primitive;
-  const getFeatureIdForEdge = function () {
-    // Try to get the first feature ID from the original primitive
-    if (defined(primitive.featureIds) && primitive.featureIds.length > 0) {
-      const firstFeatureIdSet = primitive.featureIds[0];
-
-      // Handle FeatureIdAttribute objects directly using setIndex
-      if (defined(firstFeatureIdSet.setIndex)) {
-        const featureIdAttribute = primitive.attributes.find(
-          (attr) =>
-            attr.semantic === VertexAttributeSemantic.FEATURE_ID &&
-            attr.setIndex === firstFeatureIdSet.setIndex,
-        );
-
-        if (defined(featureIdAttribute)) {
-          const featureIds = defined(featureIdAttribute.typedArray)
-            ? featureIdAttribute.typedArray
-            : ModelReader.readAttributeAsTypedArray(featureIdAttribute);
-
-          // Create edge feature ID buffer based on edge indices
-          const edgeFeatureIds = new Float32Array(totalVerts);
-          for (let i = 0; i < numEdges; i++) {
-            const a = edgeIndices[i * 2];
-            const featureId = a < featureIds.length ? featureIds[a] : 0;
-            edgeFeatureIds[i * 2] = featureId;
-            edgeFeatureIds[i * 2 + 1] = featureId;
-          }
-
-          return edgeFeatureIds;
-        }
-      }
-    }
-
-    return undefined;
-  };
-
-  const edgeFeatureIds = getFeatureIdForEdge();
-  const hasEdgeFeatureIds = defined(edgeFeatureIds);
-
-  if (hasEdgeFeatureIds) {
-    const edgeFeatureIdBuffer = Buffer.createVertexBuffer({
-      context,
-      typedArray: edgeFeatureIds,
-      usage: BufferUsage.STATIC_DRAW,
+  if (needsEdgeColorAttribute) {
+    attributes.push({
+      index: edgeColorLocation,
+      vertexBuffer: edgeColorBuffer,
+      componentsPerAttribute: 4,
+      componentDatatype: ComponentDatatype.FLOAT,
+      normalize: false,
     });
+  }
 
+  if (needsCumulativeDistance) {
     attributes.push({
-      index: edgeFeatureIdLocation,
-      vertexBuffer: edgeFeatureIdBuffer,
+      index: edgeCumDistLocation,
+      vertexBuffer: edgeCumDistBuffer,
       componentsPerAttribute: 1,
       componentDatatype: ComponentDatatype.FLOAT,
       normalize: false,
     });
   }
 
-  const vertexArray = new VertexArray({ context, indexBuffer, attributes });
+  const primitive = renderResources.runtimePrimitive.primitive;
+  if (defined(primitive.featureIds) && primitive.featureIds.length > 0) {
+    const firstFeatureIdSet = primitive.featureIds[0];
+
+    if (defined(firstFeatureIdSet.setIndex)) {
+      const featureIdAttribute = primitive.attributes.find(
+        (attr) =>
+          attr.semantic === VertexAttributeSemantic.FEATURE_ID &&
+          attr.setIndex === firstFeatureIdSet.setIndex,
+      );
+
+      if (defined(featureIdAttribute)) {
+        const featureIds = defined(featureIdAttribute.typedArray)
+          ? featureIdAttribute.typedArray
+          : ModelReader.readAttributeAsTypedArray(featureIdAttribute);
+
+        const edgeFeatureIds = new Float32Array(totalVerts);
+        for (let i = 0; i < numEdges; i++) {
+          const a = edgeIndices[i * 2];
+          const featureId = a < featureIds.length ? featureIds[a] : 0;
+          // Set same feature ID for all 4 vertices of the quad
+          for (let v = 0; v < 4; v++) {
+            edgeFeatureIds[i * 4 + v] = featureId;
+          }
+        }
 
-  if (!vertexArray || totalVerts === 0 || totalVerts % 2 !== 0) {
-    return undefined;
+        const edgeFeatureIdBuffer = Buffer.createVertexBuffer({
+          context,
+          typedArray: edgeFeatureIds,
+          usage: BufferUsage.STATIC_DRAW,
+        });
+
+        attributes.push({
+          index: edgeFeatureIdLocation,
+          vertexBuffer: edgeFeatureIdBuffer,
+          componentsPerAttribute: 1,
+          componentDatatype: ComponentDatatype.FLOAT,
+          normalize: false,
+        });
+      }
+    }
   }
 
+  const vertexArray = new VertexArray({
+    context,
+    attributes,
+    indexBuffer,
+  });
+
   return {
     vertexArray,
-    indexBuffer,
-    indexCount: totalVerts,
-    hasEdgeFeatureIds,
+    indexCount: numIndices,
+    hasEdgeFeatureIds:
+      defined(primitive.featureIds) && primitive.featureIds.length > 0,
   };
 }