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
300
Other Decks in Technology
See All in Technology
ソフトウェア開発現代史: "LeanとDevOpsの科学"の「科学」とは何か? - DORA Report 10年の変遷を追って - #開発生産性_findy
takabow
1
270
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
17k
Vibe Codingの裏で、 考える力をどう取り戻すか
csekine
2
510
上長や社内ステークホルダーに対する解像度を上げて、より良い補完関係を築く方法 / How-to-increase-resolution-and-build-better-complementary-relationships-with-your-bosses-and-internal-stakeholders
madoxten
3
540
AI Engineering Summit Pre Event LT #10
okaru
2
450
SwiftUI Transaction を徹底活用!ZOZOTOWN UI開発での活用事例
tsuzuki817
1
140
OpenTelemetry Collector internals
ymotongpoo
3
200
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
6.7k
impressions-trying-lambda-web-adapter
junkishigaki
2
140
Roo CodeとClaude Code比較してみた
pharma_x_tech
1
170
エンジニア採用から始まる技術広報と組織づくり/202506lt
nishiuma
4
510
Google I/O 2025 Keynote & Developer Keynote Overview
yanzm
0
100
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
7
640
YesSQL, Process and Tooling at Scale
rocio
172
14k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Cult of Friendly URLs
andyhume
78
6.4k
Statistics for Hackers
jakevdp
799
220k
Making Projects Easy
brettharned
116
6.2k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
For a Future-Friendly Web
brad_frost
178
9.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
106
19k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.8k
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