UIBezierPath Quadratic Curve is a Straight Line

Question

I'm trying to create a curved arrow for displaying in ab ARKit scene, however, the curvature of the arrow staff is just rendering as a straight line on both sides.

func createTurnArrow(_ direction: Direction) -> SCNShape {
    let path = UIBezierPath()
    path.move(to: CGPoint(x: 0.2, y: 0)) // A
    path.addLine(to: CGPoint(x: 0, y: 0.2)) // B
    path.addLine(to: CGPoint(x: 0, y: 0.1)) // C
    path.addQuadCurve(to: CGPoint(x: -0.3, y: -0.3), controlPoint: CGPoint(x: -0.3, y: 0.1)) // Curve 1
    path.addLine(to: CGPoint(x: -0.1, y: -0.3)) // D
    path.addQuadCurve(to: CGPoint(x: 0, y: -0.1), controlPoint: CGPoint(x: -0.1, y: -0.1)) // Curve 2
    path.addLine(to: CGPoint(x: 0, y: -0.2)) // E
    path.close()

    return direction == .left ?
      SCNShape(path: path.reversing(), extrusionDepth: self.defaultDepth) :
      SCNShape(path: path, extrusionDepth: self.defaultDepth)
}

My intuition tells me that create a node with this function:

SCNNode(geometry: createTurnArrow(.right))

should produce a shape like this:

but instead renders this without any curves to the tail of the arrow:

I've tried a bunch of other math to get the current control points for the quadratic curves but nothing is worry. Any ideas?

EDIT:

Where is the schematic with plotted points and my assumption of how this should be rendered with the curves.

When I have to draw, if it's too complicated of if I can't see the issue, that's what I do. Put a letter on each point/corner of your drawing. Put their coordinates. When there is a curve, try to put the "control point" too with a letter and its coordinate. Check if your code looks like it. Give us that schematics, it could help if you misunderstood the coordinate, missed how to place a point (like a centerPoint for arcs, the control point, etc.) — Larme, Nov 15 '18 at 18:22
@Larme I have tried to draw it out to debug it and end with the same conclusions. I edited the post to include a schematic like you asked — m_callens, Nov 15 '18 at 18:34
Where is the point (0,0), that’s strange (because it’s a SCNShape?) — Larme, Nov 15 '18 at 18:40
@Larme I shifted it right by an offset of 0.2 initially to make the object centered in the ARKit view when the screen it tapped — m_callens, Nov 15 '18 at 18:41
Why are the control points all decimal values less with magnitudes less than 1? (I haven't used ARKit before. Is this an ARKit thing?) — Duncan C, Nov 15 '18 at 18:42
@DuncanC everything in ARKit is in meters, so the object's size is taken into account here. all distances and sizes are relative — m_callens, Nov 15 '18 at 18:43

score 6 · Accepted Answer · answered Nov 15 '18 at 18:48

Read the SCNShape path documentation. It says this:

The path’s flatness (see flatness in NSBezierPath) determines the level of detail SceneKit uses in building a three-dimensional shape from the path—a larger flatness value results in fewer polygons to render, increasing performance.

(Since you're on iOS, substitute UIBezierPath for NSBezierPath.)

What is the default flatness of a UIBezierPath? Here's what the documentation says:

The flatness value measures the largest permissible distance (measured in pixels) between a point on the true curve and a point on the rendered curve. Smaller values result in smoother curves but require more computation time. Larger values result in more jagged curves but are rendered much faster. The default flatness value is 0.6.

Now compare the default flatness (0.6) to the overall size of your shape (0.5 × 0.5). Notice that the flatness is bigger than the size of your shape! So each of your curves is getting flattened to a single straight line.

Change the flatness of your path to something more appropriate for your shape, or change the scale of your shape to something more appropriate for the default flatness.

let path = UIBezierPath()
path.flatness = 0.05 // <----------------------- insert this statement
path.move(to: CGPoint(x: 0.2, y: 0)) // A
path.addLine(to: CGPoint(x: 0, y: 0.2)) // B
// etc.

Huh. Seems like ARKit and Bezier paths (NS or UI) have an "oil and water" problem, since ARKit interprets the units in meters but UI/NS bezier paths think in points. — Duncan C, Nov 15 '18 at 19:15
Doing a little back-of-the-envelope calculation, if you want your ARKit rendering to render down to point sizes, you should use a flatness of 0.0003 or so. Of course that will give you HUGE polygon counts... — Duncan C, Nov 15 '18 at 19:16
Core Graphics actually thinks in pixels, as far as flatness is concerned. In my testing, it seemed like CG applies `flatness` **after** transforming the path using the graphics context's CTM. As for ARKit, because the distance from the camera to the object varies, there's not necessarily an optimal flatness. I think what you really want to do is use `SCNGeometry`'s `levelsOfDetail` or `subdivisionLevel` to vary the geometry based on distance. But I've never used SceneKit so I don't know for sure. — rob mayoff, Nov 15 '18 at 19:35

UIBezierPath Quadratic Curve is a Straight Line

1 Answers1