feat: spaced armor thickness

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

@@ -132,7 +132,6 @@ export function TankDisplay({ duel }: TankDisplayProps) {
                 >
                   <TankModel duel={duel} />
                   <TankArmor duel={duel} />
-                  {/* <SpacedArmorDepth duel={duel} /> */}
                 </Suspense>
               </Canvas>
             </div>

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

@@ -136,6 +136,19 @@ export function ArmorHighlighting({ duel }: ArmorHighlightingProps) {
     tankModelDefinition.trackThickness,
     gunModelDefinition.barrelThickness,
   );
+  const maxSpacedArmorThickness = Math.max(
+    ...armorNodes
+      .map((node) => {
+        const armorId = nameToArmorId(node.name);
+        const { spaced, thickness } = resolveArmor(
+          tankModelDefinition.armor,
+          armorId,
+        );
+
+        return spaced ? thickness : null;
+      })
+      .filter(Boolean),
+  );
 
   return (
     <group
@@ -162,6 +175,7 @@ export function ArmorHighlighting({ duel }: ArmorHighlightingProps) {
         return (
           <ArmorMesh
             maxExternalModuleThickness={maxExternalModuleThickness}
+            maxSpacedArmorThickness={maxSpacedArmorThickness}
             duel={duel}
             key={node.uuid}
             geometry={(node as Mesh).geometry}
@@ -193,6 +207,7 @@ export function ArmorHighlighting({ duel }: ArmorHighlightingProps) {
           return (
             <ArmorMesh
               maxExternalModuleThickness={maxExternalModuleThickness}
+              maxSpacedArmorThickness={maxSpacedArmorThickness}
               duel={duel}
               key={node.uuid}
               geometry={(node as Mesh).geometry}
@@ -224,6 +239,7 @@ export function ArmorHighlighting({ duel }: ArmorHighlightingProps) {
             return (
               <ArmorMesh
                 maxExternalModuleThickness={maxExternalModuleThickness}
+                maxSpacedArmorThickness={maxSpacedArmorThickness}
                 duel={duel}
                 key={node.uuid}
                 geometry={(node as Mesh).geometry}

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

@@ -24,6 +24,17 @@ interface SpacedArmorDepthProps {
   duel: Duel;
 }
 
+/**
+ * When rendered, this component provides the depth buffer for the armor which
+ * when compared to the depth of the core armor will give you the distance
+ * between the first point of contact and the core armor. The color channels
+ * hold information about the thickness of the spaced armor (external modules
+ * not included).
+ * - R: angle of the armor where 0 is 0 and 1 is 90
+ * - G: normalized thickness; multiply with max thickness to get nominal thickness
+ * - B: no data
+ * - A: 1 means is armor; 0 is background
+ */
 export const SpacedArmorDepth = memo<SpacedArmorDepthProps>(({ duel }) => {
   const wrapper = useRef<Group>(null);
   const awaitedModelDefinitions = useModelDefinitions();
@@ -127,6 +138,19 @@ export const SpacedArmorDepth = memo<SpacedArmorDepthProps>(({ duel }) => {
     tankModelDefinition.turrets[duel.protagonist.turret.id];
   const gunModelDefinition =
     turretModelDefinition.guns[duel.protagonist.gun.id];
+  const maxThickness = Math.max(
+    ...armorNodes
+      .map((node) => {
+        const armorId = nameToArmorId(node.name);
+        const { spaced, thickness } = resolveArmor(
+          tankModelDefinition.armor,
+          armorId,
+        );
+
+        return spaced ? thickness : null;
+      })
+      .filter(Boolean),
+  );
   const turretOrigin = new Vector3(
     tankModelDefinition.turretOrigin[0],
     tankModelDefinition.turretOrigin[1],
@@ -162,7 +186,9 @@ export const SpacedArmorDepth = memo<SpacedArmorDepthProps>(({ duel }) => {
 
         return (
           <ArmorMeshSpacedArmorDepth
-            exclude
+            include={spaced}
+            thickness={thickness}
+            maxThickness={maxThickness}
             key={node.uuid}
             geometry={(node as Mesh).geometry}
           />
@@ -205,7 +231,9 @@ export const SpacedArmorDepth = memo<SpacedArmorDepthProps>(({ duel }) => {
 
           return (
             <ArmorMeshSpacedArmorDepth
-              exclude
+              include={spaced}
+              thickness={thickness}
+              maxThickness={maxThickness}
               key={node.uuid}
               geometry={(node as Mesh).geometry}
               position={turretOrigin}
@@ -233,7 +261,9 @@ export const SpacedArmorDepth = memo<SpacedArmorDepthProps>(({ duel }) => {
 
             return (
               <ArmorMeshSpacedArmorDepth
-                exclude
+                include={spaced}
+                thickness={thickness}
+                maxThickness={maxThickness}
                 key={node.uuid}
                 geometry={(node as Mesh).geometry}
                 position={turretOrigin.clone().add(gunOrigin)}

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

@@ -18,6 +18,7 @@ interface ArmorMeshProps extends MeshProps {
   isExternalModule?: boolean;
   thickness: number;
   maxExternalModuleThickness: number;
+  maxSpacedArmorThickness: number;
 }
 
 export function ArmorMesh({
@@ -25,6 +26,7 @@ export function ArmorMesh({
   isExternalModule = false,
   thickness,
   maxExternalModuleThickness,
+  maxSpacedArmorThickness,
   duel,
   ...props
 }: ArmorMeshProps) {
@@ -43,6 +45,8 @@ export function ArmorMesh({
         externalModuleMaskRenderTarget.texture;
       material.current.uniforms.spacedArmorDepth.value =
         spacedArmorDepthRenderTarget.depthTexture;
+      material.current.uniforms.spacedArmorMask.value =
+        spacedArmorDepthRenderTarget.texture;
       material.current.uniforms.projectionMatrixInverse.value =
         camera.projectionMatrixInverse;
     }
@@ -69,10 +73,12 @@ export function ArmorMesh({
             resolution: { value: null },
             externalModuleMask: { value: null },
             spacedArmorDepth: { value: null },
+            spacedArmorMask: { value: null },
             projectionMatrixInverse: { value: null },
             zNear: { value: camera.near },
             zFar: { value: camera.far },
             maxExternalModuleThickness: { value: maxExternalModuleThickness },
+            maxSpacedArmorThickness: { value: maxSpacedArmorThickness },
             isSpaced: { value: isSpaced },
             isExplosive: { value: isExplosive(shell.type) },
             canSplash: { value: canSplash(shell.type) },

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

@@ -10,9 +10,11 @@ uniform float ricochet;
 uniform float normalization;
 uniform sampler2D externalModuleMask;
 uniform sampler2D spacedArmorDepth;
+uniform sampler2D spacedArmorMask;
 uniform vec2 resolution;
 varying mat4 vProjectionMatrix;
 uniform float maxExternalModuleThickness;
+uniform float maxSpacedArmorThickness;
 
 float depthToDistance(float depth) {
   mat4 projectionMatrixInverse = inverse(vProjectionMatrix);
@@ -26,12 +28,14 @@ float depthToDistance(float depth) {
 
 void main() {
   vec2 screenCoordinates = gl_FragCoord.xy / resolution;
-  float spacedArmorDepthValue = texture2D(spacedArmorDepth, screenCoordinates).r;
+  float spacedArmorDepth = texture2D(spacedArmorDepth, screenCoordinates).r;
   float currentDistance = depthToDistance(gl_FragCoord.z);
-  float spacedArmorDistance = depthToDistance(spacedArmorDepthValue);
+  float spacedArmorDistance = depthToDistance(spacedArmorDepth);
   float distanceFromSpacedArmor = currentDistance - spacedArmorDistance;
   vec4 externalModuleMaskColor = texture2D(externalModuleMask, screenCoordinates);
+  vec4 spacedArmorMaskColor = texture2D(spacedArmorMask, screenCoordinates);
   bool isUnderExternalModule = externalModuleMaskColor.r == 1.0;
+  bool isUnderSpacedArmor = spacedArmorMaskColor.a == 1.0;
   vec3 normalizedNormal = normalize(vNormal);
   vec3 normalizedViewPosition = normalize(vCSMViewPosition);
   float dotProduct = dot(normalizedNormal, -normalizedViewPosition);
@@ -53,6 +57,14 @@ void main() {
       piercedPenetration -= externalModuleThickness;
     }
 
+    if (isUnderSpacedArmor) {
+      float spacedArmorAngle = spacedArmorMaskColor.r * PI;
+      float normalizedSpacedArmorThickness = spacedArmorMaskColor.g;
+      float spacedArmorNominalThickness = normalizedSpacedArmorThickness * maxSpacedArmorThickness;
+      float spacedArmorThickness = spacedArmorNominalThickness / cos(spacedArmorAngle);
+      piercedPenetration -= spacedArmorThickness;
+    }
+
     if (isExplosive) {
       // 50% loss of remaining penetration per meter
       piercedPenetration -= 0.5 * piercedPenetration * distanceFromSpacedArmor;

src/components/ArmorMesh/components/SpacedArmorDepth.tsx

@@ -1,19 +0,0 @@
-import { MeshProps } from '@react-three/fiber';
-import { WebGLRenderTarget } from 'three';
-
-export const spacedArmorDepthRenderTarget = new WebGLRenderTarget();
-
-interface ArmorMeshSpacedArmorDepthProps extends MeshProps {
-  exclude?: boolean;
-}
-
-export function ArmorMeshSpacedArmorDepth({
-  exclude = false,
-  ...props
-}: ArmorMeshSpacedArmorDepthProps) {
-  return (
-    <mesh {...props}>
-      <meshBasicMaterial colorWrite={false} />
-    </mesh>
-  );
-}

src/components/ArmorMesh/components/SpacedArmorDepth/index.tsx

@@ -0,0 +1,41 @@
+import { MeshProps } from '@react-three/fiber';
+import { MeshStandardMaterial, WebGLRenderTarget } from 'three';
+import ThreeCustomShaderMaterial from 'three-custom-shader-material';
+import fragmentShader from './shaders/fragment.glsl';
+import vertexShader from './shaders/vertex.glsl';
+
+export const spacedArmorDepthRenderTarget = new WebGLRenderTarget();
+
+type ArmorMeshSpacedArmorDepthProps = MeshProps &
+  (
+    | {
+        include?: false;
+      }
+    | {
+        include: true;
+        thickness: number;
+        maxThickness: number;
+      }
+  );
+
+export function ArmorMeshSpacedArmorDepth(
+  props: ArmorMeshSpacedArmorDepthProps,
+) {
+  return (
+    <mesh {...props}>
+      {!props.include && <meshBasicMaterial colorWrite={false} />}
+      {props.include && (
+        <ThreeCustomShaderMaterial
+          silent
+          baseMaterial={MeshStandardMaterial}
+          fragmentShader={fragmentShader}
+          vertexShader={vertexShader}
+          uniforms={{
+            thickness: { value: props.thickness },
+            maxThickness: { value: props.maxThickness },
+          }}
+        />
+      )}
+    </mesh>
+  );
+}

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

@@ -0,0 +1,12 @@
+varying vec3 vCSMViewPosition;
+uniform float thickness;
+uniform float maxThickness;
+
+void main() {
+  vec3 normalizedNormal = normalize(vNormal);
+  vec3 normalizedViewPosition = normalize(vCSMViewPosition);
+  float dotProduct = dot(normalizedNormal, -normalizedViewPosition);
+  float angle = acos(dotProduct);
+
+  csm_FragColor = vec4(angle / PI, thickness / maxThickness, 0.0, 1.0);
+}

src/components/ArmorMesh/components/SpacedArmorDepth/shaders/vertex.glsl

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