refactor: optimize initial load

Author: alexpineda

.gitattributes

@@ -6,3 +6,9 @@ bundled/battlecruiser.glb filter=lfs diff=lfs merge=lfs -text
 bundled/asteroid.glb filter=lfs diff=lfs merge=lfs -text
 bundled/FireBall03_8x8.exr filter=lfs diff=lfs merge=lfs -text
 bundled/remix.ogg filter=lfs diff=lfs merge=lfs -text
+bundled/basis/basis_transcoder.js filter=lfs diff=lfs merge=lfs -text
+bundled/basis/basis_transcoder.wasm filter=lfs diff=lfs merge=lfs -text
+src/renderer/image/formats/mesh-opt-decoder.ts filter=lfs diff=lfs merge=lfs -text
+bundled/_ast.glb filter=lfs diff=lfs merge=lfs -text
+bundled/_bc.glb filter=lfs diff=lfs merge=lfs -text
+bundled/_w.glb filter=lfs diff=lfs merge=lfs -text

bundled/_ast.glb

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5b6ad15e5051930f9880c2ef3b10552782f952f4950270502ddc9857c370e3d3
+size 567260

bundled/_bc.glb

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7fedc4095c8b20eb959d2b0dde16243b9f611eb4a2c4c5d5a1803b26874c4d3e
+size 2117068

bundled/_w.glb

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2d29410378a4ca2058a9acd9b81bc1ba3a29a1b15f39ddf50eb688b22b8401f5
+size 1899352

bundled/asteroid.glb

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:48a0ef319a28bf0224ee88ded34f74eaf97c175bba9eb18b47fb9720510ad6c4
+size 62337

bundled/basis/basis_transcoder.js

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:79ae97d781e10a566659c689b7bb1de91726453f55f9f5e3bcc07a4e3904070f
+size 499935

bundled/basis/basis_transcoder.wasm

@@ -1,9 +1,8 @@
-import path from "path";
 import { FileLoader, ImageLoader } from "three";
 
 function createElementNS(name: string) {
 
-  return document.createElementNS('http://www.w3.org/1999/xhtml', name);
+  return document.createElementNS("http://www.w3.org/1999/xhtml", name);
 
 }
 
@@ -14,8 +13,9 @@ type LoadingCallbacks = {
 };
 const loading: Record<string, LoadingCallbacks[]> = {};
 
-export default (openFile: (file: string) => Promise<Buffer>) => {
+export default (openFile: (file: string, path: string) => Promise<ArrayBuffer | string>) => {
   FileLoader.prototype.load = function (url, onLoad, onProgress, onError) {
+
     if (loading[url] !== undefined) {
       loading[url].push({
         onLoad: onLoad,
@@ -40,11 +40,11 @@ export default (openFile: (file: string) => Promise<Buffer>) => {
 
     this.manager.itemStart(url);
 
-    openFile(url)
-      .then((buf) => {
+    openFile(url, this.path)
+      .then((result) => {
         for (let i = 0, il = callbacks.length; i < il; i++) {
           const callback = callbacks[i];
-          if (callback.onLoad) callback.onLoad(buf.buffer);
+          if (callback.onLoad) callback.onLoad(result);
         }
 
         this.manager.itemEnd(url);
@@ -64,19 +64,17 @@ export default (openFile: (file: string) => Promise<Buffer>) => {
 
   ImageLoader.prototype.load = function (url, onLoad) {
 
-    const image = createElementNS('img') as HTMLImageElement;
+    const image = createElementNS("img") as HTMLImageElement;
 
     function onImageLoad() {
-      image.removeEventListener('load', onImageLoad, false);
+      image.removeEventListener("load", onImageLoad, false);
       onLoad && onLoad(image);
     }
 
-    image.addEventListener('load', onImageLoad, false);
+    image.addEventListener("load", onImageLoad, false);
 
-    openFile(path.join(this.path, url)).then(buf => `data:image/png;base64,${(
-      buf
-    ).toString("base64")}`).then(src => {
-      image.src = src;
+    openFile(url, this.path).then(result => new Blob([result], { type: "octet/stream" })).then(blob => {
+      image.src = URL.createObjectURL(blob);
     })
 
     return image;

bundled/battlecruiser.glb

@@ -414,14 +414,6 @@ export class PlayerInfo {
   }
 }
 
-function blobToBase64(blob: Blob): Promise<string> {
-  return new Promise((resolve, _) => {
-    const reader = new FileReader();
-    reader.onloadend = () => resolve(reader.result as string);
-    reader.readAsDataURL(blob);
-  });
-}
-
 const playerInfo = new PlayerInfo();
 const getPlayerInfo = (
   playerId: number,

bundled/wraith.glb

@@ -1,56 +1,54 @@
-import { Audio, AudioListener, AudioLoader } from "three";
+import { mixer } from "@core/global";
+import { Audio, AudioListener } from "three";
 const rand = (n: number) => Math.floor(Math.random() * n);
 
 export class Music {
-  audio: Audio;
+  #audio: Audio;
   races = ["terran", "zerg", "protoss"];
 
   constructor(listener: AudioListener) {
-    this.audio = new Audio(listener);
+    this.#audio = new Audio(listener);
   }
 
   getAudio() {
-    return this.audio;
+    return this.#audio;
   }
 
   playGame() {
-    if (!this.audio) return;
-    this.audio.onEnded = this.playGame.bind(this);
-    this._play(
+    if (!this.#audio) return;
+    this.#audio.onEnded = this.playGame.bind(this);
+    this.#play(
       `music/${this.races[rand(this.races.length)]}${rand(4) + 1}.ogg`
     );
   }
 
   playMenu() {
     const race = ["t", "z", "p"];
-    this.audio.onEnded = this.playMenu.bind(this);
-    this._play(race[rand(2)] + "rdyroom.ogg");
+    this.#audio.onEnded = this.playMenu.bind(this);
+    this.#play(race[rand(2)] + "rdyroom.ogg");
   }
 
-  _play(filepath: string) {
+  async #play(filepath: string) {
 
-    const audioLoader = new AudioLoader();
-
-    const { audio } = this;
-    if (audio.isPlaying) {
-      audio.stop();
+    if (this.#audio.isPlaying) {
+      this.#audio.stop();
     }
 
-    audioLoader.load(filepath, function (buffer) {
-      audio.setBuffer(buffer);
-      audio.play();
-    });
+    const buffer = await mixer.loadAudioBuffer(`casc:${filepath}`);
+
+    this.#audio.setBuffer(buffer);
+    this.#audio.play();
 
   }
 
   stop() {
-    this.audio.stop();
+    this.#audio.stop();
   }
 
   dispose() {
-    if (this.audio && this.audio.isPlaying) {
-      this.audio.stop();
+    if (this.#audio && this.#audio.isPlaying) {
+      this.#audio.stop();
     }
-    this.audio.disconnect();
+    this.#audio.disconnect();
   }
 }

src/common/utils/electron-file-loader.ts

@@ -146,10 +146,9 @@ export const getJanitorLogLevel = () => {
     switch (settingsStore().data.utilities.logLevel) {
         case "debug":
             return JanitorLogLevel.Debug;
-        case "info":
-            return JanitorLogLevel.Info;
         case "warn":
         case "error":
+            return JanitorLogLevel.Info;
     }
 
     return JanitorLogLevel.None;

src/main/plugins/runtime.tsx

@@ -21,6 +21,8 @@ import { settingsStore } from "@stores/settings-store";
 import { modelSetFileRefIds } from "@core/model-effects-configuration";
 import { renderComposer } from "@render/render-composer";
 import { loadDatFilesRemote } from "@ipc/files";
+import { parseDDS } from "./formats/parse-dds";
+import { b2ba } from "@utils/bin-utils";
 
 if (module.hot) {
     module.hot.accept("@core/model-effects-configuration")
@@ -40,31 +42,39 @@ const setHDMipMaps = (hd: AnimAtlas, hd2: AnimAtlas) => {
 
 export type Assets = Awaited<ReturnType<typeof initializeAssets>> & {
     envMap?: Texture,
-    bwDat: BwDAT
-} & Awaited<ReturnType<typeof generateAllIcons>>;
+    bwDat: BwDAT;
+    wireframeIcons?: Blob[],
+} & Partial<Awaited<ReturnType<typeof generateAllIcons>>>;
 
 export type UIStateAssets = Pick<Assets, "bwDat" | "gameIcons" | "cmdIcons" | "raceInsetIcons" | "workerIcons" | "wireframeIcons">;
 
+const _hardfiles = [".glb", ".hdr", ".png", ".exr", ".js", ".wasm"];
+
 export const initializeAssets = async (directories: Settings["directories"]) => {
 
-    electronFileLoader((file: string) => {
+    electronFileLoader((file: string, directory: string) => {
+
         log.debug(file);
 
-        if (file.includes(".glb") || file.includes(".hdr") || file.includes(".png") || file.includes(".exr")) {
-            return fsPromises.readFile(file);
+        if (file.startsWith("blob:")) {
+
+            return fetch(file).then(r => r.arrayBuffer());
+        }
+        if (_hardfiles.some((ext) => file.endsWith(ext))) {
+
+            const fullPath = path.join(directory ?? "", file);
+            return file.endsWith(".js") ? fsPromises.readFile(fullPath, { encoding: "utf-8" }) : fsPromises.readFile(fullPath).then(buffer => buffer.buffer);
+
         } else {
+
             return readCascFile(file);
+
         }
+
     });
 
     await openCascStorage(directories.starcraft);
 
-    loadDatFilesRemote().then(dat => {
-        setAsset("bwDat", dat);
-        // preload some assets that will not be loaded otherwise?
-        loadImageAtlas(imageTypes.warpInFlash, dat);
-    })
-
     log.debug("@load-assets/images");
     const sdAnimBuf = await readCascFile("SD/mainSD.anim");
     const sdAnim = parseAnim(sdAnimBuf);
@@ -83,33 +93,22 @@ export const initializeAssets = async (directories: Settings["directories"]) =>
     }
 
     const minimapConsole = {
-        clock: createDDSTexture(await readCascFile("game/observer/UIObserverSquareRight.DDS")),
-        square: createDDSTexture(await readCascFile("game/observer/UIObserverSquareFull.DDS")),
+        clock: createDDSTexture(parseDDS(b2ba(await readCascFile("game/observer/UIObserverSquareRight.DDS")))),
+        square: createDDSTexture(parseDDS(b2ba(await readCascFile("game/observer/UIObserverSquareFull.DDS")))),
     }
 
-    log.debug("@load-assets/envmap");
     const envEXRAssetFilename = path.join(
         directories.assets,
         "envmap.exr"
     )
     const envMapFilename = await fileExists(envEXRAssetFilename) ? envEXRAssetFilename : path.join(__static, "./envmap.hdr")
+    log.debug(`@load-assets/envmap: ${envMapFilename}`);
     loadEnvironmentMap(envMapFilename).then(tex => {
         setAsset("envMap", tex);
-
+        renderComposer.getWebGLRenderer().initTexture(tex);
     });
 
-    generateAllIcons(readCascFile).then(icons => {
-
-        setAsset("gameIcons", icons.gameIcons);
-        setAsset("cmdIcons", icons.cmdIcons);
-        setAsset("raceInsetIcons", icons.raceInsetIcons);
-        setAsset("workerIcons", icons.workerIcons);
-        setAsset("wireframeIcons", icons.wireframeIcons);
-        setAsset("arrowIconsGPU", icons.arrowIconsGPU);
-        setAsset("hoverIconsGPU", icons.hoverIconsGPU);
-        setAsset("dragIconsGPU", icons.dragIconsGPU);
-
-    });
+    const someIcons = await generateAllIcons(readCascFile);
 
     const refId = (id: number) => {
         if (sdAnim?.[id]?.refId !== undefined) {
@@ -141,10 +140,6 @@ export const initializeAssets = async (directories: Settings["directories"]) =>
         const glbRefImageId = modelSetFileRefIds.get(refImageId) ?? refImageId
         const settings = settingsStore().data.graphics.useHD2 as "auto" | "ignore" | "force";
 
-        if (imageId === imageTypes.warpInFlash) {
-            console.log(imageId, refImageId);
-        }
-
         let res = UnitTileScale.HD2;
         if (loadingHD.has(refImageId)) {
 
@@ -218,8 +213,6 @@ export const initializeAssets = async (directories: Settings["directories"]) =>
 
     }
 
-
-
     log.debug("@load-assets/skybox");
     const loader = new CubeTextureLoader();
     const rootPath = path.join(__static, "/skybox/sparse");
@@ -236,8 +229,15 @@ export const initializeAssets = async (directories: Settings["directories"]) =>
         "back.png",
     ], res)) as CubeTexture;
 
+    loadDatFilesRemote().then(dat => {
+        setAsset("bwDat", dat);
+        // preload some assets that will not be loaded otherwise?
+        loadImageAtlas(imageTypes.warpInFlash, dat);
+    })
+
     const r = {
-        remaining: 10,
+        remaining: 3,
+        ...someIcons,
         atlases,
         selectionCircles: selectionCirclesHD,
         minimapConsole,

src/renderer/audio/music.ts

@@ -3,6 +3,7 @@ import { AnimDds, AnimAtlas, UnitTileScale } from "common/types";
 import { parseAnim, createDDSTexture } from "../formats";
 import { LinearEncoding, TextureEncoding } from "three";
 import { Janitor } from "three-janitor";
+import { parseDDS } from "@image/formats/parse-dds";
 
 const getBufDds = (buf: Buffer, { ddsOffset, size }: AnimDds) =>
     buf.slice(ddsOffset, ddsOffset + size);
@@ -22,14 +23,14 @@ export const loadAnimAtlas = async (
     }
 
     const ddsBuf = getBufDds(buf, sprite.maps.diffuse);
-    const diffuse = janitor.mop(await createDDSTexture(ddsBuf), "diffuse");
+    const diffuse = janitor.mop(createDDSTexture(parseDDS(ddsBuf)), "diffuse");
 
     const optionalLoad = async (layer: AnimDds, encoding?: TextureEncoding) => {
         if (layer === undefined) {
             return undefined;
         }
         const ddsBuf = getBufDds(buf, layer);
-        return janitor.mop(await createDDSTexture(ddsBuf, encoding), "layer");
+        return janitor.mop(await createDDSTexture(parseDDS(ddsBuf), encoding), "layer");
     }
 
     const teammask = await optionalLoad(sprite.maps.teamcolor);

src/renderer/core/global.ts

@@ -6,6 +6,7 @@ import {
 
 import { AnimDds, AnimFrame, ImageDAT, UnitTileScale } from "common/types";
 import { createDDSTexture, Grp } from "../formats";
+import { parseDDS } from "@image/formats/parse-dds";
 
 export const loadAnimSdAtlas = async ({
     readGrp,
@@ -27,7 +28,7 @@ export const loadAnimSdAtlas = async ({
         sprite.buf.slice(map.ddsOffset + offset, map.ddsOffset + map.size);
 
     const ddsBuf = getBuf(sprite.maps.diffuse);
-    const diffuse = await createDDSTexture(ddsBuf);
+    const diffuse = await createDDSTexture(parseDDS(ddsBuf));
 
     let teammask;
     if (sprite.maps.teamcolor) {

src/renderer/image/assets.ts

@@ -1,6 +1,6 @@
 import { Mesh, Object3D, Texture } from "three";
 import { ImageDAT, GltfAtlas, AnimFrame } from "common/types";
-import loadGlb from "../formats/load-glb";
+import { loadGlb } from "../formats/load-glb";
 
 
 export const loadGlbAtlas = async (