feat: wireframe armor viewer

.vscode/settings.json

@@ -130,6 +130,7 @@
     "wargaming",
     "webp",
     "winrate",
+    "wireframe",
     "wotblitz",
     "xffn",
     "xkdkw",

src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx

@@ -27,6 +27,9 @@ export function Options({ isFullScreen, canvas }: OptionsProps) {
   const greenPenetration = useTankopediaPersistent(
     (state) => state.model.visual.greenPenetration,
   );
+  const wireframe = useTankopediaPersistent(
+    (state) => state.model.visual.wireframe,
+  );
   const fullScreenAvailable =
     typeof document !== 'undefined' && document.fullscreenEnabled;
   const environment = useTankopediaPersistent(
@@ -126,6 +129,17 @@ export function Options({ isFullScreen, canvas }: OptionsProps) {
               </DropdownMenu.RadioGroup>
             </DropdownMenu.SubContent>
           </DropdownMenu.Sub>
+
+          <DropdownMenu.CheckboxItem
+            checked={wireframe}
+            onCheckedChange={(checked) => {
+              mutateTankopediaPersistent((draft) => {
+                draft.model.visual.wireframe = checked;
+              });
+            }}
+          >
+            Wireframe
+          </DropdownMenu.CheckboxItem>
         </DropdownMenu.Content>
       </DropdownMenu.Root>
 

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);
   }

src/stores/tankopedia.ts

@@ -30,6 +30,7 @@ export interface DuelMember {
 interface TankopediaPersistent {
   model: {
     visual: {
+      wireframe: boolean;
       environment: (typeof ENVIRONMENTS)[number];
       controlsEnabled: boolean;
       showGrid: boolean;
@@ -131,6 +132,7 @@ export const useTankopediaPersistent = create<TankopediaPersistent>()(
     subscribeWithSelector<TankopediaPersistent>(() => ({
       model: {
         visual: {
+          wireframe: false,
           environment: ENVIRONMENTS[0],
           controlsEnabled: true,
           showGrid: true,