Edited at

UnityなしでVRMを読み込んでVTuber機能をアプリに組み込めるライブラリを作りました


VRMとは

VR向けの人型3Dアバターフォーマットです。非常にポータビリティの高いフォーマットになっていて、VRアバターな世界を牽引していくかもしれないフォーマットの一つです。標準ではUnityで読み書きができる実装が公開されています。

詳しくは下記をご覧ください。

VRM - dwango on GitHub


iOSのネイティブアプリで扱いたい!

自分のようにSwiftでネイティブなiOSアプリを作っているエンジニアはできればSwiftで直接扱いたいと思うはずです。

また、すでにネイティブアプリとして作っているアプリにVRMのアバター表示を組み込みたいというケースもあると思います。(ネイティブアプリにUnityを埋め込むというアプローチもありますが面倒だし、アプリサイズが大きくなってしまう...)

そこで、SwiftでVRMを読み込んで表示できるVTuberKit/VRMKitを作ってみました。


VTuberKit / VRMKit

https://github.com/tattn/VTuberKit

https://github.com/tattn/VRMKit

VRMのアバターを表示したり、Face Trackingで表情や頭を動かしたりできます。

どんな感じなのかは↑のTwitterやGitHubのアニメGIFをご覧ください。


構成

VTuberKitはVRMKitとVRMSceneKitに依存しています。

下記のような構成になっています。

スクリーンショット 2019-02-23 17.04.48.png

VTuberKitを使うと簡単にアバターの表示やVTuberっぽいことができますが、より細かく扱いたい場合はVRMSceneKitなどの機能を使って操作することができます。


使い方


導入

CarthageやCocoaPodsで導入できます。下記の設定で上記の3つのフレームワークが入ります。


Carthage

github "tattn/VTuberKit"



CocoaPods

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のコメントには書かないでね :pray:)