Build a Mesh Using Custom Geometry in SceneKit Under SwiftUI | by Mark Lucking | May, 2022

Utilizing a incredible scene from The Alien collection

A picture displaying the twentieth century Nostromo spaceship from the 1979 Alien film

This month in 1979, Sigourney Weaver starred in a lead position for a sci-fi horror film that might create a franchise of movies spanning three a long time, the Alien collection.

Throughout the film, there’s a sequence, simply 30 seconds of it, that was, on the time, cutting-edge graphics. The story behind it’s documented here. A sequence wherein Ripley [Weaver’s character] lands the spaceship watching a pc monitor displaying this. This picture would be the inspiration for this text.

Our objective focuses on making an attempt to breed the panorama sequence utilizing customized geometry in SceneKit below SwiftUI. An up to date model which you could fly round a bit, ideally.

The pc show on the Alien spaceship, the Nostromo, displaying within the touchdown sequence

Be aware that I plan to begin the place I left off on this article: an introduction to custom geometry, a paper it is best to learn in case you are not accustomed to constructing customized geometric shapes since I might be utilizing the routines described with it.

I ought to warn you that this text is as a lot about my journey as it’s concerning the consequence — do you have to be in a rush, bounce to the “Matching Edges and Vertex” part.


Right here is an animated GIF displaying my first prototype with a panorama lined in some imaginary mountains:

A single node with complicated geometry

It’s a single Node with fairly a couple of vertices. I used a number of colors to make the construction extra obvious. You’ve got, within the code, two sorts of triangles: one with a number one diagonal and one with a trailing diagonal.

The rationale for having the lengthy edge or hypotenuse slants in two totally different instructions was to make sure the form of the magic mountain labored.

An answer that didn’t work out — since every mountain is made up of eight triangles, with their placement alternating. An order that meant I wanted to do that horrible if/else dance within the code to get the construction I wanted, past which altering the peak after I constructed seemed like a nightmare.


I made a decision to attempt polygons since they might certainly be simpler to handle — though no earlier than I had drawn the map, I noticed I’d have nearly the identical drawback. I nonetheless had a number of vertexes to vary if I needed to vary the peak.

Though the true demise knell with this resolution was evident after I acquired it up onscreen — with the identical code giving totally different outcomes after I modified totally different corners. Look intently at this GIF:

4 nodes made up of 16 polygons

The nook for the primary sq. comes from the underside left, from the second midpoint. Despite the truth that the code behind the 2 polygons was equivalent. In contrast to the earlier construct made up of a single node — this was 4 nodes which was one other distinction. Right here’s the code:


I used to be nearly out of choices. I seemed again at my notes and determined to attempt with some triangleStrips. Utilizing strips, if I coded it rigorously, I used to be certain I might change the elevation of nodes by altering a single vertex.

Tons of of triangleStripes, the geometry for a whole lot of nodes

I used to be finally making progress. You’re taking a look at a whole lot of nodes positioned subsequent to one another in a matrix, with the centre nodes rising to type a magic mountain.

That is the code behind it:

A fairly brief piece of code, ignoring that terrible if/else tree I used to be certain I might make higher given a bit of extra thought.

Extra Triangles

To make it much less pointy, I raised the ground for taller tiles. It seemed higher, however wait, what’s all of the white house? What was I pondering? And sure — actually nonetheless far too pointy. I wanted to try to take into consideration this in another way.

Triangles, a whole lot of nodes

I attempted once more with triangles. I’ll spae you the code since it’s nearly equivalent, though I feel I missed this routine within the earlier part. It checks if we’ve hit the magic mountain coordinates — and adjustments the peak.

Extra triangles

The white house between the tiles screamed at me and destroyed the whole impact. I might think about a consumer taking a look at this and asking, What are all these white traces? The issue was the sides. I attempted shifting issues nearer collectively. It appeared higher, a rockscape maybe, a really jagged one. However by this level, I had one other drawback: efficiency.

Triangles tightly spaced, a whole lot of nodes

Matching Edges and Vertex

A number of days had handed since I began this piece, and I used to be starting to concern it could be a part of these papers I had by no means revealed. The small tasks that don’t look that tough however become far more durable than I had imagined.

I went again to my analysis and seemed once more on the “hero to zero” piece that I had discovered a couple of weeks in the past. There was a chapter on constructing a mesh. I had already tried to obtain it and make it run, however I couldn’t discover all the required items. The code itself was obscure. Sorry, Roger.

A screenshot out of hero to zero tutorial

I went again to the article and stared on the picture. Immediately, taking a look at it, I noticed what I had been doing unsuitable. I might construct a dictionary listed by the X and Y values to return the peak I wanted for every vertex as I made it. It didn’t matter that every lookup would happen a number of instances; I simply wanted to set the peak earlier than I constructed the terrain, not after. To set the peak to the identical worth for vertex that crossed. I set heights on all vertex this time.

I wanted to rejig the index constructing, nevertheless it was train. The online consequence got here out like this, and it was excellent. The code to construct it was easy and had no pointy nodes, white house, or efficiency points, and it was versatile so I might simply make as many mountains as I needed.

A single very complicated geometric form added to the scene as a single node

I’d have beloved to incorporate an extended GIF, nevertheless it was just too massive so as to add to the web page. Right here is the code that made all of it occur. Inside it, I generate an array of heights utilizing a routine posted within the earlier part to determine the place to construct the mountain. I then merely create all of the vertex in a loop and thoroughly hyperlink them collectively in my indices.

It is a single piece of complicated geometry that I take advantage of to create a node after which add it to my scene. Right here’s the code:

All of this brings me to the tip of this paper about constructing a mesh to your subsequent 3D recreation. It’s a problem as you see.

Thanks for studying.

Wish to Join?Come again to me on LinkedIn you probably have questions.

More Posts