Feature: Legendary camouflages in the Tankopedia viewer

packages/website/src/components/Tankopedia/HeroSection/components/Options/components/SidebarIconButton.tsx

@@ -0,0 +1,44 @@
+import { Flex, IconButton, type FlexProps } from "@radix-ui/themes";
+import type { ComponentProps, CSSProperties } from "react";
+
+type SidebarIconButtonProps = ComponentProps<typeof IconButton> & {
+  selected: boolean;
+  src: string;
+  alt: string;
+  imageStyle?: CSSProperties;
+};
+
+export function SidebarIconGroup({ style, ...props }: FlexProps) {
+  return (
+    <Flex
+      direction="column"
+      overflow="hidden"
+      style={{ borderRadius: "var(--radius-full)", ...style }}
+      {...props}
+    />
+  );
+}
+
+export function SidebarIconButton({
+  selected,
+  src,
+  alt,
+  imageStyle,
+  ...props
+}: SidebarIconButtonProps) {
+  return (
+    <IconButton
+      color={selected ? undefined : "gray"}
+      variant="soft"
+      size={{ initial: "2", sm: "3" }}
+      radius="none"
+      {...props}
+    >
+      <img
+        alt={alt}
+        src={src}
+        style={{ width: "50%", height: "50%", ...imageStyle }}
+      />
+    </IconButton>
+  );
+}

packages/website/src/components/Tankopedia/HeroSection/components/Options/components/SkinSwitcher.tsx

@@ -0,0 +1,83 @@
+import { alias } from "@blitzkit/core";
+import { Flex, Tooltip } from "@radix-ui/themes";
+import { uniqBy } from "lodash-es";
+import { SKIN_NUMBER } from "../../../../../../constants/skinNumber";
+import { api } from "../../../../../../core/blitzkit/api";
+import { useLocale } from "../../../../../../hooks/useLocale";
+import { Duel } from "../../../../../../stores/duel";
+import { Tankopedia } from "../../../../../../stores/tankopedia";
+import { TankopediaDisplay } from "../../../../../../stores/tankopediaPersistent/constants";
+import { SidebarIconButton } from "./SidebarIconButton";
+
+const camouflageDefinitions = await api.camouflageDefinitions();
+
+export function SkinSwitcher() {
+  const tank = Duel.use((state) => state.protagonist.tank);
+  const skin = Tankopedia.use((state) => state.requestedSkin);
+  const requestedDisplay = Tankopedia.use((state) => state.requestedDisplay);
+  const disturbed = Tankopedia.use((state) => state.disturbed);
+  const { unwrap } = useLocale();
+  const skins = uniqBy(
+    Object.values(camouflageDefinitions.camouflages).filter(
+      (camouflage) => camouflage.tank_id === tank.id,
+    ),
+    (camouflage) => unwrap(camouflage.name!),
+  );
+
+  if (skins.length === 0) return null;
+
+  return (
+    <Flex
+      direction="column"
+      top="50%"
+      right={
+        disturbed && requestedDisplay === TankopediaDisplay.Model
+          ? "3"
+          : "-4rem"
+      }
+      style={{
+        position: "absolute",
+        transform: "translateY(-50%)",
+        transitionDuration: "200ms",
+        pointerEvents: "auto",
+      }}
+    >
+      {skins.map((camouflage, index) => {
+        const name = unwrap(camouflage.name!).replace(
+          "%(camo_num)",
+          SKIN_NUMBER,
+        );
+        const top = index === 0 ? "var(--radius-full)" : "0";
+        const bottom = index === skins.length - 1 ? "var(--radius-full)" : "0";
+
+        return (
+          <Tooltip key={camouflage.id} content={name} side="left">
+            <SidebarIconButton
+              selected={skin === camouflage.id}
+              alt={name}
+              src={alias("api", `/icons/camouflages/${camouflage.id}.webp`)}
+              size={{ initial: "3", sm: "4" }}
+              radius="full"
+              style={{
+                borderRadius: `${top} ${top} ${bottom} ${bottom}`,
+              }}
+              imageStyle={{
+                width: "70%",
+                height: "70%",
+                borderRadius: "50%",
+              }}
+              onClick={() => {
+                Tankopedia.mutate((draft) => {
+                  draft.requestedSkin =
+                    draft.requestedSkin === camouflage.id
+                      ? undefined
+                      : camouflage.id;
+                });
+              }}
+            />
+          </Tooltip>
+        );
+      })}
+    </Flex>
+  );
+}

packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx

@@ -46,6 +46,11 @@ import { TankSearch } from "../../../../TankSearch";
 import { CustomShellButton } from "./components/CustomShellButton";
 import { DynamicArmorSwitcher } from "./components/DynamicArmorSwitcher";
 import { QuickInputs } from "./components/QuickInputs";
+import {
+  SidebarIconButton,
+  SidebarIconGroup,
+} from "./components/SidebarIconButton";
+import { SkinSwitcher } from "./components/SkinSwitcher";
 import { SpallLinerSwitcher } from "./components/SpallLinerSwitcher";
 import { Thicknesses } from "./components/Thicknesses";
 
@@ -87,6 +92,8 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
 
       <Thicknesses skeleton={skeleton} thicknessRange={thicknessRange} />
 
+      <SkinSwitcher />
+
       <Flex
         gap="2"
         direction="column"
@@ -181,24 +188,13 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
           </Popover.Root>
         )}
 
-        <Flex
-          direction="column"
-          style={{
-            borderRadius: "var(--radius-full)",
-          }}
-          overflow="hidden"
-        >
+        <SidebarIconGroup>
           {antagonistGun.shells.map((thisShell) => (
-            <IconButton
-              color={
-                thisShell.id === antagonistShell.id && !hasCustomShell
-                  ? undefined
-                  : "gray"
-              }
-              variant="soft"
+            <SidebarIconButton
               key={thisShell.id}
-              size={{ initial: "2", sm: "3" }}
-              radius="none"
+              selected={thisShell.id === antagonistShell.id && !hasCustomShell}
+              alt={unwrap(thisShell.name!)}
+              src={alias("api", `/icons/shells/${thisShell.icon}.webp`)}
               onClick={() => {
                 Duel.mutate((draft) => {
                   draft.antagonist.shell = thisShell;
@@ -208,19 +204,10 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
                   draft.customShell = undefined;
                 });
               }}
-            >
-              <img
-                alt={unwrap(thisShell.name!)}
-                src={alias("api", `/icons/shells/${thisShell.icon}.webp`)}
-                style={{
-                  width: "50%",
-                  height: "50%",
-                }}
-              />
-            </IconButton>
+            />
           ))}
           <CustomShellButton />
-        </Flex>
+        </SidebarIconGroup>
 
         <Flex
           direction="column"

packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/Title/index.tsx

@@ -1,30 +1,46 @@
 import { UpdateIcon } from "@radix-ui/react-icons";
 import { Button, Flex, Heading } from "@radix-ui/themes";
+import { useEffect, useRef } from "react";
+import { SKIN_NUMBER } from "../../../../../../constants/skinNumber";
+import { api } from "../../../../../../core/blitzkit/api";
 import { useLocale } from "../../../../../../hooks/useLocale";
 import { Duel } from "../../../../../../stores/duel";
 import { Tankopedia } from "../../../../../../stores/tankopedia";
 import type { MaybeSkeletonComponentProps } from "../../../../../../types/maybeSkeletonComponentProps";
 import { Tracker } from "./components/Tracker";
 
+const camouflageDefinitions = await api.camouflageDefinitions();
+
 export function Title({ skeleton }: MaybeSkeletonComponentProps) {
   const { unwrap, strings } = useLocale();
   const modelRequested = Tankopedia.use((state) => state.modelRequested);
   const protagonist = Duel.use((state) => state.protagonist.tank);
   const revealed = Tankopedia.use((state) => state.revealed);
   const disturbed = Tankopedia.use((state) => state.disturbed);
-  const name = unwrap(protagonist.name!);
+  const hasRevealed = useRef(false);
+  const skin = Tankopedia.use((state) => state.requestedSkin);
+  const camouflage =
+    skin === undefined ? undefined : camouflageDefinitions.camouflages[skin];
+  const tankName = unwrap(protagonist.name!);
+  const name = camouflage
+    ? `${tankName} ${unwrap(camouflage.name!).replace("%(camo_num)", SKIN_NUMBER)}`
+    : tankName;
   const fontSize = revealed
     ? disturbed
       ? "1.5rem"
       : "2rem"
     : `min(12vh, ${75 / name.length}vw)`;
 
+  useEffect(() => {
+    if (revealed) hasRevealed.current = true;
+  }, [revealed]);
+
   return (
     <Flex
       onPointerDown={(event) => {
         event.preventDefault();
 
-        if (!modelRequested) return;
+        if (!modelRequested || hasRevealed.current) return;
 
         Tankopedia.mutate((draft) => {
           draft.revealed = true;

packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Lighting.tsx

@@ -18,7 +18,7 @@ import { TankopediaDisplay } from "../../../../../../stores/tankopediaPersistent
 
 const ANGLE = degToRad(15);
 const REVEAL_ANIMATION_TIME = 3;
-const TRANSITION_ANIMATION_TIME = 0.5;
+export const TRANSITION_ANIMATION_TIME = 0.5;
 
 const LIGHTS_COUNT = 3;
 const THETA_OFFSET = degToRad(180 - 45);
@@ -46,11 +46,17 @@ export function Lighting({ hasPbr }: Props) {
 
   const highGraphics = TankopediaPersistent.use((state) => state.highGraphics);
   const requestedDisplay = Tankopedia.use((state) => state.requestedDisplay);
+  const revealed = Tankopedia.use((state) => state.revealed);
+  const skinPending = Tankopedia.use(
+    (state) => state.loadedSkin !== state.skin,
+  );
 
   const animationTime = useRef(REVEAL_ANIMATION_TIME);
   const t0 = useRef(performance.now() / 1e3 - animationTime.current);
+  const holding = useRef(false);
 
   const isRevealing = useRef(true);
+  const isFirstReveal = useRef(true);
 
   const [animate, setAnimate] = useState(true);
 
@@ -71,6 +77,37 @@ export function Lighting({ hasPbr }: Props) {
     setAnimate(true);
   }, [requestedDisplay]);
 
+  useEffect(() => {
+    if (isFirstReveal.current) {
+      isFirstReveal.current = false;
+      return;
+    }
+
+    if (!revealed) {
+      animationTime.current = TRANSITION_ANIMATION_TIME;
+      t0.current = performance.now() / 1e3;
+      holding.current = true;
+    } else if (holding.current) {
+      animationTime.current = REVEAL_ANIMATION_TIME;
+      t0.current = performance.now() / 1e3 - animationTime.current;
+      holding.current = false;
+    } else {
+      return;
+    }
+
+    setAnimate(true);
+    invalidate();
+  }, [revealed]);
+
+  useEffect(() => {
+    if (!skinPending) return;
+
+    animationTime.current = TRANSITION_ANIMATION_TIME;
+    t0.current = performance.now() / 1e3;
+
+    setAnimate(true);
+  }, [skinPending]);
+
   return (
     <>
       <ContactShadows
@@ -90,6 +127,7 @@ export function Lighting({ hasPbr }: Props) {
           hasPbr={hasPbr}
           t0={t0}
           animationTime={animationTime}
+          holding={holding}
           wrapper={wrapper}
           stop={() => {
             setAnimate(false);
@@ -145,11 +183,19 @@ interface AnimatorProps {
 
   t0: RefObject<number>;
   animationTime: RefObject<number>;
+  holding: RefObject<boolean>;
   wrapper: RefObject<Group | null>;
   hasPbr: boolean;
 }
 
-function Animator({ stop, t0, animationTime, wrapper, hasPbr }: AnimatorProps) {
+function Animator({
+  stop,
+  t0,
+  animationTime,
+  holding,
+  wrapper,
+  hasPbr,
+}: AnimatorProps) {
   const requestedDisplay = Tankopedia.use((state) => state.requestedDisplay);
   const display = Tankopedia.use((state) => state.display);
 
@@ -176,7 +222,7 @@ function Animator({ stop, t0, animationTime, wrapper, hasPbr }: AnimatorProps) {
 
   useFrame(({ invalidate }) => {
     const dt = performance.now() / 1e3 - t0.current;
-    const x = clamp(dt / animationTime.current, 0, 2);
+    const x = clamp(dt / animationTime.current, 0, holding.current ? 1 : 2);
 
     if (x === 2) {
       apply(1);
@@ -188,6 +234,9 @@ function Animator({ stop, t0, animationTime, wrapper, hasPbr }: AnimatorProps) {
     const t = (0.5 * Math.sin(Math.PI * (x + 0.5)) + 0.5) ** 2;
 
     apply(t);
+
+    if (holding.current && x === 1) return;
+
     invalidate();
 
     if (x >= 1 && Tankopedia.state.display !== requestedDisplay) {
@@ -195,6 +244,12 @@ function Animator({ stop, t0, animationTime, wrapper, hasPbr }: AnimatorProps) {
         draft.display = requestedDisplay;
       });
     }
+
+    if (x >= 1 && Tankopedia.state.skin !== Tankopedia.state.loadedSkin) {
+      Tankopedia.mutate((draft) => {
+        draft.skin = draft.loadedSkin;
+      });
+    }
   });
 
   return null;

packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/TankModel.tsx

@@ -3,10 +3,11 @@ import { useRef } from "react";
 import { Group, Mesh, MeshStandardMaterial, Vector2 } from "three";
 import { applyPitchYawLimits } from "../../../../../../core/blitz/applyPitchYawLimits";
 import { hasEquipment } from "../../../../../../core/blitzkit/hasEquipment";
-import { jsxTree } from "../../../../../../core/blitzkit/jsxTree";
 import { modelTransformEvent } from "../../../../../../core/blitzkit/modelTransform";
+import { skinTree } from "../../../../../../core/blitzkit/skinTree";
 import { controlsEnabledEvent } from "../../../../../../core/controlsEnabled";
 import { useModel } from "../../../../../../hooks/useModel";
+import { useSkin } from "../../../../../../hooks/useSkin";
 import { useTankModelDefinition } from "../../../../../../hooks/useTankModelDefinition";
 import { useTankTransform } from "../../../../../../hooks/useTankTransform";
 import { Duel } from "../../../../../../stores/duel";
@@ -28,6 +29,7 @@ export function TankModel() {
   const gunModelDefinition = turretModelDefinition.guns[protagonist.gun.id];
   const { gltf } = useModel(protagonist.tank.id);
   const nodes = Object.values(gltf.nodes);
+  const skinGltf = useSkin(protagonist.tank.id);
 
   useTankTransform(track, turret, turretContainer, gunContainer);
 
@@ -92,7 +94,7 @@ export function TankModel() {
           window.removeEventListener("pointerup", handlePointerUp);
         }
 
-        return jsxTree(node, {
+        return skinTree(node, skinGltf, {
           mesh(_, props, key) {
             return (
               <mesh
@@ -169,7 +171,7 @@ export function TankModel() {
             window.removeEventListener("pointerup", handlePointerUp);
           }
 
-          return jsxTree(node, {
+          return skinTree(node, skinGltf, {
             mesh(_, props, key) {
               return (
                 <mesh
@@ -250,7 +252,7 @@ export function TankModel() {
               window.removeEventListener("pointerup", handlePointerUp);
             }
 
-            return jsxTree(node, {
+            return skinTree(node, skinGltf, {
               mesh(_, props, key) {
                 return (
                   <mesh

packages/website/src/constants/skinNumber.ts

@@ -0,0 +1 @@
+export const SKIN_NUMBER = "0417";

packages/website/src/core/blitzkit/skinTree.tsx

@@ -0,0 +1,46 @@
+import type { Material, Object3D } from "three";
+import type { Skin } from "../../hooks/useSkin";
+import { jsxTree } from "./jsxTree";
+
+type Mergers = Parameters<typeof jsxTree>[1];
+
+export function skinTree(
+  node: Object3D,
+  skin: Skin | undefined,
+  mergers: Mergers,
+) {
+  const skinNodes = new Map(
+    skin?.scene.children.map((node) => [node.name, node]),
+  );
+  const skinMergers: Mergers = {
+    mesh(mesh, props, key) {
+      const material = skin?.materials.get((mesh.material as Material).name);
+
+      return mergers!.mesh!(
+        mesh,
+        material ? { ...props, material } : props,
+        key,
+      );
+    },
+    group(object3d, props, key) {
+      const skinNode = skinNodes.get(object3d.name);
+      const isSwitch = object3d.userData.state !== undefined;
+      const state = skin
+        ? skin.scene.userData.states[object3d.name]
+        : object3d.userData.state;
+
+      return (
+        <group key={key} {...props}>
+          {isSwitch
+            ? object3d.children
+                .filter((child) => child.name === state)
+                .map((child) => jsxTree(child, skinMergers))
+            : props.children}
+          {skinNode?.children.map((child) => jsxTree(child, mergers))}
+        </group>
+      );
+    },
+  };
+
+  return jsxTree(node, skinMergers);
+}

packages/website/src/hooks/useSkin.ts

@@ -0,0 +1,82 @@
+import { alias } from "@blitzkit/core";
+import { useEffect } from "react";
+import type { Group, Material } from "three";
+import { GLTFLoader } from "three-stdlib";
+import { TRANSITION_ANIMATION_TIME } from "../components/Tankopedia/HeroSection/components/TankSandbox/components/Lighting";
+import { Tankopedia } from "../stores/tankopedia";
+
+export interface Skin {
+  scene: Group;
+  materials: Map<string, Material>;
+}
+
+const skins = new Map<string, Promise<Skin>>();
+const loadedSkins = new Map<string, Skin>();
+
+async function loadSkin(path: string) {
+  const gltf = await new GLTFLoader().loadAsync(path);
+  const materials: Material[] = await gltf.parser.getDependencies("material");
+  const skin = {
+    scene: gltf.scene,
+    materials: new Map(materials.map((material) => [material.name, material])),
+  };
+
+  loadedSkins.set(path, skin);
+
+  return skin;
+}
+
+function skinPath(id: number, skin: number) {
+  return alias("api", `/tanks/${id}/skins/${skin}.glb`);
+}
+
+export function useSkin(id: number) {
+  const requestedSkin = Tankopedia.use((state) => state.requestedSkin);
+  const skin = Tankopedia.use((state) => state.skin);
+
+  useEffect(() => {
+    const path =
+      requestedSkin === undefined ? undefined : skinPath(id, requestedSkin);
+    let settled = false;
+
+    if (path === undefined || loadedSkins.has(path)) {
+      Tankopedia.mutate((draft) => {
+        draft.loadedSkin = requestedSkin;
+      });
+      return;
+    }
+
+    Tankopedia.mutate((draft) => {
+      draft.revealed = false;
+    });
+
+    if (!skins.has(path)) skins.set(path, loadSkin(path));
+
+    Promise.all([
+      skins.get(path),
+      new Promise((resolve) =>
+        setTimeout(resolve, TRANSITION_ANIMATION_TIME * 1e3),
+      ),
+    ]).then(() => {
+      if (settled) return;
+
+      settled = true;
+      Tankopedia.mutate((draft) => {
+        draft.loadedSkin = requestedSkin;
+        draft.skin = requestedSkin;
+        draft.revealed = true;
+      });
+    });
+
+    return () => {
+      if (settled) return;
+
+      settled = true;
+      Tankopedia.mutate((draft) => {
+        draft.revealed = true;
+      });
+    };
+  }, [id, requestedSkin]);
+
+  return skin === undefined ? undefined : loadedSkins.get(skinPath(id, skin));
+}

packages/website/src/pages/[...chunk_api]/icons/camouflages/[id].webp.ts

@@ -0,0 +1,53 @@
+import type { CamouflagesXml } from "@blitzkit/core";
+import type { APIContext, GetStaticPathsItem } from "astro";
+import sharp from "sharp";
+import { extractPackedIcon } from "../../../../core/blitz/extractPackedIcon";
+import { parsePackedSpriteRect } from "../../../../core/blitz/parsePackedSpriteRect";
+import { api } from "../../../../core/blitzkit/api";
+import { mixStaticPaths } from "../../../../core/blitzkit/mixStaticPaths";
+import { vfs } from "../../../../core/blitzkit/vfs";
+import { getStaticPaths as _getStaticPaths } from "../../_index";
+
+export const getStaticPaths = mixStaticPaths(_getStaticPaths, async () => {
+  const camouflageDefinitions = await api.camouflageDefinitions();
+  const camouflagesXml = await vfs.xml<{ root: CamouflagesXml }>(
+    "Data/XML/item_defs/vehicles/common/camouflages.xml",
+  );
+  const icons = new Map(
+    Object.values(camouflagesXml.root.camouflages).map((camouflage) => [
+      camouflage.id,
+      camouflage.icon,
+    ]),
+  );
+  const paths: GetStaticPathsItem[] = [];
+
+  for (const camouflage of Object.values(camouflageDefinitions.camouflages)) {
+    const icon = icons.get(camouflage.id);
+
+    if (camouflage.tank_id === undefined || !icon) continue;
+
+    paths.push({
+      params: { id: camouflage.id },
+      props: {
+        path: icon.replace("~res:/", "Data/").replace(/\.txt$/, ""),
+      },
+    });
+  }
+
+  return paths;
+});
+
+export async function GET({ props }: APIContext<{ path: string }>) {
+  const path = (await vfs.resolve(`${props.path}@2x.packed.webp`))
+    ? `${props.path}@2x.packed.webp`
+    : `${props.path}.packed.webp`;
+  const packed = await vfs.file(path);
+  const texture = sharp(packed);
+  const sizes = parsePackedSpriteRect(packed);
+  const image = sizes
+    ? sharp(await extractPackedIcon(texture, sizes))
+    : texture;
+  const bytes = await image.webp().toBuffer();
+
+  return new Response(new Uint8Array(bytes));
+}

packages/website/src/pages/[...chunk_api]/tanks/[id]/model.glb.ts

@@ -17,7 +17,7 @@ import { Document, Material, Node, NodeIO, Scene } from "@gltf-transform/core";
 import { ALL_EXTENSIONS } from "@gltf-transform/extensions";
 import { dedup, prune } from "@gltf-transform/functions";
 import type { APIContext } from "astro";
-import { times } from "lodash-es";
+import { isEqual, times } from "lodash-es";
 import { dirname } from "path";
 import sharp from "sharp";
 import { vfs } from "../../../../core/blitzkit/vfs";
@@ -69,7 +69,11 @@ const omitMeshNames = {
   end: ["_POINT"],
 };
 
-async function extractModel(vfs: AbstractVFS, path: string) {
+export async function extractModel(
+  vfs: AbstractVFS,
+  path: string,
+  isPart = false,
+) {
   const sc2Path = `Data/3d/${path}.sc2`;
   const scgPath = `Data/3d/${path}.scg`;
   const sc2 = new Sc2ReadStream(
@@ -81,6 +85,153 @@ async function extractModel(vfs: AbstractVFS, path: string) {
   const document = new Document();
   const scene = document.createScene();
   const buffer = document.createBuffer();
+  const materials = await extractMaterials(document, sc2, path);
+
+  parseHierarchies<Scene | Node>(
+    sc2["#hierarchy"],
+    scene,
+    (hierarchy, components, parent) => {
+      if (
+        omitMeshNames.start.some((omit) => hierarchy.name.startsWith(omit)) ||
+        omitMeshNames.end.some((omit) => hierarchy.name.endsWith(omit))
+      )
+        return;
+
+      const node = document.createNode(hierarchy.name);
+
+      components.forEach((component) => {
+        switch (component["comp.typename"]) {
+          case "LodComponent":
+            // found and used later by transform component
+            // TODO: lod component always shows up before transform component; cache it before parsing transform
+            break;
+
+          case "TransformComponent": {
+            const localTranslation = component["tc.localTranslation"];
+            // The game resets top-level node translation to [0, 0, 0] on load.
+            // Child nodes and customization parts must keep their authored
+            // local offsets.
+            node.setTranslation(
+              parent instanceof Scene && !isPart ? [0, 0, 0] : localTranslation,
+            );
+            node.setRotation(component["tc.localRotation"]);
+            node.setScale(component["tc.localScale"]);
+
+            break;
+          }
+
+          case "StateSwitcherComponent":
+            node.setExtras({
+              state: component[`ssc.state${component["ssc.activeState"]}`],
+            });
+            break;
+
+          case "RenderComponent": {
+            const renderObject = component["rc.renderObj"];
+
+            times(renderObject["ro.batchCount"], (batchIndex): void => {
+              const lodIndex = renderObject[`rb${batchIndex}.lodIndex`];
+
+              if (lodIndex !== 0) return;
+
+              const batchKey = batchIndex.toString().padStart(4, "0");
+              const batch = renderObject["ro.batches"][batchKey];
+              const material = materials.get(batch["rb.nmatname"]);
+              const polygonGroup = scg.get(batch["rb.datasource"]);
+
+              if (!(material instanceof Material)) {
+                // probably shadow material
+                return;
+              }
+              if (polygonGroup === undefined) {
+                throw new Error(
+                  `Missing polygon group ${batch["rb.datasource"]}`,
+                );
+              }
+
+              const lodNode = document.createNode(batchKey);
+              const indicesAccessor = document
+                .createAccessor()
+                .setType("SCALAR")
+                .setArray(new Uint16Array(polygonGroup.indices))
+                .setBuffer(buffer);
+              const primitive = document
+                .createPrimitive()
+                .setIndices(indicesAccessor)
+                .setMaterial(material)
+                .setName(batchKey);
+
+              const attributes = new Map<VertexAttribute, number[][]>();
+
+              polygonGroup.vertices.forEach((vertex) => {
+                vertex.forEach(({ attribute, value }) => {
+                  if (!attributes.has(attribute)) {
+                    attributes.set(attribute, []);
+                  }
+
+                  attributes.get(attribute)!.push(value);
+                });
+              });
+
+              attributes.forEach((value, attribute) => {
+                const name = vertexAttributeGLTFName[attribute];
+
+                if (
+                  name === undefined ||
+                  primitive.getAttribute(name) !== null
+                ) {
+                  return;
+                }
+
+                const vertexSize = vertexAttributeGltfVectorSizes[attribute];
+                const attributeAccessor = document
+                  .createAccessor(name)
+                  .setType(vertexSize === 1 ? "SCALAR" : `VEC${vertexSize}`)
+                  .setArray(new Float32Array(value.flat()))
+                  .setBuffer(buffer);
+
+                primitive.setAttribute(name, attributeAccessor);
+              });
+
+              const mesh = document
+                .createMesh(batch["##name"])
+                .addPrimitive(primitive);
+              lodNode.setMesh(mesh);
+              node.addChild(lodNode);
+            });
+
+            break;
+          }
+
+          default: {
+            if (ERROR_ON_UNKNOWN_COMPONENT) {
+              throw new Error(
+                `Unhandled component type: ${component["comp.typename"]}`,
+              );
+            }
+          }
+        }
+      });
+
+      parent.addChild(node);
+
+      return node;
+    },
+  );
+
+  scene.addChild(document.createNode("test"));
+
+  await document.transform(prune({ keepAttributes: true }), dedup());
+
+  return document;
+}
+
+export async function extractMaterials(
+  document: Document,
+  sc2: ReturnType<Sc2ReadStream["sc2"]>,
+  path: string,
+  config?: string,
+) {
   const materials = new Map<bigint, Material | bigint | undefined>();
 
   for (const node of sc2["#dataNodes"]) {
@@ -95,15 +246,32 @@ async function extractModel(vfs: AbstractVFS, path: string) {
       continue;
     }
 
-    const material = document.createMaterial(node.materialName);
     let textures: Textures | undefined = undefined;
 
-    if (node.textures) {
+    if (config !== undefined) {
+      if (typeof node.configCount !== "number") continue;
+
+      const archive = times(
+        node.configCount,
+        (index) => node[`configArchive_${index}`],
+      ).find((archive) => archive.configName === config);
+
+      if (
+        !archive ||
+        isEqual(archive.textures, node.configArchive_0.textures)
+      ) {
+        continue;
+      }
+
+      textures = archive.textures;
+    } else if (node.textures) {
       textures = node.textures;
     } else if (typeof node.configCount === "number") {
       textures = node.configArchive_0.textures;
     }
 
+    const material = document.createMaterial(node.materialName);
+
     if (textures) {
       const baseColor = await readBaseColor(
         `Data/3d/${dirname(path)}/${textures.baseColorMap ?? textures.albedo}`,
@@ -240,136 +408,7 @@ async function extractModel(vfs: AbstractVFS, path: string) {
     materials.set(id, resolvedMaterial);
   });
 
-  parseHierarchies<Scene | Node>(
-    sc2["#hierarchy"],
-    scene,
-    (hierarchy, components, parent) => {
-      if (
-        omitMeshNames.start.some((omit) => hierarchy.name.startsWith(omit)) ||
-        omitMeshNames.end.some((omit) => hierarchy.name.endsWith(omit))
-      )
-        return;
-
-      const node = document.createNode(hierarchy.name);
-
-      components.forEach((component) => {
-        switch (component["comp.typename"]) {
-          case "LodComponent":
-            // found and used later by transform component
-            // TODO: lod component always shows up before transform component; cache it before parsing transform
-            break;
-
-          case "TransformComponent": {
-            const localTranslation = component["tc.localTranslation"];
-            // The game resets top-level node translation to [0, 0, 0] on load.
-            // Child nodes must keep their authored local offsets.
-            node.setTranslation(
-              parent instanceof Scene ? [0, 0, 0] : localTranslation,
-            );
-            node.setRotation(component["tc.localRotation"]);
-            node.setScale(component["tc.localScale"]);
-
-            break;
-          }
-
-          case "RenderComponent": {
-            const renderObject = component["rc.renderObj"];
-
-            times(renderObject["ro.batchCount"], (batchIndex): void => {
-              const lodIndex = renderObject[`rb${batchIndex}.lodIndex`];
-
-              if (lodIndex !== 0) return;
-
-              const batchKey = batchIndex.toString().padStart(4, "0");
-              const batch = renderObject["ro.batches"][batchKey];
-              const material = materials.get(batch["rb.nmatname"]);
-              const polygonGroup = scg.get(batch["rb.datasource"]);
-
-              if (!(material instanceof Material)) {
-                // probably shadow material
-                return;
-              }
-              if (polygonGroup === undefined) {
-                throw new Error(
-                  `Missing polygon group ${batch["rb.datasource"]}`,
-                );
-              }
-
-              const lodNode = document.createNode(batchKey);
-              const indicesAccessor = document
-                .createAccessor()
-                .setType("SCALAR")
-                .setArray(new Uint16Array(polygonGroup.indices))
-                .setBuffer(buffer);
-              const primitive = document
-                .createPrimitive()
-                .setIndices(indicesAccessor)
-                .setMaterial(material)
-                .setName(batchKey);
-
-              const attributes = new Map<VertexAttribute, number[][]>();
-
-              polygonGroup.vertices.forEach((vertex) => {
-                vertex.forEach(({ attribute, value }) => {
-                  if (!attributes.has(attribute)) {
-                    attributes.set(attribute, []);
-                  }
-
-                  attributes.get(attribute)!.push(value);
-                });
-              });
-
-              attributes.forEach((value, attribute) => {
-                const name = vertexAttributeGLTFName[attribute];
-
-                if (
-                  name === undefined ||
-                  primitive.getAttribute(name) !== null
-                ) {
-                  return;
-                }
-
-                const vertexSize = vertexAttributeGltfVectorSizes[attribute];
-                const attributeAccessor = document
-                  .createAccessor(name)
-                  .setType(vertexSize === 1 ? "SCALAR" : `VEC${vertexSize}`)
-                  .setArray(new Float32Array(value.flat()))
-                  .setBuffer(buffer);
-
-                primitive.setAttribute(name, attributeAccessor);
-              });
-
-              const mesh = document
-                .createMesh(batch["##name"])
-                .addPrimitive(primitive);
-              lodNode.setMesh(mesh);
-              node.addChild(lodNode);
-            });
-
-            break;
-          }
-
-          default: {
-            if (ERROR_ON_UNKNOWN_COMPONENT) {
-              throw new Error(
-                `Unhandled component type: ${component["comp.typename"]}`,
-              );
-            }
-          }
-        }
-      });
-
-      parent.addChild(node);
-
-      return node;
-    },
-  );
-
-  scene.addChild(document.createNode("test"));
-
-  await document.transform(prune({ keepAttributes: true }), dedup());
-
-  return document;
+  return materials;
 }
 
 async function readBaseColor(path: string) {

packages/website/src/pages/[...chunk_api]/tanks/[id]/skins/[skin].glb.ts

@@ -0,0 +1,234 @@
+import {
+  parseHierarchies,
+  Sc2ReadStream,
+  type CamouflagesXml,
+  type CamouflagesYaml,
+  type TankParameters,
+} from "@blitzkit/core";
+import {
+  Document,
+  Node,
+  NodeIO,
+  PropertyType,
+  Scene,
+} from "@gltf-transform/core";
+import { ALL_EXTENSIONS } from "@gltf-transform/extensions";
+import { dedup, mergeDocuments, unpartition } from "@gltf-transform/functions";
+import type { APIContext } from "astro";
+import type { Vector3Tuple, Vector4Tuple } from "three";
+import { SKIN_NUMBER } from "../../../../../constants/skinNumber";
+import { api } from "../../../../../core/blitzkit/api";
+import { mixStaticPaths } from "../../../../../core/blitzkit/mixStaticPaths";
+import { vfs } from "../../../../../core/blitzkit/vfs";
+import { getStaticPaths as _getStaticPaths } from "../../../_index";
+import { extractMaterials, extractModel } from "../model.glb";
+
+const SKIN_NUMBER_SLOTS = 5;
+const DIGIT_COLUMNS = 5;
+const DIGIT_ROWS = 2;
+
+export const getStaticPaths = mixStaticPaths(_getStaticPaths, async () => {
+  const camouflages = await api.camouflageDefinitions();
+
+  return Object.values(camouflages.camouflages)
+    .filter((camouflage) => camouflage.tank_id)
+    .map((camouflage) => ({
+      params: { id: camouflage.tank_id!, skin: camouflage.id },
+      props: { skin: camouflage.id },
+    }));
+});
+
+const camouflagesXml = await vfs.xml<{ root: CamouflagesXml }>(
+  "Data/XML/item_defs/vehicles/common/camouflages.xml",
+);
+const camouflagesYaml = await vfs.yaml<CamouflagesYaml>(
+  "Data/camouflages.yaml",
+);
+const customization = await vfs.yaml<
+  Record<string, { Name: string; Path: string }>
+>("Data/3d/Customization.yaml");
+
+export async function GET({ props }: APIContext<{ skin: number }>) {
+  const nodeIO = new NodeIO().registerExtensions(ALL_EXTENSIONS);
+
+  const items = new Map(
+    Object.values(customization).map(({ Name, Path }) => [
+      Name,
+      Path.replace("~res:/3d/", "").replace(/\.sc2$/, ""),
+    ]),
+  );
+  const key = Object.keys(camouflagesXml.root.camouflages).find(
+    (key) => camouflagesXml.root.camouflages[key].id === props.skin,
+  )!;
+  const include = camouflagesXml.root.camouflages[key].vehicleFilter.include;
+  const [nation, tankKey] = (
+    include as { vehicle: { name: string } }
+  ).vehicle.name.split(":");
+  const { preset, customEntities } = camouflagesYaml[key];
+  const skinNumber = Number(preset?.match(/(\d+)$/)?.[1] ?? 1);
+  const parameters = await vfs.yaml<TankParameters>(
+    `Data/3d/Tanks/Parameters/${nation}/${tankKey}.yaml`,
+  );
+  const basePath = parameters.resourcesPath.blitzModelPath.replace(
+    /\.sc2$/,
+    "",
+  );
+  const sc2 = new Sc2ReadStream(
+    (await vfs.file(`Data/3d/${basePath}.sc2`)).buffer as ArrayBuffer,
+  ).sc2();
+  const slots: Record<
+    string,
+    {
+      target: string;
+      position: Vector3Tuple;
+      rotation: Vector4Tuple;
+      scale: Vector3Tuple;
+    }
+  > = {};
+  const states: Record<string, string | null> = {};
+
+  parseHierarchies(sc2["#hierarchy"], null, (hierarchy, components) => {
+    for (const component of components) {
+      if (component["comp.typename"] === "NewSlotComponent") {
+        for (const slot of Object.values(component.slots)) {
+          slots[slot.name] = {
+            target: hierarchy.name,
+            position: slot.transform.position,
+            rotation: slot.transform.rotation,
+            scale: slot.transform.scale,
+          };
+        }
+      }
+
+      if (component["comp.typename"] === "SlotComponent") {
+        slots[component["sc.slotName"]] = {
+          target: hierarchy.name,
+          position: component["sc.attachmentTranslation"] as Vector3Tuple,
+          rotation: component["sc.attachmentRotation"] as Vector4Tuple,
+          scale: component["sc.attachmentScale"] as Vector3Tuple,
+        };
+      }
+
+      if (component["comp.typename"] !== "StateSwitcherComponent") continue;
+
+      const active = component[`ssc.state${component["ssc.activeState"]}`];
+      // camos without their own variant keep the default piece, but groups
+      // of elements to hide stay hidden
+      let state: string | null =
+        active && !/skin\d*/.test(active) && !active.includes("hide")
+          ? active
+          : null;
+
+      for (let index = 0; index < component["ssc.statesCount"]; index++) {
+        const name = component[`ssc.state${index}`];
+        const match = name.match(/skin(\d*)/);
+
+        if (
+          match &&
+          !name.includes("hide") &&
+          Number(match[1] || 1) === skinNumber
+        ) {
+          state = name;
+        }
+      }
+
+      states[hierarchy.name] = state;
+    }
+
+    return null;
+  });
+
+  const document = new Document();
+  const scene = document.createScene().setExtras({ states });
+  const targets = new Map<string, Node>();
+
+  document.createBuffer();
+
+  if (preset) await extractMaterials(document, sc2, basePath, preset);
+
+  for (const name in customEntities) {
+    const slot = slots[name];
+    const path = items.get(customEntities[name].item);
+
+    if (
+      !slot ||
+      !path ||
+      !(await vfs.resolve(`Data/3d/${path}.sc2`)) ||
+      !(await vfs.resolve(`Data/3d/${path}.scg`))
+    ) {
+      continue;
+    }
+
+    const part = await extractModel(vfs, path, true);
+    const map = mergeDocuments(document, part);
+    const partScene = map.get(part.getRoot().listScenes()[0]) as Scene;
+    const node = document
+      .createNode(name)
+      .setTranslation(slot.position)
+      .setRotation(slot.rotation)
+      .setScale(slot.scale);
+    let target = targets.get(slot.target);
+
+    if (!target) {
+      target = document.createNode(slot.target);
+      targets.set(slot.target, target);
+      scene.addChild(target);
+    }
+
+    for (const child of partScene.listChildren()) {
+      node.addChild(child as Node);
+    }
+
+    partScene.dispose();
+    target.addChild(node);
+  }
+
+  applySkinNumber(document, SKIN_NUMBER);
+
+  await document.transform(
+    dedup({ propertyTypes: [PropertyType.ACCESSOR, PropertyType.TEXTURE] }),
+    unpartition(),
+  );
+
+  return new Response(await nodeIO.writeBinary(document));
+}
+
+function applySkinNumber(document: Document, number: string) {
+  const start = Math.ceil((SKIN_NUMBER_SLOTS - number.length) / 2) + 1;
+
+  for (const node of document.getRoot().listNodes()) {
+    const match = node.getName().match(/_number_\d+_(\d+)$/);
+
+    if (!match) continue;
+
+    const digit = number[Number(match[1]) - start];
+
+    if (digit === undefined) {
+      node.dispose();
+      continue;
+    }
+
+    const cell = (Number(digit) + 9) % 10;
+    const column = cell % DIGIT_COLUMNS;
+    const row = Math.floor(cell / DIGIT_COLUMNS);
+
+    node.traverse((child) => {
+      for (const primitive of child.getMesh()?.listPrimitives() ?? []) {
+        const uvs = primitive.getAttribute("TEXCOORD_0")?.clone();
+
+        if (!uvs) continue;
+
+        for (let index = 0; index < uvs.getCount(); index++) {
+          const [u, v] = uvs.getElement(index, [0, 0]) as [number, number];
+
+          uvs.setElement(index, [
+            (column + u) / DIGIT_COLUMNS,
+            (row + v) / DIGIT_ROWS,
+          ]);
+        }
+
+        primitive.setAttribute("TEXCOORD_0", uvs);
+      }
+    });
+  }
+}

packages/website/src/stores/tankopedia.ts

@@ -103,6 +103,9 @@ interface Tankopedia {
   );
   xpMultiplier: (typeof XP_MULTIPLIERS)[number];
   customShell?: ShellDefinition;
+  requestedSkin?: number;
+  loadedSkin?: number;
+  skin?: number;
   requestedDisplay: TankopediaDisplay;
   display: TankopediaDisplay;
   statSearch?: string;