【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

View Slide

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

View Slide

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

View Slide

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

View Slide

VOXELCANVAS

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

モチベーション

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

開発話

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

GEOVOXELの
精度検証

View Slide

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

View Slide

撮れた写真

View Slide

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

View Slide

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

View Slide

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

View Slide

趣味制作を通して

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

【HTML5 Conference 2018】VOXELCANVAS

【HTML5 Conference 2018】VOXELCANVAS

ryotaro

More Decks by ryotaro

Other Decks in Technology

Featured

Transcript