Sphere Rendering - 100% proper texture with multimaterials

[Subin George]

Hi Team,

 

Again I have another issue in my charting library. I have to develop a pie chart like library in 3D space. So I have created sphere and applied muti materials. But to may bad luck it was never come out as expected

 

Please check few base codes at http://www.babylonjs.com/playground/#28EUMN#1.

 

I expect the sphere to fill as per expected image.

 

I have implemnted the same with texture, but we cant make that interactive. So i am thiking about a better solution

 

Also as I am calculating below based on user input, it not rendering well(some times, full rendering, sometimes one block missing etc)

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

Ideally, could you please explain how vertices/indexes play this rendering.

 

 

Note: Expected output(one with legend)

 

[Wingnut]

Hi again, SG!  Um, take a look at ...

 

http://www.html5gamedevs.com/topic/5635-i-have-problem-with-multitexture/

 

Working with multi-materials on a sphere... is a bit of a challenge... but not so difficult when you learn what the numbers do.  Notice post #3 from Deltakosh:

 

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

    

means:

- Start at index 900 and use 900 indexes from there (900 indexes = 300 faces). So this submesh will start from face number 300 and will use 300 faces

 

I took your playground demo and tweaked it a bit.

 

http://www.babylonjs.com/playground/#28EUMN#3  ( #4 variation is there, as well )

 

It is not exactly like the picture, but I think you can see by the demo... that you have the power to make it so.

var submesh2 = new BABYLON.SubMesh(1, 0, verticesCount, 864, 649, sphere);var submesh3 = new BABYLON.SubMesh(2, 0, verticesCount, 1512, 649, sphere)var submesh4 = new BABYLON.SubMesh(3, 0, verticesCount, 2160, 649, sphere)

You see a pattern there?  864 + 649 = 1513.  1512 + 649 = 2161, etc, etc.

 

I think you can do the math now... to get your multi-material sphere looking perfect.  Its a slow process, sometimes.

 

Be careful to make sure you set the chosen amount of subdivisions of your sphere... before you start mapping the multi-materials.   Yours is currently set at 16.  If you later change it to 24 or 32, you will need to RE-map your colors, because the number of vertices/faces for the sphere... will have changed. 

 

If you have troubles, just give another yell.  I had a lot of fun playing with your sphere while I was tweaking it.  Thanks for putting it into the playground.

 

Lets talk about your pie graph a bit more.  To be honest, a classic pie graph will not be an easy task with babylon.js.  Here is a pie graph made with some specialty code and the three.js framework.  Lets take a look at the guts of this beast.  Scroll down about 1/3 page until you find the area labeled "// Creats the shape, based on the value and the radius".  See the moveTo, arc, lineTo, and THREE.ExtrudeGeometry calls in there?  Well babylon.js does not have similar calls.

 

I am not saying that it is impossible to make classic pie graphs with BJS... but some of the fancy tools that COULD help you make a pie chart... are not available.  But we DO have full shape-plotting power... in BJS.

 

Take a look at this ugly thing.  It is an arrow I once plotted (ignore the numbered boxes... they were used to help me connect the dots and can easily be removed) .  I did this plot "manually", using very little math.  And so, the JS for doing the plotting ... is rather fat.

 

All that crap aside, YOU could use the same method... to create a "pie wedge maker".  Once you created the pieWedgeMaker code, it might be called like this...

 

var wedge1 = new BABYLON.WedgeMaker(name, height, material, radius, radians, scene);

var wedge2 = ...

var wedge3 = ...

 

Height, of course, is the thickness of the pie wedge, radius would be 1/2 of the diameter of the pie, and radians would be the amount of the pie (similar to degrees of the circle).  You will have made yourself a re-usable slice-of-pie maker.  The more math you incorporate into the wedgeMaker, the smaller and more efficient the code will be. 

 

It is a rather gruesome road for you, but it can be done... and you would be a hero, eh?  Your babylon wedge maker would be used by you, and many future pie wedge makers... if you donated the code to the team.  And, there is lots of help available here in the forum, if you get stuck.

 

THAT... is MAYBE the best method to make pie graphs with babylon.js.  Maybe.  At least that is the way that I would try to do it.  Once you have built WedgeMaker... you would become Captain PieGraph, that's for sure.

 

Sorry for the long post.  I hope I was anywhat helpful.  Be well.

[Subin George]

Hi Wingnut,

 

Thanks. I am mange to figure out how the rendering works(in my own logic) and manage to formulate the same as below,

var sphereSpliter = 64; var faceMin = 6; var rowFaceCount = sphereSpliter*2 + 4;var rowSize = rowFaceCount*faceMin;var rowCount = sphereSpliter+2;

This is how sphere works, I will explain,

var sphere = BABYLON.Mesh.CreateSphere("Sphere0", sphereSpliter, 10, scene);

So if you  create the sphere with sphereSpliter as above, it will have sphereSpliter+2 rows(hope its clear) and each row will have sphereSpliter*2 + 4; faces(the building blocks triangle). and this is same for all the rows.

 

This is build with trial and error . Please correct me if i an wrong.

 

Hope this will fix the issues and is  simple to understand and code

 

I have built sphere chart with above logic. Please check the code at http://www.babylonjs.com/playground/#20A1ZJ#1

 

Here I am facing another issue. Event/Action is not working in sub mesh, Could you please check that issue too.

 

Note:  Thanks for  request to build  a pie widget, defenitely i can start look into pie widget , i will check the same as soon as I have free time.

[GameMonetize]

Picking will return you pickingInfo.pickedPoint which can be used to deduce which submesh was picked

[Subin George]

I am not able to find the pickingInfo.pickedPoint in the response object. Also I can see changes in the event object triggered from previous build.

 

Please find the new code at http://www.babylonjs.com/playground/#20A1ZJ#2

 

Now it has 4+ params

• meshUnderPointer
• PointerX
• PointerY
• source

So do we need to update the all the event code base on this?.

 

Note: Any how these change are good for me as its giving proper event info, but in my suggestion better we can operate event and source as tow different  object to give simplified implementation as in jQuery, events(this & event info).

[Subin George]

var sphereSpliter = 64; var faceMin = 6; // Always constantvar rowFaceCount = sphereSpliter*2 + 4;var rowSize = rowFaceCount*faceMin;var rowCount = sphereSpliter+2;

This is how sphere works, I will explain,

var sphere = BABYLON.Mesh.CreateSphere("Sphere0", sphereSpliter, 10, scene);

So if you  create the sphere with sphereSpliter as above, it will have sphereSpliter+2 rows(hope its clear) and each row will have sphereSpliter*2 + 4; faces(the building blocks triangle). and this is same for all the rows.

 

Also correct me if my logic is correct. But practically works in all my test cases

[GameMonetize]

I thought you were talking about scene.pick function

[Subin George]

I have created  action on submesh as a new topic http://www.html5gamedevs.com/topic/7272-actionmanager-is-not-working-on-sub-meshes/

[Wingnut]

Hi again SG!

     Is there some reason that you need to use the actionManager for picking submeshes?  I think MAYBE Deltakosh was implying that you should use scene.pick instead of actionManager pick, and then deduce which submesh was picked... by analyzing which face ID was clicked-on.  (He sort of "phoned-in" his reply, imho.) 

 

Take a look at this goofy thing, if you please...

 

http://urbanproductions.com/wingy/babylon/george/george_pick01.htm

 

It is essentially the same as http://www.babylonjs.com/playground/#28EUMN#4 ... but the playground does not do well on picking hits, so I made it into a stand-alone file.  There is a standard click eventListener near the bottom, along with some standard old-school babylonJS pick code.  The picking is not REAL accurate along the border between the submeshes, but it isn't bad, either.  It works ok.  It works best when you drag the camera...  to position the faces of the submesh... perpendicular to the view angle.  FaceId's are used to 'deduce' which submesh is being picked. *shrug*

 

I think there is another option as well.  You COULD select a submesh... using HTML buttons or an HTML selector pulldown menu like the one seen on the playground).  Or, keypresses.  Shifted UP and DOWN arrows could be used, and then use an HTML div at screen top or bottom, or a plane with dynamic Texture... to tell the user which submesh is selected.  Just thinking. 

 

Click around on the sphere, and see if this kind of picking would work for you.  Maybe you don't need to use the actionManager at all.  You are certainly free to keep asking Deltakosh to somehow add submesh picking to the actionManager... but... it might not be possible or plausible.  Maybe these alternative ideas will work just as well, or better.  Be kind and be well.

[Subin George]

Hi Wingnut,

 

Thanks  for the update. it maches with my requirement , But I am really confused how the face numbers are related to the sphere params(like vertices & indices)

				if (pickingInfo.faceId < 360) {					info2.textContent = "submesh 1";				} else if ((pickingInfo.faceId > 359) && (pickingInfo.faceId < 576)) {					info2.textContent = "submesh 2";				} else if ((pickingInfo.faceId > 575) && (pickingInfo.faceId < 791)) {					info2.textContent = "submesh 3";				} else if ((pickingInfo.faceId > 790) && (pickingInfo.faceId < 1008)) {					info2.textContent = "submesh 4";				} else if ((pickingInfo.faceId > 1007) && (pickingInfo.faceId < 1223)) {					info2.textContent = "submesh 5";				} else if (pickingInfo.faceId > 1222) {					info2.textContent = "submesh 6";				}   			}

I would like to how can be calculate there numbers form below code

var sphere = BABYLON.Mesh.CreateSphere("Sphere0", 8, 10, scene);

I tried to understand the relation, but its not maching with values. Hop you can help me on this

[Wingnut]

Good to hear, SG.

 

In your line...

 

var sphere = BABYLON.Mesh.CreateSphere("Sphere0", 8, 10, scene);

 

... that means the sphere is size 10, with 8 VERTICAL subdivisions.  If I understand subdivisions correctly, that means there are 8 vertical divisions to the sphere.  Keep in mind I said divisions.  There are 10 vertical sections... IF you count the top "cap" and bottom "cap" of the sphere.

 

When the subdivisions parameter is set at 8, there are 20 horizontal sections.  Why 20, I don't know.  Maybe Deltakosh or some other experts will comment on that.

 

I made another test demo.  I turned off the submesh things, and just played with sphere (color filled) and sphere1 (wireframe).

 

http://www.babylonjs.com/playground/#28EUMN#11

 

In lines 29 and 30, I have the mesh subdivisions for the sphere... set at 8.  I had to mousewheel-zoom the camera and count the sections... to find out that there were 10 vertical sections and 20 horizontal sections.  Then I set the subdivisions at 4 (and hit RUN again), and then there were 6 vertical sections and 12 horizontal sections.

 

You can adjust the camera.wheelPrecision value to adjust your mousewheel zoom/unzoom speed.

 

Then I tried 16 subdivisions... var sphere = BABYLON.Mesh.CreateSphere("Sphere0", 16, 10, scene);

 

I hit the Run button again, and mousewheel-zoomed to count the sections...

 

18 vertical sections, 36 horizontal sections.  So, although I don't know WHY these numbers act like they do, at least we can predict correctly.

 

Now for the difficult stuff.  Go back to the standalone demo... http://urbanproductions.com/wingy/babylon/george/george_pick01.htm .  Zoom-in on the end caps of the sphere (the top and bottom).  See that the caps are made of ONLY triangles?  Each triangle... is called a face (you probably know this already).  As you click around the top cap, you will notice that the faceID's start with #1, and end with #71.  Why they are not numbered 1-36... I don't know why.  But now you know that they are numbered with odd numbers... 1-71.  Strange, eh?

 

The last piece of bad information I have for you... is for you to notice that the non-cap sections... are made of triangles (faces) as well.  It takes 2 faces to make up one square area. So, with a 16 subdivision sphere, we know that there are 36 sideways subdivisions, and each 'square' has two triangles, so there SHOULD BE... 72 faces per horizontal 'ring' section.  Two triangles per square.  This might also be the reason that the cap faceID's are ODD numbers 1-71.  The math that made the sphere... put the faceId numbers on the cap triangles... AS IF there were two triangles per horizontal section... because it wanted a 'concentricity' and consistency to the faceId's.  Every other ring around the sphere has 72 sections, so it forced the cap faceId's to have 72 sections as well... by using only odd numbers.

 

Yes, I realize I have been saying 71 and 72... often.  Which is it, Wingnut?    I would have thought that the cap faceId's would be 1-73, but no.  1-71.  I'm not sure why.  To be honest, I am not sure that ANY of my talking... has been helpful to you at all.  As you have surely noticed, the picking in my standalone demo... doesn't work very well.  Sometimes you have to click twice, sometimes you have to move the mouse around, sometimes you have to reposition the camera, and then click again... to get the faceId number to change (to get a successful pick).  My demo doesn't work very good at all. And my attempt to show how the faceId's get their numbers... has been hard to explain.  I have been able to tell you HOW the numbering sequence SEEMS to happen, but I have not been able to tell you WHY.  Sorry.  I will give this some more thought and testings when I get some time, and report anything I discover.

 

If you please, could you report things that YOU discover... here in this thread, too?  Thanks.  Also, experts on the forum, please comment if you have information for us.  THANKS!