SceneKit: how to create chessboard pattern for SCNFloor from image?

Question

The goal is to create an infinite chessboard pattern.

Using a SCNFloor and the attached image, we produce something close but not quite like a chessboard. Some black squares merge where they shouldn't.

We tried different values for Scale, WrapS, WrapT, Min filter, Map filter, and Mip filter. The screenshot shows the current values.

Is the underlying image not correct, or what setting do we need to change for the SCNFloor?

Repeated image:

Result:

I tried your texture on an SCNFloor, and the squares looked regular, unlike your screenshot. Have you changed any other settings? — James P, Feb 03 '17 at 15:54
@JamesP nope. So you're saying your SCNFloor looks like a regular chessboard? Did you just use the default settings? — Crashalot, Feb 03 '17 at 16:06
Yes, everything default, scale 1. It looks like you would expect. Your little preview sphere in the corner looks wrong too, the texture is offset, on mine it's centered. — James P, Feb 03 '17 at 16:08
@JamesP ok thanks so much. will try with a fresh project. btw do you have any advice for this q: http://stackoverflow.com/questions/42019638/scenekit-advice-on-reproducing-glowing-light-trail-like-with-tron-light-cycles?noredirect=1#comment71219248_42019638 — Crashalot, Feb 03 '17 at 16:11

Karl Sigiscar · Answer 1 · 2017-02-03T16:47:41.027

#import "GameViewController.h"

@interface GameViewController ()

@property (nonatomic) CGFloat chessBoardWidth;
@property (nonatomic) CGFloat chessBoardDepth;
@property (nonatomic) CGFloat tileWidth;
@property (nonatomic) CGFloat tileDepth;
@property (nonatomic, getter=isOdd) BOOL odd;

@end

@implementation GameViewController

-(instancetype)init {
    self = [super init];

    if(self) {
        self.chessBoardWidth = 10.0f;
        self.chessBoardDepth = 10.0f;
        self.tileWidth = 1.0f;
        self.tileDepth = 1.0f;
    }

    return self;
}

-(void)awakeFromNib
{
    [super awakeFromNib];

    // create a new scene
    SCNScene *scene = [SCNScene sceneNamed:@"art.scnassets/chessboard.scn"];

    // create and add a camera to the scene
    SCNNode *cameraNode = [SCNNode node];
    cameraNode.camera = [SCNCamera camera];
    [scene.rootNode addChildNode:cameraNode];

    // place the camera
    cameraNode.position = SCNVector3Make(0, 0, 150);

    // create and add a light to the scene
    SCNNode *lightNode = [SCNNode node];
    lightNode.light = [SCNLight light];
    lightNode.light.type = SCNLightTypeOmni;
    lightNode.position = SCNVector3Make(0, 10, 10);
    [scene.rootNode addChildNode:lightNode];

    // create and add an ambient light to the scene
    SCNNode *ambientLightNode = [SCNNode node];
    ambientLightNode.light = [SCNLight light];
    ambientLightNode.light.type = SCNLightTypeAmbient;
    ambientLightNode.light.color = [NSColor darkGrayColor];
    [scene.rootNode addChildNode:ambientLightNode];

    // Material

    SCNMaterial *blackMaterial = [SCNMaterial material];
    blackMaterial.diffuse.contents = [NSColor blackColor];

    SCNMaterial *whiteMaterial = [SCNMaterial material];
    whiteMaterial.diffuse.contents = [NSColor whiteColor];

    // Geometry

    SCNPlane *blackTile = [[SCNPlane alloc] init];
    blackTile.firstMaterial = blackMaterial;

    SCNPlane *whiteTile = [[SCNPlane alloc] init];
    whiteTile.firstMaterial = whiteMaterial;

    // Parent node

    SCNNode *parentNode = [[SCNNode alloc] init];
    [scene.rootNode addChildNode:parentNode];

    self.odd = YES;

    for (uint x=0; x < self.chessBoardWidth; x++) {
        for (uint z=0; z < self.chessBoardDepth; z++) {

            // Add tile

            SCNNode *tileNode = [[SCNNode alloc] init];

            if(self.isOdd) {
                tileNode.geometry = blackTile;
            } else {
                tileNode.geometry = whiteTile;
            }

            [parentNode addChildNode:tileNode];

            // Position tile
            tileNode.position = SCNVector3Make(self.tileWidth * x, 0, self.tileDepth * z);

            // Alternate

            if(self.isOdd) {
                self.odd = NO;
            } else {
                self.odd = YES;
            }
        }
    }

    // set the scene to the view
    self.gameView.scene = scene;

    // allows the user to manipulate the camera
    self.gameView.allowsCameraControl = YES;

    // show statistics such as fps and timing information
    self.gameView.showsStatistics = YES;

    // configure the view
    self.gameView.backgroundColor = [NSColor grayColor];
}

@end

Thanks! But this will create an infinite board like a SCNFloor? Not clear what `chessBoardWidth` and `chessBoardDepth` are for if this is infinite? Wouldn't fixing these values, for instance, imply that if the camera moves past `chessBoardDepth` the chess board vanishes? — Crashalot, Feb 03 '17 at 16:19
True, however, you can increase those values or the size of tiles and make sure it always covers for the viewing frustum of the camera. It doesn't have to be infinite. — Karl Sigiscar, Feb 03 '17 at 16:43
Thanks Karl. Have you tried this approach and can vouch for it being performant? If not, I can test some, but I'm concerned this approach is not as performant as a SCNFloor. — Crashalot, Feb 03 '17 at 20:38

SceneKit: how to create chessboard pattern for SCNFloor from image?

1 Answers1