Construct a Mesh Utilizing Customized Geometry in SceneKit Underneath SwiftUI | by Mark Lucking | Might, 2022

Utilizing a improbable 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 may create a franchise of movies spanning three a long time, the Alien collection.

Through 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 right 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 attempting to breed the panorama sequence utilizing customized geometry in SceneKit beneath SwiftUI. An up to date model that you could fly round a bit, ideally.

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

Observe that I plan to start out the place I left off on this article: an introduction to customized geometry, a paper it is best to learn in case you are not acquainted with constructing customized geometric shapes since I can 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 in regards to the outcome — must you be in a rush, leap 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 number of vertices. I used a number of colors to make the construction extra obvious. You will have, within the code, two forms 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 completely 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 strive polygons since they might certainly be simpler to handle — though no before I had drawn the map, I noticed I might have nearly the identical downside. I nonetheless had a number of vertexes to alter if I wished to alter the peak.

Though the true dying knell with this answer was evident after I bought it up onscreen — with the identical code giving completely different outcomes after I modified completely 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 strive with some triangleStrips. Utilizing strips, if I coded it fastidiously, I used to be certain I might change the elevation of nodes by altering a single vertex.

Lots of of triangleStripes, the geometry for a whole bunch of nodes

I used to be finally making progress. You’re a whole bunch of nodes positioned subsequent to one another in a matrix, with the centre nodes rising to kind 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 somewhat 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 — truthfully nonetheless far too pointy. I wanted to attempt to take into consideration this in another way.

Triangles, a whole bunch of nodes

I attempted once more with triangles. I’ll spare 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 modifications the peak.

Extra triangles

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

Triangles tightly spaced, a whole bunch of nodes

Matching Edges and Vertex

A couple of days had handed since I began this piece, and I used to be starting to worry it might be part of these papers I had by no means revealed. The small tasks that don’t look that tough however transform far tougher 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 number 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, it, I noticed what I had been doing improper. 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 occasions; 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 an excellent train. The online outcome 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 wished.

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

I might have cherished 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 punctiliously hyperlink them collectively in my indices.

This can be 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 top of this paper about constructing a mesh in your subsequent 3D sport. It’s a problem as you see.

Thanks for studying.

Wish to Join?Come again to me on LinkedIn when you've got questions.

Leave a Reply

Your email address will not be published.