Draw custom shape Mesh

[culeaalex]

For the last 2 full days I am trying to make a function to draw a custom shape mesh and I can't do it. I am trying to fill it with triangles (as I understand it is done), but my math skills and logic are not good for this. Plus the function I made doesn't fill it correctly and loads the browser (and RAM) very much to the point that it crushes the browser for low memory (after long time usage ~ 1 hour ).

It is driving me crazy, and I saw that is on the road-map, but I desperately need it for the current project I am working at, this being the only thing that is stopping me to advance.

PS: I do not intent (for now) to use curved lines in the custom shapes.

[joshcamas]

Maybe this post has something helpful: http://www.html5gamedevs.com/topic/9732-how-to-create-a-custom-mesh-in-babylonjs/

[Wingnut]

Hi culeaalex!  Good to see you again.

 

Um, after checking around, I realized that we really don't have a nice tutorial about plotting custom mesh.  Someday.  But I did the next best thing, and I made a playground scene that does some plotting.  I didn't use UVs because I don't understand them, but later when you become a plotting expert, you can teach me/us how they work. 

 

It's a custom mesh, that's for sure.  What is it?  I don't know.  It's a widget.  heh

 

If you un-remark this line...    // vertexData.colors = colors;   ...then click RUN, it will get much more colorful.

 

Also keep in mind that I am no expert in lighting 'normals'.  I just guess, mostly. 

 

But, you should be able to learn quite a bit from that playground scene, and don't forget to use the 'Get Zip' button if you want a home copy to play with.

 

By the way, plotting curved mesh lines is really impossible unless you (or some math) plot vertex points along the curve.  I used a tiny bit of math in this demo. Here's the pertinent code: http://urbanproductions.com/wingy/babylon/plotting/arrow_plot/js/arrowplot01.js  (might be outdated).  But notice:

var positions = [ 0, 0, -headlength ];var alpha = 0;for (var i=0;i<12;i++) {	positions.push(headradius * Math.sin(alpha), headradius*Math.cos(alpha), 0);        alpha += .525;}var alpha = .2625;for (var i=0;i<12;i++) {	positions.push((shaftradius-shafttaper) * Math.sin(alpha), (shaftradius-shafttaper)*Math.cos(alpha), 0);        alpha += .525;}var alpha = 0;for (var i=0;i<12;i++) {	positions.push((shaftradius+shafttaper) * Math.sin(alpha), (shaftradius+shafttaper)*Math.cos(alpha), shaftlength);        alpha += .525;}

First, I put the tip of the arrow into the positions array, and then I used some math to create three 12-segment rings.  It's not exactly a curved mesh, but... yes it is. 

 

Pardon my bad coding and newbie ways.  I hope you can find something useful in all this.  Feel free to make modifications to that playground scene, hit RUN, see what happens.  If you make something cool, hit the SAVE button and then tell us the new URL (gotten after pressing the SAVE button).  Be well, and show/tell us what you discover.  Good luck.

[culeaalex]

@Wingnut: I did that. The problem is that I want the user to draw in 2D any shape and then recreate it in Babylon.

Example: http://uwork.ro/babylon_test/test3.html (u can insert the vectors and it will create a custom filled shape)

The problem with my example: it does not always fill the shape and is (as far as I can tell very RAM intensive - don't know if its babylon 1.14 beta or my function )

The solution is to create a function that files a custom shape with triangles (what I am intending to do), but the ultimate solution eludes me...

Three.js did it, but AGAIN, my math skills and logic are not that good (apparently) or my understanding of 2D and 3D geometry. It would take me days/weeks to come with the solution, when someone smarter (or with more experience, that could understand the way three.js did it) could do it.

[GameMonetize]

First of all, could you share the code you already have and we will try to build on top of it

[culeaalex]

First of all, could you share the code you already have and we will try to build on top of it

Here is a working page: http://uwork.ro/babylon_test/test3.html 

But again, I do not think is a good script. It is not working correctly with straight lines, and not even close with curves.

 

And sorry to ask this, but I thought Babylon.js is developed by guys @Microsoft. This is the reason I have chosen babylon.js. Should I go to three.js? Why isn't this build upon/extending three.js (that I understand allows to draw custom shapes)? As far as logic goes I find it more ok to go from custom shapes to predefined shapes that are done extending custom shape.

 

Hoping I haven't upset anyone, is it possible to have this function implemented in the next 3-4 months ( for now I need only to work with straight lines in 90* angles, and I can do this easily so far), or should I try three.js (or something else)? I really hope it won't have to be three.js as I really love the fact that babylon.js is made for games and has already built in functions that would help me a lot. (although I intend to my app to extend any javascript webgl engine)

[joshcamas]

Link doesn't work.  

[culeaalex]

Link doesn't work.  

It had a space at the end of .html

The link is : http://uwork.ro/babylon_test/test3.html

[GameMonetize]

I meant: could you use babylonjs' playground? This way we can work together on it

[culeaalex]

I meant: could you use babylonjs' playground? This way we can work together on it

How? We could only work together if we could brainstorm Again I say: MY FUNCTION is wrong and "works" only with straight lines. I can make it in the playground in the weekend just to show u, but I do not think it will help u much. This has to be thought how to approach the problem. The best way to do it is like it was done with Babylon.CSG: someone translate the functions from Three.js to Babylon.js. The problem is that I can't do it. I know my limitations, and it would take me too much to understand what three.js has done there (first), then translate it the best to babylon.js (example of what I wan't to do in babylon: http://threejs.org/examples/#webgl_geometry_shapes ).

[GameMonetize]

I do not read three.js code just to be sure I'm not influenced byt it. But if someone want to port the code there is no problem (As long as you credit the source)