feat(map): use area lights (#43)

package.json

@@ -35,7 +35,7 @@
     "three.js"
   ],
   "dependencies": {
-    "@wowserhq/format": "^0.12.0"
+    "@wowserhq/format": "^0.13.1"
   },
   "peerDependencies": {
     "three": "^0.160.0"

src/lib/db/DbManager.ts

@@ -0,0 +1,62 @@
+import { ClientDb, ClientDbRecord } from '@wowserhq/format';
+import { AssetHost, loadAsset, normalizePath } from '../asset.js';
+
+interface Constructor<T> {
+  new (...args: any[]): T;
+}
+
+type DbManagerOptions = {
+  host: AssetHost;
+};
+
+class DbManager {
+  #host: AssetHost;
+  #loaded = new Map<string, ClientDb<any>>();
+  #loading = new Map<string, Promise<ClientDb<any>>>();
+
+  constructor(options: DbManagerOptions) {
+    this.#host = options.host;
+  }
+
+  get<T extends ClientDbRecord>(name: string, RecordClass: Constructor<T>): Promise<ClientDb<T>> {
+    const refId = [normalizePath(name), RecordClass.prototype.constructor.name].join(':');
+
+    const loaded = this.#loaded.get(refId);
+    if (loaded) {
+      return Promise.resolve(loaded);
+    }
+
+    const alreadyLoading = this.#loading.get(refId);
+    if (alreadyLoading) {
+      return alreadyLoading;
+    }
+
+    const loading = this.#load(refId, name, RecordClass);
+    this.#loading.set(refId, loading);
+
+    return loading;
+  }
+
+  async #load<T extends ClientDbRecord>(
+    refId: string,
+    name: string,
+    RecordClass: Constructor<T>,
+  ): Promise<ClientDb<T>> {
+    const path = `DBFilesClient/${name}`;
+
+    let db: ClientDb<T>;
+    try {
+      const data = await loadAsset(this.#host, path);
+      db = new ClientDb(RecordClass).load(data);
+
+      this.#loaded.set(refId, db);
+    } finally {
+      this.#loading.delete(refId);
+    }
+
+    return db;
+  }
+}
+
+export default DbManager;
+export { DbManager };

src/lib/index.ts

@@ -1,5 +1,6 @@
 export * from './controls/MapControls.js';
 export * from './controls/OrbitControls.js';
+export * from './db/DbManager.js';
 export * from './light/SceneLight.js';
 export * from './map/MapManager.js';
 export * from './model/ModelManager.js';

src/lib/light/SceneLight.ts

@@ -1,26 +1,60 @@
 import * as THREE from 'three';
+import SceneLightParams from './SceneLightParams.js';
 
 class SceneLight {
-  #sunDir = new THREE.Vector3();
-  #sunDirView = new THREE.Vector3();
+  #location: 'exterior' | 'interior' = 'exterior';
+
+  #params = {
+    exterior: new SceneLightParams(),
+    interior: new SceneLightParams(),
+  };
 
   #uniforms = {
-    sunDir: {
-      value: this.#sunDirView,
-    },
+    exterior: this.#params.exterior.uniforms,
+    interior: this.#params.interior.uniforms,
   };
 
+  get location() {
+    return this.#location;
+  }
+
+  set location(location: 'exterior' | 'interior') {
+    this.#location = location;
+  }
+
   get uniforms() {
-    return this.#uniforms;
+    return this.#uniforms[this.#location];
+  }
+
+  get sunDir() {
+    return this.#params[this.#location].sunDir;
   }
 
-  setSunDir(dir: THREE.Vector3) {
-    this.#sunDir.copy(dir);
+  get sunDirView() {
+    return this.#params[this.#location].sunDirView;
+  }
+
+  get sunDiffuseColor() {
+    return this.#params[this.#location].sunDiffuseColor;
+  }
+
+  get sunAmbientColor() {
+    return this.#params[this.#location].sunAmbientColor;
+  }
+
+  get fogParams() {
+    return this.#params[this.#location].fogParams;
+  }
+
+  get fogColor() {
+    return this.#params[this.#location].fogColor;
   }
 
   update(camera: THREE.Camera) {
     const viewMatrix = camera.matrixWorldInverse;
-    this.#sunDirView.copy(this.#sunDir).transformDirection(viewMatrix).normalize();
+
+    this.#params.exterior.transformSunDirView(viewMatrix);
+    this.#params.interior.transformSunDirView(viewMatrix);
   }
 }
 

src/lib/light/SceneLightParams.ts

@@ -0,0 +1,63 @@
+import * as THREE from 'three';
+
+class SceneLightParams {
+  #sunDir = new THREE.Vector3(-1.0, -1.0, -1.0);
+  #sunDirView = new THREE.Vector3(-1.0, -1.0, -1.0);
+  #sunDiffuseColor = new THREE.Color(0.25, 0.5, 1.0);
+  #sunAmbientColor = new THREE.Color(0.5, 0.5, 0.5);
+
+  #fogParams = new THREE.Vector4(0.0, 577.0, 1.0, 1.0);
+  #fogColor = new THREE.Color(0.25, 0.5, 0.8);
+
+  #uniforms = {
+    sunDir: {
+      value: this.#sunDirView,
+    },
+    sunDiffuseColor: {
+      value: this.#sunDiffuseColor,
+    },
+    sunAmbientColor: {
+      value: this.#sunAmbientColor,
+    },
+    fogParams: {
+      value: this.#fogParams,
+    },
+    fogColor: {
+      value: this.#fogColor,
+    },
+  };
+
+  get sunDir() {
+    return this.#sunDir;
+  }
+
+  get sunDirView() {
+    return this.#sunDirView;
+  }
+
+  get sunDiffuseColor() {
+    return this.#sunDiffuseColor;
+  }
+
+  get sunAmbientColor() {
+    return this.#sunAmbientColor;
+  }
+
+  get fogParams() {
+    return this.#fogParams;
+  }
+
+  get fogColor() {
+    return this.#fogColor;
+  }
+
+  get uniforms() {
+    return this.#uniforms;
+  }
+
+  transformSunDirView(viewMatrix: THREE.Matrix4) {
+    this.#sunDirView.copy(this.#sunDir).transformDirection(viewMatrix).normalize();
+  }
+}
+
+export default SceneLightParams;

src/lib/map/DoodadManager.ts

@@ -3,7 +3,7 @@ import ModelManager from '../model/ModelManager.js';
 import TextureManager from '../texture/TextureManager.js';
 import { AssetHost } from '../asset.js';
 import { MapAreaSpec } from './loader/types.js';
-import MapLight from './MapLight.js';
+import MapLight from './light/MapLight.js';
 
 type DoodadManagerOptions = {
   host: AssetHost;

src/lib/map/MapManager.ts

@@ -6,13 +6,15 @@ import DoodadManager from './DoodadManager.js';
 import { AssetHost } from '../asset.js';
 import MapLoader from './loader/MapLoader.js';
 import { MapAreaSpec, MapSpec } from './loader/types.js';
-import MapLight from './MapLight.js';
+import MapLight from './light/MapLight.js';
+import DbManager from '../db/DbManager.js';
 
 const DEFAULT_VIEW_DISTANCE = 1277.0;
 
 type MapManagerOptions = {
   host: AssetHost;
   textureManager?: TextureManager;
+  dbManager?: DbManager;
   viewDistance?: number;
 };
 
@@ -32,6 +34,7 @@ class MapManager {
   #textureManager: TextureManager;
   #terrainManager: TerrainManager;
   #doodadManager: DoodadManager;
+  #dbManager: DbManager;
 
   #mapLight: MapLight;
 
@@ -53,9 +56,10 @@ class MapManager {
     }
 
     this.#textureManager = options.textureManager ?? new TextureManager({ host: options.host });
+    this.#dbManager = options.dbManager ?? new DbManager({ host: options.host });
     this.#loader = new MapLoader({ host: options.host });
 
-    this.#mapLight = new MapLight();
+    this.#mapLight = new MapLight({ dbManager: this.#dbManager });
 
     this.#terrainManager = new TerrainManager({
       host: options.host,
@@ -73,6 +77,10 @@ class MapManager {
     this.#root.matrixWorldAutoUpdate = false;
   }
 
+  get clearColor() {
+    return this.#mapLight.fogColor;
+  }
+
   get mapMame() {
     return this.#mapName;
   }
@@ -81,10 +89,12 @@ class MapManager {
     return this.#root;
   }
 
-  load(mapName: string) {
+  load(mapName: string, mapId?: number) {
     this.#mapName = mapName;
     this.#mapDir = `world/maps/${mapName}`;
 
+    this.#mapLight.mapId = mapId;
+
     this.#root.name = `map:${mapName}`;
 
     this.#loadMap().catch((error) => console.error(error));