Jump to content

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


Recommended Posts

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;    


  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;


  //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;


Screen Shot 2017-11-18 at 4.06.51 PM.png

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

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.

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.


  • Recently Browsing   0 members

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