人生ゲーム漬けなダメ人間のBlog


ここなのプロフィールページ
過去展示物はこちら
昔の日記:fUteiKi_niKKi(old)
【さんでー】そういえば…

Blogのトップのデザインがやっつけ感半端なかったので、
この際だからもう少し整えようと思いデザインいれてみましたよ ..._(:3 」∠)_

デザインいれおわって気づいたんですが、
真瑞さん制作時のエントリを書いてなかったような…


|д`;) 既に次のリリースが割と終盤に近付いているというのに…


いや、ぶっちゃけると書けることがないんですよねえ…
制作過程とか今更欲しがる人いるのかなあ?とかもありますし


まあ、振り返る意味で軽く仕様をまとる風に書いてみますかー _(:3 」∠)_




どんな書き方がいいかなあ…と考えた
結果、半分質問形式にしておいた方が最後まで書ける気がしてきた…


|д゚;) ガ、ガンバル



そもそも真瑞さんは何者か?


もともと UnityWebプレイヤーを使って
ブログ時計を作ったときに使っていたキャラクターです

VRMLの頃からすると環境が作業フローの組みやすさは飛躍的に上がってましたし
ブラウザ3Dにチャレンジするにはちょうどいい環境だと思ったんですよね

で、当初からローポリ前提でキャラを用意できないか?
というコンセプトでシンプルに作ったのが真瑞さんなのです


threejs化に伴って気を付けたこと


3Dキャラクターを扱ううえで気を付けたのは『設計』です

真瑞さんは前述したようにローポリ前提で作業を進めるために
シンプルなデザインでポリゴン数を抑えることをコンセプトにしたキャラクターです

髪の毛はショートですし、肌も全部書き込むことを前提にして作られています

ポリゴン数は顔のクオリティ調整が入った後も2000前後くらいをキープしています
構造をシンプルにしているので1MBいかないくらいでパッケージできます

特に Unity と threejs の仕様の差異は実装時の作業量を増大させ要因でした
アニメーションブレンドができないとモーション仕様がガラっとかわります(物量も…



拡大


Unity3D と threejs でアニメーションブレンドの仕様が異なるため
アニメーションを作り直すところから始めているのです… _(:3 」∠)_



作業量を減らす設計にするためには『最初の仕様』を極力シンプルにすることです

極力シンプルに作ることでエラーの特定に使う時間は大幅に短縮されます
エラー要素が複合的になりやすいほど問題解決の時間が増大していってしまいます

いろいろと技術的なことも検証しながら進めないといけなかったですし、
最初は何がおこるかわからないこともあって制御コードも一発で決まらないですからね

問題解決を短時間で数を多くこなす過程でやれることが増えることに期待して、
最初の仕様をシンプルにすることは結果的に多くのタスクをこなせるだろうと思っています



最後にタスク管理です

仕事の合間に作業をするので長期化するのが見えていましたし、
モチベーションを維持して効率的に進めるためには欠かせない要素です

愛用してたのはモバイルでも使い勝手のよい『Google Keep』ですね

チェックボックスはあとで見返した時に振り返りに使えますし、
通勤時などの合間に思いついたこともメモしやすいですからね


作業フローってどうやって決めるの?


threejs を始めるにあたって一番の障壁はここだと思います

逆にいえば、ここをどうにかできればデザイナーでも
最低限のコード知識を有していれば作品公開までの難易度は大きく下がると思います

個人で制作することもあって、ワークフローの選定基準はこんな感じで決めました


・安価に入手できること、かつコンバート後の出力先が多いこと
・安定していること、かつポピュラーでネットで情報が仕入れやすいこと
・ノートPCやペンデバイスで扱いやすいこと、また必要以上な機能が搭載されていないこと

その結果、自分の threejs 環境はこんな感じになっています


モデリング:メタセコイア
アニメーション:MechaStudio
コンバーター:Unwrap3D
threejs変換のみ:Blender
ローカル環境:xampp
エディター:Brackets


ネットワークのローカル環境を導入しているのは
threejs のレンダリングに必要なだけでなく js の動作確認自体も兼ねています

コンバータをはさんでいるのは MechaStudio 側のFBX仕様が
Blender のエクスポータのサポート範囲外であったからです

この件については この辺 で書いていますので、興味あればご参照ください



拡大



Blender での作業は操作系が困難で非常に大変です

自分はこの工程を吹っ飛ばすためにファイル容量増大を覚悟して
今後はFBXメインでの作業フローに切り替えていく予定です


ページに埋め混んでみた。さて、どうなった?


Unty3D に慣れてしまうと、なかなかに threejs での制作は大変です
なにせワークフローの大半は自分で揃えないといけないですからね

これはページに埋め込んでからも当然のように洗礼が待っているのです…

埋め込み時に苦労した点を挙げるとこんな感じ


・汎用的なローダーを使って、いろいろなページで使おう…と思うと設計がツライ
・ドキュメントは多いけど英語ばかり…読み解くのに時間かかる
・ロード管理はできるけどブログ側の制約とバッティングしてローディングフェーズ管理が面倒
・ロード管理するための CreateJS と表示を合わせるのが面倒…
・PCとSPの両対応はフツーにだるい…(が、どっちでも再生できるのがウリだし仕方ないよね…_(:3 」∠)_
・モーションフェードはできるけどブレンドはできない…モーション管理方法が変わって面倒


ローカル環境でちまちまjsの動作確認をするのでありますよ…



拡大



ローカル環境をつくってもSPは本番確認をするしかないんだけどどどどど


一番ハマるのはロード管理でしょうね

threejs のレイヤは canvas を用意してから
レンダリングが始まるまでは黒一色の画面になってしまいます

この黒背景はページ切り替えするときに凄い目立ちます
色々な example を参考にしてみて以下の回避方法が一番簡素で安定してました


‐紊縫戰診愀覆いたブロックを用意しておく
何もない状態でシーンをつくり、さっさとレンダリングを開始
ロードまでは適当にウェイトもたせてロードアニメーションを再生させる
ぅ蹇璽匹気譴榛合いをみてベタ背景ブロックをフェードインさせて threejs レイヤを表示させる


キモなのは何もない状態でレンダリングすること

黒背景よりかはマシってのと、レンダリングとモデル読み込みを
並列化させないことで結果的に処理不可も軽減できます


レンダリング時の背景はページ背景に合わせておくと
処理が遅延したときにもダメージが少なくてベターかなと思います


自分のように一般的なブログなどで作品展開すると
裏で動いてるブログ側の処理が制御できないことが多いと思います

ロード処理はシーケンシャルに処理できるとよいのですが、 制御できないものはどうにもならないので、割り切って設計するしかないんじゃないかなあ…

完成してみた。今後はどうしましょ?


今後はモデルの隠蔽とかどーしよーとか検証してみたいですねぇ
次回のキャラはコンセプトが正反対なんで、早いところ公開したいですねぇ
ブログで色々検証できたのでwebページ側もデザイン刷新したいですねぇ


ざっとこんな感じ… やること多いな…_(:3 」∠)_


いままでボチボチ書いていたことの総決算になった感ありますが、
これから始める人の助力になればなによりかなと

|д゚)ノシ オワリダヨ


| ここな | サンデーぴーぽー | comments(0) | trackbacks(0) |

Comment










Trackback
url: http://kurobee.kokona.lomo.jp/trackback/1038087

new | top | old


累計 本日 昨日

無料ブログ作成サービス JUGEM
(C) 2018 ブログ JUGEM Some Rights Reserved.
-Paging Navigation-

new | old

▲PageTopへ▲