feat: wireframe armor viewer

src/components/ArmorMesh/components/Armor/index.tsx

@@ -57,6 +57,7 @@ export function ArmorMesh({
   const scene = useThree((state) => state.scene);
   const hasCalibratedShells = useAwait(hasEquipment(103));
   const hasEnhancedArmor = useAwait(hasEquipment(110));
+  const wireframe = initialTankopedia.model.visual.wireframe;
 
   useEffect(() => {
     async function updateQuickEquipments() {
@@ -109,6 +110,15 @@ export function ArmorMesh({
           }
         },
       ),
+      useTankopediaPersistent.subscribe(
+        (state) => state.model.visual.wireframe,
+        (wireframe) => {
+          if (material.current) {
+            material.current.wireframe = wireframe;
+            material.current.uniforms.wireframe.value = wireframe;
+          }
+        },
+      ),
     ];
 
     return () => {
@@ -386,44 +396,48 @@ export function ArmorMesh({
           });
         }}
       >
-        <shaderMaterial
-          ref={material}
-          fragmentShader={fragmentShader}
-          vertexShader={vertexShader}
-          transparent
-          depthWrite={false}
-          uniforms={{
-            resolution: { value: new Vector2() },
-            externalModuleMask: { value: null },
-            spacedArmorDepth: { value: null },
-            spacedArmorMask: { value: null },
-            projectionMatrixInverse: { value: null },
-            zNear: { value: camera.near },
-            zFar: { value: camera.far },
-            greenPenetration: {
-              value: initialTankopedia.model.visual.greenPenetration,
-            },
-            maxThickness: { value: maxThickness },
-            isExplosive: { value: explosionCapable },
-            canRicochet: { value: ricochetCapable },
-            canSplash: { value: canSplash(initialShell.type) },
-            thickness: {
-              value: thickness * (hasEnhancedArmor ? 1.04 : 1),
-            },
-            penetration: {
-              value:
-                resolveNearPenetration(initialShell.penetration) *
-                (hasCalibratedShells ? (explosionCapable ? 1.1 : 1.05) : 1),
-            },
-            caliber: { value: initialShell.caliber },
-            ricochetAngle: { value: degToRad(initialShell.ricochet ?? 90) },
-            normalization: {
-              value: degToRad(initialShell.normalization ?? 0),
-            },
-            damage: { value: initialShell.damage.armor },
-            explosionRadius: { value: initialShell.explosionRadius ?? 0 },
-          }}
-        />
+        {true && (
+          <shaderMaterial
+            wireframe={wireframe}
+            ref={material}
+            fragmentShader={fragmentShader}
+            vertexShader={vertexShader}
+            transparent
+            depthWrite={false}
+            uniforms={{
+              resolution: { value: new Vector2() },
+              externalModuleMask: { value: null },
+              spacedArmorDepth: { value: null },
+              spacedArmorMask: { value: null },
+              projectionMatrixInverse: { value: null },
+              zNear: { value: camera.near },
+              zFar: { value: camera.far },
+              greenPenetration: {
+                value: initialTankopedia.model.visual.greenPenetration,
+              },
+              maxThickness: { value: maxThickness },
+              isExplosive: { value: explosionCapable },
+              canRicochet: { value: ricochetCapable },
+              canSplash: { value: canSplash(initialShell.type) },
+              thickness: {
+                value: thickness * (hasEnhancedArmor ? 1.04 : 1),
+              },
+              penetration: {
+                value:
+                  resolveNearPenetration(initialShell.penetration) *
+                  (hasCalibratedShells ? (explosionCapable ? 1.1 : 1.05) : 1),
+              },
+              caliber: { value: initialShell.caliber },
+              ricochetAngle: { value: degToRad(initialShell.ricochet ?? 90) },
+              normalization: {
+                value: degToRad(initialShell.normalization ?? 0),
+              },
+              damage: { value: initialShell.damage.armor },
+              explosionRadius: { value: initialShell.explosionRadius ?? 0 },
+              wireframe: { value: wireframe },
+            }}
+          />
+        )}
       </mesh>
     </>
   );

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

@@ -19,6 +19,7 @@ uniform float maxThickness;
 uniform bool greenPenetration;
 uniform float damage;
 uniform float explosionRadius;
+uniform bool wireframe;
 
 float depthToDistance(float depth) {
   mat4 projectionMatrixInverse = inverse(vProjectionMatrix);
@@ -107,8 +108,8 @@ void main() {
   }
 
   vec3 color = vec3(1.0, splashChance * 0.392, 0.0);
-  if (greenPenetration) {
-    gl_FragColor = vec4(mix(color, vec3(0.0, 1.0, 0.0), penetrationChance), 0.5);
+  if (greenPenetration || wireframe) {
+    gl_FragColor = vec4(mix(color, vec3(0.0, 1.0, 0.0), penetrationChance), wireframe ? 1.0 : 0.5);
   } else {
     gl_FragColor = vec4(color, (1.0 - penetrationChance) * 0.5);
   }