Add support for displaying and configuring wireframe in LayerStyles for debugging

Signed-off-by: Tim Deubler <[email protected]>

Author: TerminalTim

packages/core/src/styles/LayerStyle.ts

@@ -446,4 +446,21 @@ export interface LayerStyle {
      * If no `zLayer` is defined, the display layer order is used by default.
      */
     zLayer?: number;
+
+
+    /**
+     * Specifies whether to display a wireframe for debugging purposes.
+     * Currently only supported for `Model` styles.
+     *
+     * - If set to `true`, the wireframe will be shown with an automatically inverted color
+     *   relative to the main color of the layer.
+     * - If set to a `Color`, the wireframe will be displayed in the specified color.
+     * - If set to `false`, the wireframe will not be shown.
+     *
+     * Default is `false`.
+     *
+     * @hidden
+     * @internal
+     */
+    showWireframe?: boolean | Color;
 }

packages/display/src/displays/webgl/buffer/createBuffer.ts

@@ -17,11 +17,11 @@
  * License-Filename: LICENSE
  */
 
-import {TaskManager} from '@here/xyz-maps-common';
+import {Color as Colors, TaskManager} from '@here/xyz-maps-common';
 import {GeometryBuffer} from './GeometryBuffer';
 import {getPolygonCenter, getValue} from '../../styleTools';
 import {
-    Feature,
+    Feature, LayerStyle,
     LinearGradient,
     StyleGroup,
     Tile,
@@ -101,7 +101,8 @@ type TaskData = {
     layer: Layer,
     zoom: number,
     collisions: null | CollisionGroup[],
-    groups: GroupMap
+    groups: GroupMap,
+    showWireframe: LayerStyle['showWireframe']
 };
 
 
@@ -144,6 +145,8 @@ const createBuffer = (
 
             factory.init(tile, groups, tileSize, zoom, layerStyles.zLayer, waitAndRefresh);
 
+            const {showWireframe} = layerStyles;
+
             return {
                 tile,
                 data: tile.data || [],
@@ -153,7 +156,8 @@ const createBuffer = (
                 layer: displayLayer,
                 zoom,
                 collisions: null,
-                groups
+                groups,
+                showWireframe: (showWireframe && typeof showWireframe != 'boolean') ? Colors.toRGB(showWireframe): showWireframe
             };
         },
 
@@ -363,6 +367,22 @@ const createBuffer = (
                                         geoBuffer.destroy = (grpBuffer as ModelBuffer).destroy || geoBuffer.destroy;
                                         geoBuffer.depth = true;
 
+                                        const {showWireframe}= taskData;
+                                        if (showWireframe) {
+                                            const wireFrame = geoBuffer.addGroup(
+                                                (grpBuffer as ModelBuffer).generateWireframeIndices(),
+                                                grpBuffer.i32,
+                                                GeometryBuffer.MODE_GL_LINES
+                                            );
+
+                                            wireFrame.uniforms = {
+                                                // invert diffuse color for wireframe
+                                                diffuse: <number[]>(showWireframe === true
+                                                    ? geoBuffer.uniforms.diffuse
+                                                    : showWireframe).slice(0, 3).map((c)=>1-c)
+                                            };
+                                        }
+
                                         if (geoBuffer.uniforms.pointSize) {
                                             geoBuffer.groups[0].mode = GeometryBuffer.MODE_GL_POINTS;
                                         }

packages/display/src/displays/webgl/buffer/templates/ModelBuffer.ts

@@ -582,4 +582,35 @@ export class ModelBuffer extends TemplateBuffer {
             }
         }
     }
+
+    generateWireframeIndices(): Uint16Array | Uint32Array {
+        const triangleIndices: ArrayLike<number> = this.index();
+        const edgeSet = new Set<string>();
+        const lines: number[] = [];
+
+        for (let i = 0; i < triangleIndices.length; i += 3) {
+            const i0 = triangleIndices[i];
+            const i1 = triangleIndices[i + 1];
+            const i2 = triangleIndices[i + 2];
+
+            const edges: [number, number][] = [
+                [i0, i1],
+                [i1, i2],
+                [i2, i0]
+            ];
+
+            for (const [a, b] of edges) {
+                const key = a < b ? `${a};${b}` : `${b};${a}`;
+                if (!edgeSet.has(key)) {
+                    edgeSet.add(key);
+                    lines.push(a, b);
+                }
+            }
+        }
+
+        const IndexArrayConstructor =
+            triangleIndices instanceof Uint32Array ? Uint32Array : Uint16Array;
+
+        return new IndexArrayConstructor(lines);
+    }
 }