Fixed bugs in model viewer. Model viewer now automatically pauses when unmounted. NJ texture coordinates are now parsed.

src/data_formats/cursor/ArrayBufferCursor.ts

@@ -7,7 +7,7 @@ import {
 } from ".";
 import { Endianness } from "..";
 import { Cursor } from "./Cursor";
-import { Vec3 } from "../Vec3";
+import { Vec3 } from "../vector";
 
 /**
  * A cursor for reading from an array buffer or part of an array buffer.

src/data_formats/cursor/Cursor.ts

@@ -1,5 +1,5 @@
 import { Endianness } from "..";
-import { Vec3 } from "../Vec3";
+import { Vec3 } from "../vector";
 
 /**
  * A cursor for reading binary data.

src/data_formats/cursor/ResizableBufferCursor.ts

@@ -8,7 +8,7 @@ import {
 import { Endianness } from "..";
 import { ResizableBuffer } from "../ResizableBuffer";
 import { Cursor } from "./Cursor";
-import { Vec3 } from "../Vec3";
+import { Vec3 } from "../vector";
 
 export class ResizableBufferCursor implements Cursor {
     private _offset: number;

src/data_formats/parsing/area_collision_geometry.ts

@@ -1,5 +1,5 @@
 import { Cursor } from "../cursor/Cursor";
-import { Vec3 } from "../Vec3";
+import { Vec3 } from "../vector";
 import { parse_rel } from "./rel";
 
 export type CollisionObject = {

src/data_formats/parsing/area_geometry.ts

@@ -1,5 +1,5 @@
 import { Cursor } from "../cursor/Cursor";
-import { Vec3 } from "../Vec3";
+import { Vec3 } from "../vector";
 import { ANGLE_TO_RAD } from "./ninja";
 import { parse_xj_model, XjModel } from "./ninja/xj";
 import { parse_rel } from "./rel";

src/data_formats/parsing/ninja/index.ts

@@ -1,5 +1,5 @@
 import { Cursor } from "../../cursor/Cursor";
-import { Vec3 } from "../../Vec3";
+import { Vec3 } from "../../vector";
 import { NjcmModel, parse_njcm_model } from "./njcm";
 import { parse_xj_model, XjModel } from "./xj";
 import { parse_iff } from "../iff";

src/data_formats/parsing/ninja/motion.ts

@@ -1,6 +1,6 @@
 import { ANGLE_TO_RAD } from ".";
 import { Cursor } from "../../cursor/Cursor";
-import { Vec3 } from "../../Vec3";
+import { Vec3 } from "../../vector";
 
 const NMDM = 0x4d444d4e;
 

src/data_formats/parsing/ninja/njcm.ts

@@ -1,7 +1,7 @@
 import Logger from "js-logger";
 import { NjVertex } from ".";
 import { Cursor } from "../../cursor/Cursor";
-import { Vec3 } from "../../Vec3";
+import { Vec3, Vec2 } from "../../vector";
 
 const logger = Logger.get("data_formats/parsing/ninja/njcm");
 
@@ -121,18 +121,21 @@ type NjcmTriangleStrip = {
     flat_shading: boolean;
     environment_mapping: boolean;
     clockwise_winding: boolean;
+    has_tex_coords: boolean;
+    has_normal: boolean;
     vertices: NjcmMeshVertex[];
 };
 
 type NjcmMeshVertex = {
     index: number;
     normal?: Vec3;
+    tex_coords?: Vec2;
 };
 
 export function parse_njcm_model(cursor: Cursor, cached_chunk_offsets: number[]): NjcmModel {
     const vlist_offset = cursor.u32(); // Vertex list
     const plist_offset = cursor.u32(); // Triangle strip index list
-    const bounding_sphere_center = new Vec3(cursor.f32(), cursor.f32(), cursor.f32());
+    const bounding_sphere_center = cursor.vec3();
     const bounding_sphere_radius = cursor.f32();
     const vertices: NjVertex[] = [];
     const meshes: NjcmTriangleStrip[] = [];
@@ -295,11 +298,7 @@ function parse_vertex_chunk(cursor: Cursor, chunk_type_id: number, flags: number
     for (let i = 0; i < vertex_count; ++i) {
         const vertex: NjcmVertex = {
             index: index + i,
-            position: new Vec3(
+            position: cursor.vec3(),
-                cursor.f32(), // x
-                cursor.f32(), // y
-                cursor.f32() // z
-            ),
             bone_weight: 1,
             bone_weight_status,
             calc_continue,
@@ -311,11 +310,7 @@ function parse_vertex_chunk(cursor: Cursor, chunk_type_id: number, flags: number
         } else if (chunk_type_id === 33) {
             // NJD_CV_VN_SH
             cursor.seek(4); // Always 1.0
-            vertex.normal = new Vec3(
+            vertex.normal = cursor.vec3();
-                cursor.f32(), // x
-                cursor.f32(), // y
-                cursor.f32() // z
-            );
             cursor.seek(4); // Always 0.0
         } else if (35 <= chunk_type_id && chunk_type_id <= 40) {
             if (chunk_type_id === 37) {
@@ -328,11 +323,7 @@ function parse_vertex_chunk(cursor: Cursor, chunk_type_id: number, flags: number
                 cursor.seek(4);
             }
         } else if (41 <= chunk_type_id && chunk_type_id <= 47) {
-            vertex.normal = new Vec3(
+            vertex.normal = cursor.vec3();
-                cursor.f32(), // x
-                cursor.f32(), // y
-                cursor.f32() // z
-            );
 
             if (chunk_type_id >= 42) {
                 if (chunk_type_id === 44) {
@@ -383,51 +374,45 @@ function parse_triangle_strip_chunk(
     const user_offset_and_strip_count = cursor.u16();
     const user_flags_size = user_offset_and_strip_count >>> 14;
     const strip_count = user_offset_and_strip_count & 0x3fff;
-    let options;
+
+    let has_tex_coords = false;
+    let has_color = false;
+    let has_normal = false;
+    let has_double_tex_coords = false;
 
     switch (chunk_type_id) {
         case 64:
-            options = [false, false, false, false];
             break;
         case 65:
-            options = [true, false, false, false];
-            break;
         case 66:
-            options = [true, false, false, false];
+            has_tex_coords = true;
             break;
         case 67:
-            options = [false, false, true, false];
+            has_normal = true;
             break;
         case 68:
-            options = [true, false, true, false];
-            break;
         case 69:
-            options = [true, false, true, false];
+            has_tex_coords = true;
+            has_normal = true;
             break;
         case 70:
-            options = [false, true, false, false];
+            has_color = true;
             break;
         case 71:
-            options = [true, true, false, false];
-            break;
         case 72:
-            options = [true, true, false, false];
+            has_tex_coords = true;
+            has_color = true;
             break;
         case 73:
-            options = [false, false, false, false];
             break;
         case 74:
-            options = [true, false, false, true];
-            break;
         case 75:
-            options = [true, false, false, true];
+            has_double_tex_coords = true;
             break;
         default:
             throw new Error(`Unexpected chunk type ID: ${chunk_type_id}.`);
     }
 
-    const [parse_texture_coords, parse_color, parse_normal, parse_texture_coords_hires] = options;
-
     const strips: NjcmTriangleStrip[] = [];
 
     for (let i = 0; i < strip_count; ++i) {
@@ -443,22 +428,29 @@ function parse_triangle_strip_chunk(
             };
             vertices.push(vertex);
 
-            if (parse_texture_coords) {
+            if (has_tex_coords) {
+                vertex.tex_coords = new Vec2(cursor.u16(), cursor.u16());
+            }
+
+            // Ignore ARGB8888 color.
+            if (has_color) {
                 cursor.seek(4);
             }
 
-            if (parse_color) {
+            if (has_normal) {
-                cursor.seek(4);
+                vertex.normal = new Vec3(
+                    cursor.u16() / 255,
+                    cursor.u16() / 255,
+                    cursor.u16() / 255
+                );
             }
 
-            if (parse_normal) {
+            // Ignore double texture coordinates (Ua, Vb, Ua, Vb).
-                vertex.normal = new Vec3(cursor.u16(), cursor.u16(), cursor.u16());
+            if (has_double_tex_coords) {
-            }
-
-            if (parse_texture_coords_hires) {
                 cursor.seek(8);
             }
 
+            // User flags start at the third vertex because they are per-triangle.
             if (j >= 2) {
                 cursor.seek(2 * user_flags_size);
             }
@@ -467,6 +459,8 @@ function parse_triangle_strip_chunk(
         strips.push({
             ...render_flags,
             clockwise_winding,
+            has_tex_coords,
+            has_normal,
             vertices,
         });
     }

src/data_formats/parsing/ninja/xj.ts

@@ -1,6 +1,6 @@
 import Logger from "js-logger";
 import { Cursor } from "../../cursor/Cursor";
-import { Vec3 } from "../../Vec3";
+import { Vec3 } from "../../vector";
 import { NjVertex } from "../ninja";
 
 const logger = Logger.get("data_formats/parsing/ninja/xj");

src/data_formats/parsing/quest/dat.ts

@@ -4,7 +4,7 @@ import { Endianness } from "../..";
 import { Cursor } from "../../cursor/Cursor";
 import { WritableResizableBufferCursor } from "../../cursor/WritableResizableBufferCursor";
 import { ResizableBuffer } from "../../ResizableBuffer";
-import { Vec3 } from "../../Vec3";
+import { Vec3 } from "../../vector";
 
 const logger = Logger.get("data_formats/parsing/quest/dat");
 

src/data_formats/parsing/quest/index.ts

@@ -6,7 +6,7 @@ import * as prs from "../../compression/prs";
 import { ArrayBufferCursor } from "../../cursor/ArrayBufferCursor";
 import { Cursor } from "../../cursor/Cursor";
 import { ResizableBufferCursor } from "../../cursor/ResizableBufferCursor";
-import { Vec3 } from "../../Vec3";
+import { Vec3 } from "../../vector";
 import { Instruction, parse_bin, write_bin } from "./bin";
 import { DatFile, DatNpc, DatObject, parse_dat, write_dat } from "./dat";
 import { parse_qst, QstContainedFile, write_qst } from "./qst";

src/data_formats/vector.ts

@@ -1,3 +1,23 @@
+export class Vec2 {
+    x: number;
+    y: number;
+
+    constructor(x: number, y: number) {
+        this.x = x;
+        this.y = y;
+    }
+
+    add(v: Vec2): Vec2 {
+        this.x += v.x;
+        this.y += v.y;
+        return this;
+    }
+
+    clone(): Vec2 {
+        return new Vec2(this.x, this.y);
+    }
+}
+
 export class Vec3 {
     x: number;
     y: number;

src/domain/index.ts

@@ -1,7 +1,7 @@
 import { computed, observable } from "mobx";
 import { Object3D } from "three";
 import { DatNpc, DatObject, DatUnknown } from "../data_formats/parsing/quest/dat";
-import { Vec3 } from "../data_formats/Vec3";
+import { Vec3 } from "../data_formats/vector";
 import { enum_values } from "../enums";
 import { ItemType } from "./items";
 import { NpcType } from "./NpcType";

src/rendering/ModelRenderer.ts

@@ -1,5 +1,5 @@
 import { autorun } from "mobx";
-import { Clock, Object3D, SkeletonHelper, Vector3, PerspectiveCamera } from "three";
+import { Object3D, PerspectiveCamera, SkeletonHelper, Vector3 } from "three";
 import { model_viewer_store } from "../stores/ModelViewerStore";
 import { Renderer } from "./Renderer";
 
@@ -11,8 +11,6 @@ export function get_model_renderer(): ModelRenderer {
 }
 
 export class ModelRenderer extends Renderer<PerspectiveCamera> {
-    private clock = new Clock();
-
     private model?: Object3D;
     private skeleton_helper?: SkeletonHelper;
 
@@ -21,9 +19,7 @@ export class ModelRenderer extends Renderer<PerspectiveCamera> {
 
         autorun(() => {
             this.set_model(model_viewer_store.current_obj3d);
-        });
 
-        autorun(() => {
             const show_skeleton = model_viewer_store.show_skeleton;
 
             if (this.skeleton_helper) {
@@ -31,18 +27,16 @@ export class ModelRenderer extends Renderer<PerspectiveCamera> {
                 this.schedule_render();
             }
 
+            if (model_viewer_store.animation) {
+                this.schedule_render();
+            }
+
             if (!model_viewer_store.animation_playing) {
                 // Reference animation_frame here to make sure we render when the user sets the frame manually.
                 model_viewer_store.animation_frame;
                 this.schedule_render();
             }
         });
-
-        autorun(() => {
-            if (model_viewer_store.animation) {
-                this.schedule_render();
-            }
-        });
     }
 
     set_size(width: number, height: number): void {
@@ -53,7 +47,7 @@ export class ModelRenderer extends Renderer<PerspectiveCamera> {
 
     protected render(): void {
         if (model_viewer_store.animation) {
-            model_viewer_store.animation.mixer.update(this.clock.getDelta());
+            model_viewer_store.animation.mixer.update(model_viewer_store.clock.getDelta());
             model_viewer_store.update_animation_frame();
         }
 
@@ -66,22 +60,24 @@ export class ModelRenderer extends Renderer<PerspectiveCamera> {
     }
 
     private set_model(model?: Object3D): void {
-        if (this.model) {
+        if (this.model !== model) {
-            this.scene.remove(this.model);
+            if (this.model) {
-            this.scene.remove(this.skeleton_helper!);
+                this.scene.remove(this.model);
-            this.skeleton_helper = undefined;
+                this.scene.remove(this.skeleton_helper!);
-        }
+                this.skeleton_helper = undefined;
+            }
 
-        if (model) {
+            if (model) {
-            this.scene.add(model);
+                this.scene.add(model);
-            this.skeleton_helper = new SkeletonHelper(model);
+                this.skeleton_helper = new SkeletonHelper(model);
-            this.skeleton_helper.visible = model_viewer_store.show_skeleton;
+                this.skeleton_helper.visible = model_viewer_store.show_skeleton;
-            (this.skeleton_helper.material as any).linewidth = 3;
+                (this.skeleton_helper.material as any).linewidth = 3;
-            this.scene.add(this.skeleton_helper);
+                this.scene.add(this.skeleton_helper);
-            this.reset_camera(new Vector3(0, 10, 20), new Vector3(0, 0, 0));
+                this.reset_camera(new Vector3(0, 10, 20), new Vector3(0, 0, 0));
-        }
+            }
 
-        this.model = model;
+            this.model = model;
-        this.schedule_render();
+            this.schedule_render();
+        }
     }
 }

src/rendering/QuestRenderer.ts

@@ -10,7 +10,7 @@ import {
     Vector3,
     PerspectiveCamera,
 } from "three";
-import { Vec3 } from "../data_formats/Vec3";
+import { Vec3 } from "../data_formats/vector";
 import { Area, Quest, QuestEntity, QuestNpc, Section } from "../domain";
 import { area_store } from "../stores/AreaStore";
 import { quest_editor_store } from "../stores/QuestEditorStore";

src/rendering/entities.test.ts

@@ -1,6 +1,6 @@
 import { CylinderBufferGeometry, MeshLambertMaterial, Object3D } from "three";
 import { DatNpc, DatObject } from "../data_formats/parsing/quest/dat";
-import { Vec3 } from "../data_formats/Vec3";
+import { Vec3 } from "../data_formats/vector";
 import { NpcType, ObjectType, QuestNpc, QuestObject } from "../domain";
 import { create_npc_mesh, create_object_mesh, NPC_COLOR, OBJECT_COLOR } from "./entities";
 

src/rendering/index.ts

@@ -1,4 +1,4 @@
-import { Vec3 } from "../data_formats/Vec3";
+import { Vec3 } from "../data_formats/vector";
 import { Vector3 } from "three";
 
 export function vec3_to_threejs(v: Vec3): Vector3 {

src/stores/ModelViewerStore.ts

@@ -8,6 +8,7 @@ import {
     Mesh,
     MeshLambertMaterial,
     SkinnedMesh,
+    Clock,
 } from "three";
 import { Endianness } from "../data_formats";
 import { ArrayBufferCursor } from "../data_formats/cursor/ArrayBufferCursor";
@@ -42,6 +43,8 @@ class ModelViewerStore {
         .fill(undefined)
         .map((_, i) => new PlayerAnimation(i, `Animation ${i + 1}`));
 
+    readonly clock = new Clock();
+
     @observable.ref current_player_model?: PlayerModel;
     @observable.ref current_model?: NjObject<NjModel>;
     @observable.ref current_bone_count: number = 0;
@@ -117,10 +120,24 @@ class ModelViewerStore {
         }
     };
 
+    pause_animation = action("pause_animation", () => {
+        if (this.animation) {
+            this.animation.action.paused = true;
+            this.animation_playing = false;
+            this.clock.stop();
+        }
+    });
+
     toggle_animation_playing = action("toggle_animation_playing", () => {
         if (this.animation) {
             this.animation.action.paused = !this.animation.action.paused;
             this.animation_playing = !this.animation.action.paused;
+
+            if (this.animation_playing) {
+                this.clock.start();
+            } else {
+                this.clock.stop();
+            }
         }
     });
 
@@ -150,6 +167,7 @@ class ModelViewerStore {
             action: mixer.clipAction(clip),
         };
 
+        this.clock.start();
         this.animation.action.play();
         this.animation_playing = true;
         this.animation_frame_count = Math.round(PSO_FRAME_RATE * clip.duration) + 1;

src/stores/QuestEditorStore.ts

@@ -1,7 +1,7 @@
 import Logger from "js-logger";
 import { action, observable, runInAction } from "mobx";
 import { parse_quest, write_quest_qst } from "../data_formats/parsing/quest";
-import { Vec3 } from "../data_formats/Vec3";
+import { Vec3 } from "../data_formats/vector";
 import { Area, Quest, QuestEntity, Section } from "../domain";
 import { create_npc_mesh, create_object_mesh } from "../rendering/entities";
 import { area_store } from "./AreaStore";

src/ui/RendererComponent.tsx

@@ -6,6 +6,7 @@ import { Camera } from "three";
 export class RendererComponent extends Component<{
     renderer: Renderer<Camera>;
     className?: string;
+    on_will_unmount?: () => void;
 }> {
     render(): ReactNode {
         let className = "RendererComponent";
@@ -20,6 +21,7 @@ export class RendererComponent extends Component<{
 
     componentWillUnmount(): void {
         window.removeEventListener("resize", this.onResize);
+        this.props.on_will_unmount && this.props.on_will_unmount();
     }
 
     shouldComponentUpdate(): boolean {

src/ui/viewer/models/ModelViewerComponent.tsx

@@ -25,7 +25,10 @@ export class ModelViewerComponent extends Component {
                 <div className="v-m-ModelViewerComponent-main">
                     <ModelSelectionComponent />
                     <AnimationSelectionComponent />
-                    <RendererComponent renderer={get_model_renderer()} />
+                    <RendererComponent
+                        renderer={get_model_renderer()}
+                        on_will_unmount={model_viewer_store.pause_animation}
+                    />
                 </div>
             </div>
         );