fix: external modules not contributong to spaced armor detph buffer

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

@@ -221,11 +221,10 @@ export const ExternalModuleMask = memo<ExternalModuleMaskProps>(
               if (!isVisible || thickness === undefined || spaced) return null;
 
               return (
-                <group position={turretOrigin}>
+                <group key={node.uuid} position={turretOrigin}>
                   <ArmorMeshExternalModuleMask
                     ornamental={ornamental}
                     exclude
-                    key={node.uuid}
                     node={node}
                   />
                 </group>
@@ -248,11 +247,13 @@ export const ExternalModuleMask = memo<ExternalModuleMaskProps>(
               if (!isVisible || thickness === undefined || spaced) return null;
 
               return (
-                <group position={turretOrigin.clone().add(gunOrigin)}>
+                <group
+                  key={node.uuid}
+                  position={turretOrigin.clone().add(gunOrigin)}
+                >
                   <ArmorMeshExternalModuleMask
                     ornamental={ornamental}
                     exclude
-                    key={node.uuid}
                     node={node}
                   />
                 </group>

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

@@ -1,5 +1,5 @@
 import { memo, useEffect, useRef } from 'react';
-import { Euler, Group, Mesh, Vector3 } from 'three';
+import { Euler, Group, Vector3 } from 'three';
 import { degToRad } from 'three/src/math/MathUtils';
 import { ArmorMeshSpacedArmorDepth } from '../../../../../../../../../components/ArmorMesh/components/SpacedArmorDepth';
 import { I_HAT, J_HAT, K_HAT } from '../../../../../../../../../constants/axis';
@@ -190,7 +190,7 @@ export const SpacedArmorDepth = memo<SpacedArmorDepthProps>(
                 thickness={thickness}
                 maxThickness={maxThickness}
                 key={node.uuid}
-                geometry={(node as Mesh).geometry}
+                node={node}
               />
             );
           })}
@@ -207,7 +207,7 @@ export const SpacedArmorDepth = memo<SpacedArmorDepthProps>(
               ornamental={ornamental}
               isExternalModule
               key={node.uuid}
-              geometry={(node as Mesh).geometry}
+              node={node}
             />
           );
         })}
@@ -228,16 +228,16 @@ export const SpacedArmorDepth = memo<SpacedArmorDepthProps>(
               if (!isVisible || thickness === undefined) return null;
 
               return (
-                <ArmorMeshSpacedArmorDepth
+                <group key={node.uuid} position={turretOrigin}>
-                  ornamental={ornamental}
+                  <ArmorMeshSpacedArmorDepth
-                  include={spaced}
+                    ornamental={ornamental}
-                  isExternalModule={false}
+                    include={spaced}
-                  thickness={thickness}
+                    isExternalModule={false}
-                  maxThickness={maxThickness}
+                    thickness={thickness}
-                  key={node.uuid}
+                    maxThickness={maxThickness}
-                  geometry={(node as Mesh).geometry}
+                    node={node}
-                  position={turretOrigin}
+                  />
-                />
+                </group>
               );
             })}
           </group>
@@ -257,16 +257,19 @@ export const SpacedArmorDepth = memo<SpacedArmorDepthProps>(
                 if (!isVisible || thickness === undefined) return null;
 
                 return (
-                  <ArmorMeshSpacedArmorDepth
+                  <group
-                    ornamental={ornamental}
-                    include={spaced}
-                    isExternalModule={false}
-                    thickness={thickness}
-                    maxThickness={maxThickness}
                     key={node.uuid}
-                    geometry={(node as Mesh).geometry}
                     position={turretOrigin.clone().add(gunOrigin)}
-                  />
+                  >
+                    <ArmorMeshSpacedArmorDepth
+                      ornamental={ornamental}
+                      include={spaced}
+                      isExternalModule={false}
+                      thickness={thickness}
+                      maxThickness={maxThickness}
+                      node={node}
+                    />
+                  </group>
                 );
               })}
             </group>
@@ -284,7 +287,7 @@ export const SpacedArmorDepth = memo<SpacedArmorDepthProps>(
                   ornamental={ornamental}
                   isExternalModule
                   key={node.uuid}
-                  geometry={(node as Mesh).geometry}
+                  node={node}
                 />
               );
             })}

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

@@ -1,65 +1,72 @@
-import { MeshProps } from '@react-three/fiber';
+import {
-import { WebGLRenderTarget } from 'three';
+  MeshBasicMaterial,
+  Object3D,
+  ShaderMaterial,
+  WebGLRenderTarget,
+} from 'three';
+import { jsxTree } from '../../../../core/blitzkrieg/jsxTree';
 import { ArmorMeshUserData } from '../Armor';
 import fragmentShader from './shaders/fragment.glsl';
 import vertexShader from './shaders/vertex.glsl';
 
 export const spacedArmorDepthRenderTarget = new WebGLRenderTarget();
 
-type ArmorMeshSpacedArmorDepthProps = MeshProps & {
+type ArmorMeshSpacedArmorDepthProps = {
   ornamental?: boolean;
+  node: Object3D;
 } & (
-    | {
+  | {
-        include?: false;
+      include?: false;
-        isExternalModule: boolean;
+      isExternalModule: boolean;
-      }
+    }
-    | {
+  | {
-        include: true;
+      include: true;
-        thickness: number;
+      thickness: number;
-        maxThickness: number;
+      maxThickness: number;
-      }
+    }
-  );
+);
+
+const excludeMaterial = new MeshBasicMaterial({
+  colorWrite: false,
+});
+const includeMaterial = new MeshBasicMaterial({
+  colorWrite: false,
+  depthWrite: false,
+});
 
 export function ArmorMeshSpacedArmorDepth({
   ornamental = false,
+  node,
   ...props
 }: ArmorMeshSpacedArmorDepthProps) {
   return (
     <>
-      {!props.include && !ornamental && (
+      {!props.include &&
-        <mesh {...props} renderOrder={props.isExternalModule ? 2 : 0}>
+        !ornamental &&
-          <meshBasicMaterial colorWrite={false} />
+        jsxTree(node, {
-        </mesh>
+          renderOrder: props.isExternalModule ? 2 : 0,
-      )}
+          material: excludeMaterial,
+        })}
 
-      {props.include && (
+      {props.include &&
-        <mesh
+        jsxTree(node, {
-          {...props}
+          renderOrder: 1,
-          renderOrder={1}
+          onClick: ornamental ? () => {} : undefined,
-          onClick={ornamental ? () => {} : undefined}
+          userData: {
-          userData={
+            type: 'spacedArmor',
-            {
+            thickness: props.thickness,
-              type: 'spacedArmor',
+          } satisfies ArmorMeshUserData,
-              thickness: props.thickness,
+          material: ornamental
-            } satisfies ArmorMeshUserData
+            ? includeMaterial
-          }
+            : new ShaderMaterial({
-        >
+                fragmentShader,
-          {!ornamental && (
+                vertexShader,
-            <shaderMaterial
+                uniforms: {
-              fragmentShader={fragmentShader}
+                  thickness: { value: props.thickness },
-              vertexShader={vertexShader}
+                  maxThickness: { value: props.maxThickness },
-              uniforms={{
+                },
-                thickness: { value: props.thickness },
+              }),
-                maxThickness: { value: props.maxThickness },
+        })}
-              }}
-            />
-          )}
-
-          {ornamental && (
-            <meshBasicMaterial colorWrite={false} depthWrite={false} />
-          )}
-        </mesh>
-      )}
     </>
   );
 }