feat: 3CR exception mask

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

@@ -3,13 +3,13 @@ export function Lighting() {
     <>
       <directionalLight
         position={[1, 1, -1]}
-        intensity={2}
+        intensity={3}
         castShadow
         color={'rgb(225, 225, 255)'}
       />
       <directionalLight
         position={[-1, 1, 1]}
-        intensity={1}
+        intensity={2}
         castShadow
         color={'rgb(225, 225, 255)'}
       />

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

@@ -1,27 +1,30 @@
 import { useLoader } from '@react-three/fiber';
-import { memo, useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { Euler, Group, Mesh, Vector3 } from 'three';
 import { GLTFLoader } from 'three-stdlib';
 import { degToRad } from 'three/src/math/MathUtils';
-import { ArmorMesh } from '../../../../../../../components/ArmorMesh';
-import { HeadsUpDisplay } from '../../../../../../../components/HeadsUpDisplay';
-import { X_AXIS, Y_AXIS, Z_AXIS } from '../../../../../../../constants/axis';
-import { asset } from '../../../../../../../core/blitzkrieg/asset';
+import { ArmorMesh } from '../../../../../../../../../components/ArmorMesh';
+import {
+  X_AXIS,
+  Y_AXIS,
+  Z_AXIS,
+} from '../../../../../../../../../constants/axis';
+import { asset } from '../../../../../../../../../core/blitzkrieg/asset';
 import {
   ModelTransformEventData,
   modelTransformEvent,
-} from '../../../../../../../core/blitzkrieg/modelTransform';
-import { nameToArmorId } from '../../../../../../../core/blitzkrieg/nameToArmorId';
-import { resolveArmor } from '../../../../../../../core/blitzkrieg/resolveThickness';
-import { useModelDefinitions } from '../../../../../../../core/hooks/useModelDefinitions';
-import { useTankopedia } from '../../../../../../../stores/tankopedia';
-import { Duel } from '../../../page';
+} from '../../../../../../../../../core/blitzkrieg/modelTransform';
+import { nameToArmorId } from '../../../../../../../../../core/blitzkrieg/nameToArmorId';
+import { resolveArmor } from '../../../../../../../../../core/blitzkrieg/resolveThickness';
+import { useModelDefinitions } from '../../../../../../../../../core/hooks/useModelDefinitions';
+import { useTankopedia } from '../../../../../../../../../stores/tankopedia';
+import { Duel } from '../../../../../page';
 
-interface TankArmorProps {
+interface ArmorHighlightingProps {
   duel: Duel;
 }
 
-export const TankArmor = memo<TankArmorProps>(({ duel }) => {
+export function ArmorHighlighting({ duel }: ArmorHighlightingProps) {
   const wrapper = useRef<Group>(null);
   const awaitedModelDefinitions = useModelDefinitions();
   const showSpacedArmor = useTankopedia(
@@ -136,18 +139,47 @@ export const TankArmor = memo<TankArmorProps>(({ duel }) => {
   ).applyAxisAngle(X_AXIS, Math.PI / 2);
 
   return (
-    <HeadsUpDisplay>
-      <group
-        ref={wrapper}
-        rotation={[-Math.PI / 2, 0, 0]}
-        visible={initialTankopediaState.mode === 'armor'}
-      >
+    <group
+      ref={wrapper}
+      rotation={[-Math.PI / 2, 0, 0]}
+      visible={initialTankopediaState.mode === 'armor'}
+    >
+      {armorNodes.map((node) => {
+        const isHull = node.name.startsWith('hull_');
+        const isVisible = isHull;
+        const armorId = nameToArmorId(node.name);
+        const { spaced, thickness } = resolveArmor(
+          tankModelDefinition.armor,
+          armorId,
+        );
+
+        if (
+          !isVisible ||
+          thickness === undefined ||
+          (spaced && !showSpacedArmor)
+        )
+          return null;
+
+        return (
+          <ArmorMesh
+            duel={duel}
+            key={node.uuid}
+            geometry={(node as Mesh).geometry}
+            isSpaced={spaced ?? false}
+            thickness={thickness}
+          />
+        );
+      })}
+
+      <group ref={turretContainer}>
         {armorNodes.map((node) => {
-          const isHull = node.name.startsWith('hull_');
-          const isVisible = isHull;
+          const isCurrentTurret = node.name.startsWith(
+            `turret_${turretModelDefinition.model.toString().padStart(2, '0')}`,
+          );
+          const isVisible = isCurrentTurret;
           const armorId = nameToArmorId(node.name);
           const { spaced, thickness } = resolveArmor(
-            tankModelDefinition.armor,
+            turretModelDefinition.armor,
             armorId,
           );
 
@@ -163,43 +195,21 @@ export const TankArmor = memo<TankArmorProps>(({ duel }) => {
               duel={duel}
               key={node.uuid}
               geometry={(node as Mesh).geometry}
+              position={turretOrigin}
               isSpaced={spaced ?? false}
               thickness={thickness}
             />
           );
         })}
-
-        {modelNodes.map((node) => {
-          const isWheel = node.name.startsWith('chassis_wheel_');
-          const isTrack = node.name.startsWith('chassis_track_');
-          const isVisible = isWheel || isTrack;
-          const thickness = 50;
-
-          if (!isVisible || !showSpacedArmor) return null;
-
-          return (
-            <ArmorMesh
-              duel={duel}
-              key={node.uuid}
-              geometry={(node as Mesh).geometry}
-              isSpaced
-              thickness={thickness}
-              isExternalModule
-            />
-          );
-        })}
-
-        <group ref={turretContainer}>
+        <group ref={gunContainer}>
           {armorNodes.map((node) => {
-            const isCurrentTurret = node.name.startsWith(
-              `turret_${turretModelDefinition.model
-                .toString()
-                .padStart(2, '0')}`,
+            const isCurrentGun = node.name.startsWith(
+              `gun_${gunModelDefinition.model.toString().padStart(2, '0')}`,
             );
-            const isVisible = isCurrentTurret;
+            const isVisible = isCurrentGun;
             const armorId = nameToArmorId(node.name);
             const { spaced, thickness } = resolveArmor(
-              turretModelDefinition.armor,
+              gunModelDefinition.armor,
               armorId,
             );
 
@@ -215,66 +225,14 @@ export const TankArmor = memo<TankArmorProps>(({ duel }) => {
                 duel={duel}
                 key={node.uuid}
                 geometry={(node as Mesh).geometry}
-                position={turretOrigin}
+                position={turretOrigin.clone().add(gunOrigin)}
                 isSpaced={spaced ?? false}
                 thickness={thickness}
               />
             );
           })}
-          <group ref={gunContainer}>
-            {armorNodes.map((node) => {
-              const isCurrentGun = node.name.startsWith(
-                `gun_${gunModelDefinition.model.toString().padStart(2, '0')}`,
-              );
-              const isVisible = isCurrentGun;
-              const armorId = nameToArmorId(node.name);
-              const { spaced, thickness } = resolveArmor(
-                gunModelDefinition.armor,
-                armorId,
-              );
-
-              if (
-                !isVisible ||
-                thickness === undefined ||
-                (spaced && !showSpacedArmor)
-              )
-                return null;
-
-              return (
-                <ArmorMesh
-                  duel={duel}
-                  key={node.uuid}
-                  geometry={(node as Mesh).geometry}
-                  position={turretOrigin.clone().add(gunOrigin)}
-                  isSpaced={spaced ?? false}
-                  thickness={thickness}
-                />
-              );
-            })}
-
-            {modelNodes.map((node) => {
-              const isCurrentGun =
-                node.name ===
-                `gun_${gunModelDefinition.model.toString().padStart(2, '0')}`;
-              const isVisible = isCurrentGun;
-              const thickness = 50;
-
-              if (!isVisible || !showSpacedArmor) return null;
-
-              return (
-                <ArmorMesh
-                  duel={duel}
-                  key={node.uuid}
-                  geometry={(node as Mesh).geometry}
-                  isSpaced
-                  thickness={thickness}
-                  isExternalModule
-                />
-              );
-            })}
-          </group>
         </group>
       </group>
-    </HeadsUpDisplay>
+    </group>
   );
-});
+}

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

@@ -0,0 +1,263 @@
+import { useLoader } from '@react-three/fiber';
+import { memo, useEffect, useRef } from 'react';
+import { Euler, Group, Mesh, Vector3 } from 'three';
+import { GLTFLoader } from 'three-stdlib';
+import { degToRad } from 'three/src/math/MathUtils';
+import { ArmorMeshExternalModuleMask } from '../../../../../../../../../components/ArmorMesh';
+import {
+  X_AXIS,
+  Y_AXIS,
+  Z_AXIS,
+} from '../../../../../../../../../constants/axis';
+import { asset } from '../../../../../../../../../core/blitzkrieg/asset';
+import {
+  ModelTransformEventData,
+  modelTransformEvent,
+} from '../../../../../../../../../core/blitzkrieg/modelTransform';
+import { nameToArmorId } from '../../../../../../../../../core/blitzkrieg/nameToArmorId';
+import { resolveArmor } from '../../../../../../../../../core/blitzkrieg/resolveThickness';
+import { useModelDefinitions } from '../../../../../../../../../core/hooks/useModelDefinitions';
+import { useTankopedia } from '../../../../../../../../../stores/tankopedia';
+import { Duel } from '../../../../../page';
+
+interface ExternalModuleMaskProps {
+  duel: Duel;
+}
+
+export const ExternalModuleMask = memo<ExternalModuleMaskProps>(({ duel }) => {
+  const wrapper = useRef<Group>(null);
+  const awaitedModelDefinitions = useModelDefinitions();
+  const showSpacedArmor = useTankopedia(
+    (state) => state.model.visual.showSpacedArmor,
+  );
+  const turretContainer = useRef<Group>(null);
+  const gunContainer = useRef<Group>(null);
+  const initialTankopediaState = useTankopedia.getState();
+
+  useEffect(() => {
+    if (!awaitedModelDefinitions) return;
+
+    const turretOrigin = new Vector3(
+      tankModelDefinition.turretOrigin[0],
+      tankModelDefinition.turretOrigin[1],
+      -tankModelDefinition.turretOrigin[2],
+    ).applyAxisAngle(X_AXIS, Math.PI / 2);
+    const gunOrigin = new Vector3(
+      turretModelDefinition.gunOrigin[0],
+      turretModelDefinition.gunOrigin[1],
+      -turretModelDefinition.gunOrigin[2],
+    ).applyAxisAngle(X_AXIS, Math.PI / 2);
+    const turretPosition = new Vector3();
+    const turretRotation = new Euler();
+    const gunPosition = new Vector3();
+    const gunRotation = new Euler();
+
+    function handleModelTransform({ yaw, pitch }: ModelTransformEventData) {
+      gunPosition
+        .set(0, 0, 0)
+        .sub(turretOrigin)
+        .sub(gunOrigin)
+        .applyAxisAngle(X_AXIS, pitch)
+        .add(gunOrigin)
+        .add(turretOrigin);
+      gunRotation.set(pitch, 0, 0);
+      gunContainer.current?.position.copy(gunPosition);
+      gunContainer.current?.rotation.copy(gunRotation);
+
+      if (yaw === undefined) return;
+
+      turretPosition
+        .set(0, 0, 0)
+        .sub(turretOrigin)
+        .applyAxisAngle(new Vector3(0, 0, 1), yaw);
+      turretRotation.set(0, 0, yaw);
+
+      if (tankModelDefinition.turretRotation) {
+        const initialPitch = -degToRad(
+          tankModelDefinition.turretRotation.pitch,
+        );
+        const initialYaw = -degToRad(tankModelDefinition.turretRotation.yaw);
+        const initialRoll = -degToRad(tankModelDefinition.turretRotation.roll);
+
+        turretPosition
+          .applyAxisAngle(X_AXIS, initialPitch)
+          .applyAxisAngle(Y_AXIS, initialRoll)
+          .applyAxisAngle(Z_AXIS, initialYaw);
+        turretRotation.x += initialPitch;
+        turretRotation.y += initialRoll;
+        turretRotation.z += initialYaw;
+      }
+
+      turretPosition.add(turretOrigin);
+      turretContainer.current?.position.copy(turretPosition);
+      turretContainer.current?.rotation.copy(turretRotation);
+    }
+
+    modelTransformEvent.on(handleModelTransform);
+
+    return () => {
+      modelTransformEvent.off(handleModelTransform);
+    };
+  }, [awaitedModelDefinitions]);
+
+  useEffect(() => {
+    const unsubscribe = useTankopedia.subscribe(
+      (state) => state.mode,
+      (mode) => {
+        if (wrapper.current) wrapper.current.visible = mode === 'armor';
+      },
+    );
+
+    return unsubscribe;
+  });
+
+  const armorGltf = useLoader(
+    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];
+  const gunModelDefinition =
+    turretModelDefinition.guns[duel.protagonist.gun.id];
+  const turretOrigin = new Vector3(
+    tankModelDefinition.turretOrigin[0],
+    tankModelDefinition.turretOrigin[1],
+    -tankModelDefinition.turretOrigin[2],
+  ).applyAxisAngle(X_AXIS, Math.PI / 2);
+  const gunOrigin = new Vector3(
+    turretModelDefinition.gunOrigin[0],
+    turretModelDefinition.gunOrigin[1],
+    -turretModelDefinition.gunOrigin[2],
+  ).applyAxisAngle(X_AXIS, Math.PI / 2);
+
+  return (
+    <group
+      ref={wrapper}
+      rotation={[-Math.PI / 2, 0, 0]}
+      visible={initialTankopediaState.mode === 'armor'}
+    >
+      {armorNodes.map((node) => {
+        const isHull = node.name.startsWith('hull_');
+        const isVisible = isHull;
+        const armorId = nameToArmorId(node.name);
+        const { spaced, thickness } = resolveArmor(
+          tankModelDefinition.armor,
+          armorId,
+        );
+
+        if (
+          !isVisible ||
+          thickness === undefined ||
+          (spaced && !showSpacedArmor)
+        )
+          return null;
+
+        return (
+          <ArmorMeshExternalModuleMask
+            exclude
+            key={node.uuid}
+            geometry={(node as Mesh).geometry}
+          />
+        );
+      })}
+
+      {modelNodes.map((node) => {
+        const isWheel = node.name.startsWith('chassis_wheel_');
+        const isTrack = node.name.startsWith('chassis_track_');
+        const isVisible = isWheel || isTrack;
+
+        if (!isVisible || !showSpacedArmor) return null;
+
+        return (
+          <ArmorMeshExternalModuleMask
+            key={node.uuid}
+            geometry={(node as Mesh).geometry}
+          />
+        );
+      })}
+
+      <group ref={turretContainer}>
+        {armorNodes.map((node) => {
+          const isCurrentTurret = node.name.startsWith(
+            `turret_${turretModelDefinition.model.toString().padStart(2, '0')}`,
+          );
+          const isVisible = isCurrentTurret;
+          const armorId = nameToArmorId(node.name);
+          const { spaced, thickness } = resolveArmor(
+            turretModelDefinition.armor,
+            armorId,
+          );
+
+          if (
+            !isVisible ||
+            thickness === undefined ||
+            (spaced && !showSpacedArmor)
+          )
+            return null;
+
+          return (
+            <ArmorMeshExternalModuleMask
+              exclude
+              key={node.uuid}
+              geometry={(node as Mesh).geometry}
+              position={turretOrigin}
+            />
+          );
+        })}
+        <group ref={gunContainer}>
+          {armorNodes.map((node) => {
+            const isCurrentGun = node.name.startsWith(
+              `gun_${gunModelDefinition.model.toString().padStart(2, '0')}`,
+            );
+            const isVisible = isCurrentGun;
+            const armorId = nameToArmorId(node.name);
+            const { spaced, thickness } = resolveArmor(
+              gunModelDefinition.armor,
+              armorId,
+            );
+
+            if (
+              !isVisible ||
+              thickness === undefined ||
+              (spaced && !showSpacedArmor)
+            )
+              return null;
+
+            return (
+              <ArmorMeshExternalModuleMask
+                exclude
+                key={node.uuid}
+                geometry={(node as Mesh).geometry}
+                position={turretOrigin.clone().add(gunOrigin)}
+              />
+            );
+          })}
+
+          {modelNodes.map((node) => {
+            const isCurrentGun =
+              node.name ===
+              `gun_${gunModelDefinition.model.toString().padStart(2, '0')}`;
+            const isVisible = isCurrentGun;
+
+            if (!isVisible || !showSpacedArmor) return null;
+
+            return (
+              <ArmorMeshExternalModuleMask
+                key={node.uuid}
+                geometry={(node as Mesh).geometry}
+              />
+            );
+          })}
+        </group>
+      </group>
+    </group>
+  );
+});

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

@@ -0,0 +1,49 @@
+import { createPortal, useFrame } from '@react-three/fiber';
+import { memo } from 'react';
+import { Scene } from 'three';
+import { externalModuleMaskRenderTarget } from '../../../../../../../../components/ArmorMesh';
+import { Duel } from '../../../../page';
+import { ArmorHighlighting } from './components/ArmorHighlighting';
+import { ExternalModuleMask } from './components/ExternalModuleMask';
+
+interface TankArmorProps {
+  duel: Duel;
+}
+
+export const TankArmor = memo<TankArmorProps>(({ duel }) => {
+  const externalModuleMaskScene = new Scene();
+  const armorHighlightingScene = new Scene();
+  const externalModuleMaskPortal = createPortal(
+    <ExternalModuleMask duel={duel} />,
+    externalModuleMaskScene,
+  );
+  const armorHighlightingPortal = createPortal(
+    <ArmorHighlighting duel={duel} />,
+    armorHighlightingScene,
+  );
+
+  useFrame(({ gl, scene, camera }) => {
+    gl.autoClear = true;
+
+    externalModuleMaskRenderTarget.setSize(
+      gl.domElement.width,
+      gl.domElement.height,
+    );
+    gl.setRenderTarget(externalModuleMaskRenderTarget);
+    gl.render(externalModuleMaskScene, camera);
+
+    gl.autoClear = false;
+
+    gl.setRenderTarget(null);
+    gl.render(scene, camera);
+    gl.clearDepth();
+    gl.render(armorHighlightingScene, camera);
+  }, 1);
+
+  return (
+    <>
+      {externalModuleMaskPortal}
+      {armorHighlightingPortal}
+    </>
+  );
+});

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

@@ -0,0 +1,96 @@
+import { MeshProps, useFrame } from '@react-three/fiber';
+import { useRef } from 'react';
+import { MeshStandardMaterial, ShaderMaterial, Vector2 } from 'three';
+import ThreeCustomShaderMaterial from 'three-custom-shader-material';
+import { degToRad } from 'three/src/math/MathUtils';
+import { Duel } from '../../../../app/tools/tankopedia/[id]/page';
+import { canSplash } from '../../../../core/blitz/canSplash';
+import { isExplosive } from '../../../../core/blitz/isExplosive';
+import { resolveNearPenetration } from '../../../../core/blitz/resolveNearPenetration';
+import { externalModuleMaskRenderTarget } from '../ExternalModuleMask';
+import fragmentShader from './shaders/fragment.glsl';
+import vertexShader from './shaders/vertex.glsl';
+
+interface ArmorMeshProps extends MeshProps {
+  duel: Duel;
+  isSpaced: boolean;
+  isExternalModule?: boolean;
+  thickness: number;
+}
+
+export function ArmorMesh({
+  isSpaced,
+  isExternalModule = false,
+  thickness,
+  duel,
+  ...props
+}: ArmorMeshProps) {
+  const { shell } = duel.antagonist;
+  const material = useRef<ShaderMaterial>(null);
+  const resolution = new Vector2();
+
+  useFrame(({ gl }) => {
+    if (material.current) {
+      material.current.uniforms.externalModuleMask.value =
+        externalModuleMaskRenderTarget.texture;
+      material.current.uniforms.resolution.value = resolution.set(
+        gl.domElement.width,
+        gl.domElement.height,
+      );
+    }
+  });
+
+  return (
+    <>
+      <mesh {...props} renderOrder={0}>
+        <meshBasicMaterial colorWrite={false} />
+      </mesh>
+
+      <mesh {...props} renderOrder={1}>
+        <ThreeCustomShaderMaterial
+          ref={material}
+          silent
+          baseMaterial={MeshStandardMaterial}
+          transparent
+          depthWrite={false}
+          fragmentShader={fragmentShader}
+          vertexShader={vertexShader}
+          uniforms={{
+            externalModuleMask: { value: null },
+            resolution: { value: null },
+            isSpaced: { value: isSpaced },
+            isExplosive: { value: isExplosive(shell.type) },
+            canSplash: { value: canSplash(shell.type) },
+            isExternalModule: { value: isExternalModule },
+            thickness: { value: thickness },
+            penetration: {
+              value: resolveNearPenetration(shell.penetration),
+            },
+            caliber: { value: shell.caliber },
+            ricochet: { value: degToRad(shell.ricochet ?? 90) },
+            normalization: {
+              value: degToRad(shell.normalization ?? 0),
+            },
+          }}
+        />
+        {/* <shaderMaterial
+          ref={material}
+          depthFunc={EqualDepth}
+          depthWrite={false}
+          transparent
+          args={[
+            {
+              vertexShader,
+              fragmentShader,
+              uniforms: {
+                externalModuleMask: { value: null },
+                resolution: { value: null },
+                isSpaced: { value: isSpaced },
+              },
+            },
+          ]}
+        /> */}
+      </mesh>
+    </>
+  );
+}

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

@@ -8,8 +8,12 @@ uniform float penetration;
 uniform float caliber;
 uniform float ricochet;
 uniform float normalization;
+uniform sampler2D externalModuleMask;
+uniform vec2 resolution;
 
 void main() {
+  vec4 externalModuleMaskColor = texture2D(externalModuleMask, gl_FragCoord.xy / resolution);
+  bool isUnderExternalModule = externalModuleMaskColor.r == 1.0;
   vec3 normalizedNormal = normalize(vNormal);
   vec3 normalizedViewPosition = normalize(vCSMViewPosition);
   float dotProduct = dot(normalizedNormal, -normalizedViewPosition);
@@ -19,7 +23,7 @@ void main() {
   float splashChance = -1.0;
   bool threeCalibersRule = caliber > 3.0 * thickness;
 
-  if (!isExternalModule && !isExplosive && !threeCalibersRule && angle >= ricochet) {
+  if (!isUnderExternalModule && !isExternalModule && !isExplosive && !threeCalibersRule && angle >= ricochet) {
     penetrationChance = 0.0;
     splashChance = 0.0;
   } else {

src/components/ArmorMesh/components/ExternalModuleMask.tsx

@@ -0,0 +1,29 @@
+import { MeshProps } from '@react-three/fiber';
+import { WebGLRenderTarget } from 'three';
+
+export const externalModuleMaskRenderTarget = new WebGLRenderTarget();
+
+interface ArmorMeshExternalModuleMaskProps extends MeshProps {
+  exclude?: boolean;
+}
+
+export function ArmorMeshExternalModuleMask({
+  exclude = false,
+  ...props
+}: ArmorMeshExternalModuleMaskProps) {
+  return (
+    <>
+      {exclude && (
+        <mesh {...props} renderOrder={0}>
+          <meshBasicMaterial colorWrite={false} />
+        </mesh>
+      )}
+
+      {!exclude && (
+        <mesh {...props} renderOrder={1}>
+          <meshBasicMaterial color="#ff0000" depthWrite={false} />
+        </mesh>
+      )}
+    </>
+  );
+}

src/components/ArmorMesh/index.tsx

@@ -1,63 +1,2 @@
-import { MeshProps } from '@react-three/fiber';
-import { MeshStandardMaterial } from 'three';
-import CustomShaderMaterial from 'three-custom-shader-material';
-import { degToRad } from 'three/src/math/MathUtils';
-import { Duel } from '../../app/tools/tankopedia/[id]/page';
-import { canSplash } from '../../core/blitz/canSplash';
-import { isExplosive } from '../../core/blitz/isExplosive';
-import { resolveNearPenetration } from '../../core/blitz/resolveNearPenetration';
-import fragmentShader from './shaders/fragment.glsl';
-import vertexShader from './shaders/vertex.glsl';
-
-interface ArmorMeshProps extends MeshProps {
-  duel: Duel;
-  isSpaced: boolean;
-  isExternalModule?: boolean;
-  thickness: number;
-}
-
-export function ArmorMesh({
-  isSpaced,
-  isExternalModule = false,
-  thickness,
-  duel,
-  ...props
-}: ArmorMeshProps) {
-  const { shell } = duel.antagonist;
-
-  return (
-    <>
-      {!isSpaced && (
-        <mesh {...props}>
-          <meshBasicMaterial colorWrite={false} />
-        </mesh>
-      )}
-
-      <mesh {...props}>
-        <CustomShaderMaterial
-          silent
-          baseMaterial={MeshStandardMaterial}
-          transparent
-          depthWrite={false}
-          fragmentShader={fragmentShader}
-          vertexShader={vertexShader}
-          uniforms={{
-            isExplosive: { value: isExplosive(shell.type) },
-            canSplash: { value: canSplash(shell.type) },
-            isSpaced: { value: isSpaced },
-            isExternalModule: { value: isExternalModule },
-            thickness: { value: thickness },
-            penetration: {
-              value: resolveNearPenetration(shell.penetration),
-            },
-            caliber: { value: shell.caliber },
-            ricochet: { value: degToRad(shell.ricochet ?? 90) },
-            normalization: {
-              value: degToRad(shell.normalization ?? 0),
-            },
-          }}
-        />
-      </mesh>
-    </>
-  );
-}
+export * from './components/Armor';
+export * from './components/ExternalModuleMask';