Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

【Inter BEE2018】VRもリッチメディア広告も全部Web上で実現!PlayCanvasと作る次世代Webコンテンツ(2018/11/14講演)

265 views

Published on

Inter BEE 2018にて講演

Published in: Engineering
  • Be the first to comment

【Inter BEE2018】VRもリッチメディア広告も全部Web上で実現!PlayCanvasと作る次世代Webコンテンツ(2018/11/14講演)

  1. 1. VRもリッチメディア広告も全部Web上で実現! PlayCanvasと作る次世代Webコンテンツ PlayCanvas運営事務局 The Web-First Game Engine Collaboratively build stunning HTML5 visualizations and games
  2. 2. 本日のアジェンダ • 本セッションは、3部構成で進行します! – 開発から公開まですべてWebブラウザで!PlayCanvasのご紹介 – ビジュアライゼーション2D/3D表現をWeb上で – PlayCanvas × 〇〇でなにしよう? 本日の公開資料情報をTwitterでお知らせしています! “@playcanvasJP” で検索してみてください!
  3. 3. 開発から公開まですべてWebブラウザで! PlayCanvasのご紹介 PlayCanvas運営事務局 櫟 香菜 The Web-First Game Engine Collaboratively build stunning HTML5 visualizations and games
  4. 4. 自己紹介 【略歴】 メインフレーム、Windows など OS周りのパフォーマンスの テクニカルサポートをやってきました! 2016年10月 より GMOクラウド株式会社 PlayCanvas運営事務局へ テクニカルサポート、イベント出展など担当しています GMOクラウド株式会社 PlayCanvas運営事務局 テクニカルアドバイザー 櫟 香菜(いちいかな)
  5. 5. アジェンダ 01. イントロダクション 02. PlayCanvasの解説 03. PlayCanvasの活用事例
  6. 6. 01. イントロダクション
  7. 7. メディアコンテンツとWeb メディアコンテンツとWeb ・・・と聞いて何を思い浮かべますか?
  8. 8. メディアコンテンツとWeb ・・・WebVRで・・・! メディアコンテンツから Webへの 広がりが多様化 SNSで・・・ 各種Webページで・・・ Webコンテンツの展開において”これがいい!!” という最適な方法を見つけるのがなかなか難しい
  9. 9. PlayCanvasを使ってみませんか? 迷っているあなた・・・
  10. 10. 解説をはじめる前に まずは触ってみましょう! Twitterで“あんずフォト”と検索!
  11. 11. あんずフォト(Twitter Player Card) 【参考URL】 https://twitter.com/MikumoAnzu/s tatus/1016876254396444672 【ジャンル】 Twitter/リッチメディア広告 【コメント】 3Dキャラクタの モーション/表情/服 装のカラーバリエーションをそれぞれ 変化させ、かつ写真を取ってTwitter 上でシェアできるようになっていま す! 【PlayerCardとは】https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/player-card.html
  12. 12. 02.PlayCanvasの解説
  13. 13. PlayCanvasとは 開発 公開 コミュニケーション 2D/3D/XRコンテンツを Webブラウザ上で開発~公開できる HTML5 WebGLに対応しているクラウド型開発エンジン
  14. 14. WebGL (Web Graphics Library)とは WebGL (Web Graphics Library) は、互換性がある Webブラウザでプラグインを使用せずにインタラクティブ な 3D グラフィックスや 2D グラフィックスをレンダリン グするための JavaScript API です。 HTML5 <canvas> 要素へ OpenGL ES 2.0 に密接に従っ た API を導入することにより、WebGL を実現します。 外部のツールを一切インストール無しで実行可能 ブラウザが WebGL に対応していれば、PC だけでなくモバイル端末などで も同様のコンテンツを配信することができ、 マルチプラットフォームな開発が行えるのが特徴 MozillaDeveloperNetworkより https://developer.mozilla.org/ja/docs/Web/API/WebGL_API
  15. 15. WebGL対応とPlayCanvas • 2018年11月現在、大方のブラウザでWebGL対応済 • WebGL(v1/v2)に対応したブラウザであればPlayCanvasは大体動く • モバイル、PCいずれでも 出
  16. 16. PlayCanvasを利用するメリットは? WebGLに対応したブラウザ WebGLに対応した開発環境 * 他にも対応しているブラウザは もちろんあります。 PlayCanvas を 利用する メリットは?
  17. 17. メリット1:利用開始が簡単! • メールアドレス、パスワード、アカウント名の入力だけ • 追加のPluginやソフトウェアのインストールの一切必要なし! • ネットワークとWebGL対応ブラウザがあればどこでも利用可能!
  18. 18. メリット2:Webに特化した軽量なエンジン • ランタイムコード、スクリプト、いずれもJavaScript – コンパイルをはさむ必要がないため、軽量、高速、即時性 – モバイル対応もしている (スマフォブラウザゲーム、WebVRなど)
  19. 19. メリット3:ビジュアルエディタを備えている • WebGLに関する深い知識がなくてもプロジェクトが開発~公開可能 • 他のWebGLライブラリは存在するが、コードベースでの開発になりがち
  20. 20. メリット4:無料からはじめられる 日本語サイト“playcanvas.jp” をご確認ください!
  21. 21. プランごとの機能差 • Freeプランには・・・ – 200MBのストレージがある – サーバの準備が不要で、公開が可能 • Personalプランになると・・・ – プライベートプロジェクト数無制限! – セルフホスティング用にエクスポート可能 • Organizationプランになるとさらに・・・! – Loading画面のロゴ変更 (通常はPlayCanvasロゴ) – チーム管理 – REST APIへのアクセス可能
  22. 22. メリット5:共同編集ができる • 共同編集可能 – 1プロジェクトを複数人でチャットなど利用して編集可能! 共同編集者の視点や 選択している オブジェクトがわかる チャット画面
  23. 23. まだまだあります!こんなメリット! • 即時反映 – PCで作業を行い、スマフォですぐに確認可能 • 豊富な3D要素に対応 – FBX/OBJデータをインポート可能 • WebVR対応 – VR Starter Kit があるので、簡単にWebVRの実現が可能 • 他の人が作ったアプリの開発内容が確認できる – Publicのプロジェクトであれば、Forkすることで、 プロジェクトのEditor画面を閲覧・編集することが可能 2部で解 説! 3部で解説!
  24. 24. 03.PlayCanvas利用事例
  25. 25. Disney~Moana 【参考URL】 https://hourofcode.com/moa na 【ジャンル】 Webサイト/教育向けコンテン ツ 【コメント】 映画作品キャラクターを利用し て、Web上で利用できる子供向 けプログラミング教材を PlayCanvasで制作した事例です。
  26. 26. BMW i8 【参考URL】 https://playcanv.as/p/RqJJ9oU9/ 【ジャンル】 3Dモデルビジュアライゼーション /リッチメディア広告 【コメント】 車の外見だけでなく、運転席にも座った状 態の内部も確認できます! ポリゴンモデリングとテクスチャ、シェー ダー、ポストエフェクト、というリッチな 表現方法を高速で表示することが可能です。
  27. 27. Facebook インスタントゲーム 【参考記事】 KLabがFacebookインスタントゲームでゲームエンジンにPlayCanvasを採用! ネイティブゲームとは異なる、さくっと遊べるカジュアルゲームの魅力とは? – https://support.playcanvas.jp/hc/ja/articles/115012926008 【参考URL】 https://www.facebook.com/Kaburin Ball/ 【ジャンル】 Facebook/カジュアルゲーム 【コメント】 Facebookインスタントゲームに PlayCanvasが利用された事例です。 2Dモデルを利用しながら奥行きを持 たせるなど、PlayCanvasならではの 表現を実現しています。
  28. 28. まとめ • PlayCanvasはWebGL対応している、 Webコンテンツ開発~公開に最適なエンジンです! • 利用事例も多く、他のWebメディアへの連携も可能です!
  29. 29. 2部へ続きます!
  30. 30. ビジュアライゼーション 2D/3D表現をWeb上で PlayCanvas運営事務局 宗形 修司 The Web-First Game Engine Collaboratively build stunning HTML5 visualizations and games
  31. 31. 本日のアジェンダ • デザイナー視点から見たPlayCanvasとは • PlayCanvas Editorへログイン • PlayCanvasでの3D表現 • PlayCanvasでの2D表現 • 他にも色々、PlayCanvasでできること
  32. 32. 登壇者の自己紹介 • 宗形 修司 – テクニカルアーティスト/3DCGデザイナー キャラクター/背景/エフェクト/UIなど一通 り – 2017年12月よりPlayCanvas運営事務局 – デザイナー目線でPlayCanvasを広める ために活動中
  33. 33. デザイナー視点から見たPlayCanvasとは
  34. 34. デザイナー視点から見たPlayCanvasとは – ビジュアライズされ操作しやすい3Dエディター/2Dエディター! – 3Dデータ2Dデータを簡単にインポートできる! – PhongShaderベースのマテリアル&物理ベースドライティングを採 用し、リッチなビジュアルも容易に構築可能! (GLSLによるオリジナルシェーダーも実装可能!) – ビルドを挟まず、即実行環境で確認できるので作業効率が高い! – パブリッシュされたURLから主要なブラウザなら実行できる! もちろんモバイルでも品質を落とさず滑らかに実行される!
  35. 35. デザイナー視点から見たPlayCanvasとは PC:Firefox Quantum 63.0.1 Mobile:iPhone6 BMWデモをPCブラウザとモバイルから 実行した場合比較です。 ほぼクオリティの差はありません。
  36. 36. デザイナー視点から見たPlayCanvasとは • 豊富な3D要素 – FBX/OBJデータをインポート可能 – 3Dモデルアニメーションの 自動ブレンディング – 高品質なマテリアルで設定可能な 要素も豊富 – シェーダーもGLSLで書ける – イメージベースドライティング(IBL) 物理ベースレンダリング(PBR)採用 設定も簡単 Mozilla Firefoxブラウザで実行した IBLの効果確認用プロジェクト
  37. 37. PlayCanvas Editorへログイン https://playcanvas.jp/
  38. 38. PlayCanvas Editorへログイン
  39. 39. PlayCanvas Editor • PlayCanvas Editorの構成要素 ヒエラルキー(HIERARCHY) シーン内に存在するオブジェクト の一覧が表示されます。 編集中の シーン内でオブジェクトをコピー/ ペーストしたり、適切な名前をつ けて整理することもできます。 アセット(ASSETS) 製作中のプロジェクト(ゲーム全 体)に含まれるモデル、スクリプ ト、グラフィックやサウンドなど のデータ、その他のリソースが ファイル単位で表示されます。 インスペクター(INSPECTOR) シーンの中で選択肢中のオブジェクトが持つ属性を 表示・編集するためのビューです。 属性には座標 やメッシュといった見た目上のものから、衝突判定 や物理制御に関するパラメーターなどもあり、その 他ユーザー定義のものもここに表示されます。 シーン(SCENE) シーンビューには製作中のゲーム世界 (シーン)が表示され、自由な位置・角 度から眺めることができます。 メニュー(MENU) シーンのビューモードやプロジェク トセッティング等の作業が行えます。
  40. 40. PlayCanvasでの3D表現
  41. 41. PlayCanvasの3D表現 • PlayCanvasでの3Dモデルデータの扱い方 • 3Dmodel/Texture制作 – 3D統合ソフトでキャラクター その他要素をモデリング。 – テクスチャーをマテリアルに適用 • Animation制作 – 各要素にキーフレームアニメーションを 追加 • FBX Export – メディアに組み込み等の設定を行いエクス ポートするとPlayCanvasにインポートした ときにPlayCanvas側のマテリアルに各種 MAPが反映される
  42. 42. PlayCanvasの3D表現 • PlayCanvas Editorで3Dモデルを扱う FBXはドラック&ドロップで自動的にJSON に変換 テクスチャも用途に応じた圧縮が設定可能
  43. 43. データ見比べてみましょう! PlayCanvas ビューポートMAYA ビューポート ローンチ画面
  44. 44. PlayCanvasでの2D表現
  45. 45. PlayCanvasの2D表現 PlayCanvasの 標準機能 ミドルウェアで対応 • 2D機能 – Static UI – Dynamic UI – UI Animation – Text – 2D physics – Particle – Sprite Animation – 9slice texture – Character animation ※PlayCanvasではSpineのデータが使えます
  46. 46. PlayCanvasでの2D表現 • Sprite Editorの構成要素 フレーム(Frames) フレームはテクスチャアトラスの 定義された領域です。 フレームに は、名前、位置とサイズ、境界線 があります。 スプライトアセット (Sprite Assets) アセットパネルには、現在のテク スチャアトラスから作成されたす べてのスプライトアセットが表示 されます。 インスペクター(INSPECTOR) インスペクタパネルには、現在選択されている項目 のプロパティが表示されます。 インスペクタは、 選択した項目がテクスチャアトラス、フレームまた はスプライトアセットのいずれであるかによって異 なります。 ビューポート(Viewport) スプライトエディタのビューポートには、 現在選択されているテクスチャアトラス が表示されます。
  47. 47. PlayCanvasでの2D表現 • TextureAtlasからシーンへ ・Textureatlasアセット 元画像をAtlas化したpng ダブルクリックでSprite Editor が立ち上がります。 ・Spriteアセット SpriteEditorで編集し たデータ。シーンに配 置するのはこっち
  48. 48. 他にも色々、PlayCanvasでできること
  49. 49. 他にも色々、PlayCanvasでできること • VR対応 – プロジェクト制作時にVR環境用プロジェクトを選択可能 – PlayCanvasオリジナルVRシート有り – QRコードでVRシーンを共有 • ゲーム以外でも – PlayCanvasで制作した商品説明や室内ウォークスルーと 言ったコンテンツをIframeを用いてサイトに簡単に埋め込み可能 – インタラクティブ性の高い3DWebサイトの構築
  50. 50. PlayCanvas × 〇〇で なにしよう? PlayCanvas運営事務局 津田良太郎 The Web-First Game Engine Collaboratively build stunning HTML5 visualizations and games
  51. 51. 本日のアジェンダ ◼ Webでできるようになったこと ◼ PlayCanvas × 〇〇で何しよう? ◼ まとめ
  52. 52. 本パートの結論 • Web標準で実装可能な技術が近年多く増え、 今やネイティブと遜色のない表現が可能になっています。 • 本パートでは私が最近注目しているWeb技術を紹介し、 それぞれPlayCanvasと組み合わせることで、どのような新しいコ ンテンツが作れるかイメージ頂けたら幸いです。
  53. 53. 登壇者の自己紹介 ◼ 津田良太郎 @utautattaro ◼ Webとゲームの間を行ったり来たりなエンジニア ◼ 短期間でいろいろ作るプロトタイパー ◼ 趣味は旅行とバドミントン ◼ PlayCanvas運営事務局(2016.4 - ) ◼ utautattaro.com
  54. 54. Webでできるようになったこと
  55. 55. その前に、環境としてのWeb ◼ ブラウザのサードパーティプラグインが廃止傾向になり、 Web技術はW3CによるWeb標準技術にくくられHTML5の時代に ◼ ネイティブ環境は環境的/技術的制約も少なく、 アプリストア等のネイティブ市場も発展 ◼ Web標準技術もネイティブと同等の環境にという流れが起き 技術的制約解除やパフォーマンス向上等、日々進歩している
  56. 56. Webでできるようになったこと  WebGL  VR  Stream API (getUserMedia)  リアルタイム通信  フィジカルコンピューティング
  57. 57. WebGL • Web標準の2D/3Dレンダリング技術 – インストールなし、Webアクセスだけで、 グラフィカルなコンテンツが再生可能になった! After the Flood - PLAYCANVAS
  58. 58. VR • Web上で再生可能なVRコンテンツ「WebVR」が登場 • JavaScriptでVRコンテンツを開発、Web上にホストできるように • ブラウザ側はハイエンドHMDに対応、スマホブラウザもサイドバイ サイドレンダリングやジャイロといったスマホVR向けのAPIを公開 • 現在はKhronos Groupが様々なVR/ARプラットフォームで仕様を 標準化する仕組み「OpenXR」を策定
  59. 59. Stream API (getUserMedia) • ブラウザから端末のハードウェアにアクセス できるように! – カメラ/マイク • PCではもともとできたが、 iOS11からiPhoneのsafariでもアクセスでき るようになった Can I use ? | getUserMedia
  60. 60. リアルタイム通信 • 非同期通信はWebでは当たり前だったが、 チャット等の需要が増え同期通信の選択肢も増えた – WebSocket (TCP上で低コストな双方向通信) – WebRTC(stream APIで取得した音声や映像を同期) • ブラウザ上で完結するビデオチャットアプリも開発可能に appear.in – Easy video conversations
  61. 61. フィジカルコンピューティング • WebとHCI(Human Computer Interaction)領域も活発 • JavaScriptで制御可能なマイコンボードが登場 • ブラウザから直接機器にアクセスできるWeb Bluetooth APIも登場 各種ブラウザの実装が進む Can I use? | Web Bluetooth obniz: Make everything online
  62. 62. PlayCanvas × 〇〇でなにしよう?
  63. 63. PlayCanvas × 広告 • WebGLは次世代のプロモーションツール! • 広告表現は画像から動画へ – 近年は縦型動画が人気 • さらにその先のインタラクティブ広告へ!
  64. 64. インタラクティブ広告の利点 • 広告自体がコンテンツになる • 複数のKPIが設定できる
  65. 65. PlayCanvas × VR • インストール不要なVRアプリケーションが開発可能 – Oculus Goと組み合わせればブラウジングからのシームレスなVR体験
  66. 66. PlayCanvas × VR × リアルタイム通信 • リアルタイム通信機能を加えることで、ソーシャルVRに! – URLを渡すだけ!複数人でVR空間を共有
  67. 67. PlayCanvas × フィジカルコンピューティング • obnizを使ってお手軽IoT – PlayCanvasで住居をビジュアライズ、操作で照明がつく等
  68. 68. まとめ ◼ Webでできることはどんどん増えています! ◼ PlayCanvasと組み合わせて 新しいWeb表現に挑戦してみませんか!
  69. 69. さいごに
  70. 70. ブース出展してます! • ブース番号7002番 デモを用意してお待ちしております! 黒の社名版が目印!
  71. 71. イベントやります! • ブラウザゲーム開発環境勉強会! – ミドルウェア企業と一緒に最新のブラウザゲーム開発環境につ いてお話します!
  72. 72. ご清聴ありがとうございました

×