Drawing edges of SCNBox without diagonal line?

Question

I'm making an AR application using Apple's ARKit, and I want to make wireframe outlines of boxes. The one described in the code and shown in the picture draws the hypotenuse on each face of the box. It also hides the corner on the opposite side of the box. Is there a way in Scene Kit so that I can get rid of the diagonal lines and make it so the box is transparent, showing all the edges and vertices?

let box:SCNNode = SCNNode(geometry: SCNBox(width: CGFloat(0.1), height: CGFloat(0.1), length: CGFloat(0.1), chamferRadius: CGFloat(0)))
box.geometry?.firstMaterial?.fillMode = .lines
box.geometry?.firstMaterial?.diffuse.contents = UIColor.green

Clay · Accepted Answer · 2017-12-28T14:09:43.473

I’m not sure on how to get rid of the diagonal lines.

But setting the material to double sided will draw the lines on the opposite side of the box.

 box.geometry?.firstMaterial?.isDoubleSided = true

Edit:

Here's another approach to achieve what you want (get rid of those diagonal lines!)

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

let box = SCNBox(width: 0.1, height: 0.1, length: 0.1, chamferRadius: 0)

box.firstMaterial?.emission.contents = UIColor.green

box.firstMaterial?.shaderModifiers = [SCNShaderModifierEntryPoint.surface: sm] 

box.firstMaterial?.isDoubleSided = true

Neat answer! Just wish there was a cleaner way to do this. Swift doesn't make this easy I suppose. — Miket25, Dec 29 '17 at 22:20
Thanks. agree its a shame a solution has not been provided which is a bit more straight-forward. — Clay, Dec 29 '17 at 22:44

score 1 · Answer 2 · answered Dec 28 '17 at 13:45

When you create an SCNGeometry object with SCNBox, the created geometry consists of 12 triangles and when you set fillMode to be .lines, SceneKit draws the edges of each of those triangles. This means that unless you modify the geometry yourself after calling SCNBox or create a custom geometry, telling SceneKit exactly which lines to draw, I don't think you can get rid of those diagonal lines.

score 0 · Answer 3 · answered Dec 04 '18 at 07:46

One way you can do it is to make a transparent .png image texture, except for a border around the edge.

Then, attach it to whatever object you're creating as a material's diffuse contents. (I did mine in the delegate method, but this can easily be extracted to whatever class you end up generating your geometry in.)

// MARK: - ARSCNViewDelegate
// Override to create and configure nodes for anchors added to the view's session.
func renderer(_ renderer: SCNSceneRenderer, nodeFor anchor: ARAnchor) -> SCNNode? {

    // Create our Cube
    let shape = SCNBox(width: 0.1, height: 0.1, length: 0.1, chamferRadius: 0)

    let material = SCNMaterial()
    material.isDoubleSided = true
    material.diffuse.contents = UIImage(named: "art.scnassets/border.png")
    material.transparencyMode = .aOne

    shape.materials = [material]

    // Throw it on a node
    let newNode = SCNNode(geometry: shape)

    return newNode
}

Drawing edges of SCNBox without diagonal line?

3 Answers3