Render an SCNGeometry as a wireframe

Question

I'm using SceneKit on iOS and I have a geometry I want to render as a wireframe. So basically I want to draw only the lines, so no textures.

I figured out that I could use the shaderModifiers property of the used SCNMaterial to accomplish this. Example of a shader modifier:

material.shaderModifiers = [
    SCNShaderModifierEntryPointFragment: "_output.color.rgb = vec3(1.0) - _output.color.rgb;"
]

This example apparently simply inverts the output colors. I know nothing about this 'GLSL' language I have to use for the shader fragment.

Can anybody tell me what code I should use as the shader fragment to only draw near the edges, to make the geometry look like a wireframe?

Or maybe there is a whole other approach to render a geometry as a wireframe. I would love to hear it.

Laverne

Did you ever sort this? In 3D design apps one way is to "fake it" by using the vertex positions to create long skinny boxes or tubes/pipes between vertices, and these look like wireframes. – Shortie

Answer 1

Try setting the material fillMode to .lines (iOS 11+, and macOS 10.13+):

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

Extrapolate

Answer 2

Now it is possible (at least in Cocoa) with:

gameView.debugOptions.insert(SCNDebugOptions.showWireframe)

or you can do it interactively if enabling the statistics with:

gameView.showsStatistics = true

(gameView is an instance of SCNView)

Crest

gameView.debugOptions = .ShowWireframe – Processional

Answer 3

This is not (quite) an answer, because this a question without an easy answer.

Doing wireframe rendering entirely in shader code is a lot more difficult than it seems like it should be, especially on mobile where you don't have a geometry shader. The problem is that the vertex shader (and subsequently the fragment shader) just doesn't have the information needed to know where polygon edges are.

I know nothing about this 'GLSL' language I have to use for the shader fragment.

If you really want to tackle this problem, you'll need to learn some more about GLSL (the OpenGL Shading Language). There are loads of books and tutorials out there for that.

Once you've got some GLSL under your belt, take a look at some of the questions (like this one pulled from the Related sidebar) and other stuff people have written about the problem. (Note that when you're looking for mobile-specific limitations, OpenGL ES has the same limitations as WebGL on the desktop.)

With SceneKit, you have the additional wrinkle that you probably don't have a barycentric-coordinates vertex attribute (aka SCNGeometrySource) for the geometry you're working with, and you probably don't want to do the hard work of generating one. In OS X, you can use an SCNProgram with a geometryShader to add barycentric coordinates before the vertex/fragment shaders run — but then you have to do your own shading (i.e. you can't piggyback on the SceneKit shading like you can with shader modifiers). And that isn't available in iOS — the hardware there doesn't do geometry shaders. You might be able to fake it using texture coordinates if those happen to be lined up right in your geometry.

---

It might be easier to just draw the object using lines — try making a new SCNGeometry from the sources and elements of your original (solid) geometry, but when recreating the SCNGeometryElement, use SCNPrimitiveTypeLine.

Dygall

Thanks for your elaborate answer! – Laverne

Yes, you're right. Recreating the geometry might be the better approach. I already saw that advice somewhere but when I tried it I was getting nowhere. I started off with simply extracting the sources and elements from the SCNSphere and constructing a new SCNGeometry with it. But the sphere simply disappeared when I did that. So I am not sure what I did wrong. Can you maybe try to help me out with some example code how to build a new geometry off the same sources and elements of another geometry? – Laverne

@TomvanZummeren - Did you ever end up writing this code? If so, would it be possible to share as an answer? – Denson