98
66

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-02-13

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:)

98
66
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
98
66

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?