Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
【HTML5 Conference 2018】VOXELCANVAS
Search
ryotaro
November 24, 2018
Technology
1
1.5k
【HTML5 Conference 2018】VOXELCANVAS
2018.11.24@TDU
ryotaro
November 24, 2018
Tweet
Share
More Decks by ryotaro
See All by ryotaro
ITエンジニアが社会人バドサークルを作ったらこうなる
utautattaro
0
260
Other Decks in Technology
See All in Technology
ビジネスと現場活動をつなぐソフトウェアエンジニアリング~とあるスタートアッププロダクトの成長記録より~
mizunori
0
210
生成AIの利活用を加速させるための取り組み「prAIrie-dog」/ Shibuya_AI_1
visional_engineering_and_design
1
140
地方拠点で エンジニアリングマネージャーってできるの? 〜地方という制約を楽しむオーナーシップとコミュニティ作り〜
1coin
1
130
モノレポ開発のエラー、誰が見る?Datadog で実現する適切なトリアージとエスカレーション
biwashi
6
770
組織貢献をするフリーランスエンジニアという生き方
n_takehata
1
1k
High Performance PHP
cmuench
0
140
Developer Summit 2025 [14-D-1] Yuki Hattori
yuhattor
19
5.1k
Bounded Context: Problem or Solution?
ewolff
1
210
CZII - CryoET Object Identification 参加振り返り・解法共有
tattaka
0
240
自動テストの世界に、この5年間で起きたこと
autifyhq
10
7.1k
エンジニアの育成を支える爆速フィードバック文化
sansantech
PRO
3
670
Ask! NIKKEIの運用基盤と改善に向けた取り組み / NIKKEI TECH TALK #30
kaitomajima
1
450
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
540
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Thoughts on Productivity
jonyablonski
69
4.5k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
Producing Creativity
orderedlist
PRO
343
39k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Designing for humans not robots
tammielis
250
25k
Docker and Python
trallard
44
3.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Transcript
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未対応という点に最後まで悩まされる
• ここまで来ると 保存したくなる
保存機能実装 • フロントエンドの技術デモなので サーバーを用意するのはめんどい • だとすると、どこに保存しよう?
None
_人人人人人人人人_ > 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程度
None
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