【HTML5 Conference 2018】VOXELCANVAS

2018.11.24@TDU

Transcript

1. V O X E L C A N V A S ： W e b G L で の ボ ク セ ル モ デ リ ン グ ツ ー ル 開 発 ~ 開 発 ノ ウ ハ ウ と ブ ラ ジ ル の 小 学 校 で 使 っ て も ら え た 話 ~ 津 田 良 太 郎 @ u t a u t a t t a r o
2. 本プレゼンの要旨 ◼趣味でWebGLボクセルモデリングツールを作った ◼作り始めた経緯からいろいろ困ったところなど ◼技術デモからサービスとして ユーザーを得るまでの話
3. 自己紹介 津 田 良 太 郎 @ u t a u t a t t a r o u t a u t a t t a r o . c o m W e b と ゲ ー ム の 間 を 行 っ た り 来 た り な デ ベ ロ ッ パ ー 新 卒 3 年 目 H T M L 5 j ゲ ー ム 部 で い つ も お 世 話 に な っ て ま す ！
4. 本日のアジェンダ • VOXELCANVAS • 開発話 – 開発の経緯 – 保存機能 – 大量描画の要望 – エクスポート – 制作の敷居を下げる工夫 • 趣味制作を通して • まとめ
5. VOXELCANVAS
6. Demo v o x e l c a n v a s . m e
7. デモ動画(旧バージョン)
8. VOXELCANVAS概要 Web上にホストされたボクセルモデリングツール PC/モバイル問わずブラウザから ボクセルモデルが作れる 作ったモデルはSNS等でシェアできる Zipで落としてUnity等のゲームエンジンで 利用することも可能
9. システム構成 クライ アント KVS API server CDN twitter HTML5 / WebGL 画像保存 ツイート voxelID voxelData より詳しくはこちら canvasData Azure Computer Vision API 学習 Web Server アクセス 自前サーバー
10. 開発メンバー ryotaro 初期システム、サービスサイト、API周り、 サーバーサイドとか、全体まとめ役 seiro メッシュや描画、 エクスポートや大量描画の最適化などなど
11. モチベーション
12. [背景]3Dアセットの需要増加 • アセットの需要増加に伴い コンテンツデリバリーの手段も増加 –Google Poly –Mixiamo –glTF
13. [背景]3Dモデル開発の手段の増加/専門化 • リッチで高機能なモデリングツールの登場 –Maya, Max, Blender, Zbrush… • ローポリ/ボクセルモデリングツールの登場 –MagicaVoxel, qubicle…
14. 抱える問題 • 作者は作品をブロードキャストするのみ –開発と配信が分かれていることによる孤立化 –他者の感性や感覚を認識しづらい –UserがCreaterになるのは大変 Creater Content Delivery platform Creater Creater User
15. 目指したのは ”砂場” • 共通のフィールド/リソースで自由な発想でモノを作る –他者の感性を横目で見れる –自分の作ったものが他者にアップデートされる –他者の作品と合体させる “破壊的協創”が生まれ 他者の感性を理解していく ＝クリエイティビティの根幹
16. Q1. なぜボクセル？ • A. “人間ならだれでも使える”を目指した –「誰でも使える」 • ぐりぐり見える、押すと増える、直感的な操作 –「人間なら」 • ＝AIには難しい • AI技術の進歩 高解像度なものはAIで表現可能な時代 • ドット絵やボクセルモデルはただ圧縮しても作れない • “削る美学” 最小要素で表現するのは人間の感性
17. Q2. なぜWeb? • A. “届けるため” –様々な機器が登場してコンテンツの幅も広がった だが届けられなかったら本末転倒 –体験を届けるためにプラットフォームはWebに
18. 実際に届いたのか • 全体の25%が海外からのアクセス • EUやアメリカが多いが、南米，東南アジアも地味に 多い • 3G回線が主流な地域でもプレイされている input color等iOS非対応でAndroid対応のような要素は Androidが主流な地域の方が相性がいい
19. 開発話
20. 開発経緯 • 仕事でPlayCanvasに関わっていたところ 新バージョンのモデルビューワーキットが公開 →これがなかなかに使いやすくて素晴らしい • この凄さを広めたい・・・ 「エディターって最強のビューワーデモなのでは？」 →開発スタート
21. 開発初期 • とりあえずアルファ版開発 –面を選択すると増えるだけ • この段階でコミュニティへ公開 –思ったより反響あり →そのまま作り続けることに
22. 色を付けられるようにしてみた • HTMLのinput colorで –iOS safari以外は対応済みな機能 • まあいっかとそのまま行ったが 最終的にオリジナルキャンバスを作ることに –iOSSafari未対応という点に最後まで悩まされる • ここまで来ると 保存したくなる
23. 保存機能実装 • フロントエンドの技術デモなので サーバーを用意するのはめんどい • だとすると、どこに保存しよう？
25. ＿人人人人人人人人＿ ＞ getパラメータ ＜ ￣Y^Y^Y^Y^Y^Y^Y￣
26. お花のモデルをシェアします！ https://playcanvas.utautattaro.com/blockmodeling/?meshs=0, 0,0,255,255,255,1a0,0,1,255,0,128,1a0,1,0a1,0,0a0,0,-1a- 1,0,0a0,-1,0a-1,1,0,255,255,0,1a-1,0,-1a-1,0,1a-1,- 1,0a0,1,1a1,1,0a0,-1,1a1,0,1a1,-1,0a0,1,-1a1,0,-1a0,-1,-1a0,- 2,0,128,64,64,1a0,-3,0a0,-4,0a0,-3,-1,0,128,128,1a0,-4,-1a1,- 3,0a1,-4,0a0,-3,1a0,-4,1a-1,-3,0a-1,-4,0a-1,-4,-1,128,64,64,1a- 2,-4,0a-2,-4,-1a-1,-4,1a-2,-4,1a-2,-4,2a-1,-4,2a0,-4,2a1,-4,1a1,- 4,2a2,-4,2a2,-4,1a2,-4,0a1,-4,-1a2,-4,-1a2,-4,-2a1,-4,-2a0,-4,- 2a-1,-4,-2a-2,-4,-2
27. URL短縮サービス文字数上限への挑戦 • そのまま打ち込むのはつらいのでURL短縮サービスに データを持ってもらうことに→上限への挑戦 • bit.ly 2048文字 • goo.gl 2000文字
28. そして見えた光 • Tinyurlのポテンシャルは未知数 だがnginxが終わる →8000文字だと400voxel程度
30. ncmbを採用 • 手軽に使い始められたので採用 • voxelIDとvoxelDataを紐づけて保存 Unityでモデルデータ検証するときとかも便利 • インタビューもしていただきました –https://news.mynavi.jp/kikaku/20180420-617106/
31. 業務とは切り分け • 趣味要素が大きくなってきたので、 個人プロジェクトとして業務とは切り分け、業務時間 外に進める • Mashup Award 2017に応募 –スポンサー賞受賞
32. 大量描画の要望 • 初期エンジンはパフォーマンスが低く、1000ボクセル程度が限 界だった – 1ボクセル1エンティティとしてインスタンシング – インタフェースもポチポチ押すもの • アーティストさんの要望やMAでのフィードバックなどから、 新しいボクセルエンジンの開発が必須に – フィールド全体を複数チャンクに分け、同一メッシュとして レンダレングするようなエンジンにリプレース – それに伴い大量プットができるようなインタフェースも実装
33. voxengine v2 • 内部のボクセル生成エンジン –300kボクセルレンダリングして も60fpsを維持する –20x20のチャンクでボクセルを 管理 –衝突判定をFrame Bufferから Physics Raycastへ変更 –Alphaボクセルの処理を最適化 デモ https://voxelcanvas.me/create?m=TCLDfE3nJaK
34. エクスポート機能 • ダウンロードしてUnityやUnrealEngine等の外部ツール で使えるようにしたい →OBJはASKIIで書かれたファイルフォーマットで 取り扱いやすそうだったのでOBJ書き出しを実装
35. VOXELCANVASのエクスポート • .obj – モデルの形状を記述する • VOXELdataから頂点座標、テクスチャ座標、法線の情報および、それらが所属す るマテリアルグループと対応した.mtlへのパスを抽出 • .mtl – モデルの質感を決める • VOXELCANVASではdiffuseとopacityのみ。テクスチャへのパス等が書かれている • .png – モデルの色を決める • 使用されているカラーをカラーパレットデータから抽出。pngのバイナリを JavaScriptで書いて吐き出し(※canvas使ってません！) • これらをJSzipでまとめてダウンロードできる仕様に
36. VOXELCANVASのエクスポートのイケてるところ • 全部Webフロントエンドでやる！ – ASKIIのobj,mtlはもちろん、pngもJavaScriptで書きだし。 サーバーには何も飛びません。 • 軽量・高速 – 当初は重複頂点が多かったが最適化し徹底的に削除。数十万ボクセルでもスマホで エクスポート可能 • テクスチャ動的生成 – 使った色のみ1pxずつ矩形でテクスチャ化するので テクスチャサイズが16pxとか • 透過ボクセル対応 – 描画順を考慮して別メッシュに分けて、obj内に2つのメッシュがある形で実装 テクスチャ
37. エクスポートデモ • https://voxelcanvas.me/create?m=hmAyTLaTESt • 右上の「download」から実行可能
38. 制作の敷居を下げる工夫 • 誰でもボクセルを作れるようなツールにしたい →現実世界からボクセルモデルを生成できるような 仕組みを実装
39. GeoVOXEL • ロケーション情報からボクセルモデルを作成する機能 • Google Maps APIを魔改造 –Static map API と elevation APIを利用 – 富士山：https://voxelcanvas.me/view/?m=bfRyfzSyZDv – グランドキャニオン： https://voxelcanvas.me/view/?m=grandcanyon
40. GeoVOXEL • v1.2.0からエディターに統合
41. GeoVOXELの仕組み Google Maps API 地名を送信 緯度経度情報を取得 400x400pxのマップ画像を要求 20x20地点の高度情報を要求 マップ画像を取得 高度情報を取得 レンダリング 逆ジオコーディングAPI Static map API Elevation API 処理A 処理B location: {lat: 35.6419478, lng: 139.2773018}
42. GeoVOXELの仕組み • テクスチャの生成(処理A) – Static map APIで得られた画像をいったんオフスクリーンのcanvas2D に格納してcontext.getImagedata()で画素値取得 • テラインの生成(処理B) – リクエスト数を減らすため、400x400pxの画像に対して高度は400点 のみ取得。バイリニア補間である程度の滑らかさを維持 → この情報をすべてマッピングすることでGeoVOXELを実現
43. ただ、本当に正しくマッピングできてい るのだろうか… • Google Earthで確認するとそれっぽくズレなく表示さ れている • しかしGoogleの地図データに完全に依存した仕組みな ので完全な検証はできていない… • 何とかして検証したい…
44. GEOVOXELの 精度検証
45. ラスベガス – ロサンゼルス間で検証 • たまたま出張でLAS – LAXを飛んだ時にGPSが取れて いたので検証 –検証地点はロサンゼルス郊外リアルトから北方面 • 偶然航路だった • 山に挟まれた扇状地で 地形ランドマークとして わかりやすい
46. 撮れた写真
47. デモ • https://voxelcanvas.me/view/?m=Rialto_zoom12
48. 比較 • 位置はズレずにとれている • エレベーションは現実に即しているが、デフォルメが 強くボクセル表現としてはよい感じ。 テクスチャはリアルすぎる印象
49. 開発完了2か月後 • GDC2018にて
50. 趣味制作を通して
51. 趣味制作の良かったところ • 自己資金運営なので好きなようにできる –新しい技術など、試したいことがすぐ試せる • ユーザーさんとのつながりができる –Twitterアカウントがあると海外から問い合わせがバンバン 来る –ブラジルの学生さんが小学生向けの ワークショップで使ってくれたとの報告も
52. 趣味制作の足りないところ • 明確なゴールを設定しないとだれる –コンテストが終わった瞬間目標を見失う • コンセプトが迷子だと作品も迷子になる –複数人で開発する際はなおさら重要 • 製品として出すにはもっとパワーが必要 –法律面やスケールなどパワーが足りなすぎる
53. まとめ • ボクセルモデリングプラットフォーム「VOXELCANVAS」を開発した – 作成 – 共有 – 閲覧 を一本化し、 クリエイター同士のエコシステムを実現 – 趣味の技術デモから 海外のユーザーに使ってもらえるまで大きくした！ – Google Maps APIと組み合わせてGeoVOXELを実装した！ • 趣味開発は新しいことを試す場としては最適 – ただだらけなように目標やブレないコンセプトを持つべき – 趣味プロジェクトは趣味プロジェクトと割り切る
54. ご 清 聴 あ り が と う ご ざ い ま し た ！ https://voxelcanvas.me @voxelcanvas