diff --git a/packages/core/src/blitzkit/api/server/2_camouflageDefinitions.ts b/packages/core/src/blitzkit/api/server/2_camouflageDefinitions.ts index e2b81e3f9..4462f1010 100644 --- a/packages/core/src/blitzkit/api/server/2_camouflageDefinitions.ts +++ b/packages/core/src/blitzkit/api/server/2_camouflageDefinitions.ts @@ -87,14 +87,19 @@ export abstract class ServerBlitzKitAPI2 extends ServerBlitzKitAPI1 { ), ); + const [nation, tankKey] = vehicle.split(":"); + // some unique camos only set the preset for their one tank + const preset = + yamlEntry.preset ?? + yamlEntry.override?.[nation]?.override?.[tankKey]?.preset; let hasPreset = false; - if (camo.group === "legendary" && yamlEntry.preset !== undefined) { + if (preset !== undefined) { if (!skinPresets.has(vehicle)) { skinPresets.set(vehicle, this.skinPresets(vehicle)); } - hasPreset = (await skinPresets.get(vehicle)!).has(yamlEntry.preset); + hasPreset = (await skinPresets.get(vehicle)!).has(preset); } if (resolvedParts.some(Boolean) || hasPreset) { @@ -110,6 +115,7 @@ export abstract class ServerBlitzKitAPI2 extends ServerBlitzKitAPI1 { tank_name: resolvedTankName, tank_name_full: resolvedTankNameFull, tank_id: tankId, + attachment: camo.kind === "customization", }; } diff --git a/packages/core/src/protos/camouflage_definitions.proto b/packages/core/src/protos/camouflage_definitions.proto index bae9a1c46..2bbf5e2c3 100644 --- a/packages/core/src/protos/camouflage_definitions.proto +++ b/packages/core/src/protos/camouflage_definitions.proto @@ -14,4 +14,5 @@ message Camouflage { optional I18nString tank_name = 3; optional I18nString tank_name_full = 4; optional uint32 tank_id = 5; + optional bool attachment = 6; } \ No newline at end of file diff --git a/packages/core/src/protos/camouflage_definitions.ts b/packages/core/src/protos/camouflage_definitions.ts index 3ba5ae248..14466cb1c 100644 --- a/packages/core/src/protos/camouflage_definitions.ts +++ b/packages/core/src/protos/camouflage_definitions.ts @@ -25,6 +25,7 @@ export interface Camouflage { tank_name?: I18nString | undefined; tank_name_full?: I18nString | undefined; tank_id?: number | undefined; + attachment?: boolean | undefined; } function createBaseCamouflageDefinitions(): CamouflageDefinitions { @@ -192,7 +193,7 @@ export const CamouflageDefinitions_CamouflagesEntry: MessageFns = { @@ -212,6 +213,9 @@ export const Camouflage: MessageFns = { if (message.tank_id !== undefined && message.tank_id !== 0) { writer.uint32(40).uint32(message.tank_id); } + if (message.attachment !== undefined && message.attachment !== false) { + writer.uint32(48).bool(message.attachment); + } return writer; }, @@ -262,6 +266,14 @@ export const Camouflage: MessageFns = { message.tank_id = reader.uint32(); continue; } + case 6: { + if (tag !== 48) { + break; + } + + message.attachment = reader.bool(); + continue; + } } if ((tag & 7) === 4 || tag === 0) { break; @@ -278,6 +290,7 @@ export const Camouflage: MessageFns = { tank_name: isSet(object.tank_name) ? I18nString.fromJSON(object.tank_name) : undefined, tank_name_full: isSet(object.tank_name_full) ? I18nString.fromJSON(object.tank_name_full) : undefined, tank_id: isSet(object.tank_id) ? globalThis.Number(object.tank_id) : 0, + attachment: isSet(object.attachment) ? globalThis.Boolean(object.attachment) : false, }; }, @@ -298,6 +311,9 @@ export const Camouflage: MessageFns = { if (message.tank_id !== undefined && message.tank_id !== 0) { obj.tank_id = Math.round(message.tank_id); } + if (message.attachment !== undefined && message.attachment !== false) { + obj.attachment = message.attachment; + } return obj; }, @@ -317,6 +333,7 @@ export const Camouflage: MessageFns = { ? I18nString.fromPartial(object.tank_name_full) : undefined; message.tank_id = object.tank_id ?? 0; + message.attachment = object.attachment ?? false; return message; }, }; diff --git a/packages/core/src/streams/sc2.ts b/packages/core/src/streams/sc2.ts index 73e2a2147..db490d602 100644 --- a/packages/core/src/streams/sc2.ts +++ b/packages/core/src/streams/sc2.ts @@ -40,6 +40,8 @@ export interface ConfigArchive { interface EnabledPresets { AlphaTest: boolean; + AlphaBlend?: boolean; + AlphaBlendAdditive?: boolean; } interface Flags { diff --git a/packages/core/src/types/camouflagesYaml.ts b/packages/core/src/types/camouflagesYaml.ts index 1be674afa..35d1531ca 100644 --- a/packages/core/src/types/camouflagesYaml.ts +++ b/packages/core/src/types/camouflagesYaml.ts @@ -5,5 +5,10 @@ export type CamouflagesYaml = Record< shortUserString?: string; preset?: string; customEntities?: Record; + // nation -> tank + override?: Record< + string, + { override?: Record } + >; } >; diff --git a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/GunFlexibilityVisualizer/index.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/GunFlexibilityVisualizer/index.tsx index f28050abc..cb975b796 100644 --- a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/GunFlexibilityVisualizer/index.tsx +++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/GunFlexibilityVisualizer/index.tsx @@ -44,7 +44,9 @@ export function GunFlexibilityVisualizer({ const tank = Duel.use((state) => state.protagonist.tank); const turret = Duel.use((state) => state.protagonist.turret); const gun = Duel.use((state) => state.protagonist.gun); - const modelRequested = Tankopedia.use((state) => state.modelRequested); + const modelRequested = Tankopedia.use( + (state) => state.loaders.model.requested, + ); const tankModel = modelDefinition.models[tank.id]; const turretModel = tankModel.turrets[turret.id]; diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/SkinSwitcher.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/SkinSwitcher.tsx index 762ed5ca8..0858016c9 100644 --- a/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/SkinSwitcher.tsx +++ b/packages/website/src/components/Tankopedia/HeroSection/components/Options/components/SkinSwitcher.tsx @@ -13,7 +13,10 @@ const camouflageDefinitions = await api.camouflageDefinitions(); export function SkinSwitcher() { const tank = Duel.use((state) => state.protagonist.tank); - const skin = Tankopedia.use((state) => state.requestedSkin); + const skin = Tankopedia.use((state) => state.loaders.skin.requested); + const attachment = Tankopedia.use( + (state) => state.loaders.attachment.requested, + ); const requestedDisplay = Tankopedia.use((state) => state.requestedDisplay); const disturbed = Tankopedia.use((state) => state.disturbed); const { unwrap } = useLocale(); @@ -24,11 +27,18 @@ export function SkinSwitcher() { (camouflage) => unwrap(camouflage.name!), ); + // attachments aren't camouflages so they get their own group + const groups = [ + skins.filter((camouflage) => !camouflage.attachment), + skins.filter((camouflage) => camouflage.attachment), + ].filter((group) => group.length > 0); + if (skins.length === 0) return null; return ( - {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"; + {groups.map((group) => ( + + {group.map((camouflage, index) => { + const name = unwrap(camouflage.name!).replace( + "%(camo_num)", + SKIN_NUMBER, + ); + const top = index === 0 ? "var(--radius-full)" : "0"; + const bottom = + index === group.length - 1 ? "var(--radius-full)" : "0"; - return ( - - { - Tankopedia.mutate((draft) => { - draft.requestedSkin = - draft.requestedSkin === camouflage.id - ? undefined - : camouflage.id; - }); - }} - /> - - ); - })} + return ( + + { + Tankopedia.mutate((draft) => { + const loader = + draft.loaders[ + camouflage.attachment ? "attachment" : "skin" + ]; + + loader.requested = + loader.requested === camouflage.id + ? undefined + : camouflage.id; + }); + }} + /> + + ); + })} + + ))} ); } diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx index 725ec6803..695cbc55f 100644 --- a/packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx +++ b/packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx @@ -82,7 +82,9 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) { const revealed = Tankopedia.use((state) => state.revealed); const disturbed = Tankopedia.use((state) => state.disturbed); const highGraphics = TankopediaPersistent.use((state) => state.highGraphics); - const modelRequested = Tankopedia.use((state) => state.modelRequested); + const modelRequested = Tankopedia.use( + (state) => state.loaders.model.requested, + ); const equalize = Duel.use((state) => state.equalize); const equalizer = Duel.use((state) => state.antagonist.tank.equalizer); diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/Title/index.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/Title/index.tsx index 17bb872e8..d8ed0dfd6 100644 --- a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/Title/index.tsx +++ b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/Title/index.tsx @@ -13,18 +13,25 @@ const camouflageDefinitions = await api.camouflageDefinitions(); export function Title({ skeleton }: MaybeSkeletonComponentProps) { const { unwrap, strings } = useLocale(); - const modelRequested = Tankopedia.use((state) => state.modelRequested); + const modelRequested = Tankopedia.use( + (state) => state.loaders.model.requested, + ); const protagonist = Duel.use((state) => state.protagonist.tank); const revealed = Tankopedia.use((state) => state.revealed); const disturbed = Tankopedia.use((state) => state.disturbed); const hasRevealed = useRef(false); - const skin = Tankopedia.use((state) => state.requestedSkin); + const skin = Tankopedia.use((state) => state.loaders.skin.requested); 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; + // legendary camos carry the tank's in-battle name + const name = ( + camouflage + ? camouflage.tank_name + ? unwrap(camouflage.tank_name) + : `${tankName} ${unwrap(camouflage.name!)}` + : tankName + ).replace("%(camo_num)", SKIN_NUMBER); const fontSize = revealed ? disturbed ? "1.5rem" @@ -102,7 +109,7 @@ export function Title({ skeleton }: MaybeSkeletonComponentProps) { onPointerDown={(event) => event.stopPropagation()} onClick={() => { Tankopedia.mutate((draft) => { - draft.modelRequested = true; + draft.loaders.model.requested = true; }); }} > diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Lighting.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Lighting.tsx index f440de6da..4acaa5669 100644 --- a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Lighting.tsx +++ b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Lighting.tsx @@ -48,7 +48,9 @@ export function Lighting({ hasPbr }: Props) { const requestedDisplay = Tankopedia.use((state) => state.requestedDisplay); const revealed = Tankopedia.use((state) => state.revealed); const skinPending = Tankopedia.use( - (state) => state.loadedSkin !== state.skin, + (state) => + state.loaders.skin.requested !== state.loaders.skin.loaded || + state.loaders.attachment.requested !== state.loaders.attachment.loaded, ); const animationTime = useRef(REVEAL_ANIMATION_TIME); @@ -63,6 +65,7 @@ export function Lighting({ hasPbr }: Props) { useEffect(() => { Tankopedia.mutate((draft) => { draft.revealed = true; + draft.loaders.model.loaded = true; }); }, []); @@ -162,6 +165,7 @@ export function Lighting({ hasPbr }: Props) { key={index} position={position} intensity={intensity} + userData={{ intensity }} penumbra={1} castShadow={highGraphics} decay={1} @@ -212,6 +216,11 @@ function Animator({ for (const child of wrapper.current.children) { if (child instanceof SpotLight) { child.angle = ANGLE * t * factor; + child.intensity = child.userData.intensity; + + if (child.angle === 0) { + child.intensity = 0; + } } else if (child instanceof HemisphereLight) { child.intensity = HEMISPHERE_INTENSITY * t * factor; } @@ -244,12 +253,6 @@ function Animator({ draft.display = requestedDisplay; }); } - - if (x >= 1 && Tankopedia.state.skin !== Tankopedia.state.loadedSkin) { - Tankopedia.mutate((draft) => { - draft.skin = draft.loadedSkin; - }); - } }); return null; diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/TankModel.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/TankModel.tsx index 22b850f5b..718ca7bbd 100644 --- a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/TankModel.tsx +++ b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/TankModel.tsx @@ -1,5 +1,6 @@ import { invalidate, useThree, type ThreeEvent } from "@react-three/fiber"; -import { useRef } from "react"; +import type { QuicklimeEvent } from "quicklime"; +import { useEffect, useRef } from "react"; import { Group, Mesh, MeshStandardMaterial, Vector2 } from "three"; import { applyPitchYawLimits } from "../../../../../../core/blitz/applyPitchYawLimits"; import { hasEquipment } from "../../../../../../core/blitzkit/hasEquipment"; @@ -14,6 +15,7 @@ import { Duel } from "../../../../../../stores/duel"; import { Tankopedia } from "../../../../../../stores/tankopedia"; import { TankopediaDisplay } from "../../../../../../stores/tankopediaPersistent/constants"; import { ModelTankWrapper } from "../../../../../Armor/components/ModelTankWrapper"; +import { transitionEvent } from "./Lighting"; export function TankModel() { const protagonist = Duel.use((draft) => draft.protagonist); @@ -30,9 +32,45 @@ export function TankModel() { const { gltf } = useModel(protagonist.tank.id); const nodes = Object.values(gltf.nodes); const skinGltf = useSkin(protagonist.tank.id); + const attachmentGltf = useSkin(protagonist.tank.id, "attachment"); + const skins = [skinGltf, attachmentGltf].filter((skin) => skin !== undefined); useTankTransform(track, turret, turretContainer, gunContainer); + useEffect(() => { + const emissiveMaterials = new Set(); + + for (const scene of [gltf.scene, ...skins.map((skin) => skin.scene)]) { + scene.traverse((object) => { + if ( + object instanceof Mesh && + object.material instanceof MeshStandardMaterial && + object.material.emissiveMap + ) { + emissiveMaterials.add(object.material); + } + }); + } + + // emissive parts fade with the lights instead of glowing in the dark + function applyIntensity(intensity: number) { + for (const material of emissiveMaterials) { + material.emissiveIntensity = intensity; + } + } + + function handleTransitionEvent(event: QuicklimeEvent) { + applyIntensity(event.data); + } + + applyIntensity(transitionEvent.last!); + transitionEvent.on(handleTransitionEvent); + + return () => { + transitionEvent.off(handleTransitionEvent); + }; + }, [gltf, skinGltf, attachmentGltf]); + return ( {nodes.map((node) => { @@ -94,7 +132,7 @@ export function TankModel() { window.removeEventListener("pointerup", handlePointerUp); } - return skinTree(node, skinGltf, { + return skinTree(node, skins, { mesh(_, props, key) { return ( (null!); const isFullScreen = useFullScreen(); const protagonist = Duel.use((state) => state.protagonist.tank); - const modelRequested = Tankopedia.use((state) => state.modelRequested); + const modelRequested = Tankopedia.use( + (state) => state.loaders.model.requested, + ); const thicknessRange = useMemo(() => { const entries = Object.values(tankDefinitions.tanks); const filtered = entries.filter( diff --git a/packages/website/src/core/blitzkit/jsxTree.tsx b/packages/website/src/core/blitzkit/jsxTree.tsx index cac9d9385..9cf52a79b 100644 --- a/packages/website/src/core/blitzkit/jsxTree.tsx +++ b/packages/website/src/core/blitzkit/jsxTree.tsx @@ -1,5 +1,5 @@ import type { ComponentProps, ReactNode } from "react"; -import { Mesh, MeshStandardMaterial, Object3D } from "three"; +import { AdditiveBlending, Mesh, MeshStandardMaterial, Object3D } from "three"; export function jsxTree( node: Object3D, @@ -27,6 +27,10 @@ export function jsxTree( if (props.material instanceof MeshStandardMaterial) { props.material.depthWrite = true; + + if (props.material.userData.blending === "additive") { + props.material.blending = AdditiveBlending; + } } return mergers?.mesh ? ( diff --git a/packages/website/src/core/blitzkit/skinTree.tsx b/packages/website/src/core/blitzkit/skinTree.tsx index f22336518..5a2020be4 100644 --- a/packages/website/src/core/blitzkit/skinTree.tsx +++ b/packages/website/src/core/blitzkit/skinTree.tsx @@ -4,17 +4,56 @@ import { jsxTree } from "./jsxTree"; type Mergers = Parameters[1]; -export function skinTree( - node: Object3D, - skin: Skin | undefined, - mergers: Mergers, -) { - const skinNodes = new Map( - skin?.scene.children.map((node) => [node.name, node]), - ); +// names get sanitized and made unique on load +function nameOf(object3d: Object3D): string { + return object3d.userData.name ?? object3d.name; +} + +/** + * skins are layered in order, so an attachment's states win over the + * camouflage's + */ +export function skinTree(node: Object3D, skins: Skin[], mergers: Mergers) { + const skinNodes = new Map(); + const materials = new Map(); + const states: Record = {}; + + for (const skin of skins) { + for (const node of skin.scene.children) { + skinNodes.set(node.name, [...(skinNodes.get(node.name) ?? []), node]); + } + + for (const [name, material] of skin.materials) { + materials.set(name, material); + } + + Object.assign(states, skin.scene.userData.states); + } + + function switchChildren(object3d: Object3D, childMergers: Mergers) { + if (object3d.userData.state === undefined) return; + + const name = nameOf(object3d); + const state = name in states ? states[name] : object3d.userData.state; + + return object3d.children + .filter((child) => nameOf(child) === state) + .map((child) => jsxTree(child, childMergers)); + } + + const partMergers: Mergers = { + ...mergers, + group(object3d, props, key) { + return ( + + {switchChildren(object3d, partMergers) ?? props.children} + + ); + }, + }; const skinMergers: Mergers = { mesh(mesh, props, key) { - const material = skin?.materials.get((mesh.material as Material).name); + const material = materials.get((mesh.material as Material).name); return mergers!.mesh!( mesh, @@ -23,20 +62,14 @@ export function skinTree( ); }, 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; + const parts = skinNodes.get(object3d.name) ?? []; return ( - {isSwitch - ? object3d.children - .filter((child) => child.name === state) - .map((child) => jsxTree(child, skinMergers)) - : props.children} - {skinNode?.children.map((child) => jsxTree(child, mergers))} + {switchChildren(object3d, skinMergers) ?? props.children} + {parts.flatMap((part) => + part.children.map((child) => jsxTree(child, partMergers)), + )} ); }, diff --git a/packages/website/src/core/blitzkit/switcherStates.ts b/packages/website/src/core/blitzkit/switcherStates.ts new file mode 100644 index 000000000..568675946 --- /dev/null +++ b/packages/website/src/core/blitzkit/switcherStates.ts @@ -0,0 +1,255 @@ +import { parseHierarchies, type Sc2ReadStream } from "@blitzkit/core"; +import { times } from "lodash-es"; + +interface Value { + "any.type": string; + "any.value": unknown; +} + +interface ScriptNode { + type: string; + node: Record & { defaults?: Record }; + connections?: Record< + string, + { pinIn: string; pinOut: string; target: string } + >; +} + +interface Script { + nodes: Record; +} + +interface Action { + "act.delay": number; + "act.entityName": string; + "act.event": number; + "act.switchIndex": number; + "act.type": number; + "act.userEventId": string; +} + +interface Entity { + name: string; + parent?: Entity; + children: Entity[]; +} + +const SELF_ENTITY = "*** Self ***"; +const SCENE_LOADED_EVENT = 1; +const USER_EVENT = 2; +const SWITCH_ACTIONS = [8, 9]; +// what the game fires as a tank is shown in the garage, in order +const LOAD_EVENTS = ["Added", "TankAliveInHangar", "TankIsShownInNewScreen"]; +const MAX_DEPTH = 64; + +function findChild(entity: Entity, name: string): Entity | undefined { + for (const child of entity.children) { + if (child.name === name) return child; + + const found = findChild(child, name); + + if (found) return found; + } +} + +function resolveTarget(owner: Entity, entityName: string) { + if (entityName === SELF_ENTITY) return owner; + + const [first, ...rest] = entityName.split("->"); + let target: Entity | undefined; + + for ( + let ancestor: Entity | undefined = owner; + ancestor && !target; + ancestor = ancestor.parent + ) { + target = ancestor.name === first ? ancestor : findChild(ancestor, first); + } + + for (const name of rest) target = target && findChild(target, name); + + return target; +} + +/** + * replays what picks each state switcher's state as a tank is shown in the + * garage, with the camo's preset applied and its items attached; delayed + * actions are skipped so states stay as they are when the tank appears + */ +export function switcherStates( + sc2: ReturnType, + preset: string | undefined, + attachments: Map, +) { + const scripts: Record = {}; + const stateNames = new Map(); + const scenarios: { owner: Entity; script: Script }[] = []; + const actions: { owner: Entity; action: Action }[] = []; + const states: Record = {}; + + function activateState(entity: Entity | undefined, state: number) { + const names = entity && stateNames.get(entity); + + if (names) states[entity.name] = names[state] ?? null; + } + + for (const component of Object.values( + sc2["#sceneComponents"] as unknown as Record, + ) as { "comp.typename"?: string; "ssc.scripts"?: Record }[]) { + if (component?.["comp.typename"] !== "ScenarioSingletonComponent") continue; + + Object.assign(scripts, component["ssc.scripts"]); + } + + parseHierarchies( + sc2["#hierarchy"], + { name: "", children: [] }, + (hierarchy, components, parent) => { + const entity: Entity = { name: hierarchy.name, parent, children: [] }; + + parent.children.push(entity); + + for (const item of attachments.get(hierarchy.name) ?? []) { + entity.children.push({ name: item, parent: entity, children: [] }); + } + + for (const component of components) { + switch (component["comp.typename"]) { + case "StateSwitcherComponent": { + const names = times( + component["ssc.statesCount"], + (index) => component[`ssc.state${index}`], + ); + + stateNames.set(entity, names); + states[entity.name] = names[component["ssc.activeState"]] ?? null; + break; + } + + case "ScenarioComponent": { + const script = scripts[component["scenario.scriptId"]]; + + if (script) scenarios.push({ owner: entity, script }); + break; + } + + case "ActionComponent": + times(component["ac.actionCount"], (index) => { + actions.push({ + owner: entity, + action: component[index.toString().padStart(4, "0")] as Action, + }); + }); + break; + } + } + + return entity; + }, + ); + + function runScenario( + { owner, script }: (typeof scenarios)[number], + event: string, + ) { + const { nodes } = script; + const links = (id: string) => Object.values(nodes[id].connections ?? {}); + + function input(id: string, pin: string): unknown { + const link = links(id).find((link) => link.pinIn === pin); + + return link + ? output(link.target, link.pinOut) + : nodes[id].node.defaults?.[pin]?.["any.value"]; + } + + function output(id: string, pin: string): unknown { + const { type, node } = nodes[id]; + + switch (type) { + case "ScenarioSceneInfoNode": + return node["scenarioSceneInfoNode.infoKind"] === "GetCurrentEntity" + ? owner + : undefined; + + case "ScenarioGetMemberNode": + return node["scenarioGetMemberNode.fieldName"] === "parent" && + pin === "parent" + ? (input(id, "object") as Entity | undefined)?.parent + : undefined; + + case "ScenarioFunctionNode": + switch ( + `${node["scenarioFunctionNode.className"]}.${node["scenarioFunctionNode.functionName"]}` + ) { + case "Entity.FindChildByName": { + const entity = input(id, "entity") as Entity | undefined; + return entity && findChild(entity, input(id, "name") as string); + } + + case "TankComponent.GetAppliedSkinMaterialConfigName": + return preset; + + case "String.Compare": + return input(id, "1") === input(id, "2"); + } + } + } + + function execute(id: string, depth: number) { + if (depth > MAX_DEPTH) return; + + const { type, node } = nodes[id]; + let pin = "exit"; + + if (type === "ScenarioEventNode") { + pin = "event"; + } else if (type === "ScenarioBranchNode") { + pin = input(id, "condition") ? "true" : "false"; + } else if ( + node["scenarioFunctionNode.functionName"] === "ActivateState" + ) { + activateState( + input(id, "entity") as Entity | undefined, + Number(input(id, "state")), + ); + } + + for (const link of links(id)) { + if (link.pinIn === pin) execute(link.target, depth + 1); + } + } + + for (const id in nodes) { + const { type, node } = nodes[id]; + const name = + node["ScenarioEventNode.eventName"] === "Custom" + ? node.defaults?.["Event Name"]?.["any.value"] + : node["ScenarioEventNode.eventName"]; + + if (type === "ScenarioEventNode" && name === event) execute(id, 0); + } + } + + for (const event of LOAD_EVENTS) { + for (const { owner, action } of actions) { + if ( + action["act.delay"] === 0 && + SWITCH_ACTIONS.includes(action["act.type"]) && + (event === LOAD_EVENTS[0] + ? action["act.event"] === SCENE_LOADED_EVENT + : action["act.event"] === USER_EVENT && + action["act.userEventId"] === event) + ) { + activateState( + resolveTarget(owner, action["act.entityName"]), + action["act.switchIndex"], + ); + } + } + + for (const scenario of scenarios) runScenario(scenario, event); + } + + return states; +} diff --git a/packages/website/src/hooks/useSkin.ts b/packages/website/src/hooks/useSkin.ts index 6514d2482..d7421795c 100644 --- a/packages/website/src/hooks/useSkin.ts +++ b/packages/website/src/hooks/useSkin.ts @@ -18,7 +18,11 @@ async function loadSkin(path: string) { const materials: Material[] = await gltf.parser.getDependencies("material"); const skin = { scene: gltf.scene, - materials: new Map(materials.map((material) => [material.name, material])), + materials: new Map( + materials + .filter((material) => material.userData.camouflage) + .map((material) => [material.name, material]), + ), }; loadedSkins.set(path, skin); @@ -30,30 +34,29 @@ function skinPath(id: number, skin: number) { return alias("models_legendary", `/${id}/skins/${skin}.glb`); } -export function useSkin(id: number) { - const requestedSkin = Tankopedia.use((state) => state.requestedSkin); - const skin = Tankopedia.use((state) => state.skin); +// attachments load the same way as camouflages and can be shown with one +export function useSkin(id: number, loader: "skin" | "attachment" = "skin") { + const requested = Tankopedia.use((state) => state.loaders[loader].requested); + const loaded = Tankopedia.use((state) => state.loaders[loader].loaded); useEffect(() => { - const path = - requestedSkin === undefined ? undefined : skinPath(id, requestedSkin); + if (requested === Tankopedia.state.loaders[loader].loaded) return; + + const path = requested === undefined ? undefined : skinPath(id, requested); + const cached = path === undefined || loadedSkins.has(path); let settled = false; - if (path === undefined || loadedSkins.has(path)) { + if (!cached) { Tankopedia.mutate((draft) => { - draft.loadedSkin = requestedSkin; + draft.revealed = false; }); - return; + + if (!skins.has(path)) skins.set(path, loadSkin(path)); } - Tankopedia.mutate((draft) => { - draft.revealed = false; - }); - - if (!skins.has(path)) skins.set(path, loadSkin(path)); - + // swaps halfway through the lighting transition Promise.all([ - skins.get(path), + path && skins.get(path), new Promise((resolve) => setTimeout(resolve, TRANSITION_ANIMATION_TIME * 1e3), ), @@ -62,9 +65,8 @@ export function useSkin(id: number) { settled = true; Tankopedia.mutate((draft) => { - draft.loadedSkin = requestedSkin; - draft.skin = requestedSkin; - draft.revealed = true; + draft.loaders[loader].loaded = requested; + if (!cached) draft.revealed = true; }); }); @@ -72,11 +74,16 @@ export function useSkin(id: number) { if (settled) return; settled = true; + + if (cached) return; + Tankopedia.mutate((draft) => { draft.revealed = true; }); }; - }, [id, requestedSkin]); + }, [id, loader, requested]); - return skin === undefined ? undefined : loadedSkins.get(skinPath(id, skin)); + return loaded === undefined + ? undefined + : loadedSkins.get(skinPath(id, loaded)); } diff --git a/packages/website/src/pages/[...chunk_models_legendary]/[id]/skins/[skin].glb.ts b/packages/website/src/pages/[...chunk_models_legendary]/[id]/skins/[skin].glb.ts index 0d64498f4..ca5145d1b 100644 --- a/packages/website/src/pages/[...chunk_models_legendary]/[id]/skins/[skin].glb.ts +++ b/packages/website/src/pages/[...chunk_models_legendary]/[id]/skins/[skin].glb.ts @@ -7,6 +7,7 @@ import { } from "@blitzkit/core"; import { Document, + Material, Node, NodeIO, PropertyType, @@ -19,6 +20,7 @@ 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 { switcherStates } from "../../../../core/blitzkit/switcherStates"; import { vfs } from "../../../../core/blitzkit/vfs"; import { extractMaterials, @@ -67,8 +69,10 @@ export async function GET({ props }: APIContext<{ skin: number }>) { 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 { customEntities } = camouflagesYaml[key]; + const preset = + camouflagesYaml[key].preset ?? + camouflagesYaml[key].override?.[nation]?.override?.[tankKey]?.preset; const parameters = await vfs.yaml( `Data/3d/Tanks/Parameters/${nation}/${tankKey}.yaml`, ); @@ -88,7 +92,6 @@ export async function GET({ props }: APIContext<{ skin: number }>) { scale: Vector3Tuple; } > = {}; - const states: Record = {}; parseHierarchies(sc2["#hierarchy"], null, (hierarchy, components) => { for (const component of components) { @@ -111,43 +114,50 @@ export async function GET({ props }: APIContext<{ skin: number }>) { 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 attachments = new Map(); + + for (const name in customEntities) { + const slot = slots[name]; + + if (!slot) continue; + + attachments.set(slot.target, [ + ...(attachments.get(slot.target) ?? []), + customEntities[name].item, + ]); + } + + const states = switcherStates(sc2, preset, attachments); + + // attachments are layered over camouflages, so they only keep what they change + if (camouflagesXml.root.camouflages[key].kind === "customization") { + const baseline = switcherStates(sc2, preset, new Map()); + + for (const name in states) { + if (states[name] === baseline[name]) delete states[name]; + } + } const document = new Document(); - const scene = document.createScene().setExtras({ states }); + const scene = document.createScene(); const targets = new Map(); document.createBuffer(); - if (preset) await extractMaterials(document, sc2, basePath, preset); + if (preset) { + const materials = await extractMaterials(document, sc2, basePath, preset); + + // parts may share these names, so mark the ones that replace the tank's + for (const material of materials.values()) { + if (!(material instanceof Material)) continue; + + material.setExtras({ ...material.getExtras(), camouflage: true }); + } + } for (const name in customEntities) { const slot = slots[name]; @@ -163,6 +173,12 @@ export async function GET({ props }: APIContext<{ skin: number }>) { } const part = await extractModel(vfs, path, true); + const partSc2 = new Sc2ReadStream( + (await vfs.file(`Data/3d/${path}.sc2`)).buffer as ArrayBuffer, + ).sc2(); + + Object.assign(states, switcherStates(partSc2, preset, new Map())); + const map = mergeDocuments(document, part); const partScene = map.get(part.getRoot().listScenes()[0]) as Scene; const node = document @@ -186,6 +202,8 @@ export async function GET({ props }: APIContext<{ skin: number }>) { target.addChild(node); } + scene.setExtras({ states }); + applySkinNumber(document, SKIN_NUMBER); await document.transform( diff --git a/packages/website/src/pages/[...chunk_models_tanks]/[id]/model.glb.ts b/packages/website/src/pages/[...chunk_models_tanks]/[id]/model.glb.ts index c4f5a5392..d0b9d70ef 100644 --- a/packages/website/src/pages/[...chunk_models_tanks]/[id]/model.glb.ts +++ b/packages/website/src/pages/[...chunk_models_tanks]/[id]/model.glb.ts @@ -65,7 +65,13 @@ export async function GET({ props }: APIContext<{ id: number }>) { const ERROR_ON_UNKNOWN_COMPONENT = false; const omitMeshNames = { - start: ["chassis_chassis_", "chassis_track_crash_", "HP_"], + start: [ + "chassis_chassis_", + "chassis_track_crash_", + "HP_", + // mastery marks a new tank doesn't have yet + "custom_gun_marks_", + ], end: ["_POINT"], }; @@ -132,7 +138,8 @@ export async function extractModel( times(renderObject["ro.batchCount"], (batchIndex): void => { const lodIndex = renderObject[`rb${batchIndex}.lodIndex`]; - if (lodIndex !== 0) return; + // -1 means the batch has no lods and is always drawn + if (lodIndex !== 0 && !(isPart && lodIndex === -1)) return; const batchKey = batchIndex.toString().padStart(4, "0"); const batch = renderObject["ro.batches"][batchKey]; @@ -345,6 +352,27 @@ export async function extractMaterials( } } + const enabledPresets = + node.enabledPresets ?? defaultConfigArchive?.enabledPresets; + const fxName = node.fxName ?? defaultConfigArchive?.fxName; + + if (enabledPresets?.AlphaBlend || enabledPresets?.AlphaBlendAdditive) { + material.setAlphaMode("BLEND"); + } + + if (enabledPresets?.AlphaBlendAdditive) { + // gltf has no additive blending so the viewer applies it + material.setExtras({ blending: "additive" }); + } + + if (fxName?.endsWith("/Textured.material")) { + // unlit in game, emissive so the viewer can fade it with the lights + material + .setEmissiveTexture(material.getBaseColorTexture()) + .setEmissiveFactor([1, 1, 1]) + .setBaseColorFactor([0, 0, 0, 1]); + } + if (textures.miscMap) { material.setOcclusionTexture( document diff --git a/packages/website/src/stores/tankopedia.ts b/packages/website/src/stores/tankopedia.ts index 04a11ee78..a3723796c 100644 --- a/packages/website/src/stores/tankopedia.ts +++ b/packages/website/src/stores/tankopedia.ts @@ -78,10 +78,19 @@ export enum TankopediaRelativeAgainst { All, } +interface LoaderState { + requested: Type; + loaded: Type; +} + interface Tankopedia { disturbed: boolean; revealed: boolean; - modelRequested: boolean; + loaders: { + model: LoaderState; + skin: LoaderState; + attachment: LoaderState; + }; shot?: Shot; skills: Record; relativeAgainst: TankopediaRelativeAgainst; @@ -103,9 +112,6 @@ interface Tankopedia { ); xpMultiplier: (typeof XP_MULTIPLIERS)[number]; customShell?: ShellDefinition; - requestedSkin?: number; - loadedSkin?: number; - skin?: number; requestedDisplay: TankopediaDisplay; display: TankopediaDisplay; statSearch?: string; @@ -116,7 +122,11 @@ const skillDefinitions = await api.skillDefinitions(); export const Tankopedia = new Varuna((model) => ({ disturbed: false, revealed: false, - modelRequested: App.state.autoLoadModels, + loaders: { + model: { requested: App.state.autoLoadModels, loaded: false }, + skin: { requested: undefined, loaded: undefined }, + attachment: { requested: undefined, loaded: undefined }, + }, relativeAgainst: TankopediaRelativeAgainst.Class, editStatic: false, skills: createDefaultSkills(skillDefinitions),