How to invert the normal of a vertice ?

[elkyu]

Hi,

I have a plan with many points (like a grid) created with Blender and exported to Babylon.

 

I want invert the normal of some part of this grid to create a "hole" in the plan, how can I do this ? By inverting the normal of a point ? If it is possible to do this, can you explain to me how ?

What I want to do, is for example, to show a clickable element  under this plan and can click on through the created hole in the plan.

How can i do this ?

 

Thank you 

[JCPalmer]

assuming:

mesh = var for target mesh

offset = the offset of the vertex you wish to change

 

var normals = mesh.getVerticesData(BABYLON.VertexBuffer.NormalKind);

normals[offset      ] *= -1;

normals[offset + 1] *= -1;

normals[offset + 2] *= -1;

mesh.setVerticesData(BABYLON.VertexBuffer.NormalKind, normals);

 

There are 2 levels of optimization that can be done, but if this is only being done for a click, then it will not matter.  Unless, you wish the click to morph over a series of frames

 

[elkyu]

Thank You for your help but I find an other way to invert the normal of a part of my plan (invert the order of the 3 vertex of the part in the vertice Data).

[elkyu]

Finally, it's not working, if, like you said I invert the normal of one vertice in the plan nothing happend.

 

The points on my plan make several triangle, and I want invert the normal of a triangle, it doesn't work if I  invert the normal of just one vertice

[Wingnut]

Hi.  I actually think that inverting a single triangle of a standard non-flat-shaded mesh... is impossible (but I could easily be wrong).  Often, triangles share vertices with each other, so if you invert the normal of ONE vertex, it affects many triangles (up to 6).

I haven't got a solution, but I built a playground scene to experiment-with.  http://playground.babylonjs.com/#CG2MJ#2

That one is WITHOUT flatShading.  When a mesh is set to flat shaded, vertices are added, with each new vertex having a normal (to the best of my knowledge).  In the above demo, look at the console.  100 vertices.  Take note of lines 31-33.  They are currently just like JcPalmer's code:

	normals[normnum] *= -1;	normals[normnum+1] *= -1;	normals[normnum+2] *= -1;

It is not working correctly, is it?  Now let's turn-on flat shaded.  http://playground.babylonjs.com/#CG2MJ#3

Refer to the console... now 486 vertices.  I also changed lines 31-33 to this:

	normals[normnum] *= -1;	normals[normnum+3] *= -1;	normals[normnum+6] *= -1;

There we go, a single triangle, backFaced.    It's not a hole, because we cannot see the blue background color there.

When we converted to flat shaded mesh, our vertices are less "shared"... so inverting a single vertex... no longer affects up-to 6 triangles (because of shared vertices).  Now you can invert a single triangle without affecting adjacent triangles.

How the normals are formatted after a .convertToFlatShadedMesh()... I have no idea.  But I did flip a single triangle, and hey, that's something, right?    Modify the code, do experiments, hit RUN again and again, and when you discover something, SAVE it and then send us the new URL so we can learn.  (thx).

Just for fun, let's apply a displacement map to the ground and wireframed ground2.  http://playground.babylonjs.com/#CG2MJ#4  Well look at that.  NOW the triangle IS a hole.  I can see blue through it.  Unfortunately, a black triangle resides below.  Maybe we should not be applying displacement maps onto flat shaded mesh, because it is apparently getting confused. 

We also lost our flat shading after the applyDisplacementMap, I think.  This might happen because applyDisplacementMap is using normals to do its job... maybe.  Most people would use a createGroundFromHeightMap instead of applyDisplacementMap.  But it's all quite strange, eh?  And fun.

Even when using createGroundFromHeightMap... http://playground.babylonjs.com/#CG2MJ#5 ...convertToFlatShaded fails (activate line 30 - no subMeshes error).  How DOES a person get a flat shaded ground with BJS?  hmm. 

Like this!  http://playground.babylonjs.com/#CG2MJ#6  Using the applyDisplacementMap method.  (I had a bug... quite 'normal' for me)  heh

Sorry that I couldn't explain WHY these things act this way.  I'm a newbie to these kinds of things.  Jerome has done some things with "double sided" mesh, so you might want to search the forum for that, too.  It's new, and I don't know if it is available for all mesh.  Good luck... keep us posted.

[elkyu]

So, I find a way. On a mesh we have 3 arrays (position, normal, indice).

 

We can't invert the normal of a face with the normal array, it's not working (or I fail but ..)

 

But, we can get the 3 indices which make the face and invert the order of two of this 3 indices and it's working !

[jerome]

If you know the mesh positions and indices concerned by your inversion, then BABYLON.VertexData_computeSides() does the job : https://github.com/BabylonJS/Babylon.js/blob/master/src/Mesh/babylon.mesh.vertexData.ts#L1280

[elkyu]

... Thank you

The implementation of this function is the same of mine ..