How to make a custom SCNGeometry?
This is a demo playground for this Stack Overflow question.
According to the documentation, making a custom geometry takes 3 steps.
- Create a
SCNGeometrySource
that contains the 3D shape's vertices. - Create a
SCNGeometryElement
that contains an array of indices, showing how the vertices connect. - Combine the
SCNGeometrySource
source andSCNGeometryElement
into aSCNGeometry
.
Let's start from step 1. You want your custom geometry to be a 3D shape, right? You only have 2 vertices, though.
let vertices: [Vertex] = [ /// what's `r`, `g`, `b` for btw?
Vertex(x: 0.0, y: 0.0, z: 0.0, r: 1.0, g: 0.0, b: 0.0),
Vertex(x: 1.0, y: 0.0, z: 0.0, r: 0.0, g: 0.0, b: 1.0)
]
This will form a line...
A common way of making 3D shapes is from triangles. Let's add 2 more vertices to make a pyramid.
let vertices: [Vertex] = [
Vertex(x: 0.0, y: 0.0, z: 0.0, r: 1.0, g: 0.0, b: 0.0), /// vertex 0
Vertex(x: 1.0, y: 0.0, z: 0.0, r: 0.0, g: 0.0, b: 1.0), /// vertex 1
Vertex(x: 1.0, y: 0.0, z: -0.5, r: 0.0, g: 0.0, b: 1.0), /// vertex 2
Vertex(x: 0.0, y: 1.0, z: 0.0, r: 0.0, g: 0.0, b: 1.0), /// vertex 3
]
Now, we need to connect the vertices into something that SceneKit can handle. In your current code, you convert vertices
into Data
, then use the init(data:semantic:vectorCount:usesFloatComponents:componentsPerVector:bytesPerComponent:dataOffset:dataStride:)
initializer.
let vertexData = Data(
bytes: vertices,
count: MemoryLayout<Vertex>.size * vertices.count
)
let positionSource = SCNGeometrySource(
data: vertexData,
semantic: SCNGeometrySource.Semantic.vertex,
vectorCount: vertices.count,
usesFloatComponents: true,
componentsPerVector: 3,
bytesPerComponent: MemoryLayout<Float>.size,
dataOffset: 0,
dataStride: MemoryLayout<Vertex>.size
)
This is very advanced and complicated. It's way easier with init(vertices:)
.
let verticesConverted = vertices.map { SCNVector3($0.x, $0.y, $0.z) } /// convert to `[SCNVector3]`
let positionSource = SCNGeometrySource(vertices: verticesConverted)
Now that you've got the SCNGeometrySource
, it's time for step 2 — connecting the vertices via SCNGeometryElement
. In your current code, you use init(data:primitiveType:primitiveCount:bytesPerIndex:)
, then pass in nil
...
let elements = SCNGeometryElement(
data: nil,
primitiveType: .point,
primitiveCount: vertices.count,
bytesPerIndex: MemoryLayout<Int>.size
)
If the data itself is nil
, how will SceneKit know how to connect your vertices? But anyway, there's once again an easier initializer: init(indices:primitiveType:)
. This takes in an array of FixedWidthInteger
, each representing a vertex back in your positionSource
.
So how is each vertex represented by a FixedWidthInteger
? Well, remember how you passed in verticesConverted
, an array of SCNVector3
, to positionSource
? SceneKit sees each FixedWidthInteger
as an index and uses it access verticesConverted
.
Since indices are always integers and positive, UInt16
should do fine (it conforms to FixedWidthInteger
).
/// pairs of 3 indices, each representing a vertex
let indices: [UInt16] = [
0, 1, 3, /// front triangle
1, 2, 3, /// right triangle
2, 0, 3, /// back triangle
3, 0, 2, /// left triangle
0, 2, 1 /// bottom triangle
]
let element = SCNGeometryElement(indices: indices, primitiveType: .triangles)
The order here is very specific. By default, SceneKit only renders the front face of triangles, and in order to distinguish between the front and back, it relies on your ordering. The basic rule is: counterclockwise means front.
So to refer to the first triangle, you could say:
- 0, 1, 3
- 1, 3, 0
- 3, 0, 1
All are fine. Finally, step 3 is super simple. Just combine the SCNGeometrySource
and SCNGeometryElement
.
let geometry = SCNGeometry(sources: [positionSource], elements: [element])
And that's it! Now that both your SCNGeometrySource
and SCNGeometryElement
are set up correctly, lightingModel
will work properly.
/// add some color
let material = SCNMaterial()
material.diffuse.contents = UIColor.orange
material.lightingModel = .physicallyBased
geometry.materials = [material]
/// add the node
let node = SCNNode(geometry: geometry)
scene.rootNode.addChildNode(node)
Notes:
- I noticed that you were trying to use 2
SCNGeometrySource
s. The second one was to add color withSCNGeometrySource.Semantic.color
, right? The simpler initializer that I used,init(vertices:)
, defaults to.vertex
. If you want per-vertex color or something, you'll probably need to go back toinit(data:semantic:vectorCount:usesFloatComponents:componentsPerVector:bytesPerComponent:dataOffset:dataStride:)
. - Try
sceneView.autoenablesDefaultLighting = true
for some better lighting