【HTML5 Conference 2018】VOXELCANVAS

571e540264383981ee292593b867a472?s=47 ryotaro
November 24, 2018
Technology
1
750

【HTML5 Conference 2018】VOXELCANVAS

2018.11.24@TDU

571e540264383981ee292593b867a472?s=128

ryotaro

November 24, 2018
Tweet

Other Decks in Technology

See All in Technology
893dd6e1aa73c35621327c385cb27207?s=48 konnnnnok
0
130
E4763acee4cf0377437f614fc372a061?s=48 tmtms
0
310
53850955f15249a1a9dc49df6113e400?s=48 line_developers
0
140
877f92a3597118cda2715790fa170ad4?s=48 benzookapi
0
110
951ca4f70b5884e18cf3f7e88c441d6a?s=48 issdu
1
440
A645e7c3a6635ead8fa323c583769591?s=48 hololab
0
270
Cd6e67775ba3275c466e9927ede23080?s=48 nk35jk
2
1.5k
C918bcbfa8df32567636c2d125a34fa1?s=48 sonnylazuardi
0
140
Be5b446b2cf48702721bbd428388af52?s=48 satoshishibata0108
0
250
A4d1023b1de7890c67a083d14573882d?s=48 ktgrstsh
0
220
9e7a653ed313b3da4b263a772bfc5026?s=48 clustervr
0
220
9e7a653ed313b3da4b263a772bfc5026?s=48 clustervr
0
480

Featured

See All Featured
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
123
21k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
240
20k
5ce91fa49a613cbc3e20d5f96856473f?s=48 edds
55
9.2k
4262b9cfacfb6b2c77f23e1d0310cd3e?s=48 myddelton
104
10k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
681
180k
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
65
250k
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
84
8.3k
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
2
300
9128d500301ae51524e887bb680f471d?s=48 caitiem20
300
16k
56c4053438af8e8b90d6f53cbb7573be?s=48 jakevdp
766
190k
25c7c18223fb42a4c6ae1c8db6f50f9b?s=48 mojombo
353
62k
A0517b08532aec8ab2aae3f65d40ad86?s=48 hannesfritz
26
850

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