feat: rewrite some systems

packages/scripts/src/buildAssets/tankModels.ts

@@ -1,11 +1,10 @@
 import { toUniqueId } from "@blitzkit/core";
 import { NodeIO } from "@gltf-transform/core";
 import { ALL_EXTENSIONS } from "@gltf-transform/extensions";
-import { readdir } from "fs/promises";
+import { readdir, writeFile } from "fs/promises";
 import { extractModel } from "../core/blitz/extractModel";
 import { readXMLDVPL } from "../core/blitz/readXMLDVPL";
 import { readYAMLDVPL } from "../core/blitz/readYAMLDVPL";
-import { commitAssets } from "../core/github/commitAssets";
 import { FileChange } from "../core/github/commitMultipleFiles";
 import { DATA } from "./constants";
 import { VehicleDefinitionList } from "./definitions";
@@ -37,6 +36,8 @@ export async function tankModels() {
 
       const id = toUniqueId(nation, tank.id);
 
+      if (id !== 5681) continue;
+
       const parameters = await readYAMLDVPL<TankParameters>(
         `${DATA}/3d/Tanks/Parameters/${nation}/${tankKey}.yaml`
       );
@@ -44,13 +45,16 @@ export async function tankModels() {
         DATA,
         parameters.resourcesPath.blitzModelPath.replace(/\.sc2$/, "")
       );
+      const content = Buffer.from(await nodeIO.writeBinary(model));
 
-      changes.push({
+      changes.push({ path: `3d/tanks/models/${id}.glb`, content });
-        path: `3d/tanks/models/${id}.glb`,
+
-        content: Buffer.from(await nodeIO.writeBinary(model)),
+      await writeFile(
-      });
+        "C:/Projects/blitzkit/packages/website/public/test.glb",
+        content
+      );
     }
 
-    await commitAssets(`tank models ${nation}`, changes);
+    // await commitAssets(`tank models ${nation}`, changes);
   }
 }

packages/scripts/src/core/blitz/extractModel/constants.ts

@@ -1,13 +1,13 @@
-import { VertexAttribute, vertexAttributeVectorSizes } from '@blitzkit/core';
+import { VertexAttribute, vertexAttributeVectorSizes } from "@blitzkit/core";
 
 export const vertexAttributeGLTFName: Partial<Record<VertexAttribute, string>> =
   {
-    [VertexAttribute.VERTEX]: 'POSITION',
+    [VertexAttribute.VERTEX]: "POSITION",
-    [VertexAttribute.NORMAL]: 'NORMAL',
+    [VertexAttribute.NORMAL]: "NORMAL",
-    [VertexAttribute.TEXCOORD0]: 'TEXCOORD_0',
+    [VertexAttribute.TEXCOORD0]: "TEXCOORD_0",
-    [VertexAttribute.TEXCOORD1]: 'TEXCOORD_0',
+    [VertexAttribute.TEXCOORD1]: "TEXCOORD_1",
-    [VertexAttribute.TEXCOORD2]: 'TEXCOORD_0',
+    [VertexAttribute.TEXCOORD2]: "TEXCOORD_2",
-    [VertexAttribute.TEXCOORD3]: 'TEXCOORD_0',
+    [VertexAttribute.TEXCOORD3]: "TEXCOORD_3",
   };
 export const vertexAttributeGltfVectorSizes = {
   ...vertexAttributeVectorSizes,

packages/scripts/src/core/blitz/extractModel/index.ts

@@ -9,9 +9,11 @@ import { Document, Material, Node, Scene } from "@gltf-transform/core";
 import { dedup, prune } from "@gltf-transform/functions";
 import { times } from "lodash-es";
 import { dirname } from "path";
+import { readBaseColor } from "../readBaseColor";
 import { readDVPLFile } from "../readDVPLFile";
-import { readTexture } from "../readTexture";
+import { readNormal } from "../readNormal";
-import { TextureMutation } from "../readTexture/constants";
+import { readOcclusion } from "../readOcclusion";
+import { readRoughnessMetallic } from "../readRoughnessMetallic";
 import {
   vertexAttributeGLTFName,
   vertexAttributeGltfVectorSizes,
@@ -67,9 +69,8 @@ export async function extractModel(data: string, path: string) {
             .createTexture(node.materialName)
             .setMimeType("image/jpeg")
             .setImage(
-              await readTexture(
+              await readBaseColor(
-                `${data}/3d/${dirname(path)}/${textures.baseColorMap ?? textures.albedo}`,
+                `${data}/3d/${dirname(path)}/${textures.baseColorMap ?? textures.albedo}`
-                TextureMutation.Albedo
               )
             )
         );
@@ -80,9 +81,21 @@ export async function extractModel(data: string, path: string) {
               .createTexture(node.materialName)
               .setMimeType("image/jpeg")
               .setImage(
-                await readTexture(
+                await readRoughnessMetallic(
-                  `${data}/3d/${dirname(path)}/${textures.baseRMMap}`,
+                  `${data}/3d/${dirname(path)}/${textures.baseRMMap}`
-                  TextureMutation.RoughnessMetallicness
+                )
+              )
+          );
+        }
+
+        if (textures.miscMap) {
+          material.setOcclusionTexture(
+            document
+              .createTexture(node.materialName)
+              .setMimeType("image/jpeg")
+              .setImage(
+                await readOcclusion(
+                  `${data}/3d/${dirname(path)}/${textures.miscMap}`
                 )
               )
           );
@@ -96,25 +109,11 @@ export async function extractModel(data: string, path: string) {
               .createTexture(node.materialName)
               .setMimeType("image/jpeg")
               .setImage(
-                await readTexture(
+                await readNormal(
                   `${data}/3d/${dirname(path)}/${
                     textures.baseNormalMap ?? textures.normalmap
                   }`,
-                  isBase ? TextureMutation.Normal : undefined
+                  isBase
-                )
-              )
-          );
-        }
-
-        if (textures.miscMap) {
-          material.setOcclusionTexture(
-            document
-              .createTexture(node.materialName)
-              .setMimeType("image/jpeg")
-              .setImage(
-                await readTexture(
-                  `${data}/3d/${dirname(path)}/${textures.miscMap}`,
-                  TextureMutation.Miscellaneous
                 )
               )
           );
@@ -237,6 +236,10 @@ export async function extractModel(data: string, path: string) {
                   .setBuffer(buffer);
 
                 primitive.setAttribute(name, attributeAccessor);
+
+                if (attribute === VertexAttribute.TEXCOORD0) {
+                  primitive.setAttribute("TEXCOORD_2", attributeAccessor);
+                }
               });
 
               const mesh = document

packages/scripts/src/core/blitz/readBaseColor.ts

@@ -0,0 +1,7 @@
+import sharp from "sharp";
+import { readTexture } from "./readTexture";
+
+export async function readBaseColor(path: string) {
+  const raw = await readTexture(path);
+  return await sharp(raw.data, { raw }).removeAlpha().jpeg().toBuffer();
+}

packages/scripts/src/core/blitz/readNormal.ts

@@ -0,0 +1,30 @@
+import sharp from "sharp";
+import { readTexture } from "./readTexture";
+
+export async function readNormal(path: string, isBase: boolean) {
+  const raw = await readTexture(path);
+
+  if (!isBase) {
+    return await sharp(raw.data, { raw }).removeAlpha().jpeg().toBuffer();
+  }
+
+  const bytes = 4 * raw.width * raw.height;
+
+  for (let index = 0; index < bytes; index += 4) {
+    /**
+     * Red is always 255 and blue is always 0. Only alpha and green contain any
+     * sort of information.
+     */
+    let x = raw.data[index + 3] * (2 / 255) - 1;
+    let y = raw.data[index + 1] * (2 / 255) - 1;
+    const underSqrt = 1 - x ** 2 - y ** 2;
+    let z = underSqrt > 0 ? Math.sqrt(underSqrt) : -Math.sqrt(-underSqrt);
+
+    raw.data[index] = Math.round((x + 1) * (255 / 2));
+    raw.data[index + 1] = Math.round((y + 1) * (255 / 2));
+    raw.data[index + 2] = Math.round((z + 1) * (255 / 2));
+    raw.data[index + 3] = 255;
+  }
+
+  return await sharp(raw.data, { raw }).jpeg().toBuffer();
+}

packages/scripts/src/core/blitz/readOcclusion.ts

@@ -0,0 +1,25 @@
+import { writeFile } from "fs/promises";
+import sharp from "sharp";
+import { readTexture } from "./readTexture";
+
+export async function readOcclusion(path: string) {
+  const raw = await readTexture(path);
+  const blitz = sharp(raw.data, { raw: raw });
+  const occlusion = await blitz?.extractChannel(3).raw().toBuffer();
+
+  const combined = Buffer.alloc(raw.width * raw.height * 3);
+
+  for (let i = 0; i < raw.width * raw.height; i++) {
+    combined[i * 3 + 0] = occlusion?.[i] ?? 0;
+  }
+
+  const image = await sharp(combined, {
+    raw: { width: raw.width, height: raw.height, channels: 3 },
+  })
+    .jpeg()
+    .toBuffer();
+
+  writeFile("test.ao.jpg", image);
+
+  return image;
+}

packages/scripts/src/core/blitz/readRoughnessMetallic.ts

@@ -0,0 +1,27 @@
+import { writeFile } from "fs/promises";
+import sharp from "sharp";
+import { readTexture } from "./readTexture";
+
+export async function readRoughnessMetallic(path: string) {
+  const raw = await readTexture(path);
+  const blitz = sharp(raw.data, { raw: raw });
+  const metallicness = await blitz?.extractChannel(1).raw().toBuffer();
+  const roughness = await blitz?.extractChannel(3).raw().toBuffer();
+
+  const combined = Buffer.alloc(raw.width * raw.height * 3);
+
+  for (let i = 0; i < raw.width * raw.height; i++) {
+    combined[i * 3 + 1] = roughness?.[i] ?? 0;
+    combined[i * 3 + 2] = metallicness?.[i] ?? 0;
+  }
+
+  const image = await sharp(combined, {
+    raw: { width: raw.width, height: raw.height, channels: 3 },
+  })
+    .jpeg()
+    .toBuffer();
+
+  writeFile("test.rm.jpg", image);
+
+  return image;
+}

packages/scripts/src/core/blitz/readTexture/index.ts

@@ -1,81 +1,83 @@
-import { DdsReadStream, PvrReadStream } from '@blitzkit/core';
+import { DdsReadStream, PvrReadStream } from "@blitzkit/core";
-import { existsSync } from 'fs';
+import { existsSync } from "fs";
-import sharp from 'sharp';
+import sharp from "sharp";
-import { DATA_COMPRESSED } from '../../../buildAssets/constants';
+import { DATA_COMPRESSED } from "../../../buildAssets/constants";
-import { readDVPLFile } from '../readDVPLFile';
+import { readDVPLFile } from "../readDVPLFile";
-import { TextureMutation } from './constants';
+import { TextureMutation } from "./constants";
 
-export async function readTexture(path: string, mutation?: TextureMutation) {
+export async function readTexture(path: string) {
-  const ddsTexturePath = path.replace('.tex', '.dx11.dds');
+  const ddsTexturePath = path.replace(".tex", ".dx11.dds");
   const isDds = existsSync(
-    `${ddsTexturePath}${DATA_COMPRESSED ? '.dvpl' : ''}`,
+    `${ddsTexturePath}${DATA_COMPRESSED ? ".dvpl" : ""}`
   );
   const resolvedTexturePath = isDds
     ? ddsTexturePath
-    : ddsTexturePath.replace('.dds', '.pvr');
+    : ddsTexturePath.replace(".dds", ".pvr");
   const decompressedDvpl = await readDVPLFile(`${resolvedTexturePath}.dvpl`);
 
   const raw = isDds
     ? await new DdsReadStream(decompressedDvpl.buffer as ArrayBuffer).dds()
     : new PvrReadStream(decompressedDvpl.buffer as ArrayBuffer).pvr();
 
-  switch (mutation) {
+  return raw;
-    case TextureMutation.Normal: {
-      const bytes = 4 * raw.width * raw.height;
-      for (let index = 0; index < bytes; index += 4) {
-        /**
-         * Red is always 255 and blue is always 0. Only alpha and green contain any
-         * sort of information.
-         */
-        let x = raw.data[index + 3] * (2 / 255) - 1;
-        let y = raw.data[index + 1] * (2 / 255) - 1;
-        const underSqrt = 1 - x ** 2 - y ** 2;
-        let z = underSqrt > 0 ? Math.sqrt(underSqrt) : -Math.sqrt(-underSqrt);
 
-        raw.data[index] = Math.round((x + 1) * (255 / 2));
+  // switch (mutation) {
-        raw.data[index + 1] = Math.round((y + 1) * (255 / 2));
+  //   case TextureMutation.Normal: {
-        raw.data[index + 2] = Math.round((z + 1) * (255 / 2));
+  //     const bytes = 4 * raw.width * raw.height;
-        raw.data[index + 3] = 255;
+  //     for (let index = 0; index < bytes; index += 4) {
-      }
+  //       /**
+  //        * Red is always 255 and blue is always 0. Only alpha and green contain any
+  //        * sort of information.
+  //        */
+  //       let x = raw.data[index + 3] * (2 / 255) - 1;
+  //       let y = raw.data[index + 1] * (2 / 255) - 1;
+  //       const underSqrt = 1 - x ** 2 - y ** 2;
+  //       let z = underSqrt > 0 ? Math.sqrt(underSqrt) : -Math.sqrt(-underSqrt);
 
-      return await sharp(raw.data, { raw }).jpeg().toBuffer();
+  //       raw.data[index] = Math.round((x + 1) * (255 / 2));
-    }
+  //       raw.data[index + 1] = Math.round((y + 1) * (255 / 2));
+  //       raw.data[index + 2] = Math.round((z + 1) * (255 / 2));
+  //       raw.data[index + 3] = 255;
+  //     }
 
-    case TextureMutation.RoughnessMetallicness: {
+  //     return await sharp(raw.data, { raw }).jpeg().toBuffer();
-      const newImage = sharp(Buffer.alloc(raw.width * raw.height), {
+  //   }
-        raw: { ...raw, channels: 1 },
-      });
-      const metallicness = sharp(raw.data, { raw })
-        .extractChannel('green')
-        .jpeg()
-        .toBuffer();
-      const roughness = sharp(raw.data, { raw })
-        .extractChannel('alpha')
-        .jpeg()
-        .toBuffer();
 
-      return await newImage
+  //   case TextureMutation.RoughnessMetallicness: {
-        .joinChannel(await Promise.all([roughness, metallicness]))
+  //     const newImage = sharp(Buffer.alloc(raw.width * raw.height), {
-        .jpeg()
+  //       raw: { ...raw, channels: 1 },
-        .toBuffer();
+  //     });
-    }
+  //     const metallicness = sharp(raw.data, { raw })
+  //       .extractChannel("green")
+  //       .jpeg()
+  //       .toBuffer();
+  //     const roughness = sharp(raw.data, { raw })
+  //       .extractChannel("alpha")
+  //       .jpeg()
+  //       .toBuffer();
 
-    case TextureMutation.Miscellaneous: {
+  //     return await newImage
-      /**
+  //       .joinChannel(await Promise.all([roughness, metallicness]))
-       * Alpha is ambient occlusion and green is emissive. But very few tanks
+  //       .jpeg()
-       * use emissive so I am ignoring it for now.
+  //       .toBuffer();
-       */
+  //   }
-      return await sharp(raw.data, { raw })
-        .extractChannel('alpha')
-        .jpeg()
-        .toBuffer();
-    }
 
-    case TextureMutation.Albedo: {
+  //   case TextureMutation.Miscellaneous: {
-      return await sharp(raw.data, { raw }).removeAlpha().jpeg().toBuffer();
+  //     /**
-    }
+  //      * Alpha is ambient occlusion and green is emissive. But very few tanks
+  //      * use emissive so I am ignoring it for now.
+  //      */
+  //     return await sharp(raw.data, { raw })
+  //       .extractChannel("alpha")
+  //       .jpeg()
+  //       .toBuffer();
+  //   }
 
-    default:
+  //   case TextureMutation.Albedo: {
-      return await sharp(raw.data, { raw }).jpeg().toBuffer();
+  //     return await sharp(raw.data, { raw }).removeAlpha().jpeg().toBuffer();
-  }
+  //   }
+
+  //   default:
+  //     return await sharp(raw.data, { raw }).jpeg().toBuffer();
+  // }
 }

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

@@ -64,7 +64,7 @@ export function Lighting() {
             position={position}
             intensity={INTENSITY}
             penumbra={1}
-            castShadow={cast}
+            // castShadow={cast}
             decay={1}
             color={color}
           />

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

@@ -28,6 +28,13 @@ export function TankModel() {
   const { gltf } = useModel(protagonist.tank.id);
   const nodes = Object.values(gltf.nodes);
 
+  nodes.forEach((n) => {
+    if (n instanceof Mesh && n.material instanceof MeshStandardMaterial) {
+      n.material.aoMapIntensity = 10;
+      console.log(n.geometry.attributes);
+    }
+  });
+
   useTankTransform(track, turret, turretContainer, gunContainer);
 
   return (

packages/website/src/hooks/useModel.ts

@@ -1,7 +1,6 @@
-import { asset } from '@blitzkit/core';
+import { type ObjectMap, useLoader } from "@react-three/fiber";
-import { type ObjectMap, useLoader } from '@react-three/fiber';
+import { Mesh, MeshStandardMaterial } from "three";
-import { Mesh, MeshStandardMaterial } from 'three';
+import { type GLTF, GLTFLoader } from "three-stdlib";
-import { type GLTF, GLTFLoader } from 'three-stdlib';
 
 const cache: Record<
   number,
@@ -12,7 +11,8 @@ const cache: Record<
 > = {};
 
 export function useModel(id: number) {
-  const gltf = useLoader(GLTFLoader, asset(`3d/tanks/models/${id}.glb`));
+  // const gltf = useLoader(GLTFLoader, asset(`3d/tanks/models/${id}.glb`));
+  const gltf = useLoader(GLTFLoader, `/test.glb`);
 
   if (!cache[id]) {
     cache[id] = {
@@ -21,7 +21,7 @@ export function useModel(id: number) {
         (node) =>
           node instanceof Mesh &&
           node.material instanceof MeshStandardMaterial &&
-          node.material.roughnessMap !== null,
+          node.material.roughnessMap !== null
       ),
     };
   }