Create a shape with more than 4 vertices

Recommended Posts

Hi all,

Will it be possible in a next future to create a plane shape with more than 4 vertices ? I've been trying to create a new method based on function "BABYLON.Mesh.CreatePlane", but I'm stuck with indices.

What I would need is a polygon triangulation algorithm...

Is it planed in a next release of Babylon, or should I implement it myself ? I think about the ear clipping method (I'm not looking for performance, just feasability).

Thanks !

Share on other sites

You need a plane with more than 2 faces? You can see what I did with the createGround in this case?

Share on other sites

Well, I need a plane with more than 2 faces, yes.

But what I need the most is the possibility to handle any n-side polygone in a specific axis (like a plane today), that can be concave or convex. This n-side polygon could be then textured, updated, like a normal mesh.

Yes, I checked createGround, but I don't think it answer to my problem here.

Share on other sites

i understand...Maths are required here

Share on other sites

Yes But I'm quite sure you know what to do here

So, is it planned somehow ? Or do I have to (try to) implement it myself ?

Thanks !

Share on other sites

Hehe, Not planned right now (still working on the serialization tool)

Share on other sites

• 2 weeks later...

Hello again,

In order to solve my problem (create a ground with more than 4 sides/vertices), I use the wonderful library poly2tri.js (https://github.com/r3mi/poly2tri.js). Here is my solution.

First, you have to include poly2tri.min.js in your project :

`<script type="text/javascript" src="js/lib/poly2tri.min.js"></script>`

Then, I used the function createFreeGround (created by Loic - thanks ). It takes in parameters an id (the mesh name), a list of vertices (vList) and a scene.

`var createFreeGround = function(id, vList, scene, updatable) {    var ground = new BABYLON.Mesh(id, scene);    var normals = [];    var positions = [];    var uvs = [];    var indices = [];           //Get the uv map dimensions    var uvmapxmin = vList[0].x;    var uvmapzmin = vList[0].z;    var uvmapxmax = vList[0].x;    var uvmapzmax = vList[0].z;     vList.forEach(function(v) {        if(v.x < uvmapxmin) {            uvmapxmin = v.x;        }        else if(v.x > uvmapxmax) {            uvmapxmax = v.x;        }        if(v.z < uvmapzmin) {            uvmapzmin = v.z;        }        else if(v.z > uvmapzmax) {            uvmapzmax = v.z;        }    });        // Fill contours, normals, positions & uvs    var currentIndice = 0;	// array contour is used to triangulate the polygon    var contours = [];    vList.forEach(function(v) {        contours.push({x:v.x, y:v.z, indice:currentIndice++});		// This is a ground : normals up in the air !         normals.push(0, 1.0, 0);        positions.push(v.x, 0, v.z);        uvs.push((v.x - uvmapxmin) / (uvmapxmax - uvmapxmin), (v.z - uvmapzmin) / (uvmapzmax - uvmapzmin));    });        // Triangulate    var swctx = new poly2tri.SweepContext(contours);    swctx.triangulate();        // retrieve indices    var triangles = swctx.getTriangles();    triangles.forEach(function(t) {		t.getPoints().forEach(function(p) { 			indices.push(p.indice);		});    });        // Set data    ground.setVerticesData(positions, BABYLON.VertexBuffer.PositionKind, updatable);    ground.setVerticesData(normals, BABYLON.VertexBuffer.NormalKind, updatable);    ground.setVerticesData(uvs, BABYLON.VertexBuffer.UVKind, updatable);    ground.setIndices(indices);        // Set dimensions of the ground    //var width = uvmapxmax - uvmapxmin;    //var height = uvmapzmax - uvmapzmin;        return ground;}`

And it works !! (see screenshot attached)

It is not very difficult to understand, but if you have any questions about it, feel free to ask

Well done!!!

Share on other sites

• 3 years later...
On 2014-2-12 at 8:30 PM, Temechon said:

Then, I used the function createFreeGround (created by Loic - thanks ). It takes in parameters an id (the mesh name), a list of vertices (vList) and a scene.

`var createFreeGround = function(id, vList, scene, updatable) {    var ground = new BABYLON.Mesh(id, scene);    var normals = [];    var positions = [];    var uvs = [];    var indices = [];           //Get the uv map dimensions    var uvmapxmin = vList[0].x;    var uvmapzmin = vList[0].z;    var uvmapxmax = vList[0].x;    var uvmapzmax = vList[0].z;     vList.forEach(function(v) {        if(v.x < uvmapxmin) {            uvmapxmin = v.x;        }        else if(v.x > uvmapxmax) {            uvmapxmax = v.x;        }        if(v.z < uvmapzmin) {            uvmapzmin = v.z;        }        else if(v.z > uvmapzmax) {            uvmapzmax = v.z;        }    });        // Fill contours, normals, positions & uvs    var currentIndice = 0;	// array contour is used to triangulate the polygon    var contours = [];    vList.forEach(function(v) {        contours.push({x:v.x, y:v.z, indice:currentIndice++});		// This is a ground : normals up in the air !         normals.push(0, 1.0, 0);        positions.push(v.x, 0, v.z);        uvs.push((v.x - uvmapxmin) / (uvmapxmax - uvmapxmin), (v.z - uvmapzmin) / (uvmapzmax - uvmapzmin));    });        // Triangulate    var swctx = new poly2tri.SweepContext(contours);    swctx.triangulate();        // retrieve indices    var triangles = swctx.getTriangles();    triangles.forEach(function(t) {		t.getPoints().forEach(function(p) { 			indices.push(p.indice);		});    });        // Set data    ground.setVerticesData(positions, BABYLON.VertexBuffer.PositionKind, updatable);    ground.setVerticesData(normals, BABYLON.VertexBuffer.NormalKind, updatable);    ground.setVerticesData(uvs, BABYLON.VertexBuffer.UVKind, updatable);    ground.setIndices(indices);        // Set dimensions of the ground    //var width = uvmapxmax - uvmapxmin;    //var height = uvmapzmax - uvmapzmin;        return ground;}`

And it works !! (see screenshot attached)

It is not very difficult to understand, but if you have any questions about it, feel free to ask

I've tried to use your createFreeGround function but my shape doesn't show up and I always ends up with zero vertices (I checked with the inspector).

I tried using this shape

``````		var pentagon = [
new BABYLON.Vector3(0,0,-1),
new BABYLON.Vector3(1,0,0),
new BABYLON.Vector3(1,0,1),
new BABYLON.Vector3(-1,0,1),
new BABYLON.Vector3(-1,0,0)
];
var pentagonShape = createFreeGround("pentagon",pentagon,scene,false);``````

Is there something wrong with the shape I'm using?

Share on other sites

All good. I figured it out.  I used this instead:

``````  var vertexData = new BABYLON.VertexData();

vertexData.positions = positions;
vertexData.indices = indices;
vertexData.applyToMesh(someMesh);``````

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.

×   Pasted as rich text.   Paste as plain text instead

Only 75 emoji are allowed.