Jump to content

How to invert the normal of a vertice ?


Recommended Posts


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 
Link to comment
Share on other sites


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 :)


Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 !

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...