見出し画像

【技術】動く踊り絵図の作成 ブラウザ上でThree.js を使って

ゆにぞんnote（ユニゾンシステムズ公式note）

株式会社ユニゾンシステムズ 東京支社所属 永岡です。
ファイル交換システムの保守・開発に携わっています。
趣味は合唱、盆踊り、他いろいろです。
 
今回は、ブラウザ上で動く3D踊り絵図を作成した経緯と結果について投稿します。


動く3D踊り絵図を作りたい！と思ったきっかけ

趣味が「盆踊り」なもので、夏は東京周辺の会場に踊りにでかけ、秋から春にかけては公民館での練習会に参加したりしています。
 
これまで多くの指導者と知り合いましたが、日本各地の踊りを伝えて下さった先生は、皆が踊っているすぐそばで、踊り方を絵図に書き留めていました。

そして練習会場では、ホワイトボードに絵図を貼り付けつつ踊りを見せ、参加者に教えていました。
 
踊りを絵図で説明する書籍・サイトもあります。（リンク集 *1）
また、踊りを絵に書き表す手法は、踊り方を短時間のうちに文書化できる点で、映像資料よりも作成が容易です。

絵図を見る側としては、言葉で説明を受けるのとは別の伝わり易さがあります。


この絵図ですが、動く絵図にすればもっと伝わりやすいのでは？ と考えて、3Dモデルで表すことにしました。

1. three.js を使えばブラウザで動く！

ブラウザ上で3D作品を観る技術「three.js（スリードットジェイエス）」を利用すれば、ブラウザ上で3Dモデル（人型の人形）とモーション（動き）を組合せて表示できるとわかりました。（リンク集 *2）

例： THREEjs fbx Loader

https://threejs.org/examples/webgl_loader_fbx.html

モデル・モーションデータ配布サイト「Mixamo」サイトでは多数の人型モデルとモーションを組み合わせて表示可能です。（リンク集 *3）


2. three-vrmのサイトで3Dモデルを入手

踊り方を見せることが目的なので、動かせるモデルを探しているうちに、イラスト・コミュニケーションサービス「Pixiv」が提供するJavaScriptライブラリ「three-vrm（スリーヴィアールエム）」を見つけました。
（リンク集 *4）

人間型のモデルと、それを動かすためのボーン（骨格パーツ）を、拡張子 vrm のファイルとして作成でき、ブラウザ上で動かせます。

例： three-vrm サンプルより

https://pixiv.github.io/three-vrm/packages/three-vrm/examples/animations.html

（下のモデルの面数は 70116、ファイルサイズは 10MB）

腕を動かす指示は次のようにJavaScriptで記述してありました。

const quatA = new THREE.Quaternion( 0.0, 0.0, 0.0, 1.0 );
const quatB = new THREE.Quaternion( 0.0, 0.0, 0.0, 1.0 );
quatB.setFromEuler( new THREE.Euler( 0.0, 0.0, 0.25 * Math.PI ) );
const armTrack = new THREE.QuaternionKeyframeTrack(
  vrm.humanoid.getNormalizedBoneNode( 'leftUpperArm' ).name + '.quaternion', // name
  [ 0.0, 0.5, 1.0 ], // times
  [ ...quatA.toArray(), ...quatB.toArray(), ...quatA.toArray() ] // values
);

要は1秒間に、quatA で示す方向とquatBで示す方向に上腕を交互に動かす指示でした。

3.  軽量の人型モデルを入手

先に挙げたthree-vrmのデモはスマートフォンでも動くのですが、ライブラリファイルとモデルファイル を計14MB分読み込むため、動き始めるまでに時間がかかります。

もっと小さなモデルを利用するため、無料の3D CG 制作用統合環境「Blender（ブレンダー）」を導入しました。（リンク集 *5）
 
その後、人間型のモデルを作成できるようにするため、人型モデル「BaseHuman」およびVRM読み書き用に「VRM Add-on for Blender」をアドオンとして導入しました。（リンク集 *6）（リンク集 *7）
 
アドオンの追加により利用可能となる「humanoidボーン」をBaseHumanのモデルにはめ込み、拡張子 vrm のボーン付きモデルファイルを出力しました。

はめ込み作業（=リギング）は次で学びました。

（リンク集 *8）

（リンク集 *9）

（ただし meta-rigを使うとvrmファイルの出力時に失敗するため、かわりに Humanoidボーンを使いました。）

このモデルを利用して作った、動く「あけ手」の絵図が次になります。

http://bondanceinfo.starfree.jp/_threejs/3D_003b.html

内部指示例が次になります。1秒間かけて、左上腕を滑らかに1/4回転させています。

s2 =Math.PI * (1- Math.cos( Math.PI * (clock.elapsedTime -tStart) )) *0.25;
currentVrm.humanoid.getNormalizedBoneNode('leftUpperArm').rotation.x = -s2;


4.  軽量で滑らかな「素体」モデルを入手

先に挙げた軽量モデルの動きだと、上腕のでっぱりが不自然です。
より滑らかで人間のように見えるモデルを、キーワード「素体」で検索して探し、次を採用することにしました。

Blender用3D素体

https://booth.pm/ja/items/2521593

（面数は 7776、ファイルサイズ 0.3MB）
 
この素体モデルを利用して作った、動く「あけ手」の絵図が次です。

http://bondanceinfo.starfree.jp/_threejs/3D_003c.html


5.  ChatGPT4を利用しモデル作成（→失敗）

たいていの素体モデルにはライセンス、利用条件などがつきまといます。
自作モデルを得るため、ChatGPT4に「Blender4でpythonを使って3Dの軽量な人体モデルを作るスクリプト」と質問して得られたコードをBlenderのpythonコンソールに貼付けて実行しました。（リンク集 *10）
 
途中エラーで止まりましたが、コマンドを修正しつつなんとかモデルを出力できました。しかし人体には見えない物体ができてしまったため、採用は見送りました。

6.  マウス操作でモーション作成

モデル自作は一旦あきらめて、「モーション」（動きのデータ）を作成し始めました。
以下のネット情報を元に、アニメーションの作成手順を学びました。

（リンク集 *11）

（リンク集 *12）

 おおまかな手順は次になります。
(1)  素体モデル（拡張子vrm）を読み込む。

(2)  読込直後は「Tポーズ」となるため、「編集モード」内で腕や指に回転を加えて直立させる。（踊りの用語では「一束立ち」（いっそくだち）と呼びます）

変更後に「オブジェクトモード」に変え、変更を確定させる。

(3)    「ポーズモード」内で、終点（今回は120）を設定し、0コマ目、30コマ目、60コマ目、120コマ目などの「キーフレーム」のポーズを追加する。
 
(4)  再生し、動きを確認する。
キーフレーム以外のコマは再生時に自動補完される。（リンク集 *13）

7.  スクリプトのコピペでモーション作成＆動作確認

先に挙げたモーションの調整をしつつマウス操作を繰り返すのは手間がかかるため、同じ操作に相当するpythonスクリプトを作成しました。
Blenderの「pythonコンソール」に順次ペーストすると、モーション込みのモデルデータを出力できました。

スクリプト1：（vrmファイルの読み込みまで）
http://bondanceinfo.starfree.jp/_threejs/blender_1_import_vrm.py
 
スクリプト2：（モーション作成～fbxファイル出力）http://bondanceinfo.starfree.jp/_threejs/blender_2_make_motion_fbx.py

上記出力ファイルを利用して作った、ブラウザ上で動く「あけ手」の絵図が次です。

http://bondanceinfo.starfree.jp/_threejs/3D_003d.html

Blenderでの再生（下図左）とブラウザでの再生（下図右）とで動作を確認できました。


8. 今後の展望

両手の動作について、スクリプトのコピペのみで、動く3Dデータを出力できることがわかりました。

今後は足の運びも含めた、動く3D絵図の充実を図りたいです。

複数の踊り手が一斉に、あるいは時間差で動く表示にも挑戦したいです。

9. リンク集（さらに学びたい方への道標）

*1「日本民踊の基本的動作」 （石川県ホームページ内。複数の絵図あり）
https://www.pref.ishikawa.lg.jp/sports/taiiku/syumoku/daihyou/rule16.html

*2 three.js JavaScript 3D Library
https://threejs.org/

*3 モデル・モーションデータ配布サイト「Mixamo」 （提供元：Adobe）
https://www.mixamo.com/#/?page=1&type=Motion%2CMotionPack

*4 pixiv/three-vrm: Use VRM on Three.js
https://github.com/pixiv/three-vrm

*5 Blender 公式サイト
https://www.blender.org/

*6 Blender用アドオン「BaseHuman」
https://yonaoshi.booth.pm/items/4034919
（中身はpythonスクリプト。モデルの面数は 548、サイズは 0.15MB）

*7 VRM Add-on for Blender
（VRM読み書き機能＋VRMリギング用ボーン）
https://vrm-addon-for-blender.info/ja/

*8 【Blender2.9】Rigify：アーマチュアを瞬時に追加
https://cgbox.jp/2020/11/24/blender-rigify-01/

*9【Rigify】自動生成リグアドオンの個人的理解【Blender】
https://note.com/suzuumi/n/ncb68406f212d

*10 リートン （ChatGPT 4 を無料で利用可能）
https://wrtn.jp/

*11【Blender Python】オブジェクトを動かしてアニメーションを作る①
https://note.com/mare_ism/n/n8a58222b27ce

*12 アーマチュアによるアニメーション(その3)
https://blender3d.biz/simpleanimation3dcg_deformed_armatures-part3.html

*13 (Blender)アニメーションのキーフレームの補間タイプを変更する
https://bluebirdofoz.hatenablog.com/entry/2022/05/09/233253


ユニゾンシステムズでは、一緒に働く仲間を募集しています。
ぜひ一度オフィスに遊びに来てみませんか？お気軽にDMもお待ちしています！

求人の詳細はこちら: https://www.unixon.co.jp/recruit/
Youtube: https://www.youtube.com/channel/UCGacmgfpJ0fkHC0aKrSppVw
Twitter: https://twitter.com/unixon_recruit

この記事が気に入ったらサポートをしてみませんか？