Create a shape with more than 4 vertices

[Temechon]

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 !

[GameMonetize]

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

[Temechon]

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.

[GameMonetize]

i understand...Maths are required here

[Temechon]

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 !

[GameMonetize]

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

[Temechon]

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

[GameMonetize]

Well done!!!

[ozRocker]

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?

[ozRocker]

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

  var vertexData = new BABYLON.VertexData();

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

 

[Temechon]

This code is veeeery old  You can also use something like this: http://www.babylonjs.com/demos/polygon/ for better results.