Merge branch 'main' into data-driven

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

@@ -47,10 +47,10 @@ export function SceneProps() {
 
         ${shader.fragmentShader}
       `.replace(
-        "#include <color_fragment>",
+        "#include <dithering_fragment>",
 
         `
-          #include <color_fragment>
+          #include <dithering_fragment>
 
           vec3 scaled = vWorldPosition / size;
           float radius = length(scaled.xz);
@@ -59,7 +59,10 @@ export function SceneProps() {
             discard;
           }
 
-          diffuseColor.a *= (1.0 - radius);
+          float x = 1.0 - radius;
+          float y = x * x;
+
+          gl_FragColor.rgb *= y;
         `,
       );
     },
@@ -78,7 +81,6 @@ export function SceneProps() {
       <meshStandardMaterial
         color={mauveDark.mauve6}
         roughness={1}
-        transparent
         onBeforeCompile={handleBeforeCompile}
       />
     </mesh>

packages/website/src/components/TankModel.tsx

@@ -11,6 +11,7 @@ import { useDuelModel } from "../hooks/useDuelModel";
 import { hasEquipment } from "../hooks/useEquipment";
 import { useModel } from "../hooks/useModel";
 import { useSkin } from "../hooks/useSkin";
+import { useSkinAnimation } from "../hooks/useSkinAnimation";
 import { useTankTransform } from "../hooks/useTankTransform";
 import { Tankopedia } from "../stores/tankopedia";
 import { TankopediaDisplay } from "../stores/tankopediaPersistent/constants";
@@ -34,12 +35,17 @@ export function TankModel() {
   const skins = [skinGltf, attachmentGltf].filter((skin) => skin !== undefined);
 
   useTankTransform(track, turret, turretContainer, gunContainer);
+  useSkinAnimation(skins);
 
   useEffect(() => {
     const emissiveMaterials = new Set<MeshStandardMaterial>();
+    const roots = [
+      gltf.scene,
+      ...skins.flatMap((skin) => [...skin.parts.values()].flat()),
+    ];
 
-    for (const scene of [gltf.scene, ...skins.map((skin) => skin.scene)]) {
-      scene.traverse((object) => {
+    for (const root of roots) {
+      root.traverse((object) => {
         if (
           object instanceof Mesh &&
           object.material instanceof MeshStandardMaterial &&
@@ -145,6 +151,15 @@ export function TankModel() {
               />
             );
           },
+          primitive(object, key) {
+            return (
+              <primitive
+                key={key}
+                object={object}
+                onPointerDown={onPointerDown}
+              />
+            );
+          },
         });
       })}
 
@@ -224,6 +239,15 @@ export function TankModel() {
                 />
               );
             },
+            primitive(object, key) {
+              return (
+                <primitive
+                  key={key}
+                  object={object}
+                  onPointerDown={onPointerDown}
+                />
+              );
+            },
           });
         })}
 
@@ -307,6 +331,15 @@ export function TankModel() {
                   />
                 );
               },
+              primitive(object, key) {
+                return (
+                  <primitive
+                    key={key}
+                    object={object}
+                    onPointerDown={onPointerDown}
+                  />
+                );
+              },
             });
           })}
         </group>