feat: accurate external module thickness

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

@@ -115,13 +115,8 @@ export function ArmorHighlighting({ duel }: ArmorHighlightingProps) {
     GLTFLoader,
     asset(`3d/tanks/armor/${duel.protagonist.tank.id}.glb`),
   );
-  const modelGltf = useLoader(
-    GLTFLoader,
-    asset(`3d/tanks/models/${duel.protagonist.tank.id}.glb`),
-  );
 
   const armorNodes = Object.values(armorGltf.nodes);
-  const modelNodes = Object.values(modelGltf.nodes);
   const tankModelDefinition = awaitedModelDefinitions[duel.protagonist.tank.id];
   const turretModelDefinition =
     tankModelDefinition.turrets[duel.protagonist.turret.id];
@@ -137,6 +132,10 @@ export function ArmorHighlighting({ duel }: ArmorHighlightingProps) {
     turretModelDefinition.gunOrigin[1],
     -turretModelDefinition.gunOrigin[2],
   ).applyAxisAngle(X_AXIS, Math.PI / 2);
+  const maxExternalModuleThickness = Math.max(
+    tankModelDefinition.trackThickness,
+    gunModelDefinition.barrelThickness,
+  );
 
   return (
     <group
@@ -162,6 +161,7 @@ export function ArmorHighlighting({ duel }: ArmorHighlightingProps) {
 
         return (
           <ArmorMesh
+            maxExternalModuleThickness={maxExternalModuleThickness}
             duel={duel}
             key={node.uuid}
             geometry={(node as Mesh).geometry}
@@ -192,6 +192,7 @@ export function ArmorHighlighting({ duel }: ArmorHighlightingProps) {
 
           return (
             <ArmorMesh
+              maxExternalModuleThickness={maxExternalModuleThickness}
               duel={duel}
               key={node.uuid}
               geometry={(node as Mesh).geometry}
@@ -222,6 +223,7 @@ export function ArmorHighlighting({ duel }: ArmorHighlightingProps) {
 
             return (
               <ArmorMesh
+                maxExternalModuleThickness={maxExternalModuleThickness}
                 duel={duel}
                 key={node.uuid}
                 geometry={(node as Mesh).geometry}

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

@@ -24,6 +24,13 @@ interface ExternalModuleMaskProps {
   duel: Duel;
 }
 
+/**
+ * When rendered, generates a mask and thickness buffer for external modules.
+ * - R: 0 means not external module
+ * - G: normalized thickness; multiply with max thickness to get nominal thickness
+ * - B: no data
+ * - A: 1 means is armor; 0 is background
+ */
 export const ExternalModuleMask = memo<ExternalModuleMaskProps>(({ duel }) => {
   const wrapper = useRef<Group>(null);
   const awaitedModelDefinitions = useModelDefinitions();
@@ -127,6 +134,10 @@ export const ExternalModuleMask = memo<ExternalModuleMaskProps>(({ duel }) => {
     tankModelDefinition.turrets[duel.protagonist.turret.id];
   const gunModelDefinition =
     turretModelDefinition.guns[duel.protagonist.gun.id];
+  const maxThickness = Math.max(
+    tankModelDefinition.trackThickness,
+    gunModelDefinition.barrelThickness,
+  );
   const turretOrigin = new Vector3(
     tankModelDefinition.turretOrigin[0],
     tankModelDefinition.turretOrigin[1],
@@ -178,6 +189,8 @@ export const ExternalModuleMask = memo<ExternalModuleMaskProps>(({ duel }) => {
 
         return (
           <ArmorMeshExternalModuleMask
+            maxThickness={maxThickness}
+            thickness={tankModelDefinition.trackThickness}
             key={node.uuid}
             geometry={(node as Mesh).geometry}
           />
@@ -251,6 +264,8 @@ export const ExternalModuleMask = memo<ExternalModuleMaskProps>(({ duel }) => {
 
             return (
               <ArmorMeshExternalModuleMask
+                maxThickness={maxThickness}
+                thickness={gunModelDefinition.barrelThickness}
                 key={node.uuid}
                 geometry={(node as Mesh).geometry}
               />