Custom face color on generated mesh

[smatt]

Hello,

I was reading this post from @Wingnut and I'm surprised how easy it is to generate a mesh.
I've enabled the colors in this playground: http://www.babylonjs-playground.com/#1UHFAP#60 

This colors are per vertex and there is a color gradient across the face.
Is it possible to set the face colors instead the per-vertex colors? Or is there a work around to achieve the same goal?

Thank you very much for your time, Simon

[Wingnut]

Hiya @smatt.  Thanks for reading my talkie posts and test-driving my plotting playground.  Unfortunately, I wasn't able to study plotting enough... to answer your current question.   Hopefully, smarter people than I... will reply soon.

Just for fun, take a look at a wireframe version... http://www.babylonjs-playground.com/#1UHFAP#62

Let's be careful with terminology, here.  In BabylonJS plotting, a face is always a triangle.  It takes two triangles... to make a square-like side.  But not all sides are square-like (quadrilateral/quadrangle/tetragon - all are terms for 4-sided square-like things). 

How many faces use vertex #1?

If you count 6, you have it correct.  Two faces from the top quad, two faces from the front quad, and two faces from the right side.  BJS has no colorPerFace options by default, so there will need to be 6 colors and 6 normals... put at position #1... to have full power to solid-colorize all 6 of those faces.... in any color.  Wow, huh?

It gets worse.  Only one normal and one color... are allowed per ANY single vertex.  This means... at vertex #1 position... we would need to add 5 MORE vertices.... for a total of 6 vertices... all at point #1.  That gives 6 user-settable lighting normals and 6 user-settable vertex colors... at point #1.  All these added vertices (positions)... are positioned identically, so it would still look like one vertex. 

There is a function involved with all this...  blankmesh.convertToFlatShadedMesh()... which I haven't tried with this demo.  That function... has the abilities to add extra vertices, but I'm not sure how to use it here, or if it is useful in this situation.

Point #0 has 4 triangular faces coming together.  It needs 3 extra vertices at its position.  This is getting complicated, isn't it?  I hear ya.  @jerome is one of the "pro plotters" around here, so I will ping him and maybe he will have ideas.  Others are certainly welcome to help, too.  Me?  I get a brain tumor just thinking about it.  Sorry. 

By the way... if our shape were a box, this would all be much easier.  Jerome has already written some handy box faceColors tools that work great.  But weird-shaped mesh like this one... might be more challenging.  Try to be patient... perhaps some experts will comment soon. Be well.

PS: Is that you... doing "light-on-a-cord" stuff... in your picture?  Is there a proper term for that activity?  I think it's cool.  Can you drop me a link or two... so I can learn about that?  Thx!

[smatt]

Hi @Wingnut,

thank you for you answer! Oh... it's a side? Okay 
The color gradient between these vertices across the sides looks nice... just not in my case. I'm trying to generate a simple ground like this image I found on Google Images. And every side should have it's own color. With these gradient is looks kind of blurred or out of focus (like games in the early 2000s).

It shouldn't be a problem to write this every-side-has-it's-own-vertices-generator. When I'm back from Berlin I'm going to do this

Yeah, I've seen these options.faceColors in the MeshBuilder! That's incredible!
Maybe someday I can understand what's going on here and use it in my generator. 

Any advice is valuable and useful in this topic...
Please share your ideas, helpful doc pages or playground samples

Thanks, Simon

--- Off-Topic @Wingnut ---
My picture is just a simple example of "Light painting" taken with a DSLR, aperture as small as possible, a long exposure time (~5-10s) and a flashlight moving in circles. Maybe this can help you get started. In my case I didn't use a flash at the camera position. 

[jerome]

hi

Wingnutt is right , the rule is : one vertex holds one normal and one color (color4).

So if you want a facet (a triangle) to have a same color, just give the same color4 to the 3 vertices composing the facet. If two successive close facets must have different colors, then you need to duplicate the vertices (instead of sharing them) because of the former rule.

Note the the faceColor option only exists for now on some mesh types : box, cylinder and polyhedron

http://doc.babylonjs.com/tutorials/Mesh_CreateXXX_Methods_With_Options_Parameter

[Wingnut]

Cool, thanks guys.

@smatt, by the look of your provided picture, it appears to be a lower-rez flat-shaded texture-less heightMap.

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

Light .specular and material .specularColor is rather important.  Add more lights, try stuff, have fun.  Edit, run, make more saves, you can't hurt anything in the playground.

It's not a material-per-face, but it ain't bad.   Positions (and sometimes directions) of lights, and each having a different .intensity... can be pertinent and useful, too. 

Also, you can manually "plot" the heights of vertices on a heightMap ground.  But it is lots of work.  Most people think it is easier to draw their own gray-scale 2D image, and use that image as the heightMap creator.  It might be wise to read about power-of-two image sizing... on the web.

See CreateGroundFromHeightMap for more info.  Hope this helps.  One last bit of fun.  (Don't use that phosphenes material as a godrays emitter or your monitor will get a tumor.  heh)

[JohnK]

@smatt IMHO @Wingnut is correct, each of the meshes in the picture has one colour and the different tones are automatically created by the lights used in the scene. The joy of BJS is that you can create a mesh, apply a material set a light and the facet colours are done for you. @Wingnut has already suggested how the ground could be created. There are two ways of creating the clouds that I can think of.

1. Carry on as you were by generating the mesh from vertex positions.

2. Adapt Temechon's way of creating foliage from http://www.pixelcodr.com/tutos/trees/trees.html

NOTE a breaking update in the code of 2

var vertexData = BABYLON.VertexData.CreateSphere(2,sizeBranch); which worked in BABYLONJS2.2 or earlier needs to be changed to

var vertexData = BABYLON.VertexData.CreateSphere({segments:2, diameter:sizeBranch});  for BABYLONJS2.3 or later

 

 

[smatt]

Thanks guys

I have now working code which provides me an acceptable result using the following code:
 

// light
let lightHemi01 = new BABYLON.HemisphericLight("hemi01", new BABYLON.Vector3(0, 1, -1), scene);
lightHemi01.intensity = 0.15;
let lightDir01 = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(1, -1, -2), scene);
lightDir01.position = new BABYLON.Vector3(-300, 300, 600);

// material
let groundMaterial = new BABYLON.StandardMaterial("groundMat", scene);
groundMaterial.diffuseColor = new BABYLON.Color3(0.431, 0.922, 0.514);
groundMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
groundMesh.material = groundMaterial;
groundMesh.convertToFlatShadedMesh();

This is really helpful: http://www.pixelcodr.com/tutos/trees/trees.html
Maybe I can achieve the dynamic color generation later, it's good right now

[Wingnut]

Cool.  Glad you are rolling.

I was thinking (oh no!).  umm...  http://playground.babylonjs.com/#1AVEYO#36

The ground in the PG demo... is 10 subdivs, so I made a texture that is 1000 by 1000, and changed colors every 100 pixels.  Then I applied it.

It is coloring per-quad, not per-face.  Also, maybe it only works on grounds.  It is important to match mesh subDivs... and texture subDivs, or there is problems.

But, it's something. *shrug* 

Just for fun, let's ping @NasimiAsl and see if he has a ShaderBuilder solution for color-per-face and/or color-per-quad.  He is a genius at shader materials.

But still... maybe only grounds.  I dunno.  Seems like color-per-quad or color-per-face shouldn't be so difficult.  But I'm no pro.  The coolest thing about the above playground... it will crash Firefox v48 after about 45 mins 

[smatt]

That looks really great 

If I see this correctly, I have to procedural generate a SVG with a lot of small triangles with different colors, export it as a PNG / JPG and apply the material...
All in JavaScript at runtime...

Maybe there is a easier solution

[JohnK]

Have you read these topics which seem to be covering a related area?

 

 

[smatt]

11 minutes ago, JohnK said:

Have you read these topics which seem to be covering a related area?

It looks as if they are using a material per mesh which is easier than per-side color... Do you maybe have links about custom color per side?  

What about these "Multi-Materials"? Are they useful in this context?

[JohnK]

Strangely it was trying to understand multi-materials and whether you could specify which facets would have which colour or texture that got me started thinking in this area. And it was this, your topic, and the geometry vertices positions topic that got me thinking about the issues that this would involve. This led me to writing this

http://babylonjsguide.github.io/advanced/Facets

Which is currently how far I have got in thinking about it. Seems nearly full circle. What I think it means is that when constructing your own mesh you need to think about placing extra vertices carefully.

[Wingnut]

Coooool, JohnK, and well thunk, I suspect.

@smatt, on the subject of using textures, it would not necessarily be SVG.  You would create/apply a Babylon.DynamicTexture... and "generate" its canvas... by using Context2D fills and strokes, etc.  (Is that SVG?  *shrug*  Somewhat same methods, it seems.) 

My thoughts are a bit off-topic, because... it's texture... and not color-per-whatever. 

I think @Dad72 did some good work in that area... and @dbawel, @joshcamas, and others, too.  He and others... are/were... "painting" onto textures.  'SVG' is probably a good forum-search keyword.

[dbawel]

Currently, I don't know anyway to indentify any specific face of an imported mesh - but only on the vertex level. However, If you create your mesh proceedurally, then you can provide each vertex a specific color inside the same function which creates your mesh. This might provide you with a result you would be happy with, but not a simple task on complex models. Otherwise, I believe you're looking at a custom shader, which may not be that hard to build based upon vertex ordering on your mesh..

Good luck,

DB

[smatt]

@JohnK this guide is REALLY GOOD! It has to be available in the official doc! 

@Wingnut that was just an idea, it may or may not work.

@dbawel you are right with the vertex colors! You said "This might provide..." and: Yes, the colors are terrible in my case. Each vertex has it's own color and on the sides is a color gradient. The only way to achieve a good looking low poly environment with vertex-specific colors is by duplicating them for each side (read more in @JohnK's guide)

[NasimiAsl]

i think the best way ( fast and optimized in gpu and less code )  for detect face in shader is calculate from UV 

this not general way and this need correct UV per each mesh and faces  

and notice if we generated mesh we use fix step per each face we can detect single face and can change that material 

but it work on just generated Mesh for other mesh it is not good

anyway i like know why this question is here what problem force you to ask this maybe problem is not here