Create custom mesh

[3Dlove]

Hello everybody,

 

I begin to discover BJS

 

I would like to create a custom mesh (whithout importation from Blender or other) :

first a triangle shape,

after a rectangular parallelepiped (because we can't choose one side size with BABYLON.Mesh.CreateBox() )

 

(like this with ThreeJS: https://github.com/mrdoob/three.js/issues/255)

 

Is it possible ?

 

Thank you a lot

[GameMonetize]

You can create a Parallelepiped by using:

var box = BABYLON.Mesh.CreateBox("box" , 1.0 , scene);box.scaling.y = 2.0;

[jerome]

Many shapes here : http://babylondoc.azurewebsites.net/page.php?p=22011

[3Dlove]

Thanks a lot guys ! (this is a good community =p)


There something that I don't understand : Why do we need to name Meshes ? What is the goal of that ?


There is my code : http://www.babylonjs-playground.com/#10GOD0#2


How to not show the diagonal edge of the square ? (with wireframe)
Same question for the circle, the square base of the pyramid and the parallelepiped.

How to fill a geometry and color the contour ?
I tried it by applying a multi material like that (but it doesn't work) :

var multiMaterials = new BABYLON.MultiMaterial("multiMaterials", scene);
multiMaterials.subMaterials.push(redWireframeMaterial);
multiMaterials.subMaterials.push(blueFillMaterial);
square.material = multiMaterials;


Exists there better solutions than mine, in order to create these shapes ?


Question for Jerome Etienne : do you continue to developp with Three.JS or do you have stopped in favor of Babylon.JS ?



Have a good night

[Wingnut]

hehe.  I don't think Jerome Etienne visits here,  but maybe he is in disguise.  We'd be glad to have him on-board, though, I would think. 

Nice looking custom mesh, 3Dlove, and welcome to the forum!  Good to have you with us.

Here's a multi-material (submeshes) demo... might help.

http://playground.babylonjs.com/#T40FK

------------

Filling your mesh with color/contours... is done with BJS per-vertex colors.  I did your triangle: (giggity)

http://playground.babylonjs.com/#10GOD0#4

1.  Removed the blueWireframe material from the triangle - line 40

2.  Added a section that put three Color4 values into the colors[] array - line 100 - 105.  green, red, blue.  Used soon.

3.  Added a line to apply the color data... to the mesh - line 118

4.  Added a light - line 17-18

5.  Moved the triangle closer to the camera. 

PARTY!  Pretty color-per-vertex with color contours/dithers!

Later, if you want to apply a texture to your mesh, you will need to apply another KIND of data to your triangle... called uvs.  It is done in much the same way as I did for colorKIND.

-----------

The .setVerticesData function that you are using (lines 116-119) is a bit old, though it still works great, thanks to strict BJS backward compatibility efforts.  I disabled it, and instead used the NEW WAY to set custom mesh data... the vertexData object.  That code is in lines 122 - 133.

All of Babylon's basic shapes are plotted on the vertexData object, as you can see by its methods (lots of create-shapes).  These shapes are applied to blank mesh by our Mesh object, which also has many create-shapes functions.  Mesh functions call vertexData functions.  For example, Mesh.CreateBox calls vertexData.CreateBox...  asking for a box-shaped vertexData object (its properties hold data that's ready to make a box shape).  Mesh.CreateBox receives the stocked-with-data vertexData object, and applies it to a blank mesh.  I bet you know what happens next. 

-----------

I don't know how to remove the diagonal line in the side of a box... when in wireframe mode.  I'm not sure it can be done.  You might want to give the box no material, or a material with .alpha set low, but then set box.showBoundingBox = true;  Maybe a box made from 12 thin cylinders?  (build-it-yourself wireframe) 

Be well!

[jerome]

@3DLove : Did you think I was Jerome Etienne ? 

I'm just another Jerome in the world 

 

@Wingy : still nice and helpful explanations, thanks 

[3Dlove]

Thank you Wingnut!

Thank you a lot for your explanations, OK fot the NEW WAY to set custom mesh data =D

OK for multi-material, it wasn't really that I would mean in reality^^, the question is :
how to set a wireframe to a fill mesh, I think you answer me with showBoundingBox = true but how to choose the color ?

I think the 4th parameter of each line in colors table is the alpha value, isn't it ?
(example : 0, 1, 0, 1, : green with 100% opacity ?)


At the moment, for the wireframe, it's not already OK, I can plot a parallelepiped with white wireframe, due to material.alpha and box.showBoundingBox = true;
Is it possible to change the white color ? (here is my new code : http://www.babylonjs-playground.com/#10GOD0#5 )

For UVS, I don't understand why use it instead material.diffuseTexture, do you have an example ?


Genral question : Why do we need to name Meshes ? What is the goal of that ?


@Jerome
Yes I thought, sorry for the confusion :/

[RaananW]

Hiya,

 

just a quick answer to your questions:

 

Last parameter of color4 is alpha, you are correct.

 

The color of material properties can be changed. you can try it here - http://materialeditor.raananweber.com/ . I am not too sure if the color of the bounding box can be changed.

 

UVs are the "location definition" or mapping of the texture on this mesh. Diffuse Texture will not work without them. They tell the shader that *this* triangle should have *that* part of the texture. This is a very abstract way of explaining that, if you want some more information about it start here - http://en.wikipedia.org/wiki/UV_mapping 

 

Naming meshes comes in handy when you want to search for a mesh with a specific name. It is also nice to have when you use the debug layer, as you know exactly what you are looking at. Other than that, it wouldn't matter if you give the object a name or leave it a blank string. The same and more can also be done with tags (http://doc.babylonjs.com/page.php?p=22521).

[jerome]

UVs... well not easy to explain

 

Imagine your texture is a picture, a rectangular one. So it has a width and a height expressed in number of pixels.

Now, replace the width and height number of pixels by a percentage : first width pixel on the left is zero and last width on the right pixel is one (100%). The same for the height : first top pixel is zero, last bottom pixel is one (100% height).

Ok ?

 

Let's go on...

 

You can now imagine you will bend your flat image on each vertex your mesh will use (so only the vertices used in the indices array, in other terms vertices used to construct tiny triangles). As you would wrap a 3D object with a paper image.

 

Imagine then each vertex of your object could print a red ink dot on contact.

If you unfold your paper, you will see many red dots, one per vertex touched, on the image.

 

Well, UVs are simply the coordinates of each red dots on the image :

U is the dot coordinate on the image width axis, expressed in the range 0 .. 1

V is the dot coordinate on the image height axis, expressed in the range 0 .. 1

 

UV is just this pair of numbers : 2D coordinates on the image.

 

and UVs is just the series of these pairs of numbers declared in the same order as the vertices in their own array

 

hope it will help

[Wingnut]

Great posts, you guys!

3Dlove... there is one more way to do your wire-framing.  It's our LINES basic shape.  I don't have much experience with the Lines mesh, but it's easy to use.

http://playground.babylonjs.com/#21Q6UF

Lines mesh is a slightly longer route to gramma's house, but it gets the job done. 

And you can see how easy it is to color the lines.  I set the initial color in line 60, and then I set a double-power random color every scaling cycle (line 72).  Fun!  Party on!

[3Dlove]

Hello guys,

sorry for the late, I have a lot of work at the moment :/

I will give you a better answer next week

thanks

[3Dlove]

Hello, I'm back

 

Ok for UV, I understood :-D Thanks RaananW and Jerome !

 

Thanks Wingnut for the other wireframe way =)

 

All my questions were answered =)

 

Just for the wireframe, with the way of box.showBoundingBox = true, are you sure that we can't change the white color by another ?

If not, this topic can be closed =D (how can I close it ? by added [RESOLVED] to the title ?)

[Wingnut]

Hi again 3L, welcome back!

 

Hey, I found some new (old) information!  In the great "What's New" document, under version 1.11...

 

 

New option for mesh: mesh.showBoundingBox to display mesh's bounding box. You can configure back and front color using scene.getBoundingBoxRenderer(). This function returns a BABYLON.BoundingBoxRenderer where you can define backColor, frontColor and showBackLines (deltakosh)

 

So I tried it on one of your scenes...

 

http://www.babylonjs-playground.com/#10GOD0#6    

 

(I needed to slow the camera speed a bit in line 13)

 

Looking good, sort-of.  (yay!)

 

line 82 - got a boundingBoxRenderer object

line 83 - set its frontColor to blue

line 84 - set its backColor to green

line 85 - set its showBackLines to true

 

And I added another rectangle... pave2... to help me see stuff.

 

Well, I see blue bounding lines on the rectangles.  YAY!  I see no green, though.  I see yellow, though.  Weird.

 

And SOME of the lines are yellow and blue at the same time!  Strange.

 

Anyway, apparently there IS a way to change boundingBox colors.  YAY!  You and I both learn things, today. 

[GameMonetize]

The fixed link:

http://www.babylonjs-playground.com/#10GOD0#6

[Wingnut]

I didn't know it was broke.  Seems to work goooood. 

 

.showBackLines was broke?  nod. 

 

I guess that IS green, too.  Looks like yellow because its so hard-lit and upon a red thing.

 

Killer-fast bug-wranglin', dk.  You're a god!  Fastest gun in the west.  Thanks!

[3Dlove]

Hi, thanks a lot !

Post resolved =)

[3Dlove]

Final Test 2 : Simple Shapes :

http://www.html5gamedevs.com/topic/13112-bjs-vs-3js-simple-shapes-test-2/?p=75242