Canvatorium Lab 028

Building a Greek Stoa while exploring some 3D modeling workflows in Babylon JS.

I’m working on a small side project that I hope to launch in a few weeks so the next few labs will be various aspects that I need for that project. Lab 028 was all about creating 3D models directly in Babylon JS.

Columns

I started with a simple Doric-inspired column. I used the Lathe and some box geometry to create my first draft. I added the boxes as children to the column but ran into issues with that when using instances. Cloning objects in Babylon JS will clone all child objects, but instances will only work on a single mesh.

I iterated on this template before producing the final (for now!) version. I ended the Lab with this function to create a column.

• Creates a material using a noise texture and lab color
• Uses an array of Vector3 to create the profile for the column
• Uses `CreateLathe` to create the column using the profile data
• Convert the result to Flat Shaded
• Uses a simple Box to create the architrave
• Combine the shaft and the architrave into a single mesh, useful when using instances

const createColumnDoric = () => {
  const colMat = new BABYLON.StandardMaterial("column-doric-mat", scene);
  colMat.diffuseColor = LabColors["light3"];
  colMat.specularColor = new BABYLON.Color3(0.1, 0.1, 0.1);
  const colTex = new BABYLON.Texture("../assets/stoa-noise-01.jpg", scene);
  colTex.vScale = 1;
  colTex.uScale = 5.6;
  colMat.diffuseTexture = colTex;

  const profile = [
    new BABYLON.Vector3(0.48, 0, 0),
    new BABYLON.Vector3(0.38, 5.1, 0),
    new BABYLON.Vector3(0.46, 5.175, 0),
    new BABYLON.Vector3(0.5, 5.3, 0),
  ];

  const column = BABYLON.MeshBuilder.CreateLathe("staft", {
    tessellation: 18,
    shape: profile,
    sideOrientation: BABYLON.Mesh.DOUBLESIDE,
  });
  column.material = colMat;
  column.convertToFlatShadedMesh();

  const cap = BABYLON.MeshBuilder.CreateBox("architrave", {
    width: 1.02,
    height: 0.16,
    depth: 1.02,
  });
  cap.material = colMat;
  cap.parent = column;
  cap.position = new BABYLON.Vector3(0, 5.38, 0);

  const result = BABYLON.Mesh.MergeMeshes([column, cap], true, true);
  return result;
};

I repeated this process for the Ionic columns, which I have not finished. For now, they lack any sort of detail.

I threw together some simple “factory” functions to create instances of the columns and position them in the scene.

Structure

The rest of the Stoa is mostly comprised of Boxes, Planes, and a few other primitives. I used my lab colors to shade each model while I was working on them.

• Dark Gray: The two lower steps are clones of the floor. The floor is added as a teleport mesh.
• Green: The rail is made of 4 box meshes. Intended to add the appearance of support for the roof.
• Ceiling Plane (blue, light blue, and orange) and walls are all planes, allowing me to add materials to each one.
• The end caps on the roof are cylinders with a tessellation of 3, scaled to the shape I wanted.

Once I got the geometry into the state that I wanted, I removed the lab colors. This is the result.

Video description of the lab