# How can I create a “wireframe” texture for a sphere in SceneKit?

I've been struggling to figure this out. I would like to have a sphere in SceneKit that looks like this:

I think the easiest way would be to create a mostly transparent texture with the wireframe lines. I need some help figuring out how to create this texture.

I've been doing some trial and error with colored lines to try to figure this out, but it's a mess and I don't seem to be getting anywhere.

Eventually I want to procedurally generate the wireframe texture in a CALayer, but first I need to figure out where to draw the lines.

• Can't SceneKit just draw... a wireframe sphere? – MickLH Jul 17 '16 at 18:24
• No, I don't think so. – ndbroadbent Jul 18 '16 at 1:02
• Have you seen this question + solution? – user5665 Jul 18 '16 at 1:06
• Yes, unfortunately that's not going to work for me. The first reason is that I'm using Metal instead of OpenGL. And the other reason is that calling glPolygonMode changes the lines for ALL objects in the scene, but I need more fine-grained control. – ndbroadbent Jul 18 '16 at 5:09
• You need to think it through better, you just explained the solution and created an artificial problem because you think your current idea is right. It's not. Use glPolygonMode and just think hard enough to realize you can turn it back off before the next object. – MickLH Jul 18 '16 at 9:45

Quick solution didn't turn out quite as well as I'd like, but I'll post it up regardless as it may help someone out. To get something that better matches your figure I believe you'll need to build your own SCNGeometry with probably a box for each line. This can be done, and there's several examples on building your own geometry around, but it is a fair bit of code.

Anyway, I was hoping a quick shader modifier would get what you were after.

    let sm =
"float u = _surface.diffuseTexcoord.x; \n" +
"float v = _surface.diffuseTexcoord.y; \n" +
"int u100 = int(u * 100.0); \n" +
"int v100 = int(v * 100.0); \n" +
"if (u100 % 10 == 1 || v100 % 10 == 1) { \n" +
"    // do nothing \n" +
"} else { \n" +
"} \n"

sphere.firstMaterial?.doubleSided = true


It uses the texture coordinates to calculate which fragments should be drawn, and which should be discarded.

• Amazing, thankyou! I think this looks like the way to go, and Ill try to just reduce the segments to get more straight lines. – ndbroadbent Jul 19 '16 at 6:25

Try setting the material fillMode to .lines:

sphereNode.geometry?.firstMaterial?.fillMode = .lines