Creating a 3D scene from 2D data using vertices/custom mesh question

[brucewong21 1]

Hello, noob back

Just wanted to ask what may be the best way to approach creating something like a maze from 2D positional data. (Image below to show what im trying to accomplish)
I had created something by creating custom meshes which mapped to 2D data but even creating 7 or so planes makes the performance extremely slow.
I'm guessing this has something to do with computing normals or creating new vertex data... Not sure. 

So far each of the custom planes you see below are cloned from a base custom mesh object and then a new vertexData is created for each one based on the XY coordinates of the map and applied on the mesh. Because of the huge performance hit, I'm thinking that this isn't the best way. Can anyone provide any expertise on this please? Thank you.

 

function linedef(startVertex, endVertex, material) {
  this.startVertex = startVertex;
  this.endVertex = endVertex;


  let customMesh = bustomMesh.clone();

  const {x, y, z} = startVertex;
  
  var positions = [
    x, 5, z, x, 0, z, endVertex.x, 0, endVertex.z,
    x, 5, z, endVertex.x, 0, endVertex.z, endVertex.x, 5, endVertex.z
  ];

  var indices = [0, 1, 2, 3, 4, 5]

  var vertexData = new BABYLON.VertexData();

  vertexData.positions = positions;
  vertexData.indices = indices;    

  vertexData.applyToMesh(customMesh);

  var normals = [];

  //Calculations of normals added
  BABYLON.VertexData.ComputeNormals(positions, indices, normals);

  var vertexData = new BABYLON.VertexData();

  vertexData.positions = positions;
  vertexData.indices = indices;

  //normals = normals.map((n) => {return -(n)})
  vertexData.normals = normals; //Assignment of normal to vertexData added

  var uvs = [0, 1, 0, 0, 1, 0, 0, 1, 1, 0, 1, 1];
  vertexData.uvs = uvs;

  vertexData.applyToMesh(customMesh);



  //var redMat = new BABYLON.StandardMaterial("redMat", scene);
  //redMat.diffuseTexture = new BABYLON.Texture("textures/e1m1wall.png", scene);
  //redMat.bumpTexture = new BABYLON.Texture("http://i.imgur.com/wGyk6os.png", scene);

  //customMesh.material = redMat;
  //customMesh.material.backFaceCulling = true;
  //showNormals(customMesh, 5, null, scene);
  customMesh.checkCollisions = true;
  return customMesh;
}

 

[brucewong21 1]

Sorry I found out that it was my fault in the number of draw calls to the canvas that I used for the map editor. 
I'm still worried about the performance of using this method of creating custom meshes to populate my map. Is this a good way to do it or am I missing something with the normal Babylon plane object? I did'nt want to use the plane because I didn't want to bother trying to position my planes using the position property.

[jerome 1734]

Imho, if you have  only some 2D vertex coordinates, you could :

- spend a little time to compute the positions (barycenter) and the size/scaling (vector length) of each of your wall

- then use instances (or a SPS) of planes or thin boxes by positioning and scaling them accordindgly to the previous results.

This would allow you to display the whole maze in a single draw call.