Making a 3js model importer

[chicagobob123]

I am trying to make a simple 3js importer. Using the simplest object I have which is a box I tried using the online example someone had give me. 

Just including the model as a script makes the job much simpler. No async issues. 

The only alteration to the 3js file is to add var name of the model

var FortyFtContainer= 

Later I figured I could pull out the names of the material and add them

This is the rough start but I cant get the point order right. 

http://www.babylonjs-playground.com/#UDUFX#8

I have tired to use the original faces point ordering and then tried to swap them as was done in a prior example. 

Any of you much smater guys have some ideas?

[chicagobob123]

Forget I said anything. I am going to go back and pound this out. 

Found the json explanation online lots of things to work on.

 

[chicagobob123]

Yeah I have a cube.  http://www.babylonjs-playground.com/#UDUFX#10

Now to try and get some UV mapped material on it. 

[GameMonetize]

This could become an official loader

[chicagobob123]

If I can attache the UV material to it. Cant even get a material to show up on the cube. 

I tried online and here and the nothing happens. No image texture. Online I dont even get a cube anymore. 

Not sure the texture is there. I just took the address from another online example

    var mat = new BABYLON.StandardMaterial("texture1", scene);
    mat.diffuseTexture = new BABYLON.Texture("textures/tree.png", scene);
    mat.diffuseTexture.hasAlpha = true;//Have an alpha
    mat.backFaceCulling = false;//Show all the faces of the element
    
      //   var mat = new BABYLON.StandardMaterial("mat1", scene);
        mat.alpha = 1.0;
      //  mat.diffuseColor = new BABYLON.Color3(0.5, 0.5, 1.0);
     //   mat.freeze()
        Container.material = mat;

 

http://www.babylonjs-playground.com/#UDUFX#23  works

http://www.babylonjs-playground.com/#UDUFX#24

 

When the loader is done with textures I am hoping that the performance stays here are 24000 as particles

http://www.babylonjs-playground.com/#UDUFX#32

[GameMonetize]

it works here: http://www.babylonjs-playground.com/#UDUFX#36 (turn the camera a bit to see the texture)

[GameMonetize]

or there: http://www.babylonjs-playground.com/#UDUFX#37

 

[chicagobob123]

I saw this work on my phone but at work it was not showing up on my monitor. And the other larger image I had did not show up at all. Its 1K x 1K .

So do you know anything about how to map multiple UV materials to the Mesh Object? From what you can see of the 3js file there isn't much inside. I loaded a pretty large mesh and it worked well but there is a HUGE part missing the UV mapped material. 

I am only vaguely familiar with this level of detail.

vertices are the actual points on a mesh. 

indices/faces are needed to reduce the number vertices defined and point to vertices that make triangles to make the mesh.  

UV is the percent of the texture to be mapped to some vertices of a mesh. 

From the documentation I gather you have submeshs that are tied to vertices that can map to a material. 

I cant comprehend how that works with indices. Unless the vertex array can be an indices array?

Somehow the docs and what I have are not gelling in my brain. 

Any pointers would be great. 

Thanks all. 

And thanks for the patience. 

 

[GameMonetize]

If it works on your phone then you may have a cache/network issue at work.

Regarding how meshes are build.

Vertices are defined by several buffers.

Only two are mandatory:

• positions: the list of positions (x, y, z). The minimal amount is 3 as you cannot define something smaller than a triangle
• indices: The index of positions to use to create faces. A face is made of 3 positions. So the minimal amount of indices is 3

 

Here is then the most basic mesh you can create:

{
"positions": [0, 0, 0,
			 0, 1, 0,
			1, 0, 0],

"faces": [0, 1, 2]
}

Then you can add more information per vertex. For instance every vertex can also have a normal to compute dynamic lightning.

And you can add UVs to texture image on your object. UVs are 2D coordinates attached to every position. They are in the range of [0,0] to [1,1]. They represent a coordinate on a texture.

With that in mind here is a more complete mesh (Still a triangle):

{
"positions": [0, 0, 0,
			 0, 1, 0,
			1, 0, 0],

"normals": [0.0, 1.0,
			0.0, 1.0,
			0.0, 1.0],

"uvs": [0, 0,
		0, 1,
		1, 0],

"faces": [0, 1, 2]
}

So what to do to get a plane?

Just add one position, one normal, one UV and a new face (so 3 indices):

{
"positions": [0, 0, 0,
			 0, 1, 0,
			1, 0, 0,
            1, 1, 0],

"normals": [0.0, 1.0,
			0.0, 1.0,
			0.0, 1.0,
            0.0, 1.0],

"uvs": [0, 0,
		0, 1,
		1, 0,
        1, 1],

"faces": [0, 1, 2,
          0, 2, 3]
}

 

[chicagobob123]

How is the face indices linked to an indexed material list.

Suppose a Model has one mesh but two materials UV mapped.

How do you link those materials to the Babylon Mesh to the faces? 

So you create a MultiMaterial like this. And push on each material into the list. 

var multimat = new BABYLON.MultiMaterial("multi", scene);
multimat.subMaterials.push(material0);
multimat.subMaterials.push(material1);

What I am trying to understand, using your example is how face 0,1,2 links to material0  and face 0,2,3 links to material 1 

From an online example they had something like this. And this means that each material must have a linear list of indices for that material. 

I am getting the drift here and will work on this.  In the mean time I am uploading the material for the container can you place it someplace for use in the playground?

This way I might be able to tell whats wrong on my side which still doesn't work

sphere.subMeshes.push(new BABYLON.SubMesh(0, 0, verticesCount, 0, 900, sphere));
sphere.subMeshes.push(new BABYLON.SubMesh(1, 0, verticesCount, 900, 900, sphere));

[jerome]

just a suggestion : if your container is just a box and if your 6 textures can be in the same texture file, you could just use the BJS box and the per face texture property  http://doc.babylonjs.com/tutorials/CreateBox_Per_Face_Textures_And_Colors

 

[chicagobob123]

I have other much more complicated models in 3Js . Using the box as a small but useful example that most programmers can figure out

[GameMonetize]

To adapt multi material to my example, I would write:

mesh.subMeshes = [];
mesh.subMeshes.push(new BABYLON.SubMesh(0, 0, 6, 0, 1, mesh));
mesh.subMeshes.push(new BABYLON.SubMesh(1, 0, 6, 1, 1, mesh));

So basically a submesh is defined by:

constructor(public materialIndex: number, public verticesStart: number, public verticesCount: number, public indexStart, public indexCount: number, mesh: AbstractMesh)

 

[chicagobob123]

Are you sure thats right BABYLON.SubMesh(0,0,6,0,1,mesh)

0 is he material index Got it. 

But 6 verticesCount ? 

I dont understand 6 vertices Isn't that the indicies count? There are only 4 vertices for a plane

and a box has 8 vertices. 

There are 2 faces/triangles so 0,1  

1,1 are the number of complete faces/triangles in the submesh

Still dont understand the 6 unless that is the raw vertexes represented by the indicies.  

http://www.babylonjs-playground.com/#UDUFX#62

Here is the modified version. I tired it with a version that had 5 UV maps and got only one to work. 

 

 

[GameMonetize]

Man..I'm an idiot 

it is 4 and not 6...Sorry about that.

 

[GameMonetize]

can you simplify a bit your sample(like just with a box)?

[chicagobob123]

"can you simplify a bit your sample(like just with a box)?"

 Like this

Then it wouldn't be importing a 3js file which is the point to the example. 

The 3js file is just a box with a UV mapped texture. 

 

[GameMonetize]

I mean with simple coordinates..like 0, 1

But by the way I see that your files comes from 3dsmax. Why not using our exporter then?

[chicagobob123]

" I mean with simple coordinates..like 0, 1  "

OOOOh... I will work on that. Currently trying to finish the proof of concept to work which leads me to my second item.. 

"But by the way I see that your files comes from 3dsmax. Why not using our exporter then?"

Currently I cant get the time from our 3D guys to redo the models I have. 

So I have turned this into mental exercise. I am not sure I needed to re- remember all this but hey.. 
The UVS are my last struggle looking at older examples and documentation to get this done. 

 

[GameMonetize]

Regarding your 3D guys, they literally just need to click on a button

[chicagobob123]

Is there any info on how the uvs correlate to the vertexes/faces?

In your example above for a simple plane there are 2  triangles and 4 vertices and 4

UV pairs. The UV pairs are tied to ? 

"uvs": [0, 0, 0, 1, 1, 0, 1, 1],

What I am trying to understand is for a box there are 6 square faces so 24 UV pairs

and 12 faces and only 8 vertices. 

So how does Babylon join UV pairs to this group?

What is it expecting? In what order. 

I will try to draw something up on paper and this last clue should help me finish this code. 

 

 

[GameMonetize]

uv pairs are tied to position

first position associated to first uv pair and so on.

To map 24 differents uv pairs you cannot have 8 vertices. You need 24 vertices

 

[chicagobob123]

Want to be 100% clear.

You are talking positions not indices.  Funny to conserve space they wouldn't have a uv indicie group. Alrightie then.  Can add positions to make this work.

I experimented a bit and its not working. I created 4 vertex faces after the top and bottom were vertexes were defined. That would be the first 8 positions. 

next for is the right side, etc. I set them all to uv 0,0 1,0  0,1 1,1 

http://www.babylonjs-playground.com/#UDUFX#91

I put in 48 vertices. Each vertex has a UV value pair for the six faces. 

 

[JohnK]

Not sure whether the post from me from a previous topic sheds any light on what you are trying to achieve or not but it might be worth a look.

Quote

 

I used the playground to create two Cubes, one uses your CreatePolyhedron method and one the new CreateBox method. Checking the VertexData for both shows the difference.

In the CreateBox method there are 24 positions and 24 normals, since each of the 8 vertices is listed 3 times; once for each face it belongs to and each of the 6 normals (one per face) is listed 4 times once for each vertex on that face. The UVs are also listed 24 times each one matched in 1-1 correspondence with the positions.

In the CreatePolyhedron method there are 8 positions and 8 normals one for each of the 8 vertices. The normals are now not normal to a face but are formed from the 3 face normals at each vertex. This method of storing the VertexData is more efficient since it uses a third less memory but does not contain sufficient data for the uvs to be applied.

http://www.babylonjs-playground.com/#1H7L5C#29 shows the two cubes and the normals at the vertices. The lower one is made using the CreateBox method and all faces contain the image in a proper way.

Interestingly the use of .convertToFlatShadedMesh(); produces 36 positions since it creates two facets per face and then 4 vertices belong to 6 facets and 4 vertices belong to 4 facets and there are 36 normals. The UV array also has 36 entries but I presume they do not now match correctly the positions.

Remove the comment from line 70 in the playground above and see the difference.

 

This was the topic

 

[chicagobob123]

Thanks a bunch for the reply. I dont have the environment set up to check this out in a debugger but I hope this will connect the dots. In the end I will be really happy to understand this part of the puzzle.