What is a geometry object?

First we need to understand what a geometry object is made up of. It’s essentially a collection of points (vertices) in 3D space that are connected together to form surfaces in the form of triangles.

The vertices form triangles because 3 is the minimum number of points you need to create a surface; one point is just a point, two points is a line, three you can make a triangular surface, and with four points you can make a quadrilateral which can be split up into 2 triangles.

These vertices can be connected together in a number of ways in SceneKit, these ways are: triangles, triangleStrip, line, point and polygon. In other frameworks, like OpenGL you also have triangle fan, quads, quads strip etc. those geometries are still possible to create, but not in exactly the same way. I’d advise you read up on OpenGL primitives before continuing, it will help to have that knowledge.

SCNPlane

For SCNPlane the geometry is always a rectangle, so no skewing is needed. Therefore all the information we need is a width and a height.

Of the above mentioned geometries either triangles, triangleStrip or polygon would work for us. Polygon has the potential to create more vertices than we need, and as the result will be two triangles sharing two vertices and one edge triangleStrip would require the least amount of work. (File on GitHub)

extension SCNGeometry {
  static func Plane(width: CGFloat, height: CGFloat) -> SCNGeometry {
    let src = SCNGeometrySource(vertices: [
      SCNVector3(-width / 2, -height / 2, 0),
      SCNVector3(width / 2, -height / 2, 0),
      SCNVector3(-width / 2, height / 2, 0),
      SCNVector3(width / 2, height / 2, 0)
    ])

    let indices: [UInt32] = [0, 1, 2, 3]

    let normals = SCNGeometrySource(normals: [SCNVector3](repeating: SCNVector3(0, 0, 1), count: 4))

    let textureMap = SCNGeometrySource(textureCoordinates: [      CGPoint(x: 0, y: 1),
      CGPoint(x: 1, y: 1),
      CGPoint(x: 0, y: 0),
      CGPoint(x: 1, y: 0)
    ])
    let inds = SCNGeometryElement(indices: indices, primitiveType: .triangleStrip)

    return SCNGeometry(sources: [src, normals, textureMap], elements: [inds])
  }
}

In the above I’ve also included normals and a texture map example. The normals will be automatically calculated, but I’ve left it in anyway so it’s clear how could be added. If the texture mapping doesn’t make sense, check out this page on how it works in OpenGL; the main difference being that the origin is at the top left in iOS, not the bottom left.

As you can see from the attached GIF, it looks exactly the same as a SCNPlane geometry.

The main difference doing this we don’t have access to the modifiers available with SCNPlane such as the corner radius, segment counts, but they can be added easily with a bit of math. Message me or leave a comment if you think it’d be worthwhile to add that!

SCNBox

SCNBox is typically a cuboid geometry with 6 rectangular faces (so 12 triangles) and 8 vertices. No skewing or anything like that so all we need is to have a width, height, and length for this one. Omitting chamferRadius for the time being.

A box could be made from triangles or triangleStrip, but I’ll go with triangles this time to change it up a bit. If you wanted to try this out yourself I’d highly recommend editing the indices to work with the triangleStrip type, as that would be the preferred method for making a cuboid, or any hexahedron for that matter.

First step is to get all the vertices (and again, on GitHub):

let w = width / 2
let h = height / 2
let l = length / 2
let src = SCNGeometrySource(vertices: [
  // bottom 4 vertices
  SCNVector3(-w, -h, -l),
  SCNVector3(w, -h, -l),
  SCNVector3(w, -h, l),
  SCNVector3(-w, -h, l),
  // top 4 vertices
  SCNVector3(-w, h, -l),
  SCNVector3(w, h, -l),
  SCNVector3(w, h, l),
  SCNVector3(-w, h, l)
])

It might take a second for you to see all those as the vertices, I’m assuming you have a width, height & length given, and am dividing them before hand because it’s easier to read and less computation for the app.

Now we have to draw all the triangles. Each face has 2 triangles, so needs 6 indices each, 2 of those will have the same edge. These are the indices I’ve calculated and have split up by cuboid face so that it’s easier to understand:

let indices: [UInt32] = [
  // bottom face
  0, 1, 3,
  3, 1, 2,
  // left face
  0, 3, 4,
  4, 3, 7,
  // right face
  1, 5, 2,
  2, 5, 6,
  // top face
  4, 7, 5,
  5, 7, 6,
  // front face
  3, 2, 7,
  7, 2, 6,
  // back face
  0, 4, 1,
  1, 4, 5,
]
let inds = SCNGeometryElement(indices: indices, primitiveType: .triangles)

And as before, using the convenience init of SCNGeometry:

let boxGeometry = SCNGeometry(source: [src], elements: [inds])

The result looks like this:

We’ve seen this before right? What’s the point?

The point is that once you have these foundations you can create slightly different geometries with just a little poking and no need to bring in external models.

The above cube has dimensions 0.2x0.2x0.2. If I create a new geometry type that I call, for example, SkewBox, which takes in an extra parameter skew: CGPoint I can change my vertices like this (also on GitHub):

let src = SCNGeometrySource(vertices: [
  // bottom 4 vertices
  SCNVector3(-w, -h, -l),
  SCNVector3(w, -h, -l),
  SCNVector3(w, -h, l),
  SCNVector3(-w, -h, l),
  // top 4 vertices
  SCNVector3(-w + skew.x, h, -l + skew.y),
  SCNVector3(w + skew.x, h, -l + skew.y),
  SCNVector3(w + skew.x, h, l + skew.y),
  SCNVector3(-w + skew.x, h, l + skew.y),
])

The output:

From here you can create any hexahedron at all! And then on to any shape beyond that.

The next step is animating a geometry to stretch and skew in a way that cannot be done simply by scaling a node, only by changing a geometry, such as the examples here:

In my next post I go through how to create a demo just like the one above!

Click here to see Part 2. Also feel free to follow/message me on Twitter or LinkedIn if anything’s unclear or have any suggestions for future posts. Check out my GitHub for other projects.