VRMとは
VR向けの人型3Dアバターフォーマットです。非常にポータビリティの高いフォーマットになっていて、VRアバターな世界を牽引していくかもしれないフォーマットの一つです。標準ではUnityで読み書きができる実装が公開されています。
詳しくは下記をご覧ください。
iOSのネイティブアプリで扱いたい!
自分のようにSwiftでネイティブなiOSアプリを作っているエンジニアはできればSwiftで直接扱いたいと思うはずです。
また、すでにネイティブアプリとして作っているアプリにVRMのアバター表示を組み込みたいというケースもあると思います。(ネイティブアプリにUnityを埋め込むというアプローチもありますが面倒だし、アプリサイズが大きくなってしまう...)
そこで、SwiftでVRMを読み込んで表示できるVTuberKit/VRMKitを作ってみました。
Unityなしで3DのVTuberの仕組みをiOSアプリに導入できるVTuberKitを公開しました。
— Tatsuya Tanaka / たなたつ (@tanakasan2525) 2019年2月11日
VRMももちろん読み込めます。単にキャラクターを表示するViewとしても良さそうです。
まだ機能は少なく、できないことも多いのでこれから地道に追加していきます!https://t.co/ULND2dqeaM#VRM #VTuber pic.twitter.com/ULn7mpMPet
VTuberKit / VRMKit
https://github.com/tattn/VTuberKit
https://github.com/tattn/VRMKit
VRMのアバターを表示したり、Face Trackingで表情や頭を動かしたりできます。
どんな感じなのかは↑のTwitterやGitHubのアニメGIFをご覧ください。
構成
VTuberKitはVRMKitとVRMSceneKitに依存しています。
下記のような構成になっています。
VTuberKitを使うと簡単にアバターの表示やVTuberっぽいことができますが、より細かく扱いたい場合はVRMSceneKitなどの機能を使って操作することができます。
使い方
導入
CarthageやCocoaPodsで導入できます。下記の設定で上記の3つのフレームワークが入ります。
github "tattn/VTuberKit"
pod 'VTuberKit'
アバターの表示
(C) Kizuna AI (C) SSS LLC.VTuberKitを使った場合。
import VTuberKit
// StoryboardでVTuberKitのAvatarViewを配置
@IBOutlet weak var avatarView: AvatarView!
// プロジェクトにあるVRMファイルを読み込んで表示
try avatarView.loadModel(withName: "model.vrm")
VRMSceneKitを使った場合。
import VRMKit
import VRMSceneKit
// StoryboardでSCNViewを配置
@IBOutlet weak var sceneView: SCNView!
let loader = try VRMSceneLoader(named: "model.vrm")
let scene: VRMScene = try loader.loadScene()
let node: VRMNode = scene.vrmNode
sceneView.scene = scene
// URLやDataから読み込むこともできます
let loader = try VRMSceneLoader(withURL: URL(string: "...")!)
let loader = try VRMSceneLoader(withData: Data(...))
Face Tracking
Face Trackingで自分の表情をアバターに反映させたいときは下記を呼び出します。
avatarView.startFaceTracking()
※ 今はTrueDepth APIが使える端末でのみ利用可能ですが、今後のアップデートでどの端末でも動くようにしていきたいと思っています。
表情を変える
VRMでブレンドシェイプを設定していれば、表情を簡単に変えることができます。
let node: VRMNode = avatarView.avatar
node.setBlendShape(value: 1.0, for: .preset(.joy))
node.setBlendShape(value: 1.0, for: .preset(.angry))
// VRM標準ではない表情を表示する
node.setBlendShape(value: 1.0, for: .custom("><"))
可愛い
ポーズを変える
ボーンが設定済みであれば、ポーズを変えることができます。
node.humanoid.node(for: .neck)?.eulerAngles = SCNVector3(0, 0, 20.0 * .pi / 180)
node.humanoid.node(for: .leftShoulder)?.eulerAngles = SCNVector3(0, 0, 40.0 * .pi / 180)
node.humanoid.node(for: .rightShoulder)?.eulerAngles = SCNVector3(0, 0, 40.0 * .pi / 180)
UnityのMechanimと同じボーンが取得できます。
今後、いくつかのポーズのプリセットを用意して呼び出すだけで設定できるようにしたり、ユニティちゃんのポーズなどを取り込める仕組みなどを入れたり、iPhoneのカメラ画像でPose Estimationをして全身を動かしたりしたいと思っています。
まとめ
https://github.com/tattn/VTuberKit
https://github.com/tattn/VRMKit
xRやVTuberという様式が好きなので、ライブラリを作ってみました。
世の中の色々なアプリにアバターが現れる時代が来たら嬉しいです。
今後のアップデートについては Twitter を見てください。
まだ全然機能が足りないですし、UniVRMが提供しているシェーダーや物理演算、レンダリング設定などを全然実装できていないので、プルリクエストをお待ちしております。
バグもまだ多いと思いますが、GitHubの方にissueやプルリクエストを投げていただけると助かります。 日本語でも大丈夫です。(管理が大変なのでQiitaのコメントには書かないでね )