Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

tattn
Yahoo! JAPANで乗換案内アプリの開発や社内のアプリの課題解決、新規技術の導入サポートなどをしています。 https://github.com/tattn https://twitter.com/tanakasan2525
https://twitter.com/tanakasan2525
yahoo-japan-corp
Yahoo! JAPAN を運営しています。
https://www.yahoo.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした