Jump to content

Remove some polygons


Recommended Posts

Hi Negrant!  Um... I guess start with this thread.  http://www.html5gamedevs.com/topic/26307-multimaterial-and-submeshes-docs/#comment-151141

Someone once asked "Hey, how can I remove the top of a BJS box?"

"Yes, very carefully... with a chainsaw... cutting various indices" (the things that are drawn clockwise or counterCW between vertices... to make triangular faces).  Finding the correct ones to cut... is the difficult part.  But I managed.


Read that thread carefully.  Learn about the vertexData object (one for each mesh)... and learn about its many arrays and their "format".

See the blue boxes in the plotting demo from that other thread?  It might help to start with that.  Get those boxes activated (temporarily) on your SMALL test mesh.  Now you have "vertex numbers".

Now do... var myIndices = myMesh.getIndices();

Dump them to console and stare at them.  Those are 3-packs of integer vertex numbers... like seen in the plotting demo - lines 52-63.  Those numbers are blue box numbers.  Those values dictate WHICH blue boxes are connected together with each other... to form triangular "renderable" faces.  Always 3 vertices per face, so indices are always 3-vertex numbers per face.

Always remove 3 values from indices... each edit (or multiple of 3).  Each 3-value pack that you remove from indices... is one triangular face that won't be drawn... but you must remove the CORRECT 3-value group... or else you will screw-up the mesh shape.  Fun experimenting indeed.

Then...  after you've removed certain values, then myMesh.setIndices(myIndices, myIndices.length);  (put them back onto the mesh's vertexData object).  Notice that I zeroed-out 4 indices in the #7 demo.  Although it worked, I did sloppy programing, there.  I should have nulled 6 indices... 2 groups of 3-packs.  :)

Important Note:  Your mesh must be set updatable = true to allow after-render changes to mesh, like this.  Good luck!

Link to comment
Share on other sites

Wingnut, okay, I understand! Look, if I am doing something like this (just I removed one triangle):

myIndices = myMesh.getIndices();
myIndices.splice(0, 3);
myMesh.setIndices(myIndices, myIndices.length);

I need do it with all vartexData kinds? Like this:




1)var data = newMeshes[0].getVerticesData(BABYLON.VertexBuffer.ColorKind);
  data.splice(0, 3);
  newMeshes[0].setVerticesData(BABYLON.VertexBuffer.ColorKind, data);

2)var data = newMeshes[0].getVerticesData(BABYLON.VertexBuffer.MatricesIndicesExtraKind);
  data.splice(0, 3);
  newMeshes[0].setVerticesData(BABYLON.VertexBuffer.MatricesIndicesExtraKind, data);

3)var data = newMeshes[0].getVerticesData(BABYLON.VertexBuffer.MatricesIndicesKind);
  data.splice(0, 3);
  newMeshes[0].setVerticesData(BABYLON.VertexBuffer.MatricesIndicesKind, data);





Link to comment
Share on other sites

10 hours ago, negrant said:

I need do it with all vartexData kinds?

No.  Only arrays that have data in them.

Really, you ask a difficult question.  If you wish, you can ONLY delete indices.  That will remove rendered faces.  But your mesh will now be "unnecessarily large".  (it might be storing un-used vertex positions, UVs, normals, etc.)  

Do you care?  If so, you MIGHT wish to code a really nice "face remover" system.  Perhaps user/programmer clicks on triangle face (in wireframe mode)... you draw lines around it with LinesMesh feature, and then you gather data from ALL the used vertexData arrays... and prepare to remove the face data from ALL vertexData arrays (those which have data inside them). 

That would be called "a perfect face removal".  No slop... no left-over un-needed data.  Not so easy to do.  It takes good math... good indexing into arrays... and good knowledge of array data formats  (positionKind, normalKind, colorKind, UVKind, etc.).  Got aspirin?  :)

Bottom line, you need to be very precise/accurate.  Learn array-handling in JS real well.  Plotting/de-plotting takes patience and practice.  Be certain, before you remove a vertex (and its normal, color, uv, whatever)... that no other faces are sharing that vertex.  Generally, you would not remove vertices unless you are removing large sections of model. 

MANY faces can disappear... by removing just one vertex.  For example...


How many faces would disappear... if we remove the center vertex?  About 52 faces, right?  Vertex sharing.  :)  Much to think about.


Wipe all vertexData on a mesh?  http://www.babylonjs-playground.com/#1UHFAP#67

Look at line 90.  There, we make a new, empty VertexData object. 

Lines 92-98... you don't do those.  Those are putting data into arrays on the vertexData obj.  You want it blank, instead.

Line 101 - vertexData.applyToMesh(ANYmesh, 1);  We can put that empty vertexData object onto any mesh.  Erases everything.  :)

But you can also do... mesh.setEnabled(false), or mesh.visibility = 0, or mesh = new BABYLON.Mesh("blank", scene), as well.  :) 

OR, you can JUST do mesh.setIndices()... which should make a mesh not-render.

Experiment, my friend.  That's part of the fun.  Keep in mind that the MESH class has many methods for getting and setting vertexData arrays/data.  Good tools there.  Scroll down more in that class doc... see what is there.  :)  Hope this helps.

If you are planning to create an editor... to "assemble" triangle faces together with a mouse... to "build" BJS mesh... then... wow.  Mega-hard work.  (wingnut calls aspirin factory... checks on supply levels).  :) 

Also, remember, your mesh must be set updatable AND... if you do mesh.convertToFlatShadedMesh()... MANY more vertices, normals, etc... will be added to your mesh (mostly non-box things).  Flat shaded mesh need more lighting normals... 3 on each corner, generally.  You might have already read about that in the other thread.  Ok, good luck.

Link to comment
Share on other sites

Have a look here and see if anything helps


Select meshes from the list at top and then read 7 to 10. The following


Removes some facets but the problem as Wingnut says is controlling what exactly is removed. Of course it is easier if you are creating your own custom meshes to know which facet is where.

Link to comment
Share on other sites


Wingnut, good idea about create an editor, but I will not do it :D I have other goals. In my game there are zombies, I do something like "limb detachment" or "severing limbs", I dont know, how it is right saying in English. I make a screenshot, it is not final version, there is not blood yet, and is not  flying pieces of meat, just model of a zombie and model of a parts of a zombies body and when you are shooting at him, then some part of a body detached:


Because of this my model consists of many meshes: few meshes of left hand, few meshes of right hand of legs and so on..

Many meshes as I known it is many draw calls and loss of performance. And I thought about removes of the polygons, it opens up much greater opportunities and I will can separate my zombie in most pieces :)

I thinking about creating a babylon editor in which I load a model and it show me verticies indices of all polygons or something like it, where I can understand what verticies I need removes.

Thank you very much, you gave me more informations and very help me in my problem! Thank!

JohnK, thank you too. Very useful information about minimising mesh verticies, I am think I am starting understand something about it is difficult question, but I need time :)

Link to comment
Share on other sites

Guys. I have one more question. I cloned the several meshes and changed some indices for one of them, but indices changed for all cloned meshes. How I can cloning meshes and changed indices only for some mesh? Thank

                var sphere: BABYLON.Mesh = BABYLON.Mesh.CreateSphere("sd", 8, 10, tempThis.scene);
                var sphere2 = sphere.clone(sphere.name + "1");

                sphere.position.x -= 6;
                sphere2.position.x += 6;

                var inds1 = sphere.getIndices();
                var inds2 = inds1.slice(0); // clone array

                for (var i = 0; i < 9; i++) { // remove some vertices
                    inds2[i] = 0;
                sphere.setIndices(inds1, inds1.length);
                sphere2.setIndices(inds2, inds2.length);

In result we can see, that all meshes changes own indices:


Link to comment
Share on other sites

Cloned meshes share geometry.


The main thing [of a mesh] that is cloned ... is the geometry - the vertex data of the mesh is reused across all meshes. The material, for example, can be changed.

from https://blog.raananweber.com/2015/09/03/scene-optimization-in-babylon-js/

So sorry but removing a facet from a mesh will result in its removal from all cloned meshes.

Link to comment
Share on other sites

Really you are back to individual meshes and lots of meshes will slow performance, see link in my post above.

If it is the zombies you want copies of, you may end up better back where you started. Do arms, legs etc as separate meshes, form instances (if sharing material, clones if not) of all these components and put together to form an army of zombies) Positions and rotations of the different instances (or clones) can be handled individually.

Link to comment
Share on other sites

7 minutes ago, JohnK said:

Really you are back to individual meshes and lots of meshes will slow performance, see link in my post above.

If it is the zombies you want copies of, you may end up better back where you started. Do arms, legs etc as separate meshes, form instances (if sharing material, clones if not) of all these components and put together to form an army of zombies) Positions and rotations of the different instances (or clones) can be handled individually.

Yes, I am doing like you are saying. If some part of zombie breaks away, then I make instance, if with a zombie yet all right, then he is a clone, but when somebody shot in zombie then I will make zombie geometry unique :)

Thank for help.

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...