Jump to content

Create a shape with more than 4 vertices


Temechon
 Share

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 !

Link to comment
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.

Link to comment
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 :)

post-5218-0-70265800-1392197409.jpg

Link to comment
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 :)

post-5218-0-70265800-1392197409.jpg

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?

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.

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

Loading...
 Share

  • Recently Browsing   0 members

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