Trouble Arranging SceneKit Nodes into a Grid

Question

I'm trying to arrange a collection of nodes into a grid, I have three different sized nodes so I'm arranging them from biggest to smallest in a square-ish grid.

If all the nodes are the same size, it works great I have a neat grid of nodes, all tightly packed together

[][][]
[][][]
[][][]

the problem comes when a new row contains a node that's smaller than the previous node then I get an extra space between rows

[][][]
[][][]

[][][]

I do want a space in between rows (and columns) however I want to be able to control the size of that space.

I'm going out of my mind. I can't see anything in my code that would add this extra space. I know the issue is because of the different sized node but I don't know how it's happening.

I don't think it's an issue with the

I'm currently running this in a playground.

public static func grid(theseObjects: [SCNNode]) -> SCNNode {
        let nodesSortedByVolume = theseObjects.sorted(by: {$0.volume > $1.volume } )

    let finalNode = SCNNode()
    var xOffset: Float = 0.0
    var zOffset: Float = 0.0
    let gridSize = Int(Double(theseObjects.count).squareRoot().rounded())


    for (index, node) in nodesSortedByVolume.enumerated() {
        let adjustedIndex = index + 1

        node.position = SCNVector3(xOffset, 0.0, zOffset)
        finalNode.addChildNode(node)
        xOffset += node.width //(node.width + self.spacer)

        if (adjustedIndex >= gridSize) && adjustedIndex.isMultiple(of: gridSize)  {

            zOffset += node.depth
            xOffset = 0.0
        }
    }

    return finalNode
}

Edit: I've added default box nodes, to remove any doubt that it's an issue with my models and it makes it simpler to look at the math of the positioning. I've added print statements to show where the nodes are being placed:

Placing node.name: "large box 1" at node.position.z:0.0, node.position.x:0.0 zOffset: 0.0
    node.depth is 2.0
    node.name "large box 1" is at finalNode.position.z: 0.0, finalNode.position.x: 0.0

    Placing node.name: "large box 2" at node.position.z:0.0, node.position.x:2.0 zOffset: 0.0
    node.depth is 2.0
    node.name "large box 2" is at finalNode.position.z: 0.0, finalNode.position.x: 2.0

setup new row with zOffset of 2.0

    Placing node.name: "small box 1" at node.position.z:2.0, node.position.x:0.0 zOffset: 2.0
    node.depth is 1.0
    node.name "small box 1" is at finalNode.position.z: 2.0, finalNode.position.x: 0.0

    Placing node.name: "small box 2" at node.position.z:2.0, node.position.x:1.0 zOffset: 2.0
    node.depth is 1.0
    node.name "small box 2" is at finalNode.position.z: 2.0, finalNode.position.x: 1.0

As you can see, the small boxes are being placed at a z position of 2.0 which should result in no gap, however when you look at the screenshot below there is a significant gap.

If I add more large boxes, they grid correctly until a new size is introduced:

Answer 1

Thanks for printed values.
When you create your SCNNode, the geometry is centered around pivot point. So if you have a geometry cube with dimension : 200 x 200 x 200 units, the boundingbox goes from (-100, -100, -100) to (100, 100, 100).

In your loop, you add 200 units when you want to change line.
Infact you must add half (100 units) and and half of next SNNode (50 units).

Here is two images to explain :

Result with your actual code

You add 200 units but you must only add half height of first line grid (100 units) and half height of second line grid (50 units).

Hope this help ! Like mentionned by @James P, it's more easily to change pivot point...

Sorry for my awful english.