feat: more advanced armor highlighting

scripts/buildAssets/tankArmors.ts

@@ -20,7 +20,7 @@ export async function buildTankArmors() {
 
   await Promise.all(
     nations.map(async (nation) => {
-      if (nation !== 'china') return;
+      if (nation !== 'france') return;
 
       const tanks = await readXMLDVPL<{ root: VehicleDefinitionList }>(
         `${DATA}/${DOI.vehicleDefinitions}/${nation}/list.xml.dvpl`,

scripts/buildAssets/tankModels.ts

@@ -27,7 +27,7 @@ export async function buildTankModels() {
 
   await Promise.all(
     nations.map(async (nation) => {
-      if (nation !== 'china') return;
+      if (nation !== 'france') return;
 
       const tanks = await readXMLDVPL<{ root: VehicleDefinitionList }>(
         `${DATA}/${DOI.vehicleDefinitions}/${nation}/list.xml.dvpl`,

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

@@ -5,16 +5,14 @@ import { GLTFLoader } from 'three-stdlib';
 import { ArmorMesh } from '../../../../../../../components/ArmorMesh';
 import { HeadsUpDisplay } from '../../../../../../../components/HeadsUpDisplay';
 import { X_AXIS } from '../../../../../../../constants/axis';
-import { canRicochet } from '../../../../../../../core/blitz/canRicochet';
 import { canSplash } from '../../../../../../../core/blitz/canSplash';
-import { isAffectedBySpaced } from '../../../../../../../core/blitz/isAffectedBySpaced';
+import { isExplosive } from '../../../../../../../core/blitz/isExplosive';
 import { numericPenetration } from '../../../../../../../core/blitz/numericPenetration';
 import { asset } from '../../../../../../../core/blitzkrieg/asset';
 import {
   ModelDefinitions,
   modelDefinitions,
 } from '../../../../../../../core/blitzkrieg/modelDefinitions';
-import { RicochetCapableShell } from '../../../../../../../core/blitzkrieg/tankDefinitions';
 import { useTankopedia } from '../../../../../../../stores/tankopedia';
 import { Lighting } from '../../Lighting';
 
@@ -77,9 +75,11 @@ export function TankArmor({ ...props }: TankArmorProps) {
     .sub(turretOrigin)
     .applyAxisAngle(new Vector3(0, 0, 1), model.turretYaw);
   const turretRotation = new Euler(0, 0, model.turretYaw);
-  const ricochetCapable = canRicochet(antagonist.shell.type);
   const splashCapable = canSplash(antagonist.shell.type);
-  const affectedBySpacedCapable = isAffectedBySpaced(antagonist.shell.type);
+  const explosiveCapable = isExplosive(antagonist.shell.type);
+  const penetration = numericPenetration(antagonist.shell.penetration);
+  const ricochet = antagonist.shell.ricochet ?? Math.PI / 2;
+  const normalization = antagonist.shell.normalization ?? 0;
 
   if (tankModelDefinition.turretRotation) {
     const pitch = -tankModelDefinition.turretRotation.pitch * (Math.PI / 180);
@@ -122,25 +122,17 @@ export function TankArmor({ ...props }: TankArmorProps) {
 
           return (
             <ArmorMesh
-              isAffectedBySpaced={affectedBySpacedCapable}
-              canSplash={splashCapable}
-              spaced={isSpaced}
               key={node.uuid}
               geometry={(node as Mesh).geometry}
-              thickness={thickness}
-              penetration={numericPenetration(antagonist.shell.penetration)}
-              canRicochet={ricochetCapable}
-              ricochet={
-                ricochetCapable
-                  ? (antagonist.shell as RicochetCapableShell).ricochet
-                  : undefined
-              }
-              normalization={
-                ricochetCapable
-                  ? (antagonist.shell as RicochetCapableShell).normalization
-                  : undefined
-              }
               caliber={antagonist.shell.caliber}
+              canSplash={splashCapable}
+              isExplosive={explosiveCapable}
+              isSpaced={isSpaced ?? false}
+              normalization={normalization}
+              penetration={penetration}
+              thickness={thickness}
+              ricochet={ricochet}
+              isArmor
             />
           );
         })}
@@ -155,25 +147,17 @@ export function TankArmor({ ...props }: TankArmorProps) {
 
           return (
             <ArmorMesh
-              isAffectedBySpaced={affectedBySpacedCapable}
-              canSplash={splashCapable}
-              spaced
               key={node.uuid}
               geometry={(node as Mesh).geometry}
-              thickness={thickness}
-              penetration={numericPenetration(antagonist.shell.penetration)}
-              canRicochet={ricochetCapable}
-              ricochet={
-                ricochetCapable
-                  ? (antagonist.shell as RicochetCapableShell).ricochet
-                  : undefined
-              }
-              normalization={
-                ricochetCapable
-                  ? (antagonist.shell as RicochetCapableShell).normalization
-                  : undefined
-              }
               caliber={antagonist.shell.caliber}
+              canSplash={splashCapable}
+              isExplosive={explosiveCapable}
+              isSpaced
+              normalization={normalization}
+              penetration={penetration}
+              thickness={thickness}
+              ricochet={ricochet}
+              isArmor={false}
             />
           );
         })}
@@ -200,26 +184,18 @@ export function TankArmor({ ...props }: TankArmorProps) {
 
             return (
               <ArmorMesh
-                isAffectedBySpaced={affectedBySpacedCapable}
-                canSplash={splashCapable}
-                spaced={isSpaced}
                 key={node.uuid}
-                position={turretOrigin}
                 geometry={(node as Mesh).geometry}
-                thickness={thickness}
-                penetration={numericPenetration(antagonist.shell.penetration)}
+                position={turretOrigin}
                 caliber={antagonist.shell.caliber}
-                canRicochet={ricochetCapable}
-                ricochet={
-                  ricochetCapable
-                    ? (antagonist.shell as RicochetCapableShell).ricochet
-                    : undefined
-                }
-                normalization={
-                  ricochetCapable
-                    ? (antagonist.shell as RicochetCapableShell).normalization
-                    : undefined
-                }
+                canSplash={splashCapable}
+                isExplosive={explosiveCapable}
+                isSpaced={isSpaced ?? false}
+                normalization={normalization}
+                penetration={penetration}
+                thickness={thickness}
+                ricochet={ricochet}
+                isArmor
               />
             );
           })}
@@ -252,26 +228,18 @@ export function TankArmor({ ...props }: TankArmorProps) {
 
               return (
                 <ArmorMesh
-                  isAffectedBySpaced={affectedBySpacedCapable}
-                  canSplash={splashCapable}
-                  spaced={isSpaced}
                   key={node.uuid}
-                  position={turretOrigin.clone().add(gunOrigin)}
                   geometry={(node as Mesh).geometry}
-                  thickness={thickness}
-                  penetration={numericPenetration(antagonist.shell.penetration)}
+                  position={turretOrigin.clone().add(gunOrigin)}
                   caliber={antagonist.shell.caliber}
-                  canRicochet={ricochetCapable}
-                  ricochet={
-                    ricochetCapable
-                      ? (antagonist.shell as RicochetCapableShell).ricochet
-                      : undefined
-                  }
-                  normalization={
-                    ricochetCapable
-                      ? (antagonist.shell as RicochetCapableShell).normalization
-                      : undefined
-                  }
+                  canSplash={splashCapable}
+                  isExplosive={explosiveCapable}
+                  isSpaced={isSpaced ?? false}
+                  normalization={normalization}
+                  penetration={penetration}
+                  thickness={thickness}
+                  ricochet={ricochet}
+                  isArmor
                 />
               );
             })}
@@ -287,25 +255,17 @@ export function TankArmor({ ...props }: TankArmorProps) {
 
               return (
                 <ArmorMesh
-                  isAffectedBySpaced={affectedBySpacedCapable}
-                  canSplash={splashCapable}
-                  spaced
                   key={node.uuid}
                   geometry={(node as Mesh).geometry}
-                  thickness={thickness}
-                  penetration={numericPenetration(antagonist.shell.penetration)}
-                  canRicochet={ricochetCapable}
-                  ricochet={
-                    ricochetCapable
-                      ? (antagonist.shell as RicochetCapableShell).ricochet
-                      : undefined
-                  }
-                  normalization={
-                    ricochetCapable
-                      ? (antagonist.shell as RicochetCapableShell).normalization
-                      : undefined
-                  }
                   caliber={antagonist.shell.caliber}
+                  canSplash={splashCapable}
+                  isExplosive={explosiveCapable}
+                  isSpaced
+                  normalization={normalization}
+                  penetration={penetration}
+                  thickness={thickness}
+                  ricochet={ricochet}
+                  isArmor={false}
                 />
               );
             })}

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

@@ -24,7 +24,7 @@ export default function Page({ params }: { params: { id: string } }) {
       draft.model.hullYaw = 0;
       draft.model.turretYaw = 0;
       draft.model.gunPitch = 0;
-      draft.mode = 'model';
+      draft.mode = 'armor';
       draft.areTanksAssigned = true;
 
       if (!draft.areTanksAssigned) return;

src/components/ArmorMesh/index.tsx

@@ -1,69 +1,58 @@
 import { MeshProps } from '@react-three/fiber';
 import { MeshStandardMaterial } from 'three';
 import CustomShaderMaterial from 'three-custom-shader-material';
-import fragment from './shaders/fragment.glsl';
-import vertex from './shaders/vertex.glsl';
+import fragmentShader from './shaders/fragment.glsl';
 
 interface ArmorMeshProps extends MeshProps {
+  isExplosive: boolean;
+  canSplash: boolean;
+  isSpaced: boolean;
+  isArmor: boolean;
   thickness: number;
   penetration: number;
   caliber: number;
-  spaced?: boolean;
-  canRicochet: boolean;
-  canSplash: boolean;
-  ricochet?: number;
-  normalization?: number;
-  isAffectedBySpaced: boolean;
+  ricochet: number;
+  normalization: number;
 }
 
-// shader split: https://github.com/FarazzShaikh/THREE-CustomShaderMaterial/issues/48
-
 export function ArmorMesh({
+  isExplosive,
+  canSplash,
+  isSpaced,
+  isArmor,
   thickness,
   penetration,
   caliber,
-  canRicochet,
   ricochet,
-  canSplash,
-  isAffectedBySpaced,
   normalization,
-  spaced = false,
   ...props
 }: ArmorMeshProps) {
   return (
     <>
-      {!spaced && (
+      {!isSpaced && (
         <mesh {...props}>
           <meshBasicMaterial colorWrite={false} />
         </mesh>
       )}
 
-      <mesh {...props} renderOrder={spaced ? 3 : 1}>
+      <mesh {...props} renderOrder={1}>
         <CustomShaderMaterial
+          silent
           baseMaterial={MeshStandardMaterial}
           transparent
-          silent
           depthWrite={false}
+          fragmentShader={fragmentShader}
           uniforms={{
+            isExplosive: { value: isExplosive },
+            canSplash: { value: canSplash },
+            isSpaced: { value: isSpaced },
+            isArmor: { value: isArmor },
             thickness: { value: thickness },
             penetration: { value: penetration },
-            ricochet: {
-              value: ricochet === undefined ? 0 : ricochet * (Math.PI / 180),
-            },
-            normalization: {
-              value:
-                normalization === undefined
-                  ? 0
-                  : normalization * (Math.PI / 180),
-            },
             caliber: { value: caliber },
-            spaced: { value: spaced ?? false },
-            canRicochet: { value: canRicochet },
-            canSplash: { value: canSplash },
-            isAffectedBySpaced: { value: isAffectedBySpaced },
+            ricochet: { value: ricochet * (Math.PI / 180) },
+            normalization: { value: normalization * (Math.PI / 180) },
           }}
-          vertexShader={vertex}
-          fragmentShader={fragment}
         />
       </mesh>
     </>

src/components/ArmorMesh/shaders/fragment.glsl

@@ -1,75 +1,64 @@
-// split shaders due to https://github.com/FarazzShaikh/THREE-CustomShaderMaterial/issues/48
-
-varying vec3 vCSMViewPosition;
+uniform bool isExplosive;
+uniform bool canSplash;
+uniform bool isSpaced;
+uniform bool isArmor;
 uniform float thickness;
 uniform float penetration;
-uniform float ricochet;
 uniform float caliber;
+uniform float ricochet;
 uniform float normalization;
-uniform bool spaced;
-uniform bool canRichochet;
-uniform bool canSplash;
-uniform bool isAffectedBySpaced;
+
+vec3 zPositive = vec3(0.0, 0.0, 1.0);
 
 void main() {
-  vec3 normalizedNormal = normalize(vNormal);
-  vec3 normalizedViewPosition = normalize(vCSMViewPosition);
-  float dotProduct = dot(normalizedNormal, -normalizedViewPosition);
-  float angle = acos(dotProduct);
+  float cosAngle = dot(zPositive, vNormal);
+  float angle = acos(cosAngle);
 
   float penetrationChance = -1.0;
-  bool threeCaliberRule = caliber > 3.0 * thickness;
+  float splashChance = -1.0;
+  bool threeCalibersRule = caliber > 3.0 * thickness;
 
-  if (canRichochet && !threeCaliberRule && angle >= ricochet) {
-    // auto ricochet angle and three caliber rule not met
+  if (isArmor && !isExplosive && !threeCalibersRule && angle >= ricochet) {
     penetrationChance = 0.0;
+    splashChance = 0.0;
   } else {
-    bool twoCaliberRule = caliber > 2.0 * thickness;
-    float finalNormalization = twoCaliberRule ? (normalization * 1.4 * caliber) / (2.0 * thickness) : normalization;
-    float effectiveArmor = thickness / cos(angle - finalNormalization);
-    float penetrationRandomRadius = penetration * 0.05;
-    float penetrationDifference = effectiveArmor - penetration;
+    bool twoCalibersRule = caliber > 2.0 * thickness;
+    float finalNormalization = twoCalibersRule ? (normalization * 1.4 * caliber) / (2.0 * thickness) : normalization;
+    float finalThickness = thickness / cos(angle - finalNormalization);
 
-    if (penetrationDifference > penetrationRandomRadius) {
-        // even with a +5% buff, can't penetrate
-      penetrationChance = 0.0;
-    } else if (penetrationDifference < -penetrationRandomRadius) {
-        // event with a -5% nerf, can penetrate
-      penetrationChance = 1.0;
+    if (canSplash) {
+      if (finalThickness * (5.0 / 11.0) > penetration) {
+        penetrationChance = 0.0;
+        splashChance = 0.0;
+      } else if (finalThickness > penetration) {
+        penetrationChance = 0.0;
+        splashChance = 1.0;
+      } else {
+        penetrationChance = 1.0;
+        splashChance = 1.0;
+      }
     } else {
-        // penetration gradiant
-      penetrationChance = 1.0 - (penetrationDifference + penetrationRandomRadius) / (2.0 * penetrationRandomRadius);
+      if (finalThickness > penetration) {
+        penetrationChance = 0.0;
+        splashChance = 0.0;
+      } else {
+        penetrationChance = 1.0;
+        splashChance = 0.0;
+      }
     }
   }
 
-  float alpha = (1.0 - penetrationChance) * 0.5;
-
-  if (canSplash) {
-    // he
-    if (spaced) {
-      csm_FragColor = vec4(1.0, 0.0, 1.0, 0.5);
-    } else {
-      float angledThickness = thickness / cos(angle);
-
-      if (angledThickness * (5.0 / 11.0) > penetration) {
-        csm_FragColor = vec4(1.0, 0.0, 0.0, alpha);
-      } else {
-        csm_FragColor = vec4(1.0, 0.392, 0.0, alpha);
-      }
-
-    }
-  } else {
-    if (spaced) {
-      if (isAffectedBySpaced) {
-        // hc
+  if (isSpaced) {
+    if (isArmor) {
+      if (isExplosive) {
         csm_FragColor = vec4(1.0, 0.0, 1.0, 0.5);
       } else {
-        // ap, ap_cr
-        csm_FragColor = vec4(1.0, 0.0, 1.0, alpha);
+        csm_FragColor = vec4(1.0, 0.0, 1.0, (1.0 - penetrationChance) * 0.5);
       }
     } else {
-      // ap, ap_cr, hc
-      csm_FragColor = vec4(1.0, 0.0, 0.0, alpha);
+      csm_FragColor = vec4(0.5, 0.0, 1.0, 0.5);
     }
+  } else {
+    csm_FragColor = vec4(1.0, splashChance * 0.392, 0.0, (1.0 - penetrationChance) * 0.5);
   }
-}
+}

src/components/ArmorMesh/shaders/vertex.glsl

@@ -1,6 +0,0 @@
-varying vec3 vCSMViewPosition;
-
-void main() {
-  vec4 vViewPosition4 = modelViewMatrix * vec4(position, 1.0);
-  vCSMViewPosition = vViewPosition4.xyz;
-}

src/core/blitz/canRicochet.ts

@@ -1,7 +0,0 @@
-import { ShellDefinition } from '../blitzkrieg/tankDefinitions';
-
-export function canRicochet(
-  type: ShellDefinition['type'],
-): type is 'ap' | 'ap_cr' {
-  return type === 'ap' || type === 'ap_cr';
-}

src/core/blitz/isExplosive.ts

@@ -1,6 +1,6 @@
 import { ShellDefinition } from '../blitzkrieg/tankDefinitions';
 
-export function isAffectedBySpaced(
+export function isExplosive(
   type: ShellDefinition['type'],
 ): type is 'he' | 'hc' {
   return type === 'he' || type === 'hc';

src/core/blitzkrieg/tankDefinitions.ts

@@ -58,15 +58,7 @@ interface GunDefinitionAutoReloader {
   interClip: number;
   count: number;
 }
-export interface RicochetCapableShell {
-  type: 'ap' | 'ap_cr';
-  normalization: number;
-  ricochet: number;
-}
-export interface RicochetIncapableShell {
-  type: 'hc' | 'he';
-}
-export type ShellDefinition = {
+export interface ShellDefinition {
   id: number;
   name: string;
   speed: number;
@@ -74,7 +66,10 @@ export type ShellDefinition = {
   caliber: number;
   icon: string;
   penetration: number | Vector2Tuple;
-} & (RicochetCapableShell | RicochetIncapableShell);
+  type: ShellType;
+  normalization?: number;
+  ricochet?: number;
+}
 
 export const tankDefinitions = fetch(asset('definitions/tanks.json'), {
   cache: 'no-cache',