SceneKit

Question

我得到了三个点，需要绘制一条平滑的 3D 抛物线。问题是曲线起伏不定，而且有一些奇怪的凹痕

这是我的代码...

func drawJump(jump: Jump){
    let halfDistance = jump.distance.floatValue/2 as Float
    let tup = CalcParabolaValues(0.0, y1: 0.0, x2: halfDistance, y2: jump.height.floatValue, x3: jump.distance.floatValue, y3: 0)
    println("tuple \tup")

    var currentX = 0 as Float
    var increment = jump.distance.floatValue / Float(50)
    while currentX < jump.distance.floatValue - increment {

        let x1 = Float(currentX)
        let x2 = Float((currentX+increment))
        let y1 = calcParabolaYVal(tup.a, b: tup.b, c: tup.c, x: x1)
        let y2 = calcParabolaYVal(tup.a, b: tup.b, c: tup.c, x: x2)

        drawLine(x1, y1: y1, x2: x2, y2: y2)

        currentX += increment
    }
}

func CalcParabolaValues(x1: Float, y1: Float, x2: Float, y2: Float, x3: Float, y3: Float) -> (a: Float, b: Float, c: Float) {
    println(x1, y1, x2, y2, x3, y3)
    let a = y1/((x1-x2)*(x1-x3)) + y2/((x2-x1)*(x2-x3)) + y3/((x3-x1)*(x3-x2))
    let b = (-y1*(x2+x3)/((x1-x2)*(x1-x3))-y2*(x1+x3)/((x2-x1)*(x2-x3))-y3*(x1+x2)/((x3-x1)*(x3-x2)))
    let c = (y1*x2*x3/((x1-x2)*(x1-x3))+y2*x1*x3/((x2-x1)*(x2-x3))+y3*x1*x2/((x3-x1)*(x3-x2)))

    return (a, b, c)
}

func calcParabolaYVal(a:Float, b:Float, c:Float, x:Float)->Float{
    return a * x * x + b * x + c
}

func drawLine(x1: Float, y1: Float,x2: Float, y2: Float) {
    println("drawLine \(x1) \(y1) \(x2) \(y2)")
    let positions: [Float32] = [
        x1, y1, 0,
        x2, y2, 0
    ]
    let positionData = NSData(bytes: positions, length: sizeof(Float32)*positions.count)
    let indices: [Int32] = [0, 1]
    let indexData = NSData(bytes: indices, length: sizeof(Int32) * indices.count)

    let source = SCNGeometrySource(data: positionData, semantic: SCNGeometrySourceSemanticVertex, vectorCount: indices.count, floatComponents: true, componentsPerVector: 3, bytesPerComponent: sizeof(Float32), dataOffset: 0, dataStride: sizeof(Float32) * 3)
    let element = SCNGeometryElement(data: indexData, primitiveType: SCNGeometryPrimitiveType.Line, primitiveCount: indices.count, bytesPerIndex: sizeof(Int32))

    let line = SCNGeometry(sources: [source], elements: [element])
    self.rootNode.addChildNode( SCNNode(geometry: line))
}

func renderer(aRenderer: SCNSceneRenderer, willRenderScene scene: SCNScene, atTime time: NSTimeInterval) {
    glLineWidth(20)
}

我还必须弄清楚如何为从左到右的弧线设置动画。有人可以帮我吗？ Swift 或 Objective C 都可以。任何帮助表示赞赏。谢谢！

Answer 1

我认为您的 table 没有足够的点，假设渲染器将它们与直线段连接起来。最重要的是，线条的粗细和虚线让人很难看到它。首先尝试用细实线获得平滑曲线。

如果你想为曲线的进展设置动画，就好像它在展示弹丸的飞行一样，最简单的方法可能是只为运动编写你的函数：y = k*x^2，并且只需从 x=0 渲染到 x=T 以增加 T 的值。

Answer 2

我建议使用 SCNShape to create your parabola. To start, you'll need to represent your parabola as a Bézier curve. You can use UIBezierPath for that. For animation, I personally find shader modifiers 非常适合这种情况。

抛物线

不过要小心——您可能想要一条仅代表圆弧开放行程的路径。如果你这样做：

let path = UIBezierPath()
path.moveToPoint(CGPointZero)
path.addQuadCurveToPoint(CGPoint(x: 100, y: 0), controlPoint: CGPoint(x: 50, y: 200))

你会得到一个填充的抛物线，像这样（在调试器快速查看中以 2D 形式显示，然后使用 SCNShape 以 3D 形式拉伸）：

要创建仅是圆弧的闭合形状，您需要在曲线上回溯，稍微偏离原始形状：

let path = UIBezierPath()
path.moveToPoint(CGPointZero)
path.addQuadCurveToPoint(CGPoint(x: 100, y: 0), controlPoint: CGPoint(x: 50, y: 200))
path.addLineToPoint(CGPoint(x: 99, y: 0))
path.addQuadCurveToPoint(CGPoint(x: 1, y: 0), controlPoint: CGPoint(x: 50, y: 198))

那就更好了。

...在三迪！

如何真正做到 3D？用你喜欢的挤压深度做一个SCNShape:

let shape = SCNShape(path: path, extrusionDepth: 10)

并将其设置在您的场景中：

shape.firstMaterial?.diffuse.contents = SKColor.blueColor()
let shapeNode = SCNNode(geometry: shape)
shapeNode.pivot = SCNMatrix4MakeTranslation(50, 0, 0)
shapeNode.eulerAngles.y = Float(-M_PI_4)
root.addChildNode(shapeNode)

我在这里使用 pivot 使形状围绕抛物线的主轴旋转，而不是平面贝塞尔曲线的 y = 0 轴。并把它变成蓝色。此外，root 只是我为视图场景的根节点创建的快捷方式。

动画

抛物线的形状实际上并不需要通过您的动画来改变——您只需要一个沿其 x 轴逐渐显示它的视觉效果。 Shader modifiers 非常适合，因为您可以按像素而不是按顶点制作动画效果，并在 GPU 上完成所有昂贵的工作。

这是一个使用 progress 参数（从 0 到 1 不等）来根据 x 位置设置不透明度的着色器片段：

// declare a variable we can set from SceneKit code
uniform float progress;
// tell SceneKit this shader uses transparency so we get correct draw order
#pragma transparent
// get the position in model space
vec4 mPos = u_inverseModelViewTransform * vec4(_surface.position, 1.0);
// a bit of math to ramp the alpha based on a progress-adjusted position
_surface.transparent.a = clamp(1.0 - ((mPos.x + 50.0) - progress * 200.0) / 50.0, 0.0, 1.0);

将其设置为 Surface 入口点的着色器修改器，然后您可以为 progress 变量设置动画：

let modifier = "uniform float progress;\n #pragma transparent\n vec4 mPos = u_inverseModelViewTransform * vec4(_surface.position, 1.0);\n _surface.transparent.a = clamp(1.0 - ((mPos.x + 50.0) - progress * 200.0) / 50.0, 0.0, 1.0);"
shape.shaderModifiers = [ SCNShaderModifierEntryPointSurface: modifier ]
shape.setValue(0.0, forKey: "progress")

SCNTransaction.begin()
SCNTransaction.setAnimationDuration(10)
shape.setValue(1.0, forKey: "progress")
SCNTransaction.commit()

进一步的考虑

Here's the whole thing 以一种可以粘贴到 (iOS) 游乐场的形式。 reader 的一些练习，加上其他注释：

分解出幻数并制作一个函数或class这样你就可以改变你的抛物线的size/shape。（请记住，您可以相对于其他场景元素缩放 SceneKit 节点，因此它们不必使用相同的单位。）
相对于其他场景元素定位抛物线。如果你拿走我设置 pivot 的线，shapeNode.position 就是抛物线的左端。改变抛物线的长度（或缩放它），然后绕其 y 轴旋转它，您可以使另一端与其他节点对齐。 (给你fire ze missiles at?)
我把它和 Swift 2 beta 放在一起，但我不认为那里有任何 Swift-2 特定的语法——如果你移植回 1.2需要尽快部署应该很简单。
如果您还想在 OS X 上执行此操作，则有点棘手 — SCNShape 使用 NSBezierPath，这与 UIBezierPath 不支持二次曲线。可能一个简单的方法是用椭圆弧来伪造它。

SceneKit - 绘制 3D 抛物线

SceneKit - Draw 3D Parabola

3d

objective-c

ios

swift

抛物线

...在三迪！

动画

进一步的考虑