ARKitのAR文字をキレイにした話

9224 ワード
iOS SCNText Swift ARKit Xcode Xcode テキストリンク

はじめに

ARKitを使ったSNSアプリARIZARを開発しています。
開発している時にわかったTIPS的なネタを記事にします。

ぜひARIZARをダウンロードして使ってみてください。
よろしくお願いします。

今回の課題

初期のAR文字をみると、すごく文字がカクカクしています。
最近のバージョンはかなり文字がスムーズになっていることがわかるかなっと思います。
その改善点について書きます。

改善前 改善後

なぜカクカクしているの？

SCNTextを使って文字を空間に置いているのですが、色々検索していたらヒントとなるサイトを発見しました。

SCNTextは、Core Graphicsが描画した場合と同じように、テキストの2Dベジェパスを細分化します。スムーズにするためにflatnessプロパティをいつでも使用できますが、「サブピクセルの滑らかさ」は得られません。
この問題を解決するには、より大きなフォントサイズを使用して、基になるベジエパスをより大きくし、離散化が発生したときにより多くの頂点を生成するようにします。
ios – 曲線のないSCNTextレンダリング、フォントのようではないより

要するに、大きな文字を描画して小さく縮小すれば良いのではないかということがわかりました。

実際に試してみる

元々はこのようなコードになっていました。

改善前
        //カメラの現在位置を取得する
        guard let camera = sceneView.pointOfView else { return }

        let textGeometry = SCNText(string: message, extrusionDepth: 0)
        textGeometry.firstMaterial?.diffuse.contents = UIColor(named: "ArizarARFontColor")
        textGeometry.font = UIFont(name: "HiraginoSans-W6", size: 1)
        let textNode = SCNNode(geometry: textGeometry)
        let position = SCNVector3(0,0.1,-0.1)
        textNode.position = camera.convertPosition(position, to: nil)
        //カメラの向きに合わせる
        textNode.eulerAngles = camera.eulerAngles
        //大きさ設定
        textNode.scale = SCNVector3(0.01,0.01,0.01)

        sceneView.scene.rootNode.addChildNode(textNode)

UIFontのサイズを1→100に、scaleを0.01→0.0001に修正してみました。

改善後
        //カメラの現在位置を取得する
        guard let camera = sceneView.pointOfView else { return }

        let textGeometry = SCNText(string: message, extrusionDepth: 0.8)
        textGeometry.firstMaterial?.diffuse.contents = UIColor(named: "ArizarARFontColor")
        textGeometry.font = UIFont(name: "HiraginoSans-W6", size: 100)
        let textNode = SCNNode(geometry: textGeometry)
        let position = SCNVector3(0,0.1,-0.1)
        textNode.position = camera.convertPosition(position, to: nil)
        //カメラの向きに合わせる
        textNode.eulerAngles = camera.eulerAngles
        //大きさ設定
        textNode.scale = SCNVector3(0.0001,0.0001,0.001)

        sceneView.scene.rootNode.addChildNode(textNode)

そうすると、改善されてキレイな文字が描画されました。

最後に

簡単でありますが、文字がスムーズではなく不満がある方の参考になったらうれしいです。