Importing 3d models at runtime (OBJ with MTL)

Some other major webgl frameworks (three.js, babylon, unity) support loading OBJ files in the application’s runtime. Using this webgl-obj-loader I was able to accomplish this in my Playcanvas project. However, this does not read in the texture information in the MTL file, and the result in PC is a beige model that is otherwise correct. MTL loading is listed as one of the Github issues on that project, where the author says he is unsure how to approach the problem.

The significance of being able to import OBJ with MTL is that, using the FBX SDK, one could programmatically import any format by first converting to OBJ (Will’s suggestion). OBJ is arbitrary but the simplest format. I was unable to find webgl importers for other formats and also unable to get my head around writing an importer from scratch.

Another OBJ loader has MTL support but it is much simpler in that its output more closely resembles the original OBJ, containing faces data. I notice that three.js seems to natively support drawing faces in its drawmesh function whereas playcanvas does not. I think that if PC could draw facewise, then applying the material from MTL would be simpler. Anyways, the resultant model using this method in PC looks like this (a motorcycle):

Also, here is some sample code how I use the webgl-obj-loader’s output in Playcanvas :

    var app = pc.Application.getApplication("application-canvas");
    var context = app.context;
    var sceneEntity = context.root.findByName("scene");

    var pcMesh = pc.createMesh(,
          normals: mesh.vertexNormals,
          uvs: mesh.textures,
          indices: mesh.indices
    var material = new pc.StandardMaterial(); 
    var node = new pc.GraphNode();

    var instance = new pc.scene.MeshInstance(node, pcMesh, material);

    var model = new pc.scene.Model();
    model.graph = node;
    model.meshInstances = [ instance ];


Relevant links:

One thing to remember is that pc.createMesh assumes that the mesh you’re creating has no more than 65535 vertices (if it is an indexed mesh). See this line that decides that the index buffer of the mesh should have 16-bit indices. However, that motorcycle mesh doesn’t look incredibly high poly so maybe it is related to the face issue that you mention. Essentially, you just have to triangulate the faces. Three probably does that internally - WebGL can’t render anything other than triangles. :slight_smile:

Hi! I’m trying to build a PlayCanvas application that loads and displays meshes from a website. I’m not dead set on the .obj file format at all, this is just the only thread that I could find that does anything similar to what I need.

A couple of questions:

  • did you manage to solve the issues with the importer that supports MTL?
  • how did you reference that script in PC? I tried making a copy and saving it as a script asset, however it seems to access other libraries using the “require” keyword and I have no idea how that works in PC.

Sorry if these are stupid questions. I am not familiar with PC and have never used JavaScript before, so this is proving a bit tricky for me.