feat: wireframe mode

src/components/Armor/components/CoreArmor/index.tsx

@@ -14,7 +14,10 @@ import { resolveNearPenetration } from '../../../../core/blitz/resolveNearPenetr
 import { jsxTree } from '../../../../core/blitzkrieg/jsxTree';
 import { ShellDefinition } from '../../../../core/blitzkrieg/tankDefinitions';
 import { useDuel } from '../../../../stores/duel';
-import { useTankopediaPersistent } from '../../../../stores/tankopedia';
+import {
+  TankopediaPersistent,
+  useTankopediaPersistent,
+} from '../../../../stores/tankopedia';
 import fragmentShader from './shaders/fragment.glsl';
 import vertexShader from './shaders/vertex.glsl';
 
@@ -47,6 +50,7 @@ export function CoreArmor({ node, thickness }: CoreArmorProps) {
       damage: { value: null },
       explosionRadius: { value: null },
       greenPenetration: { value: null },
+      wireframe: { value: null },
 
       resolution: { value: new Vector2() },
       spacedArmorBuffer: { value: null },
@@ -69,20 +73,22 @@ export function CoreArmor({ node, thickness }: CoreArmorProps) {
       material.uniforms.damage.value = shell.damage.armor;
       material.uniforms.explosionRadius.value = shell.explosionRadius;
     }
-    function handleGreenPenetrationChange(greenPenetration: boolean) {
+    function handleVisualChange(
-      material.uniforms.greenPenetration.value = greenPenetration;
+      visual: TankopediaPersistent['model']['visual'],
+    ) {
+      material.uniforms.greenPenetration.value = visual.greenPenetration;
+      material.uniforms.wireframe.value = visual.wireframe;
+      material.wireframe = visual.wireframe;
     }
 
     handleShellChange(useDuel.getState().antagonist!.shell);
-    handleGreenPenetrationChange(
+    handleVisualChange(useTankopediaPersistent.getState().model.visual);
-      useTankopediaPersistent.getState().model.visual.greenPenetration,
-    );
 
     const unsubscribes = [
       useDuel.subscribe((state) => state.antagonist!.shell, handleShellChange),
       useTankopediaPersistent.subscribe(
-        (state) => state.model.visual.greenPenetration,
+        (state) => state.model.visual,
-        handleGreenPenetrationChange,
+        handleVisualChange,
       ),
     ];
 

src/components/Armor/components/CoreArmor/shaders/fragment.glsl

@@ -13,6 +13,7 @@ uniform bool canSplash;
 uniform float damage;
 uniform float explosionRadius;
 uniform bool greenPenetration;
+uniform bool wireframe;
 
 uniform highp sampler2D spacedArmorBuffer;
 uniform highp sampler2D spacedArmorDepth;
@@ -73,14 +74,15 @@ void main() {
     }
   }
 
+  float alpha = wireframe ? 1.0 : 0.5;
   vec3 color = vec3(1.0, splashChance * 0.392, 0.0);
   if (greenPenetration) {
     // non-trigonometric red-green mixing: https://www.desmos.com/calculator/ceo1oq7l67
     float falling = -pow(penetrationChance, 2.0) + 1.0;
     float gaining = -pow(penetrationChance - 1.0, 2.0) + 1.0;
-    gl_FragColor = vec4(falling * color + gaining * vec3(0.0, 1.0, 0.0), 0.5);
+    gl_FragColor = vec4(falling * color + gaining * vec3(0.0, 1.0, 0.0), alpha);
   } else {
-    gl_FragColor = vec4(color, (1.0 - penetrationChance) * 0.5);
+    gl_FragColor = vec4(color, (1.0 - penetrationChance) * alpha);
   }
 
 }

src/stores/tankopedia.ts

@@ -13,7 +13,7 @@ export type TankopediaSortDirection = 'ascending' | 'descending';
 export type TankopediaTestTankDisplay = 'include' | 'exclude' | 'only';
 export type TankopediaMode = 'model' | 'armor';
 
-interface TankopediaPersistent {
+export interface TankopediaPersistent {
   model: {
     visual: {
       wireframe: boolean;