low level mesh editing

[varomix]

Hi guys

I just started getting into BabylonJS and I really like the simplicity of it, is elegant

 

I have a question about how low level can I get with Babylon, I want to make a 3D modeling application, similar to what Clara.io is doing

I know they are doing it in Three.js and I did a first prototype with three.js but I'm not happy, it got really messy really quick.

 

So a few things I would was to do is,

selecting individual vertices of a mesh,

selecting faces and edges

 

creating geometry on the fly, for making tools to extrude faces etc.

 

also support for quads in meshes not just triangles

 

I realize most of this stuff I have to develop my self but is more of a technical question of, can I go there? is that level of control exposed via BabylonJS?

 

Really appreciate any help you can give me on any of this subject

 

Thanks a lot

[jahow]

Hi and welcome!

 

BJS allows you to manipulate meshes in a very simple way. You have basically two choices:

 

1/ Use a VertexData object. These objects hold all the geometry data of a mesh, readily available in arrays: positions, normals, several layers of UV coordinates, indices.

Here is how you do it:

var vertexdata = BABYLON.VertexData.ExtractFromMesh(mesh);// manipulate geometry, add vertices, reassign indices...vertexdata.positions = ...vertexdata.indices = ...// and apply!vertexdata.applyToMesh(mesh);

2/ Extract geometry arrays as you need them:

// extract the positions arrayvar positions = mesh.getVerticesData(BABYLON.VertexBuffer.PositionKind);// modify geometrypositions = ...// apply!mesh.setVerticesData(BABYLON.VertexBuffer.PositionKind, positions);

Please note that both ways require the mesh to be updatable.

 

Now, if you're into reading, here are two articles about mesh manipulation:

• modifying mesh geometry: http://pixelcodr.com/tutos/trees/trees.html
• mesh manipulation using parametric shapes (ribbons, tubes, extrusion...): http://doc.babylonjs.com/page.php?p=25096

As for what you specifically wanted to do:

• accessing vertices and faces are done like I showed you above
• there are no "edges" to speak of in BJS geometry, only faces made of three indices (triangles); please note that there is a type of mesh called LineMesh which is basically a succession of edges
• extrusion is already supported, see: http://doc.babylonjs.com/page.php?p=24847
• there is no support for quad-based geometry, so you will have to work around that I guess

 

Hope this helped

[Wingnut]

Hi Varomix, welcome to the forum.  Is that a little desktop recording studio in the picture?  Coooool!

 

Ok, let's see, first, I'm not qualified to comment.  And Jahow kicked butt... great post, J-man!  We finished our comments about the same time, so I'm going to just let mine fly, even if I repeat some of Jahow's info.

 

Let's leave quads out of the conversation, for now.  That's a monster... which might require hacking the BJS engine, and after you do it, most of the upper-layer features of BJS will become worthless... as they are all written for tri-patch.

 

Selecting vertices on a mesh... not all that easy.  We have a feature called "render as point cloud" which might be helpful.  Much of our mesh picking (clicking) is done with a powerful toy called the ActionManager.  It is not equipped to "pick" vertices, but it (with the help of some other toys) will pick mesh and do all sorts of other fun things.

 

So, how to select each vertex?  Well, I would getVertices() on that mesh, and then place a temporary little box at each vertex.  The ActionManager and other commonly-used pickling routines can pick those little boxes just fine.  Now just drag, shift-drag, control-drag, alt-drag... on the little box... and the vertex will ride along.  Naturally, you will need to constantly setVertices on the mesh to match the box drag... but that's how modeling works, right?

 

http://www.babylonjs-playground.com/#1UHFAP#7

 

In essence, you have edit mode, and not.  Edit mode puts little boxes at each vertex, each ready to be dragged or otherwise positioned... and when you leave edit mode, delete all the little boxes.  The material on these little boxes can be used to show which vertices are selected and which not, as well.

 

Adding vertices... ouch.  Removing vertices... ouch.  You didn't ask about those things, but I suspect it's coming.    It's all possible, and Babylon.js framework will not stand in your way.  BJS always does exactly what you tell it to do, even if it takes you 4000 lines of code before you do any telling.  heh.

 

Ya know they make modeling software packages, right?    You don't have to plant, grow, or saw your own trees to build a house, these days, you know?  They have a thing called lumber yards.  haha  (I'm just having some fun with you, Varomix.)

 

Yep, you can go there.  BJS doesn't stand in the way of ANY hacking.  But webGL and JS have been known to do such things.  In BJS, you're allowed to hack the internals of engine and scene, abuse any property with wrong datatypes... it's just a free-for-all.  If JS will let you get away with some demented move, so will BJS.  WebGL and JS may snarl at you, but never BJS.  BJS just does what you tell it to, and returns what you asked-for.  If you want to wage a war with webGL api and JS... BJS will be right by your side... handing you ammo and patching your wounds. 

 

https://github.com/BabylonJS/Babylon.js/blob/master/src/babylon.engine.js

Search for gl.  Lots, huh?  You can call ANY function or reference any property, even _theseKind().  Dive into engine... and speak directly to the webGL Gods if you like.  No limitations here.  Override anything.  This is the wild wild webGL west, V-meister.  We all forgot what the term "exposed" means.    The API's around here... are just "suggested routes".

 

Also note that the Babylon.js admin folk are excellent... and love contributions and ideas to add to the framework. Keep that in mind and suggest/contribute if you can.  Hope I answered some stuff.  Be well, party on!

[varomix]

Hi Guys

 

those are both excellent answers thank you, I can see that modifying the geometry is not that bad

and yes I actually did a prototype before where I instanced particles to vertex positions to select them, but that was as far as I got

 

ans yes I know that I'm getting into wild territory here and that's exactly what I want and I know there's tons of 3d tools out there but I want one that can run on the browser, I love blender and I would love it even more if I could use it any time just by opening a browser and go.

 

Thanks again guys I'll keep bothering you with my questions as I go along, when I have something that works I'll post it on github for anyone that might want to help, it will be all open source for everyone to use.

 

@Wignut that is my studio yes, I do Animation/ VFX/Games and music here.

 

thanks again

[Wingnut]

Hi again Varomix... thanks for the info and WeYez (Varo's metal band) is lookin' good.  Good luck on your recordings and success.

 

I love blender and I would love it even more if I could use it any time just by opening a browser and go.

 

I hear ya!  Unfortunately, there's one thing that browsers don't do so well... saving/loading scenes/mesh.  I'm not even close to being an expert in these things... but... you could have some challenges ahead in that area.

 

I have been watching a chap named jcPalmer do his stuff for awhile.  He has revamped our standard Blender-to-.babylon exporter, and he has his own SUPER exporter called Tower of Babel that is nothing short-of HOLY CRAP-grade powerful.  The guy is mega-smart, and I almost think that, any day now, he's going to launch Blender in a browser. 

 

Blender is SO very modular... that we might see a day when at least PARTS of it are portable and could be made webby... maybe.  It will be quite a task to clone Blender's complete functionality... with a Babylon.js scene.  I would almost go as far as saying that it is impossible, but I'm wrong OFTEN.  REAL OFTEN! 

 

Other folks have done editors, but I think most of them are scene-assembly and landscape editors.  I don't know how many (if any) have tried GUI-assisted mesh-modeling in a webGL scene (such as your mini-Blender idea).  I bet a smart chap named Dad72 has, at least, thought about mesh-modeling from within his CastorEngine system.  Maybe he'll comment.  Davrous's Babylon.js sandbox is quite an accomplishment as well.  There's at least two other BJS editors around... but I don't know who authored them.  I think they are both scene-assemblers and not mesh modelers.

 

Have you done some tests?  Are you thinking about a NodeJS server?  All in all, I could use some more knowledge about various ideas that folks have... for loading/saving mesh from an online browser.  If you have a plan for that, Varomix... you could tell me about it, if you want-to. (thx)  I could use the learning.    Party on!

[JackFalcon]

Ping.... Looking for a "Mesh Modeler" inside Babylon.... to be a "landscape editor" . The link above was a great start.

http://www.babylonjs-playground.com/#1UHFAP#7

Maybe I'll add on the Action Manager as mentioned, 

 Are there other options?

I see how to use Ribbon -  how to create (and edit) Ribbon Shapes?

[Wingnut]

https://bitbucket.org/JSbabylon/terraineditor

@Dad72's latest editor.  If I know d72, it's done right.  Worth a long look, I'd say.

[Dad72]

There is HeroonEngine also on this same deposit. and I am also in the process of creating another editor to create interactive animation film (MovieRender) But I had to start it from scratch and to see it again, because what I had done until then did not suit me more.

[JackFalcon]

I am making movie/game also... with a skate park. So why Mesh Editor, smooth-map, would be excellent.

deep dive now...

 

- @Dad72 nice editor! 

[Dad72]

On my side I do not need a mesh editor, I include characters animate and assets directly and the ability to import his personal meshes. and for clothes too I include directly.

[JackFalcon]

perhaps a partial solution, or neat thing to look at over here: