The quest editor now shows most enemies with textures.

src/rendering/QuestRenderer.ts

@@ -181,24 +181,36 @@ export class QuestRenderer extends Renderer<PerspectiveCamera> {
 
         // Did we pick a different object than the previously hovered over 3D object?
         if (this.hovered_data && (!data || data.object !== this.hovered_data.object)) {
-            (this.hovered_data.object.material as MeshLambertMaterial).color.set(
-                this.get_color(this.hovered_data.entity, "normal")
-            );
+            const color = this.get_color(this.hovered_data.entity, "hover");
+
+            for (const material of this.hovered_data.object.material as MeshLambertMaterial[]) {
+                material.color.set(color);
+            }
         }
 
         // Did we pick a different object than the previously selected 3D object?
         if (this.selected_data && (!data || data.object !== this.selected_data.object)) {
-            (this.selected_data.object.material as MeshLambertMaterial).color.set(
-                this.get_color(this.selected_data.entity, "normal")
-            );
+            const color = this.get_color(this.selected_data.entity, "normal");
+
+            for (const material of this.selected_data.object.material as MeshLambertMaterial[]) {
+                if (material.map) {
+                    material.color.set(0xffffff);
+                } else {
+                    material.color.set(color);
+                }
+            }
+
             this.selected_data.manipulating = false;
         }
 
         if (data) {
             // User selected an entity.
-            (data.object.material as MeshLambertMaterial).color.set(
-                this.get_color(data.entity, "selected")
-            );
+            const color = this.get_color(data.entity, "selected");
+
+            for (const material of data.object.material as MeshLambertMaterial[]) {
+                material.color.set(color);
+            }
+
             data.manipulating = true;
             this.hovered_data = data;
             this.selected_data = data;
@@ -306,9 +318,15 @@ export class QuestRenderer extends Renderer<PerspectiveCamera> {
 
             if (old_data && (!data || data.object !== old_data.object)) {
                 if (!this.selected_data || old_data.object !== this.selected_data.object) {
-                    (old_data.object.material as MeshLambertMaterial).color.set(
-                        this.get_color(old_data.entity, "normal")
-                    );
+                    const color = this.get_color(old_data.entity, "normal");
+
+                    for (const material of old_data.object.material as MeshLambertMaterial[]) {
+                        if (material.map) {
+                            material.color.set(0xffffff);
+                        } else {
+                            material.color.set(color);
+                        }
+                    }
                 }
 
                 this.hovered_data = undefined;
@@ -317,9 +335,11 @@ export class QuestRenderer extends Renderer<PerspectiveCamera> {
 
             if (data && (!old_data || data.object !== old_data.object)) {
                 if (!this.selected_data || data.object !== this.selected_data.object) {
-                    (data.object.material as MeshLambertMaterial).color.set(
-                        this.get_color(data.entity, "hover")
-                    );
+                    const color = this.get_color(data.entity, "hover");
+
+                    for (const material of data.object.material as MeshLambertMaterial[]) {
+                        material.color.set(color);
+                    }
                 }
 
                 this.hovered_data = data;

src/rendering/entities.ts

@@ -1,4 +1,12 @@
-import { BufferGeometry, DoubleSide, Mesh, MeshLambertMaterial } from "three";
+import {
+    BufferGeometry,
+    DoubleSide,
+    Mesh,
+    MeshBasicMaterial,
+    MeshLambertMaterial,
+    Texture,
+    Material,
+} from "three";
 import { QuestEntity, QuestNpc, QuestObject } from "../domain";
 
 export const OBJECT_COLOR = 0xffff00;
@@ -9,26 +17,55 @@ export const NPC_HOVER_COLOR = 0xff3f5f;
 export const NPC_SELECTED_COLOR = 0xff0054;
 
 export function create_object_mesh(object: QuestObject, geometry: BufferGeometry): Mesh {
-    return create_mesh(object, geometry, OBJECT_COLOR, "Object");
+    return create_mesh(object, geometry, [], OBJECT_COLOR, "Object");
 }
 
-export function create_npc_mesh(npc: QuestNpc, geometry: BufferGeometry): Mesh {
-    return create_mesh(npc, geometry, NPC_COLOR, "NPC");
+export function create_npc_mesh(
+    npc: QuestNpc,
+    geometry: BufferGeometry,
+    textures: Texture[]
+): Mesh {
+    return create_mesh(npc, geometry, textures, NPC_COLOR, "NPC");
 }
 
 function create_mesh(
     entity: QuestEntity,
     geometry: BufferGeometry,
+    textures: Texture[],
     color: number,
     type: string
 ): Mesh {
-    const mesh = new Mesh(
-        geometry,
-        new MeshLambertMaterial({
+    const max_mat_idx = geometry.groups.reduce((max, g) => Math.max(max, g.materialIndex || 0), 0);
+
+    const materials: Material[] = [
+        new MeshBasicMaterial({
             color,
-            side: DoubleSide,
-        })
+            transparent: true,
+        }),
+    ];
+
+    materials.push(
+        ...textures.map(
+            tex =>
+                new MeshLambertMaterial({
+                    skinning: true,
+                    map: tex,
+                    transparent: true,
+                    side: DoubleSide,
+                })
+        )
     );
+
+    for (let i = materials.length - 1; i < max_mat_idx; ++i) {
+        materials.push(
+            new MeshLambertMaterial({
+                color,
+                side: DoubleSide,
+            })
+        );
+    }
+
+    const mesh = new Mesh(geometry, materials);
     mesh.name = type;
     mesh.userData.entity = entity;
 

src/rendering/models.ts

@@ -13,13 +13,14 @@ import {
     SkinnedMesh,
     Uint16BufferAttribute,
     Vector3,
+    MeshBasicMaterial,
 } from "three";
 import { vec3_to_threejs } from ".";
 import { is_njcm_model, NjModel, NjObject } from "../data_formats/parsing/ninja";
 import { NjcmModel } from "../data_formats/parsing/ninja/njcm";
 import { xj_model_to_geometry } from "./xj_model_to_geometry";
 
-const DUMMY_MATERIAL = new MeshLambertMaterial({
+const DUMMY_MATERIAL = new MeshBasicMaterial({
     color: 0xff00ff,
     transparent: true,
 });
@@ -33,11 +34,8 @@ const NO_TRANSLATION = new Vector3(0, 0, 0);
 const NO_ROTATION = new Quaternion(0, 0, 0, 1);
 const NO_SCALE = new Vector3(1, 1, 1);
 
-export function ninja_object_to_buffer_geometry(
-    object: NjObject<NjModel>,
-    materials: Material[] = []
-): BufferGeometry {
-    return new Object3DCreator(materials).create_buffer_geometry(object);
+export function ninja_object_to_buffer_geometry(object: NjObject<NjModel>): BufferGeometry {
+    return new Object3DCreator([]).create_buffer_geometry(object);
 }
 
 export function ninja_object_to_skinned_mesh(

src/stores/EntityStore.ts

@@ -1,10 +1,15 @@
-import { BufferGeometry, CylinderBufferGeometry } from "three";
+import Logger from "js-logger";
+import { BufferGeometry, CylinderBufferGeometry, Texture } from "three";
 import { parse_nj, parse_xj } from "../data_formats/parsing/ninja";
 import { NpcType, ObjectType } from "../domain";
 import { ninja_object_to_buffer_geometry } from "../rendering/models";
-import { get_npc_data, get_object_data } from "./binary_assets";
+import { get_npc_data, get_object_data, AssetType } from "./binary_assets";
 import { Endianness } from "../data_formats";
 import { ArrayBufferCursor } from "../data_formats/cursor/ArrayBufferCursor";
+import { parse_xvm } from "../data_formats/parsing/ninja/texture";
+import { xvm_to_textures } from "../rendering/textures";
+
+const logger = Logger.get("stores/EntityStore");
 
 const DEFAULT_ENTITY = new CylinderBufferGeometry(3, 3, 20);
 DEFAULT_ENTITY.translate(0, 10, 0);
@@ -13,9 +18,18 @@ const DEFAULT_ENTITY_PROMISE: Promise<BufferGeometry> = new Promise(resolve =>
     resolve(DEFAULT_ENTITY)
 );
 
+const DEFAULT_ENTITY_TEX: Texture[] = [];
+
+const DEFAULT_ENTITY_TEX_PROMISE: Promise<Texture[]> = new Promise(resolve =>
+    resolve(DEFAULT_ENTITY_TEX)
+);
+
 const npc_cache: Map<NpcType, Promise<BufferGeometry>> = new Map();
 npc_cache.set(NpcType.Unknown, DEFAULT_ENTITY_PROMISE);
 
+const npc_tex_cache: Map<NpcType, Promise<Texture[]>> = new Map();
+npc_tex_cache.set(NpcType.Unknown, DEFAULT_ENTITY_TEX_PROMISE);
+
 const object_cache: Map<ObjectType, Promise<BufferGeometry>> = new Map();
 object_cache.set(ObjectType.Unknown, DEFAULT_ENTITY_PROMISE);
 
@@ -26,38 +40,72 @@ class EntityStore {
         if (mesh) {
             return mesh;
         } else {
-            mesh = get_npc_data(npc_type).then(({ url, data }) => {
-                const cursor = new ArrayBufferCursor(data, Endianness.Little);
-                const nj_objects = url.endsWith(".nj") ? parse_nj(cursor) : parse_xj(cursor);
+            mesh = get_npc_data(npc_type, AssetType.Geometry)
+                .then(({ url, data }) => {
+                    const cursor = new ArrayBufferCursor(data, Endianness.Little);
+                    const nj_objects = url.endsWith(".nj") ? parse_nj(cursor) : parse_xj(cursor);
 
-                if (nj_objects.length) {
-                    return ninja_object_to_buffer_geometry(nj_objects[0]);
-                } else {
-                    throw new Error(`Could not parse ${url}.`);
-                }
-            });
+                    if (nj_objects.length) {
+                        return ninja_object_to_buffer_geometry(nj_objects[0]);
+                    } else {
+                        logger.warn(`Could not parse ${url}.`);
+                        return DEFAULT_ENTITY;
+                    }
+                })
+                .catch(e => {
+                    logger.warn(`Could load geometry file for ${npc_type.code}.`, e);
+                    return DEFAULT_ENTITY;
+                });
 
             npc_cache.set(npc_type, mesh);
             return mesh;
         }
     }
 
+    async get_npc_tex(npc_type: NpcType): Promise<Texture[]> {
+        let tex = npc_tex_cache.get(npc_type);
+
+        if (tex) {
+            return tex;
+        } else {
+            tex = get_npc_data(npc_type, AssetType.Texture)
+                .then(({ data }) => {
+                    const cursor = new ArrayBufferCursor(data, Endianness.Little);
+                    const xvm = parse_xvm(cursor);
+                    return xvm_to_textures(xvm);
+                })
+                .catch(e => {
+                    logger.warn(`Could load texture file for ${npc_type.code}.`, e);
+                    return DEFAULT_ENTITY_TEX;
+                });
+
+            npc_tex_cache.set(npc_type, tex);
+            return tex;
+        }
+    }
+
     async get_object_geometry(object_type: ObjectType): Promise<BufferGeometry> {
         let geometry = object_cache.get(object_type);
 
         if (geometry) {
             return geometry;
         } else {
-            geometry = get_object_data(object_type).then(({ url, data }) => {
-                const cursor = new ArrayBufferCursor(data, Endianness.Little);
-                const nj_objects = url.endsWith(".nj") ? parse_nj(cursor) : parse_xj(cursor);
+            geometry = get_object_data(object_type)
+                .then(({ url, data }) => {
+                    const cursor = new ArrayBufferCursor(data, Endianness.Little);
+                    const nj_objects = url.endsWith(".nj") ? parse_nj(cursor) : parse_xj(cursor);
 
-                if (nj_objects.length) {
-                    return ninja_object_to_buffer_geometry(nj_objects[0]);
-                } else {
-                    throw new Error("File could not be parsed into a BufferGeometry.");
-                }
-            });
+                    if (nj_objects.length) {
+                        return ninja_object_to_buffer_geometry(nj_objects[0]);
+                    } else {
+                        logger.warn(`Could not parse ${url} for ${object_type.name}.`);
+                        return DEFAULT_ENTITY;
+                    }
+                })
+                .catch(e => {
+                    logger.warn(`Could load geometry file for ${object_type.name}.`, e);
+                    return DEFAULT_ENTITY;
+                });
 
             object_cache.set(object_type, geometry);
             return geometry;

src/stores/QuestEditorStore.ts

@@ -81,8 +81,9 @@ class QuestEditorStore {
                     for (const npc of quest.npcs.filter(npc => npc.area_id === variant.area.id)) {
                         try {
                             const npc_geom = await entity_store.get_npc_geometry(npc.type);
+                            const npc_tex = await entity_store.get_npc_tex(npc.type);
                             this.set_section_on_visible_quest_entity(npc, sections);
-                            npc.object_3d = create_npc_mesh(npc, npc_geom);
+                            npc.object_3d = create_npc_mesh(npc, npc_geom, npc_tex);
                         } catch (e) {
                             logger.error(e);
                         }

src/stores/binary_assets.ts

@@ -1,5 +1,10 @@
 import { NpcType, ObjectType } from "../domain";
 
+export enum AssetType {
+    Geometry,
+    Texture,
+}
+
 export function get_area_render_data(
     episode: number,
     area_id: number,
@@ -16,8 +21,11 @@ export function get_area_collision_data(
     return get_area_asset(episode, area_id, area_version, "collision");
 }
 
-export async function get_npc_data(npc_type: NpcType): Promise<{ url: string; data: ArrayBuffer }> {
-    const url = npc_type_to_url(npc_type);
+export async function get_npc_data(
+    npc_type: NpcType,
+    type: AssetType
+): Promise<{ url: string; data: ArrayBuffer }> {
+    const url = npc_type_to_url(npc_type, type);
     const data = await get_asset(url);
     return { url, data };
 }
@@ -143,60 +151,60 @@ function get_area_asset(
     }
 }
 
-function npc_type_to_url(npc_type: NpcType): string {
+function npc_type_to_url(npc_type: NpcType, type: AssetType): string {
     switch (npc_type) {
         // The dubswitch model is in XJ format.
         case NpcType.Dubswitch:
-            return `/npcs/${npc_type.code}.xj`;
+            return `/npcs/${npc_type.code}.${type === AssetType.Geometry ? "xj" : "xvm"}`;
 
         // Episode II VR Temple
 
         case NpcType.Hildebear2:
-            return npc_type_to_url(NpcType.Hildebear);
+            return npc_type_to_url(NpcType.Hildebear, type);
         case NpcType.Hildeblue2:
-            return npc_type_to_url(NpcType.Hildeblue);
+            return npc_type_to_url(NpcType.Hildeblue, type);
         case NpcType.RagRappy2:
-            return npc_type_to_url(NpcType.RagRappy);
+            return npc_type_to_url(NpcType.RagRappy, type);
         case NpcType.Monest2:
-            return npc_type_to_url(NpcType.Monest);
+            return npc_type_to_url(NpcType.Monest, type);
         case NpcType.PoisonLily2:
-            return npc_type_to_url(NpcType.PoisonLily);
+            return npc_type_to_url(NpcType.PoisonLily, type);
         case NpcType.NarLily2:
-            return npc_type_to_url(NpcType.NarLily);
+            return npc_type_to_url(NpcType.NarLily, type);
         case NpcType.GrassAssassin2:
-            return npc_type_to_url(NpcType.GrassAssassin);
+            return npc_type_to_url(NpcType.GrassAssassin, type);
         case NpcType.Dimenian2:
-            return npc_type_to_url(NpcType.Dimenian);
+            return npc_type_to_url(NpcType.Dimenian, type);
         case NpcType.LaDimenian2:
-            return npc_type_to_url(NpcType.LaDimenian);
+            return npc_type_to_url(NpcType.LaDimenian, type);
         case NpcType.SoDimenian2:
-            return npc_type_to_url(NpcType.SoDimenian);
+            return npc_type_to_url(NpcType.SoDimenian, type);
         case NpcType.DarkBelra2:
-            return npc_type_to_url(NpcType.DarkBelra);
+            return npc_type_to_url(NpcType.DarkBelra, type);
 
         // Episode II VR Spaceship
 
         case NpcType.SavageWolf2:
-            return npc_type_to_url(NpcType.SavageWolf);
+            return npc_type_to_url(NpcType.SavageWolf, type);
         case NpcType.BarbarousWolf2:
-            return npc_type_to_url(NpcType.BarbarousWolf);
+            return npc_type_to_url(NpcType.BarbarousWolf, type);
         case NpcType.PanArms2:
-            return npc_type_to_url(NpcType.PanArms);
+            return npc_type_to_url(NpcType.PanArms, type);
         case NpcType.Dubchic2:
-            return npc_type_to_url(NpcType.Dubchic);
+            return npc_type_to_url(NpcType.Dubchic, type);
         case NpcType.Gilchic2:
-            return npc_type_to_url(NpcType.Gilchic);
+            return npc_type_to_url(NpcType.Gilchic, type);
         case NpcType.Garanz2:
-            return npc_type_to_url(NpcType.Garanz);
+            return npc_type_to_url(NpcType.Garanz, type);
         case NpcType.Dubswitch2:
-            return npc_type_to_url(NpcType.Dubswitch);
+            return npc_type_to_url(NpcType.Dubswitch, type);
         case NpcType.Delsaber2:
-            return npc_type_to_url(NpcType.Delsaber);
+            return npc_type_to_url(NpcType.Delsaber, type);
         case NpcType.ChaosSorcerer2:
-            return npc_type_to_url(NpcType.ChaosSorcerer);
+            return npc_type_to_url(NpcType.ChaosSorcerer, type);
 
         default:
-            return `/npcs/${npc_type.code}.nj`;
+            return `/npcs/${npc_type.code}.${type === AssetType.Geometry ? "nj" : "xvm"}`;
     }
 }