组合两个或更多SCNGeometries

Question

I made this method to grab a UIImage and turn it into a 3D model. However that means I add in a whole lot of nodes.. I was thinking maybe it could be optimized by adding all the geometries into a single node. Is there a way to accomplish that?

Here's the code

static inline SCNNode* S2NNode(const UIImage* sprite) {
  SCNNode *spriteNode = [SCNNode node];
  CFDataRef pixelData = CGDataProviderCopyData(CGImageGetDataProvider(sprite.CGImage));
  const UInt8* data = CFDataGetBytePtr(pixelData);
  for (int x = 0; x < sprite.size.width; x++)
  {
    for (int y = 0; y < sprite.size.height; y++)
    {
      int pixelInfo = ((sprite.size.width * y) + x) * 4;
      UInt8 alpha = data[pixelInfo + 3];
      if (alpha > 3)
      {
        UInt8 red   = data[pixelInfo];
        UInt8 green = data[pixelInfo + 1];
        UInt8 blue  = data[pixelInfo + 2];
        UIColor *color = [UIColor colorWithRed:red/255.0f green:green/255.0f blue:blue/255.0f alpha:alpha/255.0f];
        SCNNode *pixel = [SCNNode node];
        pixel.geometry = [SCNBox boxWithWidth:1.001 height:1.001 length:1.001 chamferRadius:0];
        pixel.geometry.firstMaterial.diffuse.contents = color;
        pixel.position = SCNVector3Make(x - sprite.size.width / 2.0,
                                        y - sprite.size.height / 2.0,
                                        0);
        [spriteNode addChildNode:pixel];
      }
    }
  }
  CFRelease(pixelData);
  //The image is upside down and I have no idea why.
  spriteNode.rotation = SCNVector4Make(1, 0, 0, M_PI);
  return spriteNode;
}

Answer 1

This answer addresses the question originally asked — how to merge geometries. However, merging geometries doesn't seem to be the solution to your actual problem — how to get a pixelated "sprite" with some thickness, with decent performance. See my other answer for that.

---

The SCNNode method flattenedClone will combine all the geometries of a node's children into a single node with a single geometry. That'll cut down on scene processing overhead and render in a single OpenGL draw call... But it also will make the cubes not independently movable and all share the same material, so they won't be different colors. Moreover, depending on how you want your cubes arranged, you're probably pushing more vertex data than you need to the GPU, which can still hurt your performance.

Depending on just what kind of effect you're going for, there are probably better solutions.

Answer 2

Posting a separate answer because your comments have shown that what you're actually looking for isn't quite what you're asking about — I'm leaving the other answer around because it answers the question as originally asked, even if it doesn't solve your problem.

---

So, it sounds like what you really need is not a collection of cubes, each independently movable and each with its own color, but rather the extrusion of a 2D shape into 3D — specifically, the shape formed by the non-transparent pixels of an image:

In that case, making a bunch of cubes will indeed hurt your performance — and your rendering results, too. Check out this detail (from a version that uses the lots-of-cubes method):

Those little white dots come from rounding errors where two cubes meet. The problem here — whether you use flattenedClone or not — is that the geometry data being pushed to the GPU describes a whole darn lot of polygons that are either invisible (because they're between two cubes) or irrelevant (because the shared face of two adjacent cubes could just as well be a single polygon). Here's the performance gauge from my test of the lots-of-cubes method:

That's 408 draws, 4.9K polygons, 14.7K vertices. Spinning that model on an iPad Air gets 14 frames per second — yuck.

You can make an extruded shape from a Bézier path using the SCNShape class. The trick to that is making the simplest possible path from the shape of your non-transparent pixels. (You want the path that makes the outline of the shape, not the union of a bunch of square paths for each pixel — otherwise you're right back to the cubes problem.)

That's a nontrivial bit of computational geometry, but there are solutions out there . And there are external tools that can do the tracing for you offline (most of them designed for making sprite-based physics bodies for SpriteKit back before that became a SpriteKit feature in iOS 8 / OS X 10.10): here's one .

Once you have the path, you can make a SCNShape from it, texture-map your image as onto the front of the shape (and the back, too, if you like), and use a flat color for the sides:

UIImage *image = [UIImage imageNamed:@"sprite"];
UIBezierPath *path = PathFromImage(image); // Make or load your path here
SCNNode *node = [SCNNode nodeWithGeometry:[SCNShape shapeWithPath:path extrusionDepth:1]];
SCNMaterial *face = [SCNMaterial material];
face.diffuse.contents = image;
face.diffuse.magnificationFilter = SCNFilterModeNone;
SCNMaterial *side = [SCNMaterial material];
side.diffuse.contents = [UIColor blackColor];
side.specular.contents = [UIColor whiteColor];
node.geometry.materials = @[ face, side, side ];

Here's the gauge using an SCNShape instead:

We've cut the numbers by two orders of magnitude, and correspondingly the framerate is much better — I can't get it to drop below 60 fps when the model is spinning.