无法在 SK3DNode 上方显示精灵

Question

我正在使用 SK3DNode 的实例在我的 SpriteKit 场景中显示一些基本的 3D 几何图形，以显示 SceneKit 场景的内容，如 Apple's article here 中所述。

我已经能够使用 SceneKit 节点变换和 SK3DNode 的位置/视口大小来定位节点和 3D 内容。

接下来，我想在我的 SpriteKit 场景中显示其他一些精灵叠加在 3D 内容之上，但我无法这样做：SK3DNode 的内容始终绘制在顶部。

我尝试同时指定 SK3DNode 和 SKSpriteNode 的 zPosition 属性，但无济于事。

来自 Apple 关于 SK3DNode 的文档：

使用 SK3DNode 对象将 3D SceneKit 内容合并到 基于 SpriteKit 的游戏。当 SpriteKit 渲染节点时，SceneKit 场景是动画并首先渲染的。然后这个渲染的图像是 合成到 SpriteKit 场景中。使用 scnScene 属性 指定要渲染的 SceneKit 场景。

（强调我的）

关于 z-order 有点模棱两可（它似乎只提到了渲染发生的 temporal 顺序）。

我整理了一个minimal demo project on GitHub;相关代码为：

1. SceneKit 场景

import SceneKit
class SceneKitScene: SCNScene {

    override init() {
        super.init()

        let box = SCNBox(width: 10, height: 10, length: 10, chamferRadius: 0)
        let material = SCNMaterial()
        material.diffuse.contents = UIColor.green
        box.materials = [material]

        let boxNode = SCNNode(geometry: box)
        boxNode.transform = SCNMatrix4MakeRotation(.pi/2, 1, 1, 1)

        self.rootNode.addChildNode(boxNode)
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

2。 SpriteKit 场景

import SpriteKit
class SpriteKitScene: SKScene {

    override init(size: CGSize) {
        super.init(size: size)

        // Scene Background
        self.backgroundColor = .red

        // 3D Node
        let objectNode = SK3DNode(viewportSize: size)
        objectNode.scnScene = SceneKitScene()
        addChild(objectNode)
        objectNode.position = CGPoint(x: size.width/2, y: size.height/2)

        let camera = SCNCamera()
        let cameraNode = SCNNode()
        cameraNode.camera = camera
        objectNode.pointOfView = cameraNode
        objectNode.pointOfView?.position = SCNVector3(x: 0, y: 0, z: 60)
        objectNode.zPosition = -100

        // 2D Sprite
        let sprite = SKSpriteNode(color: .yellow, size: CGSize(width: 250, height: 60))
        sprite.position = objectNode.position
        sprite.zPosition = +100
        addChild(sprite)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

...而渲染结果是：

（我想要黄色矩形在绿色框上方）

Answer 1

我就此向 Apple 提出了技术支持事件，他们刚刚回复了我。解决方案其实非常非常简单。

如果您希望 2D 精灵在 SK3DNodes 之上渲染，您需要阻止 SK3DNodes 的内容写入深度缓冲区。

---

为此，您只需将SCNMaterial 上的writesToDepthBuffer 设置为false。

...

let material = SCNMaterial()
material.diffuse.contents = UIColor.green
material.writesToDepthBuffer = false

...

轰隆隆。有效。

Answer 2

请注意，这只是我偶然发现的。我不知道它为什么会起作用，如果没有进一步了解，我可能不会相信它，但也许它会帮助找到解释或真正的解决方案。

---

似乎将SKShapeNode（带填充）与SK3DNode（作为同级、同级树的一部分或子级）一起以正确的顺序绘制。 SKShapeNode 似乎也不需要与 SK3DNode 相交。

填充很重要，因为使用透明填充会使这不起作用。中风似乎没有任何影响。

SKShapeNode 尺寸极小且 Alpha 填充几乎为零。

这是我的游乐场：

import PlaygroundSupport
import SceneKit
import SpriteKit

let viewSize = CGSize(width: 300, height: 150)
let viewportSize: CGFloat = viewSize.height * 0.75

func skview(color: UIColor, index: Int) -> SKView {
    let scene = SKScene(size: viewSize)
    scene.backgroundColor = color

    let view = SKView(
        frame: CGRect(
            origin: CGPoint(x: 0, y: CGFloat(index) * viewSize.height),
            size: viewSize
        )
    )
    view.presentScene(scene)
    view.showsDrawCount = true

    // Draw the box of the 3d node view port
    let viewport = SKSpriteNode(color: .orange, size: CGSize(width: viewportSize, height: viewportSize))
    viewport.position = CGPoint(x: viewSize.width / 2, y: viewSize.height / 2)
    scene.addChild(viewport)

    return view
}

func cube() -> SK3DNode {
    let mat = SCNMaterial()
    mat.diffuse.contents = UIColor.green

    let box = SCNBox(width: viewportSize, height: viewportSize, length: viewportSize, chamferRadius: 0)
    box.firstMaterial = mat

    let boxNode3d = SCNNode(geometry: box)
    boxNode3d.runAction(.repeatForever(.rotateBy(x: 10, y: 10, z: 10, duration: 10)))

    let scene = SCNScene()
    scene.rootNode.addChildNode(boxNode3d)

    let boxNode2d = SK3DNode(viewportSize: CGSize(width: viewportSize, height: viewportSize))
    boxNode2d.position = CGPoint(x: viewSize.width / 2, y: viewSize.height / 2)
    boxNode2d.scnScene = scene

    return boxNode2d
}

func shape() -> SKShapeNode {
    let shape = SKShapeNode(rectOf: CGSize(width: viewSize.height / 4, height: viewSize.height / 4))
    shape.strokeColor = .clear
    shape.fillColor = .purple
    return shape
}

func rect(_ color: UIColor) -> SKSpriteNode {
    let sp = SKSpriteNode(texture: nil, color: color, size: CGSize(width: 200, height: viewSize.height / 4))
    sp.position = CGPoint(x: viewSize.width / 2, y: viewSize.height / 2)
    return sp
}

// The original issue, untouched.
func v1() -> SKView {
    let v = skview(color: .red, index: 0)

    v.scene?.addChild(cube())
    v.scene?.addChild(rect(.yellow))

    return v
}

// Shape added as sibling after the 3d node. Notice that it doesn't overlap the SK3DNode.
func v2() -> SKView {
    let v = skview(color: .blue, index: 1)

    v.scene?.addChild(cube())
    v.scene?.addChild(shape())
    v.scene?.addChild(rect(.yellow))

    return v
}

// Shape added to the 3d node.
func v3() -> SKView {
    let v = skview(color: .magenta, index: 2)

    let box = cube()
    box.addChild(shape())

    v.scene?.addChild(box)
    v.scene?.addChild(rect(.yellow))

    return v
}

// 3d node added after, but zPos set to -1.
func v4() -> SKView {
    let v = skview(color: .cyan, index: 3)

    v.scene?.addChild(shape())
    v.scene?.addChild(rect(.yellow))

    let box = cube()
    box.zPosition = -1
    v.scene?.addChild(box)

    return v
}

// Shape added after the 3d node, but not as a sibling.
func v5() -> SKView {
    let v = skview(color: .green, index: 4)

    let parent = SKNode()
    parent.addChild(cube())
    parent.addChild(rect(.yellow))

    v.scene?.addChild(parent)
    v.scene?.addChild(shape())

    return v
}

let container = UIView(frame: CGRect(origin: .zero, size: CGSize(width: viewSize.width, height: viewSize.height * 5)))
container.addSubview(v1())
container.addSubview(v2())
container.addSubview(v3())
container.addSubview(v4())
container.addSubview(v5())

PlaygroundPage.current.liveView = container

---

TL;DR

在您的代码中，尝试：

...

let shape = SKShapeNode(rectOf: CGSize(width: 0.01, height: 0.01))
shape.strokeColor = .clear
shape.fillColor = UIColor.black.withAlphaComponent(0.01)

// 3D Node
let objectNode = SK3DNode(viewportSize: size)
objectNode.addChild(shape)

...