How to export extra indices datas of a mash

[heyzxz]

Hi there,

Maybe this is a question at a wrong place, but I think there must be some guys on this forum who have experience on dealing with it, and I hope some of you can give me some good advises

Let's say I have a 3D earth model ( made with Blender ), and there are countries on the earth. What I want is when user mouse over a country, it can draw a border line of that country . Here is a very good example. 

  

In this example, my question is how they get/export the border informations for each country? I have checked their data files, it's obvious that the 'border' informations are stored in the data file, I'm wondering how the export these informations to the data file,  and what kind of tools can do such things. Any ideas? 

Thank you!

 

[Wingnut]

Cooooool.  @JCPalmer and @gryff are two of the better Blender experts we have around here, I think.  

Plus, this is interesting, and has a lot of future potential, I believe.  So, they need to come visit and look, if they have a moment.  They are both pretty busy.  Gryff is a Bell helicopter pilot, working the California fires at the moment.  And JC travels on the NHRA circuit... driving top fuel dragsters during the racing season.

What's that?  You think I made that up?  Yeah, me too. 

[JCPalmer]

Blew a front tire, what a f'ing disaster.

.babylon files do not store spare parts per say.  You have probably 2 options I can think of:

1. Add more vertices & assign them a unique clear material.  When the desired event occurs, change the material.  This is not very scalable, certainly for 100 countries.
2. Add another mesh for each mesh with a shared material with some alpha.  Load them disabled (See mesh exporter properties).  When events occur setEnabled(true/false).

[Pryme8]

use mesh imposters for each country, and make sure your model you imported is split up by country and inactive areas (oceans). Then you use the imposter or could even just test for what mesh the pointer is over and adjust the material accordingly.

it will just be setting up your object and making sure it's split up correctly then be able to reference the parts.  I would make a js object and then do a obj load then assign each us mesh to a named ai object of the new object so 

world = {America:importedmesh[1], oceans:importedmesh[0]}

And from there it should be fairly easy

[Pryme8]

Or you could do a custom shader. That might actually be more technical but would be better for performance I would assume

[heyzxz]

Thank you guys!

Here are some further informations I've searched out these days, and it looks that there is a potential solution hiding in these informations.

1. To draw the border for each country：

Basically I was thinking if there is a way can do this:

No need to separate the earth model into individual countries (individual meshes), or duplicate vertices for border lines, instead, make the whole earth mesh and all the bodrer lines for countries share the same vertices( the same 'position' buffer), we only add some additional 'indices' into indices array which represent the border lines, and draw them with additional draw calls.

For example, suppose the image below represents the mesh of the whole map , and the 3 red parts represent 3 countries.

The whole map has 25 vertices ( from 0 to 24 ), so the length of the position buffer should be 75.

Then, we make the indices buffer like this:

The part A represents the whole faces of the map, just the same as usual.

The B,C and D are additional indices, which represent the border lines of that 3 countries.

Finally, when we draw the whole map and all the 3 borders, we do 4 draw calls: 

1st draw call, draw triangles with part A, the whole faces of the map;

2nd draw call, draw lines with part B, the border of one country;

3rd draw call, draw lines with part C, the border of the second country;

4th draw call, draw lines with part D, the border of the third country;

I'm not sure if this can be done with Babylonjs, (please let me know if you know how to do this with Babylonjs), But it looks that the Threejs has a way can do this. I found there is a 'BufferGeometry' class, and it has a '.addDrawCall ( start, count, indexOffset )' method which looks much close to what I want. Not confirmed yet,  I'll find out if it is a right way later.

2. How to get the additional indices datas for real countries (with the right orders which represent the correct border lines)

Instead of doing this manually, maybe, SVG can do the trick. 

Checkout this map SVG, use a devTool to check its source tags, you'll see there are many '<path>' tags and each of them represent a country, which has the border data( points, with right order from one to the next... ) and even country name . So, a potential solution may be:

1. Build the 3D earth model based on the SVG:  Import the SVG into Blender, convert it into mesh, then 'spherify' it. ( with 'Simple Deform Modifier')

2. Once the modeling work is done, export it normally.

3. Then, I think it's possible to make some kind of offline tool ( with node.js) which can auto generate the country border datas (additional indices) based on the original SVG file, then push them into the indices array of the json file. Because the model are built totally based on the SVG file, the 2d points in the original SVG should match the uvs of the vertices in the 3d model which represent the country borders, right?

Well maybe it looks like a stupid method, but at least it makes sense for me at this moment. Once you guys get some better ideas, I'll appreciate if you can share it with me. 

Thanks!

[Pryme8]

yes, your diagram is perfect! that is the way to go about it! glad we could help.

 

you could even cut the indices that are countries out of the main buffer, cause they are being handled by the sub buffers.

Also I would look at how to turn 6 planes into sphere instead of 1, it will be way easier.  cause all you would have to do is make the flat sections place them in a cube then normalize all the points with a elevation multiplier (diameter)