$30 off During Our Annual Pro Sale. View Details »

【HTML5 Conference 2018】VOXELCANVAS

ryotaro
November 24, 2018

【HTML5 Conference 2018】VOXELCANVAS

2018.11.24@TDU

ryotaro

November 24, 2018
Tweet

More Decks by ryotaro

Other Decks in Technology

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

    View Slide

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

    View Slide

  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 ゲ ー ム 部 で
    い つ も お 世 話 に な っ て ま す !

    View Slide

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

    View Slide

  5. VOXELCANVAS

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  11. モチベーション

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  19. 開発話

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  24. View Slide

  25. _人人人人人人人人_
    > getパラメータ <
     ̄Y^Y^Y^Y^Y^Y^Y ̄

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  29. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  44. GEOVOXELの
    精度検証

    View Slide

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

    View Slide

  46. 撮れた写真

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  50. 趣味制作を通して

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide