vertex count, adjust highlight color

src/routes/Viewer.svelte

@@ -88,6 +88,11 @@
         </div>
     </div>
     <canvas class="viewer-canvas" bind:this={canvas} width={800} height={600}> </canvas>
+    <div class="stats">
+        {#if viewer}
+            <p>vertex count: {viewer.vertexCount}</p>
+        {/if}
+    </div>
     <div class="mode-toggle">
         <label>
             <input

src/routes/Vote.svelte

@@ -178,6 +178,11 @@
                 </div>
             </div>
             <canvas bind:this={canvasA} class="viewer-canvas" id="canvas1"> </canvas>
+            <div class="stats">
+                {#if viewerA}
+                    <p>vertex count: {viewerA.vertexCount}</p>
+                {/if}
+            </div>
             <div class="mode-toggle">
                 <label>
                     <input
@@ -207,6 +212,11 @@
                 </div>
             </div>
             <canvas bind:this={canvasB} class="viewer-canvas" id="canvas2"></canvas>
+            <div class="stats">
+                {#if viewerB}
+                    <p>vertex count: {viewerB.vertexCount}</p>
+                {/if}
+            </div>
             <div class="mode-toggle">
                 <label>
                     <input

src/routes/viewers/BabylonViewer.ts

@@ -10,7 +10,7 @@ export class BabylonViewer implements IViewer {
     scene: BABYLON.Scene;
     camera: BABYLON.ArcRotateCamera;
 
-    triangleCount: number = 0;
+    vertexCount: number = 0;
 
     private _originalColors: Map<
         BABYLON.AbstractMesh,
@@ -109,11 +109,11 @@ export class BabylonViewer implements IViewer {
 
             scaleFactor = standardSize / size;
         }
-        this.triangleCount = 0;
+        this.vertexCount = 0;
         this.scene.meshes.forEach((mesh) => {
             mesh.setParent(parentNode);
             if (mesh.getTotalVertices() > 0) {
-                this.triangleCount += mesh.getTotalIndices() / 3;
+                this.vertexCount += mesh.getTotalVertices();
             }
         });
         parentNode.position = center.scale(-1 * scaleFactor);
@@ -160,7 +160,7 @@ export class BabylonViewer implements IViewer {
                         emissiveColor: material.emissiveColor,
                     });
                     material.albedoColor = new BABYLON.Color3(0, 0, 0);
-                    material.emissiveColor = new BABYLON.Color3(1, 0.65, 0);
+                    material.emissiveColor = new BABYLON.Color3(1, 0.13, 0);
                 }
             });
         } else {
@@ -176,13 +176,4 @@ export class BabylonViewer implements IViewer {
             });
         }
     }
-
-    getStats(): { name: string; value: any }[] {
-        const fps = this.engine.getFps().toFixed();
-        const triangleCount = this.triangleCount.toLocaleString();
-        return [
-            { name: "FPS", value: fps },
-            { name: "Triangles", value: triangleCount },
-        ];
-    }
 }

src/routes/viewers/IViewer.ts

@@ -1,7 +1,7 @@
 export interface IViewer {
+    vertexCount: number;
     loadScene(url: string, onProgress?: (progress: number) => void): Promise<void>;
     dispose(): void;
     capture(): Promise<string | null>;
     setRenderMode(mode: string): void;
-    getStats(): { name: string; value: any }[];
 }

src/routes/viewers/SplatViewer.ts

@@ -12,6 +12,8 @@ export class SplatViewer implements IViewer {
 
     disposed: boolean = false;
 
+    vertexCount: number = 0;
+
     constructor(canvas: HTMLCanvasElement) {
         this.canvas = canvas;
 
@@ -38,6 +40,8 @@ export class SplatViewer implements IViewer {
             throw new Error("Unsupported file format");
         }
 
+        this.vertexCount = this.splat.data.vertexCount;
+
         const frame = () => {
             this.controls.update();
             this.renderer.render(this.scene, this.camera);

static/global.css

@@ -165,7 +165,7 @@ body {
     gap: 10px;
     justify-content: center;
     align-items: center;
-    padding: 10px;
+    padding: 10px 10px 20px 10px;
     flex-wrap: wrap;
 }
 
@@ -290,6 +290,23 @@ body {
     width: 100%;
 }
 
+.stats {
+    position: absolute;
+    top: 0;
+    left: 0;
+    color: #aaa;
+    display: flex;
+    margin: 0;
+    padding: 0;
+    font-size: 12px;
+    gap: 10px;
+}
+
+.stats p {
+    margin: 0;
+    padding: 10px;
+}
+
 .label {
     font-weight: bold;
     justify-content: flex-end;