Compound Polyhedron of Icosahedron

[Pranav Sathy]

Hi Everyone,

This is my fist post on the Babylon.js subforum, and I must say that I am really loving the framework! Recently, I have been following this article by Andy Gainey:

http://experilous.com/1/blog/post/procedural-planet-generation#cylindersAndSpheres

His original code is in Three.js, however I do not need all of his code, I just adopted the portion of the code that generates a subdivided Icosahedron. I am running into some difficulties generating and rendering the compound polyhedron of this icosahedron (such that each new vertices of the mesh are the centroid of each face of the Icosahedron). 

I have it so that I render the compound polyhedron, however it has the following issues:
 

• The triangles that compromise each face are blatantly obvious
• I need to render the face both ways (duplicate the indices in reverse), because some faces don't render if I don't do that
• I becomes slow compared to the icosahedron generation.
• There are excessively more vertices generated than required (however I want to be able to color each face individually)

 

Here is the github repo with the code: https://github.com/PranavSathy/planetgen

Lines of interest are:

• 335-353 : They order the face centroids of the Icosahedron to generate the hexagons/pentagons
• 355: Inserting the face indices for rendering into the indices buffer

 

I look forward to your opinions/suggestions, thanks everyone!

[jerome]

http://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter#icosphere   ?? ;-)

[Pranav Sathy]

Hi @jerome, thanks for the reply but the issue was not creating an icosphere, but rather a "hex-tile" planet as suggested Andy Gainey. However, after much math, I think I have finally come up with a solid algorithm for calculating and rendering the reciprocal (dual) of the icosphere. 

I fixed the issue with the faces being blatantly obvious, removed the need for inside faces to be rendered, and managed to get a random coloring to demonstrate that the sphere can indeed be colored. 

My only current issue at the moment is speed, with a "subdivision" option set to 25, it takes my Macbook Pro a solid 20 seconds to calculate and render the sphere, I really need the subdivision level at the 30-40 range to realize my game. I updated my code @ https://github.com/PranavSathy/planetgen , if anyone sees any potential optimization please tell me I am gonna keep chugging away at it now.

Uploaded a screen to illustrate what the reciprocal of an icosphere looks like (with colors).

[GameMonetize]

Lovely!

[Pranav Sathy]

I suppose this is going to become more of an update sort of thread, but for some reason I just could not overcome the speed issues in BJS. I switched to Three.js to see if there would be any marked difference, and for some reason (and I mean this in no way offensively to the wonderful people here) it is ridiculously faster. It would time out to render a "30" subdivision hexsphere in BJS, however it takes less than 2 seconds to render "80" subdivision in Three.js (no asynchronous code). I know "subdivision" is a rather arbitrary unit, however each subdivision doubles the # of faces (so it exponential growth). The # of faces on the hexsphere = 12*2^(subdivisions - 1).

I would love to try and communicate with the BJS devs here to see what could be the cause of such a drastic change in performance between BJS and 3JS. 

Cheers!

[adam]

Can we view the code that was running slowly in BJS?

[jerome]

What is faster ? the pre-computation ?

Could you please share a PG so we could (maybe) check what is improvable ?

 

Not sure your final mesh geometries are the same in the two versions... did you count the vertices / indices (if any) in the different versions ?

[GameMonetize]

There is obviously something different  

[jerome]

please try to convert your mesh to an unindexed one : mesh.convertToUnIndexedMesh() to check if there's an improvement.

I guess you've done somewhere a conversion to flatShadded that you didn't do in 3js either.

I believe you don't really compare the same final meshes in your both versions (bjs vs 3js). Just compare the vertice numbers in both.

[GameMonetize]

Could you also check the creation time only? Even better share the code of both so we can help you.

[Pranav Sathy]

^ All the code is viewable publically in my Github  (https://github.com/PranavSathy/planetgen) the current revision is all 3JS, however all the previous commits are BJS. The code I compared was _verbatim_ the same (minus the geometry code obviously since 3JS positions are THREE.Vector3 and faces are THREE.Face3)

I was not familiar  with the mesh.convertToUnIndexedMesh() function, what exactly does that do. Also, the committed version I have right now actually does have a little bit different "pre-computation" code, but when I tested 3JS vs BJS they were literally the exact same code minus the pushing of vertices and faces.

[GameMonetize]

YOU.MUST.BE.KIDDING.ME!!

Were you drunk when you wrote the Babylon.js version ?

I was not able to find a _verbatim_ (your word) comparable version. Bjs version is filled with tons of loops which are not in the 3js version.

 

So to defend babylon.js honor (!! :)) I spent 30 minutes porting the 3js version back to babylon.js:

http://www.babylonjs.com/temp/planetGen/ (code is also attached to this post)

I also added a small watch to check and compare performance:

* Bjs generates the polyhedron (40 subs) in 176ms

* 3js generates the polyhedron (40 subs) in 275ms (3js version here: http://www.babylonjs.com/temp/planetGen/tjs/)

 

I guess I said everything

planetGenerator.js

[GameMonetize]

And the result can still be improved but I'm tired now

[Pranav Sathy]

Questions abound:
 

1. What does convertToFlatShadedMesh() do?
2. Does BJS have "LineSegment" meshes like 3JS (The borders around the tiles will be a lot easier to render with LineSegments), I looked at the code, I am trying to create something like it but failing rather hard (only have tried for about 10 minutes now though).
3. I saw that BJS doesn't have a line thickness option because OpenGL ES 2.0 does not have that , but how does 3JS implement it?
4. What other improvements can be made? (YOU ARE MY HERO SHOW ME YOUR WAYS lol)

 

I must have failed to commit my code, but I actually just ran my own tests and I figured out what the massive issue in BJS was, and it really wasn't the loops (they only affected it slightly, a few ms at most). The biggest problem was was doing:

 

// Render Time Because Of This One Line - 93532 ms @ subdivision 40
positions = positions.concat(centroid.asArray());

// Render Time - 270 ms @ subdivision 40
positions.push(centroid.x, centroid.y, centroid.z)

 

Thanks for helping me correct some of these issues! I am attempting to draw some borders at the moment. I hope to be able to contribute something back sooner or later once I find something meaningful.

[eboo]

hi

here a playground:

http://babylonjs-playground.com/#1T1MPZ#2

 

 

 

[Pranav Sathy]

Thanks eboo, http://babylonjs-playground.com/#1T1MPZ#4 <- I have it so that clicking a face highlights the face, I was just hoping for a higher line thickness.

[GameMonetize]

This could be achieved with Ribbons I guess

[jerome]

#3 : http://threejs.org/docs/#Reference/Materials/LineBasicMaterial.linewidth

the line thickness doesn't work with WebGL rendered of 3JS either

[Pranav Sathy]

It says Windows platform that it won't work, it does work on my Mac (which is interesting why it is platform dependent to me anyways), but fair enough. I am looking to see if I can create my borders with a mesh as it is :).

Perhaps it's also my newness to all this, but the visual fidelity of BJS is so much better than 3JS, for the same mesh and coloring / lighting. 

[jerome]

this icopolyhedron is so beautiful that ... I can't resist to blow it up http://babylonjs-playground.com/#1T1MPZ#5

click !

 

[EDIT] bigger sides : http://babylonjs-playground.com/#1T1MPZ#8

[adam]

[DELETED]  starting a new thread:

 

[jerome]

funny : the way the ico-polyhedron can be digested by the SPS at the line 403 ... nice mosaics :-)

facetNb = 1 : http://babylonjs-playground.com/#1T1MPZ#9

2 : http://babylonjs-playground.com/#1T1MPZ#10

3 : http://babylonjs-playground.com/#1T1MPZ#11

 

from 1 to 3 facets par particle : http://babylonjs-playground.com/#1T1MPZ#12

etc

 

playing with pseudo-physics also : http://babylonjs-playground.com/#1T1MPZ#14

[Pranav Sathy]

That's frigging awesome! I guess just to post my updates, I am going back to school soon so I am going to be posting less, but currently I am working on UV unwrapping the ICOSPHERE so that I can apply a heightmap to the entire icosphere, and get some serious cools looks on it. I will try and post the pics once it comes to fruition :), thanks for all your help!

[RaananW]

And now.... with real physics!

http://babylonjs-playground.com/#1T1MPZ#15

[jerome]

YEEEAAAAHHHHH !

 

Now, I want it with relativistic physics instead of newtonian ones, please. I need it for my homework project