3D model manipulation by code

[Webkitnote]

I asked question on Quora. But they didn't seem to find the right answer.
ThreeJS is licking the rear of Stack Overflow (the guys that I hate).
So the next link in Google search goes to babylon.js.

Major concern. Can babylon.js, modify size/color of certain part of gray model? I will have a teapot, and I would like to color it using code.
Or. I would like to take emulate (using code) the life-span of pineapple. Going from green small to yellow big and rotting brown.
I would have absolutely gray model of a man, I would like to make his head gigantic, color his hair brown, give him white eyes with green iris using one model only.
(not really, just giving random examples)

Is this possible using babylon.js? Purely by code.

The best would be a link to an example that has done it. I'm not asking for ready code, just a demo, that would use simple model and whole chunk of code to modify certain parts of them. To see it at work and be like: "YES! That's what I need", so I can start learning babylon.js, and achieve my project

So

[GameMonetize]

Hello!

This is absolutely possible

Many options:

- You can edit it by code and add vertex color: http://www.babylonjs-playground.com/#1JSJOX#7

- You can use submeshes: http://www.babylonjs-playground.com/#1HI8JM#0

[Webkitnote]

10 hours ago, Deltakosh said:

You can use submeshes: http://www.babylonjs-playground.com/#1HI8JM#0

Yea, submeshes seem to be it.

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

and better:

new SubMesh(materialIndex, verticesStart, verticesCount, indexStart, indexCount, mesh, renderingMesh, createBoundingBox)

Are vertices measurement that are easily applicable to every single model? I know that it's a triangle of which consists every 3D image. But is it reliable method that would allow me straight-forward repainting without greater hassle? Are vertices "distributed equally in order" ?

It sounds stupid, but is there a way to specify "The Thing To Edit" with the mesh-groups (specified in model) (normally called "nodes") instead of vertices? (a.k.a. "pass name of node group as reference")

Color "issue" is solved. But what about modifying to 3D model? I would like to add details according to the code, for example, I'd like to reenact this type of tattoo http://www.tattoo.gr/sites/default/files/675.jpg with just the model of a man (gray model) and a model of a star. Also doable?

 

Also, could you mention where you got your links from? I'm on BabylonJS Documentation right now, and I don't see links to any demos. Are they hand-made? If so, I appreciate it  

[GameMonetize]

There are hand-made but not by me. I've just used the playground search: http://doc.babylonjs.com/playground

Depending on your mesh there is no guarantee that vertices are distributed equally in order. All is in the hand of your 3d designer here

You can also think about painting a texture with DynamicTexture (Search for DynamicTexture in the playground there are tons of examples)

Regarding editing a mesh, this is also doable:

- You can easily edit a mesh to update positions: http://www.babylonjs-playground.com/#16NCF0#8

- If you want to add/remove vertices, it is doable but a little bit more complicated (but still doable)

[Webkitnote]

36 minutes ago, Deltakosh said:

There are hand-made but not by me. I've just used the playground search: http://doc.babylonjs.com/playground

Ooooh, handy!

36 minutes ago, Deltakosh said:

- You can easily edit a mesh to update positions: http://www.babylonjs-playground.com/#16NCF0#8

- If you want to add/remove vertices, it is doable but a little bit more complicated (but still doable)

I think I'd like to add/remove vertices, since these things are really low-level, not often identifiable in non-simple object, and are hard to replace (your example revolved around flat item, I talk about entire head or building , difference is about +6000 vertices (I don't know exact numbers)).

And what about my previous "suggestions"?:

Quote

It sounds stupid, but is there a way to specify "The Thing To Edit" with the mesh-groups (specified in model) (normally called "nodes") instead of vertices? (a.k.a. "pass name of node group as reference")

I would like to "select" certain part of model, using model's nodes (in-model meshes-group). I would have node called "head" and node called "eye", can I pass this as reference to Babylon.js?

I sure do hope that what I'm asking because so far is pretty advanced, the links you've provided and the stuff I've searched in PlayGround seem to be really tense. Not that I don't know JavaScript, but you surely do call a lot of mathematical/graphical functions that I need to learn

[dbawel]

@Webkitnote - To create surface specific colors and not vertex specific, I would use a Dynamic Texture, as the resolution of your model is not relevant, and you can code as much detail into the object's color as you need - with very good FPS and performance while proceedurally drawing color onto your dynamicTexture - depending how you create your colors and the functions which are driving placement. And once a color is added to a Dynamic Texture, it becomes part of a single UV texture which can then be saved, cloned, etc.

Below is a link I quickly tossed together out of an older much larger test script - so it's structured really ugly, but I spent less than a minute to rip out what I needed to show. However, the random draw function isn't originally mine, and I think I remember who initally gave this to me - but I don't want to get it wrong. So if the core of this code is yours, please take credit, as I have used it to stress test devices many times.

http://qedsoft.com/DEMOS2014/creative_drawing_v1/test1.html

This is my preference due to good performance and unlimited detail. And if you want to use tiny textures of a few (2 - 5 KB each), it's really fast to create realistic high detail proceedural texturing. But that isn't exactly what you requested, so the above link uses only color.

[Webkitnote]

I'm sorry. But I don't think I'm clear enough (it sounds really offensive and mean, but I assure you I don't mean it, I just don't know any other way to form it , I'm a nice guy :< ).

Maybe another way:

I will have a model of a man, with many node-groups (meshes) called "head", "eye", "iris", "leg" and 500 others that don't matter in this example. I would like to try use Babylon.js, to load the model and select mesh (node-group) called "head", and color it rgb(245, 215,110, then do same with eye and color it rgb(255, 255, 255), then select "leg" and make it twice longer, then select iris and color it rgb(46, 204, 113).

To relate to this answer:

5 hours ago, dbawel said:

@Webkitnote - To create surface specific colors and not vertex specific, I would use a Dynamic Texture, as the resolution of your model is not relevant, and you can code as much detail into the object's color as you need - with very good FPS and performance while proceedurally drawing color onto your dynamicTexture - depending how you create your colors and the functions which are driving placement. And once a color is added to a Dynamic Texture, it becomes part of a single UV texture which can then be saved, cloned, etc.

Below is a link I quickly tossed together out of an older much larger test script - so it's structured really ugly, but I spent less than a minute to rip out what I needed to show. However, the random draw function isn't originally mine, and I think I remember who initally gave this to me - but I don't want to get it wrong. So if the core of this code is yours, please take credit, as I have used it to stress test devices many times.

http://qedsoft.com/DEMOS2014/creative_drawing_v1/test1.html

The link that you provided seems to color ground in red, and use random color to color the plane, but it doesn't select anything, it goes in random. It doesn't have any meshes. It seems to take one path, and then move in one general direction with little twitches here and there. I don't see how it would be helpful in my "problem".

Please correct me if I'm wrong.

 

[adam]

55 minutes ago, Webkitnote said:

It doesn't have any meshes. It seems to take one path, and then move in one general direction with little twitches here and there.

The sphere is a mesh and the ground is a mesh.  It is to show that you can use dynamic textures to add more detail than what you are able to when you color by using vertices.  For example, you wouldn't need to have a separate mesh for the iris of the eye.  You might not even need separate meshes for the eyes.

[dbawel]

@Webkitnote - As I mentioned, I only provided an active draw function which randomly selects colors and draws along a path. However, you are permitted more than one dynamic texture, and you can select any color and use different conditions to test if you've "picked" a specific object, and apply color directly onto the object's UVs - in any size or shape brush and as many times as you like without a performance drop. I assumed that the draw function was the most difficult code to build - as there are less efficient methods to draw on a dynamicTexture. So I believe you have everything you need, and if you run tests such as a function to map out your UV cordinates by using processes such as  .getTextureCoordinates()  which most users "get" these by pickInfo example: pickInfo.getTextureCoordinates(), then such methods allow you to mapp your model quickly.

However, there are other methods to use to getTextureCoordinates() without actively executing a pick event. I assume you already have experience with such functions, as proceedurally drawing such specific color for a texture requires knowledge of shader creation. So all I can advise is to begin testing what you feel might be the best method to map the UVs on your object(s), and from the example I provided, you have all of the code to accomplish what you asked babylon.js to do. I don't know how to be any clearer, other than to provide you with mapping the UVs on your object. But if you're looking for a function such as CreateHumanTextures(), it simply doesn't exist as any complex object has vastly different texture UVs, but babylon.js has all of the functions to proceedurally draw as detailed textures as you wish.

FYI - Consider what I often do which is to create a brush of large size such as 512px, and draw on your object to paint it in a base color in one operation - or a specific brush shape and size to paint the base colors on your object(s). Then paint the higher detail using the necessary brush size and shape. Also, if I were attempting to do what you are asking, I would un-wrap the UV coordinates of your object(s) to a "plane", and it would be much simpler to create your own draw function to draw on a 2D plane using dynamic textures, then save that map to disk and apply it back to your 3D model. Here is an example how to save out any texture map posted by @jahow long ago:

http://www.babylonjs-playground.com/#CA4SM#1

So that's all I can do, but I believe I've provided you with a path to want you want to accomplish, as well as perhaps a mix of methods using dynamic textures as well as other methods provided by other users above. Now it's simply a matter of your skills and experience using JavaScript. As for babylon.js, you will always get an answer from experienced users on this forum, as there has never been a community I've ever been a part of which supports each other as much as the babylon.js forum.

DB

[ramymabrouk]

@Webkitnote Hi, did u solve it? i am looking for same answers

 

BR,