Add support for mtl colors

SharpCoder · SharpCoder · commit 727ca18298d9 · 2023-05-02T18:29:28.000-07:00
diff --git a/src/models.ts b/src/models.ts
@@ -90,6 +90,18 @@ export type bbox = {
 
 export type repeat_mode = 'repeat' | 'clamp_to_edge' | 'mirrored_repeat';
 
+export type Material = {
+    name: string;
+    shininess?: number;
+    ambient?: number[];
+    diffuse?: number[];
+    specular?: number[];
+    emissive?: number[];
+    opticalDensity?: number;
+    illum?: number;
+    opacity?: number;
+};
+
 export type texture = {
     uri: string;
     repeat_horizontal: repeat_mode;
diff --git a/src/parsers/index.ts b/src/parsers/index.ts
@@ -1,4 +1,4 @@
-import { texture } from '../models';
+import { Obj3d, texture } from '../models';
 import { OBJParser } from './objParser';
 import { OFFParser } from './offParser';
 
@@ -8,7 +8,7 @@ export type ParsedModel = {
     vertexes: number[];
     texcoords: number[];
     texture?: texture;
-};
+} & Partial<Obj3d>;
 
 export type Extensions = 'off' | 'obj';
 export async function loadModel(
diff --git a/src/parsers/objParser.ts b/src/parsers/objParser.ts
@@ -1,5 +1,5 @@
 import type { ParsedModel } from '.';
-import { texture } from '../models';
+import { Material, texture } from '../models';
 
 function parseNumbers(row: string, skip: number) {
     const result = row.trim().split(' ');
@@ -9,11 +9,14 @@ function parseNumbers(row: string, skip: number) {
         .map((item) => parseFloat(item));
 }
 
-let materials = {};
+let materials: Record<string, [Material[], texture]> = {};
 export async function OBJParser(
     file: string,
     path: string
 ): Promise<ParsedModel> {
+    let activeMaterial: Material = undefined;
+    const materialsList: Record<string, Material> = {};
+
     const lines = file.split('\n');
     const basepath = path.substring(0, path.lastIndexOf('/') + 1);
     const positions: Array<number[]> = [[0, 0, 0]];
@@ -23,6 +26,7 @@ export async function OBJParser(
         normals: [],
         texcoords: [],
         vertexes: [],
+        colors: [],
     };
 
     const sourceMap = {
@@ -56,6 +60,23 @@ export async function OBJParser(
                         }
                     }
                 }
+
+                // Add the respsective color
+                if (activeMaterial) {
+                    const r =
+                        activeMaterial.diffuse[0] * activeMaterial.shininess;
+                    const g =
+                        activeMaterial.diffuse[1] * activeMaterial.shininess;
+
+                    const b =
+                        activeMaterial.diffuse[2] * activeMaterial.shininess;
+
+                    result.colors.push(
+                        Math.min(r, 255.0),
+                        Math.min(g, 255.0),
+                        Math.min(b, 255.0)
+                    );
+                }
             }
         }
     }
@@ -87,6 +108,11 @@ export async function OBJParser(
                 continue;
             }
 
+            case 'usemtl': {
+                activeMaterial = materialsList[parts[1]];
+                continue;
+            }
+
             case 'vt': {
                 // Texture position
                 texcoords.push(parseNumbers(line, 1));
@@ -107,16 +133,24 @@ export async function OBJParser(
                     materials[parts[1]] = parseMtl(mtlfile, basepath);
                 }
 
-                result.texture = materials[parts[1]];
+                result.texture = materials[parts[1]][1];
+
+                // Create a materials list
+                for (const mtl of materials[parts[1]][0]) {
+                    materialsList[mtl.name] = mtl;
+                }
             }
         }
     }
 
     return result;
 }
 
-function parseMtl(file: string, basepath: string): texture {
+function parseMtl(file: string, basepath: string): [Material[], texture] {
     const lines = file.split('\n');
+    const materials: Material[] = [];
+    let mtl: Material = undefined;
+
     const result: texture = {
         uri: '',
         repeat_horizontal: 'clamp_to_edge',
@@ -131,13 +165,83 @@ function parseMtl(file: string, basepath: string): texture {
             .map((item) => item.trim());
 
         switch (parts[0]) {
+            case 'newmtl': {
+                if (mtl) {
+                    materials.push(Object.assign({}, mtl));
+                }
+
+                mtl = {
+                    name: parts[1],
+                };
+                continue;
+            }
+            case 'Ka': {
+                mtl.ambient = [
+                    parseFloat(parts[1]),
+                    parseFloat(parts[2]),
+                    parseFloat(parts[3]),
+                ];
+                continue;
+            }
+
+            case 'Ns': {
+                mtl.shininess = parseFloat(parts[1]);
+                continue;
+            }
+
+            case 'Kd': {
+                mtl.diffuse = [
+                    parseFloat(parts[1]),
+                    parseFloat(parts[2]),
+                    parseFloat(parts[3]),
+                ];
+                continue;
+            }
+
+            case 'Ks': {
+                mtl.specular = [
+                    parseFloat(parts[1]),
+                    parseFloat(parts[2]),
+                    parseFloat(parts[3]),
+                ];
+                continue;
+            }
+
+            case 'Ke': {
+                mtl.emissive = [
+                    parseFloat(parts[1]),
+                    parseFloat(parts[2]),
+                    parseFloat(parts[3]),
+                ];
+                continue;
+            }
+
+            case 'd': {
+                mtl.opacity = parseFloat(parts[1]);
+                continue;
+            }
+
+            case 'Ni': {
+                mtl.opticalDensity = parseFloat(parts[1]);
+                continue;
+            }
+
+            case 'illum': {
+                mtl.illum = parseInt(parts[1]);
+                continue;
+            }
+
             case 'map_Kd': {
                 result.uri = basepath + parts[1];
                 continue;
             }
         }
     }
 
-    if (result.uri.length === 0) return undefined;
-    return result;
+    if (mtl) {
+        materials.push(Object.assign({}, mtl));
+    }
+
+    if (result.uri.length === 0) return [materials, undefined];
+    return [materials, result];
 }
diff --git a/src/shaders/default.ts b/src/shaders/default.ts
@@ -32,7 +32,7 @@ const default3DFragmentShader = `
     
     varying vec4 v_color;
     varying vec2 v_texcoord;
-
+    
     // The texture
     uniform sampler2D u_texture;
     uniform bool u_showtex;
