improved wireframe

src/routes/Vote.svelte

@@ -22,6 +22,10 @@
     let containerB: HTMLDivElement;
     let overlayA: HTMLDivElement;
     let overlayB: HTMLDivElement;
+    let normalToggleA: HTMLInputElement;
+    let normalToggleB: HTMLInputElement;
+    let wireframeToggleA: HTMLInputElement;
+    let wireframeToggleB: HTMLInputElement;
     let loadingBarFillA: HTMLDivElement;
     let loadingBarFillB: HTMLDivElement;
     let voteOverlay: boolean = false;
@@ -215,6 +219,7 @@
                         name="modeA"
                         value="default"
                         checked
+                        bind:this={normalToggleA}
                         on:change={() => setRenderMode(viewerA, "default")}
                     />
                     <Cube class="mode-toggle-icon" />
@@ -224,6 +229,7 @@
                         type="radio"
                         name="modeA"
                         value="wireframe"
+                        bind:this={wireframeToggleA}
                         on:change={() => setRenderMode(viewerA, "wireframe")}
                     />
                     <WatsonHealth3DPrintMesh class="mode-toggle-icon" />
@@ -250,6 +256,7 @@
                         name="modeB"
                         value="default"
                         checked
+                        bind:this={normalToggleB}
                         on:change={() => setRenderMode(viewerB, "default")}
                     />
                     <Cube class="mode-toggle-icon" />
@@ -259,6 +266,7 @@
                         type="radio"
                         name="modeB"
                         value="wireframe"
+                        bind:this={wireframeToggleB}
                         on:change={() => setRenderMode(viewerB, "wireframe")}
                     />
                     <WatsonHealth3DPrintMesh class="mode-toggle-icon" />

src/routes/viewers/BabylonViewer.ts

@@ -12,13 +12,13 @@ export class BabylonViewer implements IViewer {
 
     vertexCount: number = 0;
 
-    private _originalColors: Map<
-        BABYLON.AbstractMesh,
-        {
-            albedoColor: BABYLON.Color3;
-            emissiveColor: BABYLON.Color3;
-        }
-    > = new Map();
+    private _originalMaterials: Map<BABYLON.AbstractMesh, BABYLON.Material> = new Map();
+    private _originalVertexColors: Map<BABYLON.AbstractMesh, BABYLON.Nullable<BABYLON.FloatArray>> = new Map();
+    private _wireframes: Array<BABYLON.Mesh> = [];
+
+    private _solidColor = new BABYLON.Color4(1, 1, 1, 1);
+    private _wireframeMaterial: BABYLON.StandardMaterial;
+    private _solidMaterial: BABYLON.StandardMaterial;
 
     constructor(canvas: HTMLCanvasElement) {
         this.canvas = canvas;
@@ -51,6 +51,17 @@ export class BabylonViewer implements IViewer {
             this.camera.panningSensibility = 10000 / this.camera.radius;
         });
 
+        this._wireframeMaterial = new BABYLON.StandardMaterial("wireframe", this.scene);
+        this._wireframeMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
+        this._wireframeMaterial.emissiveColor = new BABYLON.Color3(0.7, 0.7, 0.7);
+        this._wireframeMaterial.zOffset = 1;
+        this._wireframeMaterial.disableLighting = true;
+        this._wireframeMaterial.wireframe = true;
+
+        this._solidMaterial = new BABYLON.StandardMaterial("solid", this.scene);
+        this._solidMaterial.diffuseColor = new BABYLON.Color3(0.8, 0.8, 0.8);
+        this._solidMaterial.alphaMode = 0;
+
         this.handleResize = this.handleResize.bind(this);
         window.addEventListener("resize", this.handleResize);
         this.canvas.addEventListener("wheel", (e) => e.preventDefault());
@@ -133,7 +144,7 @@ export class BabylonViewer implements IViewer {
         if (this.engine) {
             this.engine.dispose();
         }
-        this._originalColors.clear();
+        this._originalMaterials.clear();
         window.removeEventListener("resize", this.handleResize);
         this.canvas.removeEventListener("wheel", (e) => e.preventDefault());
     }
@@ -152,28 +163,47 @@ export class BabylonViewer implements IViewer {
     }
 
     setRenderMode(mode: string) {
-        this.scene.forceWireframe = mode === "wireframe";
         if (mode === "wireframe") {
             this.scene.meshes.forEach((mesh) => {
-                const material = mesh.material as BABYLON.PBRMaterial;
+                const vertexData = mesh.getVerticesData(BABYLON.VertexBuffer.ColorKind);
+                if (vertexData) {
+                    this._originalVertexColors.set(mesh, vertexData);
+
+                    const newVertexData = new Array<number>(vertexData.length);
+                    for (let i = 0; i < vertexData.length; i += 4) {
+                        newVertexData[i] = this._solidColor.r;
+                        newVertexData[i + 1] = this._solidColor.g;
+                        newVertexData[i + 2] = this._solidColor.b;
+                        newVertexData[i + 3] = this._solidColor.a;
+                    }
+                    mesh.setVerticesData(BABYLON.VertexBuffer.ColorKind, newVertexData);
+                }
+
+                const material = mesh.material as BABYLON.StandardMaterial;
                 if (material) {
-                    this._originalColors.set(mesh, {
-                        albedoColor: material.albedoColor,
-                        emissiveColor: material.emissiveColor,
-                    });
-                    material.albedoColor = new BABYLON.Color3(0, 0, 0);
-                    material.emissiveColor = new BABYLON.Color3(1, 0.13, 0);
+                    this._originalMaterials.set(mesh, material);
+                    mesh.material = this._solidMaterial;
                 }
+
+                const wireframeMesh = mesh.clone(mesh.name + "_wireframe", null) as BABYLON.Mesh;
+                wireframeMesh.material = this._wireframeMaterial;
+                this._wireframes.push(wireframeMesh);
             });
         } else {
+            this._wireframes.forEach((mesh) => {
+                mesh.dispose();
+            });
+            this._wireframes = [];
+
             this.scene.meshes.forEach((mesh) => {
-                const material = mesh.material as BABYLON.PBRMaterial;
+                const vertexData = this._originalVertexColors.get(mesh);
+                if (vertexData) {
+                    mesh.setVerticesData(BABYLON.VertexBuffer.ColorKind, vertexData);
+                }
+
+                const material = this._originalMaterials.get(mesh);
                 if (material) {
-                    const originalColors = this._originalColors.get(mesh);
-                    if (originalColors) {
-                        material.albedoColor = originalColors.albedoColor;
-                        material.emissiveColor = originalColors.emissiveColor;
-                    }
+                    mesh.material = material;
                 }
             });
         }

src/routes/viewers/SplatViewer.ts

@@ -18,6 +18,8 @@ export class SplatViewer implements IViewer {
         this.canvas = canvas;
 
         this.renderer = new SPLAT.WebGLRenderer(canvas);
+        this.renderer.renderProgram.outlineColor = new SPLAT.Color32(180, 180, 180);
+
         this.scene = new SPLAT.Scene();
         this.camera = new SPLAT.Camera();
         this.controls = new SPLAT.OrbitControls(this.camera, canvas);