【HTML5 Conference 2018】VOXELCANVAS

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

本プレゼンの要旨 ◼趣味でWebGLボクセルモデリングツールを作った ◼作り始めた経緯からいろいろ困ったところなど ◼技術デモからサービスとしてユーザーを得るまでの話

自己紹介津田良太郎 @ 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 ゲーム部でいつもお世話になってます！

本日のアジェンダ • VOXELCANVAS • 開発話 – 開発の経緯 – 保存機能 –
大量描画の要望 – エクスポート – 制作の敷居を下げる工夫 • 趣味制作を通して • まとめ

VOXELCANVAS

Demo v o x e l c a n v
a s . m e

デモ動画(旧バージョン)

VOXELCANVAS概要 Web上にホストされたボクセルモデリングツール PC/モバイル問わずブラウザからボクセルモデルが作れる 作ったモデルはSNS等でシェアできる Zipで落としてUnity等のゲームエンジンで利用することも可能

システム構成クライアント KVS API server CDN twitter HTML5 /
WebGL 画像保存ツイート voxelID voxelData より詳しくはこちら canvasData Azure Computer Vision API 学習 Web Server アクセス自前サーバー

開発メンバー ryotaro 初期システム、サービスサイト、API周り、サーバーサイドとか、全体まとめ役 seiro メッシュや描画、エクスポートや大量描画の最適化などなど

モチベーション

[背景]3Dアセットの需要増加 • アセットの需要増加に伴いコンテンツデリバリーの手段も増加 –Google Poly –Mixiamo –glTF

[背景]3Dモデル開発の手段の増加/専門化 • リッチで高機能なモデリングツールの登場 –Maya, Max, Blender, Zbrush… • ローポリ/ボクセルモデリングツールの登場 –MagicaVoxel,
qubicle…

抱える問題 • 作者は作品をブロードキャストするのみ –開発と配信が分かれていることによる孤立化 –他者の感性や感覚を認識しづらい –UserがCreaterになるのは大変 Creater Content Delivery platform
Creater Creater User

目指したのは ”砂場” • 共通のフィールド/リソースで自由な発想でモノを作る –他者の感性を横目で見れる –自分の作ったものが他者にアップデートされる –他者の作品と合体させる “破壊的協創”が生まれ他者の感性を理解していく＝クリエイティビティの根幹

Q1. なぜボクセル？ • A. “人間ならだれでも使える”を目指した –「誰でも使える」 • ぐりぐり見える、押すと増える、直感的な操作 –「人間なら」 •
＝AIには難しい • AI技術の進歩高解像度なものはAIで表現可能な時代 • ドット絵やボクセルモデルはただ圧縮しても作れない • “削る美学” 最小要素で表現するのは人間の感性

Q2. なぜWeb? • A. “届けるため” –様々な機器が登場してコンテンツの幅も広がっただが届けられなかったら本末転倒 –体験を届けるためにプラットフォームはWebに

実際に届いたのか • 全体の25%が海外からのアクセス • EUやアメリカが多いが、南米，東南アジアも地味に多い • 3G回線が主流な地域でもプレイされている input color等iOS非対応でAndroid対応のような要素は
Androidが主流な地域の方が相性がいい

開発話

開発経緯 • 仕事でPlayCanvasに関わっていたところ新バージョンのモデルビューワーキットが公開 →これがなかなかに使いやすくて素晴らしい • この凄さを広めたい・・・「エディターって最強のビューワーデモなのでは？」 →開発スタート

開発初期 • とりあえずアルファ版開発 –面を選択すると増えるだけ • この段階でコミュニティへ公開 –思ったより反響あり →そのまま作り続けることに

色を付けられるようにしてみた • HTMLのinput colorで –iOS safari以外は対応済みな機能 • まあいっかとそのまま行ったが最終的にオリジナルキャンバスを作ることに –iOSSafari未対応という点に最後まで悩まされる
• ここまで来ると保存したくなる

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

＿人人人人人人人人＿＞ getパラメータ＜￣Y^Y^Y^Y^Y^Y^Y￣

お花のモデルをシェアします！ 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

URL短縮サービス文字数上限への挑戦 • そのまま打ち込むのはつらいのでURL短縮サービスにデータを持ってもらうことに→上限への挑戦 • bit.ly 2048文字 • goo.gl 2000文字

そして見えた光 • Tinyurlのポテンシャルは未知数だがnginxが終わる →8000文字だと400voxel程度

ncmbを採用 • 手軽に使い始められたので採用 • voxelIDとvoxelDataを紐づけて保存 Unityでモデルデータ検証するときとかも便利 • インタビューもしていただきました –https://news.mynavi.jp/kikaku/20180420-617106/

業務とは切り分け • 趣味要素が大きくなってきたので、個人プロジェクトとして業務とは切り分け、業務時間外に進める • Mashup Award 2017に応募 –スポンサー賞受賞

大量描画の要望 • 初期エンジンはパフォーマンスが低く、1000ボクセル程度が限界だった – 1ボクセル1エンティティとしてインスタンシング – インタフェースもポチポチ押すもの • アーティストさんの要望やMAでのフィードバックなどから、
新しいボクセルエンジンの開発が必須に – フィールド全体を複数チャンクに分け、同一メッシュとしてレンダレングするようなエンジンにリプレース – それに伴い大量プットができるようなインタフェースも実装

voxengine v2 • 内部のボクセル生成エンジン –300kボクセルレンダリングしても60fpsを維持する –20x20のチャンクでボクセルを管理 –衝突判定をFrame Bufferから
Physics Raycastへ変更 –Alphaボクセルの処理を最適化デモ https://voxelcanvas.me/create?m=TCLDfE3nJaK

エクスポート機能 • ダウンロードしてUnityやUnrealEngine等の外部ツールで使えるようにしたい →OBJはASKIIで書かれたファイルフォーマットで取り扱いやすそうだったのでOBJ書き出しを実装

VOXELCANVASのエクスポート • .obj – モデルの形状を記述する • VOXELdataから頂点座標、テクスチャ座標、法線の情報および、それらが所属するマテリアルグループと対応した.mtlへのパスを抽出 • .mtl
– モデルの質感を決める • VOXELCANVASではdiffuseとopacityのみ。テクスチャへのパス等が書かれている • .png – モデルの色を決める • 使用されているカラーをカラーパレットデータから抽出。pngのバイナリを JavaScriptで書いて吐き出し(※canvas使ってません！) • これらをJSzipでまとめてダウンロードできる仕様に

VOXELCANVASのエクスポートのイケてるところ • 全部Webフロントエンドでやる！ – ASKIIのobj,mtlはもちろん、pngもJavaScriptで書きだし。サーバーには何も飛びません。 • 軽量・高速 – 当初は重複頂点が多かったが最適化し徹底的に削除。数十万ボクセルでもスマホで
エクスポート可能 • テクスチャ動的生成 – 使った色のみ1pxずつ矩形でテクスチャ化するのでテクスチャサイズが16pxとか • 透過ボクセル対応 – 描画順を考慮して別メッシュに分けて、obj内に2つのメッシュがある形で実装テクスチャ

エクスポートデモ • https://voxelcanvas.me/create?m=hmAyTLaTESt • 右上の「download」から実行可能

制作の敷居を下げる工夫 • 誰でもボクセルを作れるようなツールにしたい →現実世界からボクセルモデルを生成できるような仕組みを実装

GeoVOXEL • ロケーション情報からボクセルモデルを作成する機能 • Google Maps APIを魔改造 –Static map API
と elevation APIを利用 – 富士山：https://voxelcanvas.me/view/?m=bfRyfzSyZDv – グランドキャニオン： https://voxelcanvas.me/view/?m=grandcanyon

GeoVOXEL • v1.2.0からエディターに統合

GeoVOXELの仕組み Google Maps API 地名を送信緯度経度情報を取得 400x400pxのマップ画像を要求 20x20地点の高度情報を要求マップ画像を取得高度情報を取得
レンダリング逆ジオコーディングAPI Static map API Elevation API 処理A 処理B location: {lat: 35.6419478, lng: 139.2773018}

GeoVOXELの仕組み • テクスチャの生成(処理A) – Static map APIで得られた画像をいったんオフスクリーンのcanvas2D に格納してcontext.getImagedata()で画素値取得 • テラインの生成(処理B)
– リクエスト数を減らすため、400x400pxの画像に対して高度は400点のみ取得。バイリニア補間である程度の滑らかさを維持 → この情報をすべてマッピングすることでGeoVOXELを実現

ただ、本当に正しくマッピングできているのだろうか… • Google Earthで確認するとそれっぽくズレなく表示されている • しかしGoogleの地図データに完全に依存した仕組みなので完全な検証はできていない… •
何とかして検証したい…

GEOVOXELの精度検証

ラスベガス – ロサンゼルス間で検証 • たまたま出張でLAS – LAXを飛んだ時にGPSが取れていたので検証 –検証地点はロサンゼルス郊外リアルトから北方面 •
偶然航路だった • 山に挟まれた扇状地で地形ランドマークとしてわかりやすい

撮れた写真

デモ • https://voxelcanvas.me/view/?m=Rialto_zoom12

比較 • 位置はズレずにとれている • エレベーションは現実に即しているが、デフォルメが強くボクセル表現としてはよい感じ。テクスチャはリアルすぎる印象

開発完了2か月後 • GDC2018にて

趣味制作を通して

趣味制作の良かったところ • 自己資金運営なので好きなようにできる –新しい技術など、試したいことがすぐ試せる • ユーザーさんとのつながりができる –Twitterアカウントがあると海外から問い合わせがバンバン来る –ブラジルの学生さんが小学生向けのワークショップで使ってくれたとの報告も

趣味制作の足りないところ • 明確なゴールを設定しないとだれる –コンテストが終わった瞬間目標を見失う • コンセプトが迷子だと作品も迷子になる –複数人で開発する際はなおさら重要 • 製品として出すにはもっとパワーが必要 –法律面やスケールなどパワーが足りなすぎる

まとめ • ボクセルモデリングプラットフォーム「VOXELCANVAS」を開発した – 作成 – 共有 – 閲覧を一本化し、
クリエイター同士のエコシステムを実現 – 趣味の技術デモから海外のユーザーに使ってもらえるまで大きくした！ – Google Maps APIと組み合わせてGeoVOXELを実装した！ • 趣味開発は新しいことを試す場としては最適 – ただだらけなように目標やブレないコンセプトを持つべき – 趣味プロジェクトは趣味プロジェクトと割り切る

ご清聴ありがとうござ
いました！ https://voxelcanvas.me @voxelcanvas

【HTML5 Conference 2018】VOXELCANVAS

【HTML5 Conference 2018】VOXELCANVAS

Other Decks in Technology

Featured

Transcript