Webベースブロックモデリングツールを作って公開した

Web上で動くブロックモデリングツール(ボクセルモデリングツール)を作ってみました
https://playcanvas.com/project/448005/overview/blockmodeling

 

 

 機能・特徴

・Webブラウザ上で完全動作
・PC,スマホ両対応
・ボックスの配置、色設定、削除
・URL一つで成果物をシェア
・objエクスポートして再利用可能

百聞は一見に如かず

全画面

操作方法:

PC スマホ
チルト,ロール ドラッグ スワイプ
パン 右クリックしながらドラッグ 二本指でスワイプ
ズームインアウト ホイール ピンチ
ボクセル生成 ボクセルをクリック ボクセルをタップ
ボクセル削除 deleteにチェックを入れてボクセルをクリック deleteにチェックを入れてボクセルをタップ

 

きっかけ

偶然twitterで見たMakeboxを見て感銘を受けてWebだけで実装できるかなーと思い目コピしてみたくなったのが始まり。
WebGLで頑張ってみた。

作ってみた感じ、小さなものなら作りやすかった。

 

実装

PlayCanvas利用、サーフェスの判定なんかは公式サンプルをそのまんま転用
Entity Picking | PlayCanvas

自分はFrame bufferを利用した方法が好きなので今回もそれでやったが、今回はRayで実装すればよかったと後悔。。

ぐりぐりや、ピンチズーム等のインタフェースはPlayCanvasの3D model viewerを基盤に開発。特にその辺のコードはいじってない。

どの面を選択したかがBoxプリミティブだと取得できなかったので超ダサいが6枚のPlaneで野良犬実装してみた。

DLは.objのファイルフォーマットが思いのほかわかりやすかったので.objで。内部で頂点とかを計算して生で書いてあるだけで難しいことはしてない。こちらのページが大変参考になった。

2017.04.17追記

・インフラをnifty mBaasに乗せ換えた。

前まではインフラといってもURLパラメータに座標情報をぶち込んでいただけなのだけど、さすがにやめた。

ただ、いままでの実装のおかげで、各ツールのURL文字数上限が分かった

bit.ly 2048文字まで

goo.gl 約2100文字程度まで

tinyurl 天井知らず

nginx 9000文字程度でhttpエラー

iOSブラウザ 700文字を超えたあたりでカットされる

ncmbはかなり使いやすくて容量も5GBあるので重宝している。URLもすっきりして良い。

 

・shareボタンを押したときに画像をサーバーに保存するようにしてみた

canvas情報をtoDataURLで取得して、サーバーにPOSTで投げる。それを受け取って任意のディレクトリにpngで保存するphpを置いてみた。賞味1時間ほどでできた。インターネッツすごい。ありがとうございます。

保存する画像は”voxelID”.pngで保存されるようにしてあるので、モデリングツールのtwitter cardにそのIDに紐づいた画像が表示されるようにしてみた。よい。

・Gallaryをつくった

画像をドバっと並べてみた。デバッグ時のものも残っているのでだいぶ多い

画像にはaタグでリンク飛べるようにしてみた。 表示方法悩み中

・名前を”Blockmodelingtool”から”VOXELCANVAS”にした

さすがに名前がほしかったので変えた。

PlayCanvasでVOXELだからVOXELCANVAS

課題

・スマホだとDLできない

スマホのインタフェースの方が(個人的に)PCよりもこのツールには適していると思うのだけど、いかんせんスマホだからデータの保存なんかはできない。ダウンロードを押すとクリップボードに.objのテキストがコピーされてPCに送って.objで保存しなおすとかしか思いつかない。
→ 解決。短縮URLで共有可能に

・iOSブラウザのcolorエレメンツ対応してない

こまった。いったんrange4つで実装してみたけど著しくダサいのでなんとかしたい。
→ とりあえずdivの色も変わるようにしてみた、効果あるだろうか。HSVの方が視認性よさそう。
→ 独自の二軸表色系でいい感じにしてみた 結構自信作

・Opacity

無駄に半透明とか付け加えたら別のツールになってしまった。いままで四方をボックスに囲まれたボックスはレンダリングする必要がないので軽量化のためdestroyしていたのだけど半透明だとそうもいかない。なんかほかのゲームが作れそう。
→ いったんはdestroyしない方向でビルドしてみた。

・マテリアルを保存できない

.mtlを出力していないのでまだ余地があるかもしれないが再利用するには再利用先のツールでマテリアルを再設定する必要がありめんどくさい。今は同一マテリアル群に対して同様の名前を振ってそれぞれ適用することで何とかしているがこの辺の手間を減らしたい

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA