皆様ごきげん麗しゅう。
ちょっと前にこんな記事を書きました。
「Babylon.jsを使うためのメモ〜Blender連携のおまけを添えて〜」
http://kairandou.blogspot.com/2018/07/babylonjsblender.html
あれから数日。
何とかBabylon.jsでArmatureを使ったアニメーション付きのモデルを動かすことが出来ました。
出来上がったものがこちら。
「Naufragium | HollowCradle」
http://hollowcradle.cf/naufragium/index.html
黒い水面の中であるてろてろした身体をくねらせているよくわからないやつが、「べるめーるくん(仮)」です。
名前の通り、ベルメールのとある球体関節人形がモチーフです。
作りが荒いのは初心者だから、で勘弁を。
変な動きをするポリゴンがあるのは、よくわからないタイミングで結合してしまって、まぁよかろうと放置してたら最後らへんでやらかしたことに気付いたやつです。
たぶん、一度荒くして細かいところを調整していけば綺麗になるとは思いますが、今回はパスで。
しばらく見たくないです。
で、モデリングはちまちました作業ってだけで済んだのですが、Babyon.jsに移す際に問題が多発しました。
発生した問題はこんな感じ。
- 何故か身体が透過する
- ファイル形式とArmatureの問題
- アニメーションしない
1つめの「身体の透過」。
これは面の向き？が原因だった模様。
Unityなどでも起きるようで、光の当たる向きと面の向きを合わせなければ投下してしまうらしい。
というわけで、以下を参考にして面を反転。
・Blenderで面の表と裏を逆にする - 妹でもわかるUnrealEngine4
http://imoue.hatenablog.com/entry/2016/07/31/000050
見事、すけすけじゃなくなる。
(前回は運が良かったらしい)
お次は2つめ。
「ファイル形式とArmature」の問題。
前回書いたこちらの記事。
「Yurineko | HollowCradle」
http://hollowcradle.cf/yurineko/index.html
この記事の最後にもBlender×Babylon.jsで作ったサンプルを載せていました。
今回のやつとの違いは、Armatureを使ったものかどうか。
あとはファイル形式です。
前回の揺猫は"ファイル形式:gltf" + "アニメーション:Armature無し"だったのに対し、今回のべるめーるくん(仮)は"ファイル形式:babylon" + "アニメーション:Armature有り"です。
実のところ、本来はべるめーるくん(仮)も揺猫と同じgltfでやろうと思ったのですが、どうも上手く行かず、ボーンとメッシュがちぐはぐに動いたり、そもそもメッシュがぐっちゃぐっちゃだったりと、設定をいじっても何とも出来ませんでした。
で、2日程いじってみて諦めました。
そもそもBabylon.jsの中身どころか、モデリングやプログラミングの根っこの原理部分もわからないんだから、何がおかしいのか、その疑問すら浮かばない。
というわけで、babylon形式でエクスポートすることにしました。
そうすると、見事モデルが浮かび上がりました。
何処にも欠損はなし。
流石にBabylon.js用の形式だけあるのか、gltfよりも綺麗にインポートされている。
しかし、ここで3つ目の問題が。
「アニメーションしない」
さっきgltfでインポートした時は、ページ全体の読み込みが完了した時点で自動的に動き出したのに。
あっちを立てればこっちが立たず。
これはコードで直接動かすしかないのかと思いつつ調べてみると、ありました。
・Importing Blender Animations Into Babylonjs
http://wpdildine.github.io/blog/2015/07/05/Importing-Blender-Animations-into-Babylonjs
この記事(動画)を参考にして、エクスポートして吐き出された.babylonとかいう拡張子の着いたファイル(JSON形式？)をテキストエディタで開いて、「mesh」の後の「submesh」の直前に以下のコードを追加。(場所に意味があるのかはちょいとわからず。たぶん無いのかな)
"autoAnimate":true, "autoAnimateFrom":start_flame, "autoAnimateTo":end_frame, "autoAnimateLoop":true(※start_frameとend_frameは各自のものを入れてください)
すると何ということでしょう。
ベルメールを意識していると思えなくもない球体関節のべるめーるくん(仮)が、真っ暗で何もないぼっちな空間でその荒いポリゴンを悲しげによじり始めたではありませんか。
孤独が辛すぎたのか、明らかに動くべきでない関節部分が歪んでしまっている。
ここまで苦節1週間ほど。
初心者とはいえ、流石に時間かかりすぎだろと自分でも思いますが、何とかべるめーるくん（仮）を動かすことができました。
ようやくWeb+モデリングをスタートさせることができるような出来ないような。
山積みされた問題どころか、問題でできた山を登るようなビジョンしか見えない・・・。
ともあれ、何とか一段落尽きましたので、気ままに気楽にこれから色々作っていきましょうかね。
では、今回は此れにてお終い。
誰かのお役にたてれば幸いでございます。
お付き合いいただきありがとうございました。
以下が、上記を除く、今回お世話になったサイト達。
この場でお礼、及びご紹介させていただきます。
ありがとうございました。
・Babylon.js Documentation
http://doc.babylonjs.com/resources/
・Export glTF Animation -> Blender2Babylon -> Minimum Steps Example - Questions & Answers - HTML5 Game Devs Forum
http://www.html5gamedevs.com/topic/33948-export-gltf-animation-blender2babylon-minimum-steps-example/
・【blenderモデリング基礎】造形するにあたって序盤で知っておきたかったコマンドなど - riotoqll's diary
http://riotoqll.hatenablog.com/entry/2014/02/10/162604
・ボーンの位置を合わせる方法 - 質問板 - フォーラム - Blender.jp
http://blender.jp/modules/newbb/viewtopic.php?topic_id=981&forum=3
・【Blender】ボーンを入れる（リギング）ための基本手順 - おもちゃラボ
http://nn-hokuson.hatenablog.com/entry/2017/10/03/205639
・Blenderで大幅なポリゴン削減 - VRで美少女になりたい人の備忘録
http://shiasakura.hatenablog.com/entry/2018/02/17/232554
・かんたんBlender講座
http://krlab.info.kochi-tech.ac.jp/kurihara/lecture/cg/BlenderWeb_Hayashi/html/index.html
・[ Javascript ] 右クリックによるメニュー出力を無効化する ( oncontextmenu ) – 行け！偏差値40プログラマー
http://hensa40.cutegirl.jp/archives/2551
・GitHub - KhronosGroup/glTF-Blender-Exporter: Blender glTF 2.0 exporter
https://github.com/KhronosGroup/glTF-Blender-Exporter
・初心者のための！作って学ぶBlenderの基礎：①基本操作とBlender紹介 | 日本VTR実験室
https://nvtrlab.jp/column/2-1
・【Blender】ナイフで切るときにポリゴンの裏側まで切る - おもちゃラボ
http://nn-hokuson.hatenablog.com/entry/2018/01/25/213729
・Blender tutorial|モデリング編|メッシュの分離と結合（頂点のマージ ） - YouTube
https://www.youtube.com/watch?v=lAIL0T7fFH4
こちらは今回お世話になったわけじゃありませんが、べるめーるくん(仮)の抱える問題=肩(?)の球体の内側が透過する問題と同じような問題を解決するのに使えそう、と思ったので置いておきます。
・Blender Tutorial: Morphing Wine Glass Animation - YouTube
https://www.youtube.com/watch?v=qx5L8K99j10
光が当たる部分は現実の物質と同じように表面を裏表分作らないと駄目なんですね。
次は気を付けねば。
コメント
コメントを投稿