Jump to content

Draw custom shape Mesh


Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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)

Link to comment
Share on other sites

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

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