What's wrong with my meshes?

[c75]

 

The mesh generator code is:

 

 

 

 

initDisplay() {

var height = 2;
var min_height = 0;

let vertex_data = {
positions: [],
indices: [],
colors: []
};

var earcut_data = {
vertices: [],
holes: [],
polygon_indices: []
};

for (var polygon_index = 0; polygon_index < this.geometry['coordinates'].length; polygon_index++) {
var coords = this.geometry['coordinates'][polygon_index];

if (polygon_index) {
earcut_data.holes.push(earcut_data.vertices.length / 2);
}

var last_c = null;
for (var coord_index = 0; coord_index < coords.length; coord_index++) {
var c = Utility.gpsToModelCoords(coords[coord_index][1], coords[coord_index][0]);

earcut_data.vertices.push(c.x);
earcut_data.vertices.push(c.y);
earcut_data.polygon_indices.push(polygon_index);

if(last_c){
vertex_data.positions.push(last_c.x, height, last_c.y);
vertex_data.positions.push(c.x, min_height, c.y);
vertex_data.positions.push(last_c.x, min_height, last_c.y);

vertex_data.positions.push(last_c.x, height, last_c.y);
vertex_data.positions.push(c.x, height, c.y);
vertex_data.positions.push(c.x, min_height, c.y);

vertex_data.colors.push(0, 1, 1, 1);
vertex_data.colors.push(1, 0, 1, 1);
vertex_data.colors.push(0, 0, 0, 1);

vertex_data.colors.push(0, 1, 1, 1);
vertex_data.colors.push(0, 0, 0, 1);
vertex_data.colors.push(1, 0, 1, 1);

vertex_data.indices.push(vertex_data.indices.length);
vertex_data.indices.push(vertex_data.indices.length);
vertex_data.indices.push(vertex_data.indices.length);

vertex_data.indices.push(vertex_data.indices.length);
vertex_data.indices.push(vertex_data.indices.length);
vertex_data.indices.push(vertex_data.indices.length);
}

last_c = c;
}
}

var top_indices = earcut(earcut_data.vertices, earcut_data.holes, 2);

for (var i = 0; i < top_indices.length; i += 3) {
var i1 = top_indices[i];
var i2 = top_indices[i + 1];
var i3 = top_indices[i + 2];

var e1 = earcut_data.polygon_indices[i1] == earcut_data.polygon_indices[i2] && (i1 - i2) == 1;
var e2 = earcut_data.polygon_indices[i2] == earcut_data.polygon_indices[i3] && (i2 - i3) == 1;
var e3 = earcut_data.polygon_indices[i3] == earcut_data.polygon_indices[i1] && (i3 - i1) == 1;

vertex_data.positions.push(earcut_data.vertices[i1 * 2], height, earcut_data.vertices[i1 * 2 + 1]);
vertex_data.positions.push(earcut_data.vertices[i2 * 2], height, earcut_data.vertices[i2 * 2 + 1]);
vertex_data.positions.push(earcut_data.vertices[i3 * 2], height, earcut_data.vertices[i3 * 2 + 1]);

var c0 = [1, 1, 1, 1];
var c1 = [1, 1, 1, 1];
var c2 = [1, 1, 1, 1];

if (e1) {
c0[0] = 0;
c1[0] = 0;
}

if (e2) {
c1[1] = 0;
c2[1] = 0;
}

if (e3) {
c2[2] = 0;
c0[2] = 0;
}

vertex_data.colors.push(c0[0], c0[1], c0[2], c0[3]);
vertex_data.colors.push(c1[0], c1[1], c1[2], c1[3]);
vertex_data.colors.push(c2[0], c2[1], c2[2], c2[3]);

vertex_data.indices.push(vertex_data.indices.length);
vertex_data.indices.push(vertex_data.indices.length);
vertex_data.indices.push(vertex_data.indices.length);
}


let mesh = this.create_building_mesh('building_' + this.id, vertex_data)
}

create_building_mesh(name, data) {
var mesh = new BABYLON.Mesh(name, this.renderer.scene);
var vertex_data = new BABYLON.VertexData();



vertex_data.positions = data.positions;
vertex_data.indices = data.indices;
vertex_data.colors = data.colors;

//vertex_data.normals = [];
//vertex_data.normals = BABYLON.VertexData.ComputeNormals(vertex_data.positions, vertex_data.indices, vertex_data.normals);

vertex_data.applyToMesh(mesh, false);

mesh.alphaIndex = 2000;

mesh.material = new BABYLON.StandardMaterial('mat', this.renderer.scene);

let color = randomColor({
hue: 'green',
luminosity: 'light',
format: 'rgbArray'
});

mesh.material.diffuseColor = BABYLON.Color3.FromInts(color[0],color[1],color[2]);

//mesh.enableEdgesRendering();
//mesh.edgesWidth = 1.0;
//mesh.edgesColor = new BABYLON.Color4(0, 1, 1, 1);

//mesh.material.wireframe = true;
//mesh.material.diffuseColor = new BABYLON.Color3(1.0, 0.5, 0.5);

return mesh;
}

 

code copy is here 

 

Is this problem based on wrong normales???

[GameMonetize]

Hello and welcome,

 

please create a playground to allow us to really help you:)

[c75]

I put simplier version of previous code to playground. My mesh looks bad ;( it must be the box, but now it's not like that. Use "Wireframe" rendering view to see what it must be

 

http://www.babylonjs-playground.com/#UFYJM#3

 

Here is a little preview of the problem

 

 

Can i fix it in simple way?

[GameMonetize]

Ok so the issue comes from your indices. They should be in CCW order.

Small patch:http://www.babylonjs-playground.com/#UFYJM#4

[c75]

Ok so the issue comes from your indices. They should be in CCW order.

Small patch:http://www.babylonjs-playground.com/#UFYJM#4

 

Thank you very much for response!

[GameMonetize]

My pleasure!