How does multi-texture OBJ->JSON converted files keeps track of face-texture mapping?

Question

I'm trying to manually (no libs such as Three.js) load a JSON 3D model into my webGL code just for fun but I'm having a hard time when my models have more than 1 texture. In a OBJ->JSON converted file, how do I know which texture is the "active" for the faces that follow? OBJ files use 'usemtl' tag to identify the texture/material in use but I can't seem to find that kind of pointer when working with JSONs. In time, I'm using the OBJ->JSON converter written by alteredq

Thanks a bunch, Rod

Answer 1

Take a look at this file: three.js / src / extras / loaders / JSONLoader.js.

The first element of each face in the faces array of the JSON file is a bit field. The first bit says if that face have three o four indices. And the second bit says if that face has a material assigned. Material index, if any, appears after indices.

Example: faces: [2, 46, 44, 42, 0, 1, 45, 46, 48, 3, ...

First face (triangle with material):

Type: 2 (00000010b)
Indices: 46, 44, 42
Material index: 0

Second face (quad without material):

Type: 1 (00000001b)
Indices: 45, 46, 48

Third face (quad with material):

Type: 3 (00000011b)
Indices: ...

Check source code for full meaning of that bit field.

Answer 2

In the OBJ->JSON converter I have written for the KickJS game engine, each material has its own range of indices.

This means a simple OBJ model such as

    mtllib plane.mtl
    o Plane
    v 1.000000 0.000000 -1.000000
    v 1.000000 0.000000 1.000000
    v -1.000000 0.000000 1.000000
    v -1.000000 0.000000 -1.000000
    usemtl Material
    s 1
    f 2 3 4
    usemtl Material.001
    f 1 2 4

Would be translated into this (With two indices; one for each material):

    [
       {
          "vertex": [1,0,1,-1,0,1,-1,0,-1,1,0,-1],
          "name": "Plane mesh",
          "normal": [0,-1,0,0,-1,0,0,-1,0,0,0,0],
          "indices0": [0,1,2],
          "indices1": [3,0,2]
       }
    ]

Use the online model viewer for the convertion:

http://www.kickjs.org/example/model_viewer/model_viewer.html