post Image
ARKitでオクルージョン

オクルージョンとは

オクルージョンとは手前にある物体が背後にある物体を隠して見えないようにする状態のことです。

現実世界では後ろにある物体が前にある物体に隠れるのは当然ですが、ARの世界では物体の表示をうまいことコントロールしないと、前後関係がうまく表現できません。

以下にオクルージョンの例をあげます。

ナイアンティックの例

まずは、ナイアンティックの動画です。バーチャルのピカチュウが現実の人の影に隠れています。

スクリーンショット 2018-12-11 0.05.40.png
https://youtu.be/7ZrmPTPgY3I

テクテクテクテクの例

この前僕がテクテクテクテクを外苑前で使った時に撮った以下の画像もオクルージョンしてます。

tek.jpg

ARKitでオクルージョン

ARKitでも平面に関してならレンダリングを工夫すれば行うことができます。

occlusion.gif

決めてはrenderingOrderです。

renderingOrder

スクリーンショット 2018-12-10 23.43.29.png

https://developer.apple.com/documentation/scenekit/scnnode/1407978-renderingorder

SCNNodeのパラメータのrenderingOrderをいじるだけでオクルージョンができます。

平面検出については、[iOS 11][ARKit] 平面の検出について #WWDC2017
あたりの記事を読んでいただいた上で、以下のようなお決まりのパターンのplaneAnchorの取得から平面のNodeを置くコードを見ていきましょう。

extension ViewController: ARSCNViewDelegate {
    func renderer(_ renderer: SCNSceneRenderer, didAdd node: SCNNode, for anchor: ARAnchor) {
        guard let planeAnchor = anchor as? ARPlaneAnchor else {
            return
        }
        let extent = planeAnchor.extent
        let plane = SCNPlane(width: CGFloat(extent.x), height: CGFloat(extent.z))
        let planeNode = SCNNode(geometry: plane)
        planeNode.name = "arPlane"
        planeNode.renderingOrder = -1
        planeNode.eulerAngles.x = -.pi/2
        node.addChildNode(planeNode)
    }
}

注目すべきなのは、

planeNode.renderingOrder = -1

これをすることで、planeNodeを描画する順番が一番最初になります。なぜならSCNNodeのrenderingOrderのデフォルト値は0だからです。

0より-1のほうが小さいので必ず先に平面が描画され、その結果、以下の赤いBoxNodeは平面と重なったときに隠れます。

occlusion.gif

別に-1じゃなくても良いんですが、-1を使うと、他のNodeには0が入ってるので手っ取り早いですね。

このrenderingOrderをコントロールすることで、例えばSceneKit の SCNNode のレンダリングオーダーでどこでもドア的表現をするのようなこともできます。

まとめ

  • 平面にNodeを貼ることができれば、その後ろに物体を隠してオクルージョンができる
  • Nodeさえ表面にうまいこと貼ることができれば机以外にもオクルージョンできるかも?

『 Swift 』Article List
Category List

Eye Catch Image
Read More

Androidに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

AWSに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Bitcoinに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

CentOSに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

dockerに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

GitHubに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Goに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Javaに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

JavaScriptに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Laravelに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Pythonに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Rubyに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Scalaに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Swiftに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Unityに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Vue.jsに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Wordpressに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

機械学習に関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。