Convert an image to a SceneKit Node

Question

I have a bit-map image:

( However this should work with any arbitrary image )

Answer 1

An approach similar to the one proposed by Ef Dot:

1. To keep the number of draw calls as small as possible you want to keep the number of materials as small as possible. Here you will want one SCNMaterial per color.
2. To keep the number of draw calls as small as possible make sure that no two geometry elements (SCNGeometryElement) use the same material. In other words, use one geometry element per material (color).

So you will have to build a SCNGeometry that has N geometry elements and N materials where N is the number of distinct colors in your image.

1. For each color in you image build a polygon (or group of disjoint polygons) from all the pixels of that color
2. Triangulate each polygon (or group of polygons) and build a geometry element with that triangulation.
3. Build the geometry from the geometry elements.

If you don't feel comfortable with triangulating the polygons yourself your can leverage SCNShape.

1. For each polygon (or group of polygons) create a single UIBezierPath and a build a SCNShape with that.
2. Merge all the geometry sources of your shapes in a single source, and reuse the geometry elements to create a custom SCNGeometry

Note that some vertices will be duplicated if you use a collection of SCNShapes to build the geometry. With little effort you can make sure that no two vertices in your final source have the same position. Update the indexes in the geometry elements accordingly.