frenchtoast747 / webgl-obj-loader

A simple OBJ model loader to help facilitate the learning of WebGL.
http://frenchtoast747.github.io/webgl-obj-loader/
MIT License
282 stars 59 forks source link

I get "" in filename on the sponza #64

Closed manueldun closed 5 years ago

manueldun commented 5 years ago

I get empty string ("") in filename on the sponza 3d model material downloaded from this site https://casual-effects.com/data/.

Maybe I dont understand the source code yet, can somebody tell me where can I get the texture image path/filename from each material.

my code is more or less this:

var sponzaMeshObjText = getString('Assets/sponza/sponza.obj');
var sponzaMeshObj = new OBJ.Mesh(sponzaMeshObjText);
var material = new OBJ.Material(sponzaMeshObj.materialNames[0]);
console.log(material);

I could load it manually but the sponza model have a lot of meshes and textures.

frenchtoast747 commented 5 years ago

I apologize for taking so long to respond. My wife recently had twins and we've been a little... busy :)

Thanks for reporting! I will take a look at the problem and try to get back with you as soon as I can!

frenchtoast747 commented 5 years ago

Alright, so I've figured out what's going on @manueldun.

The Mesh object constructed has a list of materials that belong to it, so the fact that you can use materialNames to access which materials that Mesh object references is correct.

However, calling the Material constructor by itself creates an empty Material by default and shouldn't be used directly. Instead, the MaterialLibrary class should be used and should be passed a string of the .mtl contents.

E.g.

const OBJ = require("webgl-obj-loader");

const mtlText = `
newmtl leaf
    Ns 10.0000
    Ni 1.5000
    d 1.0000
    Tr 0.0000
    Tf 1.0000 1.0000 1.0000 
    illum 2
    Ka 1 1 1
    Kd 1 1 1
    Ks 0.0000 0.0000 0.0000
    Ke 0.0000 0.0000 0.0000
    map_Ka textures\sponza_thorn_diff.png
    map_Kd textures\sponza_thorn_diff.png
    map_d textures\sponza_thorn_mask.png
    map_bump textures\sponza_thorn_bump.png
`;

const m = new OBJ.MaterialLibrary(mtlText);
console.log(m);

Which should produce an object similar to: image

As you can see in the above image, you can access the parsed filename via m.materials.leaf.mapAmbient.filename.

Take a look at the downloadModels() utility function for an example of how to manually parse both the Mesh and the Material library: https://github.com/frenchtoast747/webgl-obj-loader/blob/master/src/utils.ts#L223