Jump to content

Compound Polyhedron of Icosahedron

Pranav Sathy

Recommended Posts

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:


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!

Link to comment
Share on other sites

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).

PlanetGen v0.0.1.png

Link to comment
Share on other sites

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. 


planetGen v0.0.2.png

Link to comment
Share on other sites

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 ?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

^ 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.

Link to comment
Share on other sites


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

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 :D


Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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



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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...