feat: some armor rules

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

@@ -22,8 +22,12 @@ export function TankArmor() {
     if (!state.areTanksAssigned) return;
     return state.protagonist;
   });
+  const antagonist = useTankopedia((state) => {
+    if (!state.areTanksAssigned) return;
+    return state.antagonist;
+  });
 
-  if (!protagonist) return null;
+  if (!protagonist || !antagonist) return null;
 
   const gltf = useLoader(
     GLTFLoader,
@@ -80,15 +84,25 @@ export function TankArmor() {
       <group rotation={[-Math.PI / 2, 0, model.hullYaw]}>
         {nodes.map((node) => {
           const isHull = node.name.startsWith('hull_');
+          const armorId = parseInt(node.name.match(/.+_armor_(\d+)/)![1]);
           const isVisible = isHull;
+          const thickness = tankModelDefinition.armor.thickness[armorId] ?? 0;
 
           if (!isVisible) return null;
           return (
-            <ArmorMesh key={node.uuid} geometry={(node as Mesh).geometry} />
+            <ArmorMesh
+              key={node.uuid}
+              geometry={(node as Mesh).geometry}
+              thickness={thickness}
+              penetration={100}
+              ricochet={antagonist.shell.ricochet * (Math.PI / 180)}
+              caliber={antagonist.shell.caliber}
+              normalization={antagonist.shell.normalization}
+            />
           );
         })}
 
-        <group position={turretPosition} rotation={turretRotation}>
+        {/* <group position={turretPosition} rotation={turretRotation}>
           {nodes.map((node) => {
             const isCurrentTurret = node.name.startsWith(
               `turret_${turretModelDefinition.model
@@ -133,7 +147,7 @@ export function TankArmor() {
               );
             })}
           </group>
-        </group>
+        </group> */}
       </group>
     </HeadsUpDisplay>
   );

src/app/tools/tankopedia/[id]/components/VersusBar.tsx

@@ -132,6 +132,8 @@ export function VersusBar() {
                                         tank.turrets.at(-1)!;
                                       draft.antagonist.gun =
                                         draft.antagonist.turret.guns.at(-1)!;
+                                      draft.antagonist.shell =
+                                        draft.antagonist.gun.shells[0];
                                     });
                                     setVersusTankSearchResults([]);
                                     versusTankSearchInput.current!.value = '';
@@ -176,6 +178,8 @@ export function VersusBar() {
                                       draft.antagonist.turret = turret;
                                       draft.antagonist.gun =
                                         turret.guns.at(-1)!;
+                                      draft.antagonist.shell =
+                                        draft.antagonist.gun.shells[0];
                                     });
                                   }}
                                   selected={antagonist.turret.id === turret.id}
@@ -210,6 +214,7 @@ export function VersusBar() {
                                     mutateTankopedia((draft) => {
                                       if (!draft.areTanksAssigned) return;
                                       draft.antagonist.gun = gun;
+                                      draft.antagonist.shell = gun.shells[0];
                                     });
                                   }}
                                   selected={antagonist.gun.id === gun.id}

src/app/tools/tankopedia/[id]/page.tsx

@@ -33,7 +33,10 @@ export default function Page({ params }: { params: { id: string } }) {
       draft.protagonist.tank = awaitedTankDefinitions[id];
       draft.protagonist.turret = draft.protagonist.tank.turrets.at(-1)!;
       draft.protagonist.gun = draft.protagonist.turret.guns.at(-1)!;
-      draft.antagonist = draft.protagonist;
+      draft.antagonist = {
+        ...draft.protagonist,
+        shell: draft.protagonist.gun.shells[0],
+      };
     });
 
     return () => {

src/components/ArmorMesh.tsx

@@ -1,8 +1,39 @@
+// // Vertex shader
+// varying vec3 vNormal; // declare a varying variable to pass the normal vector
+// void main() {
+//   vNormal = normal; // assign the normal vector to the varying variable
+//   gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); // transform the vertex position
+// }
+
+// // Fragment shader
+// varying vec3 vNormal; // declare the same varying variable to receive the normal vector
+// void main() {
+//   vec3 cameraDir = -viewPosition; // get the camera direction vector by negating the view position
+//   float angle = acos(dot(vNormal, cameraDir)); // calculate the angle of the fragment using the dot product and the acos function
+//   vec3 color = mix(vec3(1.0, 0.0, 0.0), vec3(0.0, 0.0, 1.0), angle / PI); // create a gradient color from red to blue based on the angle
+//   gl_FragColor = vec4(color, 1.0); // set the fragment color
+// }
+
 import { MeshProps } from '@react-three/fiber';
+import { MeshBasicMaterial } from 'three';
+import CustomShaderMaterial from 'three-custom-shader-material';
 
-interface ArmorMeshProps extends MeshProps {}
+interface ArmorMeshProps extends MeshProps {
+  thickness: number;
+  penetration: number;
+  ricochet: number;
+  caliber: number;
+  normalization: number;
+}
 
-export function ArmorMesh(props: ArmorMeshProps) {
+export function ArmorMesh({
+  thickness,
+  penetration,
+  caliber,
+  ricochet,
+  normalization,
+  ...props
+}: ArmorMeshProps) {
   return (
     <>
       <mesh {...props}>
@@ -10,13 +41,89 @@ export function ArmorMesh(props: ArmorMeshProps) {
       </mesh>
 
       <mesh {...props} renderOrder={1}>
-        <meshBasicMaterial
+        <CustomShaderMaterial
+          baseMaterial={MeshBasicMaterial}
           transparent
-          // opacity={Math.random() / 2}
-          opacity={0.25}
+          silent
+          depthWrite={false}
+          uniforms={{
+            thickness: { value: thickness },
+            penetration: { value: penetration },
+            ricochet: { value: ricochet },
+            caliber: { value: caliber },
+            normalization: { value: normalization },
+          }}
+          vertexShader={`
+            varying vec3 vNormal;
+            varying vec3 vViewPosition;
+
+            void main() {
+              vec4 vViewPosition4 = modelViewMatrix * vec4(position, 1.0);
+              vViewPosition = vViewPosition4.xyz;
+              vNormal = normalMatrix * normal;
+            }
+          `}
+          fragmentShader={`
+            varying vec3 vViewPosition;
+            uniform float thickness;
+            uniform float penetration;
+            uniform float ricochet;
+            uniform float caliber;
+            uniform float normalization;
+
+            void main() {
+              vec3 normalizedNormal = normalize(vNormal);
+              vec3 normalizedViewPosition = normalize(vViewPosition);
+              float angle = acos(dot(normalizedNormal, -normalizedViewPosition));
+              float sinAngle = sin(angle);
+
+              float penetrationChance = 0.0;
+              float effectiveArmor = thickness * sinAngle;
+              bool twoCaliberRule = caliber > 2.0 * thickness;
+              bool threeCaliberRule = caliber > 3.0 * thickness;
+              float finalNormalization = normalization;
+
+              if (twoCaliberRule) {
+                finalNormalization = (normalization * 1.4 * caliber) / (2.0 * thickness);
+              }
+
+              if (
+                angle >= ricochet
+                && !threeCaliberRule
+              ) {
+                penetrationChance = 1.0;
+              }
+
+              csm_FragColor *= vec4(1.0, 0.0, 0.0, penetrationChance * 0.5);
+            }
+          `}
+        />
+
+        {/* <meshBasicMaterial
+          transparent
+          opacity={0.5}
           color="red"
           depthWrite={false}
-        />
+        /> */}
+        {/* <shaderMaterial
+          transparent
+          depthWrite={false}
+          args={[
+            {
+              vertexShader: `
+                void main() {
+                  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+                }
+              `,
+
+              fragmentShader: `
+                void main() {
+                  gl_FragColor = vec4(1.0, 0.0, 0.0, 0.5);
+                }
+              `,
+            },
+          ]}
+        /> */}
       </mesh>
     </>
   );

src/stores/tankopedia.ts

@@ -3,6 +3,7 @@ import { create } from 'zustand';
 import { TankType, TreeTypeString } from '../components/Tanks';
 import {
   GunDefinition,
+  ShellDefinition,
   TankDefinition,
   Tier,
   TurretDefinition,
@@ -45,6 +46,7 @@ type Tankopedia = {
         tank: TankDefinition;
         turret: TurretDefinition;
         gun: GunDefinition;
+        shell: ShellDefinition;
       };
     }
   | { areTanksAssigned: false }