AR年賀状を作ってみた (glTFモデル表示編)

こんにちは。
前回の続きで、アニメーション付きの3DモデルをA-frame で表示するために色々やってみました。
記事の一番後ろには色々チャレンジして失敗したことをまとめました。(解決していないのでどなたか教えていただけると嬉しいです・・・)
前回の記事はこちら。
kabos.hatenablog.jp

glTFを使う
- glTFモデルについて
アニメーション無し人型3Dモデルの作成
アニメーション付き人型3Dモデルの作成
ARで表示
できたもの
失敗したこと
- glTFモデルをARで表示する
- アニメーション付き人型glTFモデルの作成
参考記事

glTFを使う

glTFとは、3D界でのjpegを目指して作られたファイルフォーマットだそうです。
結論から言うと、glTFを使うとアニメーション付きの3DモデルをA-frameで表示できました。
やり方は簡単で、

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>AnimationTest</title>
  </head>
  <body style="margin:0px; overflow:hidden;">
<!-- ライブラリの読み込み -->
<script src="https://aframe.io/releases/0.7.1/aframe.min.js"></script>
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<script src="js/aframe-extras.js"></script>
<script src="js/aframe-text-geometry-component.min.js"></script>

<a-scene embedded arjs="debugUIEnabled:false;" vr-mode-ui="enabled: false">

<a-assets>
	<a-asset-item id="aniBox" src="BoxAnimated/BoxAnimated.gltf"></a-asset-item>
</a-assets>

<a-marker preset="hiro">
	<a-entity gltf-model="#aniBox"  rotation="-90 0 0" position="0 0.5 0" animation-mixer="clip:*" ></a-entity>
</a-marker>
<a-entity camera></a-entity>

    </a-scene>
  </body>
</html>

と書くだけ。
ドキュメントの推奨フォーマットにglTFって書いてあるんだから最初からこれを使えばよかったです・・・。
こんな感じで動きます。

Robert MarkさんのBox animated glTF stag という作品をお借りしました。https://t.co/HAQ6xjVY33 pic.twitter.com/mBl9a1FEGq
— すだち (@kabostrawberry) December 11, 2018

ちなみに、こちらの3Dモデルは、Robert MarkさんのBox animated glTF stagという作品をお借りしました。

glTFモデルについて

この次の節でglTFモデルの作り方について説明しますがその前に。
とりあえずglTFモデルでテストしたい！という方にはグーグルのPolyというサイトをオススメします。
こちらにアップロードされている3Dモデルの多くはglTF形式でダウンロードすることができ、CC-BYライセンスにのっとって使用することができます。
CC-BYライセンスとは、>>
原作者のクレジット（氏名、作品タイトルなど）を表示することを主な条件とし、改変はもちろん、営利目的での二次利用も許可される最も自由度の高いCCライセンス。
(クリエイティブ・コモンズ・ライセンスとは | クリエイティブ・コモンズ・ジャパンより)<<の事だそうです。

アニメーション無し人型3Dモデルの作成

ここでは、アニメーション無しの3DモデルをglTFファイルにする方法を説明します。動いて欲しい方は次の項をご覧下さい。
大きく分けて4種類方法があります。

VRMモデルを使う

VRMとは、VR向けの人型アバターフォーマットです。ドワンゴさんのGitHubに詳しく載っています。
これが一番手間が省けて最強の方法です。(VRMが用意されているモデルを使うなら、ですが)
例えば、前回MMDモデルを利用したアリシアちゃんのモデルは、こちらに公式で用意されています。他にも、ニコニ立体内で検索すると、色々見つかると思います。但し、今回のような場合は、利用規約に再配布可能と記載されているモデルを使用しなければなりません。

やり方としては、拡張子を.vrmから.gltfに変更するだけです。これで表示できます。

UniGLTFを使う

unityからglTFを出力できないのかな〜と調べていて見つけたのがこの方法です。
まず、こちらからUniVRM~~.unitypackageをダウンロードします。すると、UniGLTFもセットでダウンロードできます。このunitypackageをD&Dすることでimportします。
あとは、空のオプジェクトを作成し、exportしたいオブジェクトをその子にして、UniGLTF > Export で完了です。
詳しくはこちらに載っています。

Sketchfabを使う

Sketchfabとは、3Dモデルを簡単に共有できるサイトなのですが、なんと、unityから簡単にアップロードしてglTFでダウンロードすることができます。
やり方としては、まずSketchfabに会員登録します。
次に、アセットストアからSketchfab for Unityをダウンロードします。そしてアップロードしたいオブジェクトを選択して、Sketchfab > Publish to Sketchfab から、export selection にチェックを入れてアップロードします。
f:id:sweetgohan:20181217124047p:plain
アップロードできたら、自分のページのModels からアップロードしたモデルを選択し、MANAGE THIS MODELから設定を変更してダウンロード可能にします。
f:id:sweetgohan:20181217124610p:plain

f:id:sweetgohan:20181217124657p:plain — はじめは"NO"なので"Free"を選択

設定が変更できたらダウンロードボタンが出現するので、そこからglTFを選択してダウンロードしましょう。

Blenderのプラグインを使う

Blenderのプラグインを使ってglTFでexport します。(プラグインの入れ方はアニメーション付きの方で説明します)
ただ、テクスチャがpngかjpegでないと剥がれてしまうことがあります。(テクスチャを変換して貼り直す方法もあるみたいなのですが、私はできませんでした・・・)

アニメーション付き人型3Dモデルの作成

Mixamo の利用

今回は、Mixamoというサイトを利用します。このサイトでは、モデルをアップロードするとボーンをつけてくれて、しかもそれに合わせたアニメーションをダウンロードできます！
ちなみに、配布されている3Dモデル(アリシアちゃんやプロ生ちゃん)のfbxモデルは元々ボーンが入っているのですが、一旦objに変換してサイトでボーンを付け直した方が良いです。ダウンロードしたアニメーションのボーンとサイズが合わなくて困ったりしたので。

ではまず会員登録をします。Adobe のIDを持っている方はそれでログインできます。
ログインできたら、BROWSE ANIMATIONSをクリックします。すると、アニメーションがたくさん出てきますが、まずは3Dモデルをアップロードします。
右側にあるUPLOAD CHARACTER をクリックし、objファイルとテクスチャをzipに圧縮した物をアップロードします。
するとボーンを設定する画面になるので、指示に従って設定します。ここでなぜかテクスチャが表示されないことがあるのですが、表示されていないだけでちゃんと存在している(はず)なので大丈夫です。
設定が完了したら、アニメーションを何も選択しない状態でDOWNLOAD をクリックします。
f:id:sweetgohan:20181217133655p:plain
するとボーンの入った3Dモデルがダウンロードできます。
次に、好きなアニメーションを選択してDOWNLOAD をクリックします。
f:id:sweetgohan:20181217143827p:plain
写真のような設定にして、ダウンロードします。
ここまでできたら、ダウンロードしたfbxファイルをBlenderにimport します。

Blender にimport

import する時の画面の左下の設定は次のようにしておきます。
Main > Manual Orientation にチェックを入れる
Armatures > Automatic Bone Orientation にチェックを入れる

ここで、モデルをimport した時にめちゃくちゃ小さくなっていて見えなくなっていることがあるので、もし無いと思ったら拡大して探してください(ただしここではまだモデルの大きさは変えない方が良いです)。ひっくり返っていることもあったので、その場合は修正してください。また、テクスチャが表示されていない場合は、Material モードにすると表示されることがあります。
モデルをimport できたらアニメーションも先ほどの設定でimport します。
無事にimport できたら、アニメーションの確認をします。画面を2つに増やし、左下のボタンからDope Sheet に変更します。そしてAction Editor に変更します。(こちらの4にあるGIFがわかりやすいです)
f:id:sweetgohan:20181217144710p:plain
f:id:sweetgohan:20181217144724p:plain
f:id:sweetgohan:20181217144743p:plain
右上のパネルで3Dモデルを選択し、Action Editor の右のボタンからimport したアニメーションを選択して下にある再生ボタンを押します。
そして3Dモデルが動いたらOKです！
最後に、サイズが小さすぎた場合はここで調整しておきます。

Blender からexport

いよいよexport です。
まず、Blender の公式プラグインである、glTF エクスポーターを入れます。
Clone or download からダウンロードして、その中にある、scripts > addons > io_scene_gltf2 というフォルダをBlenderのアドオンフォルダの中に移します。
次に、Blender を開いて、File > User Preferences からAdd-onsのタブを選択します。
検索窓にglTFと入力し、チェックを入れたら完了です。
f:id:sweetgohan:20181217150024p:plain
設定ができたら、Export の選択肢にglTFが出現するようになるので、glTFを選んでexport します。

上手くできているか確認

glTF Viewer というサイトがあるので、ここにglTF(glb)ファイルをD&Dすると正しくexport できているか確認できます。
ここで上手く表示されなかったら、次の「Unityに移してexportする方法」を試してみてください。

Unity に移してexport する方法

なぜかBlender から上手くexport できないことがあります。このような場合は、一旦fbxファイルとして出力してunityで開いてみます。unityにfbxファイルとテクスチャをD&Dします。
表示されたら、先ほど「アニメーション無し人型3Dモデルの作成 > UniGLTFを使う」で説明したUniGLTF を利用してglTFファイルとして出力します。
glTF Viewer で見てみて、表示されていたら成功です！

ARで表示

前回も書きましたが一応。
index.html と作成した3Dモデル(ここでは例としてAlicia.glb)が入ったフォルダを用意します。
index.html には次のように書きます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>AliciaAnimation</title>
  </head>
  <body style="margin:0px; overflow:hidden;">
<!-- ライブラリの読み込み -->
<script src="https://aframe.io/releases/0.7.1/aframe.min.js"></script>
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<script src="js/aframe-extras.js"></script>
<script src="js/aframe-text-geometry-component.min.js"></script>

<a-scene embedded arjs="debugUIEnabled:false;" vr-mode-ui="enabled: false">

<a-assets>
	<a-asset-item id="Alicia" src="Alicia.glb"></a-asset-item>
</a-assets>

<a-marker preset="hiro">
	<a-entity gltf-model="#Alicia"  rotation="0 180 0" position="0 0.5 0" scale="0.8 0.8 0.8" animation-mixer="clip:*" ></a-entity>
</a-marker>
<a-entity camera></a-entity>

    </a-scene>
  </body>
</html>

そして、フォルダをzipで圧縮して、Netlify Drop にD&DすればOKです！
生成されたリンクの先頭にhttps:// をつけてスマホで開いてみましょう。
この時、カメラへのアクセスを要求されるのですが、なぜかそれが表示されるまで少しかかります。

できたもの

こんな感じでできました！

pic.twitter.com/nroeFiHkIn
— すだち (@kabostrawberry) December 17, 2018

これでやっと本命の年賀状作成に入れます・・・。

失敗したこと

glTFモデルをARで表示する

まずは、公式ドキュメントの3Dモデルに関するところを読んでみました。
すると、animation-mixer component というものを使うと書いてあるように思えたので、使ってみることにしました。
しかし、fbxモデルがなぜか表示されず・・・例の通りにjsonファイルでないとダメなのかと思い、jsonファイルに変換することにしました。
ところがここでまた問題が発生します。fbxをjsonに変換する方法を調べると、blenderにthree.js のjson変換用プラグインを入れると書いてあるのですが、そのプラグインが置いてあるはずの場所に飛ぶと、今後のために廃止(?)したというお知らせが・・・。今後はloader を使えと書いてあったのですがあまりよくわからず諦め。
最後にオンラインでのコンバーターを見つけたのでやっとの思いでjsonファイルに変換したのですが、結局これもなぜか表示されませんでした。

アニメーション付き人型glTFモデルの作成

UniGLTFでアニメーションを出力できない

こちらにアニメーションのエクスポートについて説明されていたので何度か挑戦してみたのですが上手くいきませんでした・・・。
手順に書いてある「このクリップに対してアニメーションキーを追加」の意味がよく分からなかったのが原因だと思います。調べても分からなかった・・・。

unityで作ったアニメーションをBlenderに持っていけない

unityでアニメーションをつけることとBlenderでアニメーションをつけることがどうも違うことのような気がしたので、unityで作ったアニメーションをBlenderに持って行こうとしたのですが上手くいきませんでした。

参考記事

作者:Khronos Group
発売日: 2019/02/08
メディア: ペーパーバック

すだちキャンパス

やってみたこと、学んだことなどのメモ。