【HTML5 Conference 2018】VOXELCANVAS

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. 保存機能実装 • フロントエンドの技術デモなので サーバーを用意するのはめんどい • だとすると、どこに保存しよう？

24. None

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程度

29. None

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