feat: foggy transition

packages/website/src/components/Armor/components/PrimaryArmorSceneComponent/index.tsx

@@ -5,7 +5,14 @@ import {
 } from '@blitzkit/core';
 import { invalidate, useFrame } from '@react-three/fiber';
 import { useEffect } from 'react';
-import { MeshBasicMaterial, Object3D, ShaderMaterial, Vector2 } from 'three';
+import {
+  MeshBasicMaterial,
+  Object3D,
+  ShaderMaterial,
+  UniformsLib,
+  UniformsUtils,
+  Vector2,
+} from 'three';
 import { degToRad } from 'three/src/math/MathUtils.js';
 import { hasEquipment } from '../../../../core/blitzkit/hasEquipment';
 import { jsxTree } from '../../../../core/blitzkit/jsxTree';
@@ -36,27 +43,33 @@ export function PrimaryArmorSceneComponent({
     fragmentShader,
     vertexShader,
 
+    fog: true,
     transparent: true,
 
-    uniforms: {
-      thickness: { value: null },
-      penetration: { value: null },
-      caliber: { value: null },
-      ricochet: { value: null },
-      normalization: { value: null },
-      isExplosive: { value: null },
-      canSplash: { value: null },
-      damage: { value: null },
-      explosionRadius: { value: null },
-      greenPenetration: { value: null },
-      advancedHighlighting: { value: null },
-      opaque: { value: null },
+    uniforms: UniformsUtils.merge([
+      UniformsLib.common,
+      UniformsLib.fog,
 
-      inverseProjectionMatrix: { value: null },
-      resolution: { value: new Vector2() },
-      spacedArmorBuffer: { value: null },
-      spacedArmorDepth: { value: null },
-    },
+      {
+        thickness: { value: null },
+        penetration: { value: null },
+        caliber: { value: null },
+        ricochet: { value: null },
+        normalization: { value: null },
+        isExplosive: { value: null },
+        canSplash: { value: null },
+        damage: { value: null },
+        explosionRadius: { value: null },
+        greenPenetration: { value: null },
+        advancedHighlighting: { value: null },
+        opaque: { value: null },
+
+        inverseProjectionMatrix: { value: null },
+        resolution: { value: new Vector2() },
+        spacedArmorBuffer: { value: null },
+        spacedArmorDepth: { value: null },
+      },
+    ]),
   });
 
   useEffect(() => {

packages/website/src/components/Armor/components/PrimaryArmorSceneComponent/shaders/fragment.glsl

@@ -1,3 +1,7 @@
+#define USE_FOG
+
+#include <fog_pars_fragment>
+
 varying vec3 vNormal;
 varying vec3 vViewPosition;
 
@@ -39,6 +43,8 @@ vec3 getPenetrationColor(bool isThreeCalibersRule, bool couldHaveRicochet) {
 }
 
 void main() {
+  #include <clipping_planes_fragment>
+
   vec2 screenCoord = gl_FragCoord.xy / resolution;
   vec4 spacedArmorData = texture2D(spacedArmorBuffer, screenCoord);
   bool isUnderSpacedArmor = spacedArmorData.a != 0.0;
@@ -111,4 +117,6 @@ void main() {
   } else {
     gl_FragColor = vec4(baseColor, (1.0 - penetrationChance) * alpha);
   }
+
+  #include <fog_fragment>
 }

packages/website/src/components/Armor/components/PrimaryArmorSceneComponent/shaders/vertex.glsl

@@ -1,11 +1,17 @@
+#define USE_FOG
+
+#include <fog_pars_vertex>
+
 varying vec3 vNormal;
 varying vec3 vViewPosition;
 
 void main() {
-  vec4 vViewPosition4 = modelViewMatrix * vec4(position, 1.0);
+  vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
 
-  vViewPosition = vViewPosition4.xyz;
+  vViewPosition = mvPosition.xyz;
   vNormal = normalMatrix * normal;
 
-  gl_Position = projectionMatrix * vViewPosition4;
-}
+  gl_Position = projectionMatrix * mvPosition;
+
+  #include <fog_vertex>
+}

packages/website/src/components/Armor/index.tsx

@@ -1,4 +1,4 @@
-import { createPortal, useFrame } from '@react-three/fiber';
+import { createPortal, useFrame, useThree } from '@react-three/fiber';
 import { memo, useState } from 'react';
 import { DepthTexture, Scene, Vector2 } from 'three';
 import { PrimaryArmorScene } from './components/PrimaryArmorScene';
@@ -6,8 +6,14 @@ import { spacedArmorRenderTarget } from './components/PrimaryArmorSceneComponent
 import { SpacedArmorScene } from './components/SpacedArmorScene';
 
 export const Armor = memo(() => {
+  const rootScene = useThree((state) => state.scene);
   const [spacedArmorScene] = useState(() => new Scene());
-  const [primaryArmorScene] = useState(() => new Scene());
+  const [primaryArmorScene] = useState(() => {
+    const primaryArmorScene = new Scene();
+    primaryArmorScene.fog = rootScene.fog;
+
+    return primaryArmorScene;
+  });
   const spacedArmorPortal = createPortal(
     <SpacedArmorScene scene={spacedArmorScene} />,
     spacedArmorScene,