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.

Web3Dでメディア表現をもっと豊かに -PlayCanvasで作る次世代Web表現-

472 views

Published on

2019/11/14 InterBee 2019 にて行なったセッションの資料です。

Published in: Engineering
  • Writing a good research paper isn't easy and it's the fruit of hard work. For help you can check writing expert. Check out, please ⇒ www.HelpWriting.net ⇐ I think they are the best
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Web3Dでメディア表現をもっと豊かに -PlayCanvasで作る次世代Web表現-

  1. 1. Web3Dでメディア表現をもっと豊かに -PlayCanvasで作る次世代Web表現- GMOクラウド株式会社 PlayCanvas推進室 宗形 修司 / 城戸 雄大 / 羽賀流登
  2. 2. テクニカルアーティスト/3DCGデザイナー オンラインゲーム、アプリ… PVのキャラクター / 背景 / エフェクト / UI などを一通り 2017年12月よりPlayCanvas運営事務局 デザイナー目線でPlayCanvasを広めるために活動中 宗形 修司 / モックを作る人 @shujimuna 登壇者
  3. 3. • PlayCanvasとは • PlayCanvas × VR/AR × H2MDで新しい広告表現を【デモ紹介】 • 3Dモデルの構成とPlayCanvas上の設定 • ポストエフェクトとVRの開発について • H2MD - ムービーテクスチャのススメ • まとめ • 小休憩 • PlayCanvas x WebXR 目次
  4. 4. PlayCanvas とは
  5. 5. • WebGLゲーム開発エンジン 3D要素に強く、カジュアルゲームから、 リッチコンテンツまで幅広く開発が可能 • クラウド型の開発エンジン エンジンのインストールや プラグインのダウンロードが不要 • 中身はオールJSの軽量なエンジン コンパイルをはさむ必要がなく、 即時性が高いのが特徴 • 詳しくは 過去講演: https://bit.ly/2Mu1JgV 利用事例: https://bit.ly/2KknMUr PlayCanvasの特徴
  6. 6. モバイルとPCでクオリティを比較 PC Firefox 63.0.1 iPhone6 モバイル/PC/Oculusなどでも同一の品質で動作
  7. 7. • WebGLが動く環境なら 3Dコンテンツを使うためにWebGLが必要 • WebGLの学習コストも除く PlayCanvasには独自のEditorがあるため、 WebGLの知識がなくても開発可能 • Web広告をリッチに Adobe Flash もサービス終了する中 リッチコンテンツを容易に作成可能 ゲームだけでなく広告やWebにも
  8. 8. HTML内のcanvasに HTML CSS• 基本的には1枚のcanvas カジュアルゲームでもリッチコンテンツ でもPlayCanvasからビルドしたデータは HTML内のcanvasに入れることができる
  9. 9. 主要ブラウザでの対応状況 • ブラウザ上で動作。HTML5ゲームプラットフォームも対応 – webGL(V1/V2)に対応したブラウザなら、現状ほぼ全てのブラウザで動作する – エンジン自体の多くはES5(ECMAScript5)で記述されている。 ※ ES5 以降のバージョンでも基本的に問題はない 2019年8月時点
  10. 10. 特徴的な3D機能 • 3Dモデルアニメーションの 自動ブレンディング • コリジョン/リジットボディを ワンクリックで設定 物理シミュレーション可能 • フィジカルベースドレンダリング (PBR) • フィジカルシェーダーベースの 高品質マテリアル (各設定項目も豊富) • イメージベースドライティング (IBL) • シェーダーもGLSLで書ける PlayCanvas 3D Feature
  11. 11. • SaaS型クラウドサービスとして提供 • 開発環境の構築必要なし! • メールアドレス一つで登録、利用開始可能 • ブラウザ上で動くビジュアルエディタ! • 初めての人でもHTML5ゲームが 簡単に作れる環境が整っています! PlayCanvasとは… - まとめ
  12. 12. PlayCanvas × VR/AR × H2MDで新しい広告表現を
  13. 13. • PlayCanvasでWebVRを使用したデモ • VRシートをかぶるだけで見ることができます • 3D空間上に広告を貼り付けるというコンセプト 今回の展示物について VR – Planet https://pcpo.sabo.jp/vr-planet QRコードからスマホで デモを体験
  14. 14. • 開発期間は2週間 • 使用した技術 : PlayCanvas / H2MD / WebVR • 開発人数は : 3人 フロント : 2人 3Dモデラー : 1人 展示物を作るにあたって
  15. 15. 構成 開発 スマートフォンやPCのデバイス 静的なファイルを配信 デプロイ PlayCanvas Editorで開発
  16. 16. PlayCanvas × VR/AR × H2MD
  17. 17. 3Dモデルの構成と PlayCanvasビジュアルエディターの設定
  18. 18. 3Dモデルデータの構造 Blender2.8でモデルを作成 テクスチャはphotoshop 総Poly△47,499 シンプルなモデル組み立て Material:カラー / スペキュラ / エミッシブ / ノーマルマップ ライティング: PlayCanvas上のリアルタイムライトを使用 この段階ではイメージとしてディレクショナルライトを置いてある
  19. 19. 3DモデルデータPlanetの構造 Staticな3Dモデルを作成。マテリアルは1つにしたかったので UV展開を緑地、砂地、海、樹木、モニターのパーツという形に 分類して作成。
  20. 20. 3DモデルデータLoadとlightの構造 青白い光がスクロールするように UVテクスチャを縦に展開。 オリジナルスクリプトで制御。
  21. 21. 3Dモデルデータbuildingの構造 • Blender2.8のモディファイア 「シュリンクラップ」を使用し、 planetの周りに配置。 • 各ビルの形状毎にUVを展開し、 H2MD (ムービーテクスチャ) が 適用可能な状態にした。
  22. 22. 3Dモデルデータmonitorの構造 ビルのUV展開と同様に平面型モニターと 円柱型モニター等に分けて展開。
  23. 23. 3DモデルデータBlender マテリアル Blender2.8のデフォルトマテリアル 「プリンシプルBSDF」を 新規に1つ作成し、 各項目へ画像テクスチャをアサインしておく。
  24. 24. 3DモデルをFBXへExport Blenderで作成した3DデータをPlayCanvasに インポートできるように .fbx の設定を一部変更する
  25. 25. PlayCanvasへFBXをImport ローカルフォルダからFBXファイルを PlayCanvasのビジュアルエディター内の ASSETS欄へドラッグ&ドロップするだけで、 Javascriptが解読可能なjson形式へ自動変換される。 また、FBXの設定が正しく行われていると オブジェクトに設定されたマテリアル、 マテリアルにアサインされたテクスチャも 同時に展開される。
  26. 26. PlayCanvas内のFBXを削除 FBXをドラッグ&ドロップでインポートすると .fbx がASSETS欄に残っている。 実際に使用されるのは .json のデータなので .fbx は削除して問題ない また、マテリアルに関しても共通で使用している マテリアル&テクスチャの複製は削除しても 問題ない
  27. 27. PLAYCANVAS - ADD COMPORNENT • 物理シミュレーションを 実現するための「Rigit Body」 • 当たり判定を取るための「Collision」 • 自由度の高い「Paeticle System」 • 2Dアニメーション用の「Sprite」 • UI作成用の「2DScreen」 等々… コンテンツ作成に必要な基本要素は 全て揃っている
  28. 28. PlayCanvasのマテリアル設定 PhongshaderとPhysicalShaderが用意されているが、 デフォルトで使用するのはPhysicalShaderになる。 レンダリングはフィジカルベースドレンダリングなので Specular内でMetalness/Glossnessの設定が 可能になっている。
  29. 29. PlayCanvasでのマテリアル設定を見てみる
  30. 30. Lounch
  31. 31. • ローカルからBFXをドラッグ&ドロップでインポート完了 • JavaScriptで扱えるjsonデータに自動変換 • マテリアルはフィジカルシェーダに対応したリッチな構造 • コンテンツ作成に必要なコンポーネントが既に揃っている • FBXデータなら特別なコンバートはしないでPlayCanvasで使える • 簡単にゲームやコンテンツを作成できる環境が既に整っている 3Dモデルの構成とPlayCanvas上の設定まとめ
  32. 32. ポストエフェクトとVRの開発について
  33. 33. 登壇者 GMOクラウド / PlayCanvas運営事務局 よく PlayCanvasでモックなどを作っている ハンズオンなどを開いています 羽賀 流登 / はが りゅうと @mxcn3 技術書典で 「実践PlayCanvas」を販売
  34. 34. PlayCanvasでどうやってVRのゲームを開発したか
  35. 35. 今回のデモにある機能 • エフェクト • VR PlayCanvasの開発について
  36. 36. エフェクトについて エフェクトを入れている状態 エフェクトを入れていない状態
  37. 37. PlayCanvasでVRやエフェクトを入れるには?
  38. 38. コードを書く
  39. 39. どうやってプログラムを書くのか?
  40. 40. PlayCanvasのエディターの操作をする Scriptはエディターから追加する • Script = JavaScript - CSS - Text - JSON - HTML - Shader New Assetから 追加できる
  41. 41. PlayCanvasのエディターの操作をする PlayCanvasのコードエディター • JavaScript - シンタックスハイライト - Snippetの置換など 基本的な機能は備えている
  42. 42. コードの書き方に迷ったら https://developer.playcanvas.com/ja/ コードの書き方に迷ったら • PlayCanvasディベロッパーリソース - APIリファレンス - サンプル集 - テクニック
  43. 43. 今回の開発について
  44. 44. コードはあまり書いていない
  45. 45. デモで使用をしたエフェクトについて
  46. 46. Post Effectについて エフェクトについて • アセットストアのエフェクト - ダウンロードをクリック - 今回使用したポストエフェクト 「bloom」 - カメラに付与するだけで完了
  47. 47. アセットストアというものがある アセットストア • 3Dモデル • Cubemap • エフェクト などが用意されている すべて無料
  48. 48. 今回使用しているエフェクトについて
  49. 49. ライブラリからインポートをする Libraryをクリック 使用したいアセットをクリック
  50. 50. PostEffectについて ここからダウンロードできる
  51. 51. PostEffectについて ここからダウンロードできる 使用するプロジェクトを選択
  52. 52. PostEffectを使用する Scriptについて • カメラにアタッチするだけで使える
  53. 53. スクリプトをアタッチする
  54. 54. PostEffectを使用する 1 2 Scriptをアタッチする方法 1. エンティティを選択 2. SCRIPTから追加
  55. 55. PostEffectを使用する 2 Bloomを入れている状態 Bloomを入れていない状態
  56. 56. Bloomの調整について 1. GUI上から設定の変更ができます 設定の調整について 1 2
  57. 57. VRについて
  58. 58. VRについて VRについて • 画面のVRゴーグルのアイコンをタップ するとVRの表示に切り替わる
  59. 59. VRをPlayCanvasで実装するには?
  60. 60. VRのスターターキットがある VRスターターキット • 新規プロジェクトから作成可能 • 基本的なVRの設定が一式入っている
  61. 61. VRのスターターキットがある VRスターターキット • 起動するだけでWebVRが楽しめる
  62. 62. PlayCanvasで実際にVRの開発をするには
  63. 63. スターターキットからVRのファイルをコピー VR関係のスクリプトについて • web-vr-ui.js • webvr-polyfill.min.js この2つのスクリプトをVRスターターキットから 自分の作ったプロジェクトにコピーするとVR化が 出来る
  64. 64. PlayCanvasでコンテンツを作る スクリプトの内容をコピーすると 1. VR化するCameraを選択 2. VRゴーグルのアイコンで使う画像を設定
  65. 65. PlayCanvasでコンテンツを作る VRのスクリプトを入れた後 VRのスクリプトを入れる前
  66. 66. ゲームを起動する ゲームを起動する • スマートフォンの傾きを検出している
  67. 67. PlayCanvasの開発について(VR) • 公式のサンプルがあるものを使用するとかなり高速で開発できる • VRのコントローラーがつくと少しコーディングが必要になる まとめ
  68. 68. H2MD - ムービーテクスチャのススメ
  69. 69. 登壇者の紹介 2019年4月よりPlayCanvasの非ゲームへの展開に向けて、 PlayCanvas推進室に参画。 それまでの前職ではweb制作会社で制作を一任。 主にマークアップとWordPressによる開発をメインとしていた。 Webの知識をPlayCanvasで活かす要素を模索。 Web以外にも映像やフライヤーなどデザインの制作なども行なっている。 キドユウタ / Kido Yuta
  70. 70. • ムービーファイルを読み込み • テクスチャに貼り付けて ムービーテクスチャへ • ムービーテクスチャを 3Dモデルのマテリアルに適用 PlayCanvasでのムービーテクスチャ
  71. 71. • 従来の方法ではアルファチャンネルは対応できない • H2MDを用いてアルファチャンネルを対応させる ムービーテクスチャのアルファチャンネル 従来のムービーテクスチャ H2MDムービーテクスチャ
  72. 72. H2MDとは ?
  73. 73. • 株式会社アクセルが手がけるムービーミドルウェア • ページ内再生・自動再生・アルファチャンネルの活用・複数同時再生を 行うことができる • JPEG連番のMotion JPEGよりも少ないデータサイズに動画を圧縮が可能 • HTML5の動画再生ソフトウェアライブラリ、Unity用のライブラリも • HTML5のCanvasに対応したブラウザで使用可能 HTML5動画再生ソフトウェア https://h2md.axell-embedded.com/
  74. 74. PlayCanvasでもH2MDが使えます
  75. 75. • コマンドラインエディター - mp4などの動画からH2MDファイルに変換 - Win, Mac共に対応 • プレビューツール - H2MDファイルをプレビュー再生できる • JavaScriptライブラリ - HTML5でH2MDファイルを再生するための ライブラリ - JavaScript API H2MD - SDK
  76. 76. アルファを保持したムービーテクスチャ 従来のムービーテクスチャ H2MDムービーテクスチャ
  77. 77. H2MD変換前の動画の作り方 H2MDを使うために、ムービーテクスチャ用の動画作成方法
  78. 78. • 3Dデータからテクスチャマップをもらい、動かしたい範囲をテクスチャ マップから算出 UVテクスチャマップからムービーにする範囲を決める AEに取り込んだモニターのマッププラネット上の建造物のマップ
  79. 79. • 動かしたい範囲に任意のアニメーションを作成 • 必要に応じてUVの範囲に合わせてマスクを切る AfterEffectsでテクスチャに動きを作る AEに取り込んだモニターのマッププラネット上の建造物のマップ
  80. 80. 細かいテクスチャはエフェクトを使って対応 エフェクト 白黒・輝度&コントラスト レイヤーモード ステンシルルミナンスキー • 建造物のマップのようなラインアニメーションはエフェクトとレイヤー モードを使ってマスクを切る
  81. 81. 出来上がった動画たち
  82. 82. • AfterEffects , Encode を使って アルファチャンネルを保持した 動画を書き出し • 動画形式は.mp4でも.aviでもOK • 書き出した動画をH2MDの エンコーダーで.h2mdを作成 アルファを保持して動画書き出し
  83. 83. 作成した.h2mdをPlayCanvasで使用する
  84. 84. • H2MDにはPlayCanvas用のライブラリがある - H2MDTexture.js H2MDファイルを操作するスクリプト - h2md.min.js H2MDのJavaScriptライブラリ H2MDをPlayCanvasで使う
  85. 85. Scriptの属性から各種設定 • マテリアルとそれに該当するH2MDを選択 • 選択した属性を配列で管理 - 配列の順番にマテリアルとH2MDを適用する - 設定次第でDiffuseMapを適用するしないも 設定可能
  86. 86. 本プロジェクトでのH2MDの使用 • 浮いている半透明ディスプレイ - 近未来な広告 • プラネット上の建造物 - 近未来なビルの装飾
  87. 87. H2MDTexture.jsの中身 コードはこれだけ! でも、コードの解説は 本セッションでは 行いません。 後日、当プロジェクトの 技術記事を投稿する 予定です。
  88. 88. • H2MDにより、アルファチャンネル動画をコンテンツ内で使用可能に • これにより、より豊かな表現を作れるようになった • 少ないコードで動画を使ったリッチコンテンツを作成できる H2MD - まとめ
  89. 89. まとめ
  90. 90. • 最新技術や動画を使うことで新しい広告表現を模索 • PlayCanvasによって、ブラウザとURLを共有するだけでコンテンツを配 布できる • H2MDによって、アルファチャンネル動画を使いより豊かな表現を作るこ とができる • WebXRの技術により、皆持っているスマホで最新技術をブラウザを通じ て体験することができる まとめ
  91. 91. Hands-On / セミナー / MeetUp 告知
  92. 92. 3D Hands-On 【ハンズオン】WebGLで動く3DブラウザゲームをPlayCanvasで簡単に作っちゃおう ~タンクバトルゲーム /初級編~ https://bit.ly/2X54rN1 作成するゲームはキーボード入力で戦車を操作し、弾を発射して敵を倒す「戦車ゲーム」です。 PlayCanvasにおける基本操作を詰め込んだ内容となっています。
  93. 93. 3D Hands-On 【ハンズオン】HTML5/WebGLで動く2DブラウザゲームをPlayCanvasで作っちゃおう ~2D横スクロールゲーム /初級編~ https://bit.ly/2pTGWuv Spriteエディターを使ってanimated spriteアセットを作成し、実際にシーンを編集したり スクリプトを記述したりして簡単な2Dアクションゲームを構築するチュートリアルです。
  94. 94. 3D Hands-On 【ハンズオン】ソーシャルVRアプリをつくろう! ~1時間で複数人参加型のWebVRアプリを開発~ https://bit.ly/36XRCso WebGL・WebVR開発が可能なPlayCanvasと、手軽にマルチプレイの実装が可能なPhotonを利用して、 1時間でOculus Goでも動作可能なソーシャルVRの簡単なモックを作るハンズオンです。
  95. 95. 3D Hands-On 【ハンズオン】PlayCanvasで3D空間を使った簡単webサイトを作ってみる https://bit.ly/34P2QOa PlayCanvasを使って3D空間のコンテンツを作成し、その上にhtmlの要素を配置して、 LPページ(ランディングページ)やキャンペーンサイトのようなwebサイトを作成していきます。
  96. 96. 3D Hands-On 【ハンズオン】実践PlayCanvas!ゲームの開発から公開する流れを体験しよう! PlayCanvasを使ってコインドーザーの作成~公開までを皆さんと作成していくハンズオンです。 詳しい内容については、後日Conpassで告知させて頂きます。 https://playcanvas-cedec.gitbook.io/coin-dozer/
  97. 97. 3D Hands-On 【ハンズオン】Vue.jsをPlayCanvasの中で使って3DモデルビュワーなWebページを作る https://playcanv.as/p/xIj6iJ4S/ Vue.jsというJavaScriptsのフレームワークを使い、自作した3DモデルなどをWebから簡単に 閲覧できるようにモデルビュワーを実装していきます。
  98. 98. 3D Hands-On 【ハンズオン】PlayCanvasで作った3Dブラウザゲームにリッチな演出を追加する ~タンクバトルゲーム /演出編~ https://playcanv.as/p/ewDhTIuQ/ タンクゲームをベースとし、アニメーション、エフェクト、マテリアル設定にフォーカスして、 よりリッチな演出を追加していく、という内容となっています。
  99. 99. PlayCanvasセミナー 【12/3 東京開催】WordPressのリッチコンテンツを簡単に作れるPlayCanvasセミナー https://bit.ly/34WgaAb • 360度動画ビューなどの3DコンテンツをWebに組み込みたい • WebGLでコンテンツを作ってみたいけど難しい • Flashのコンテンツを新しいコンテンツに差し替えたい そんな方にお勧めのセミナーです。
  100. 100. PlayCanvasセミナー [ 2020/02/01 ] PWA Night CONFERENCE 2020 ゲームエンジンであるPlayCavnasがPWA Night CONFERENCEで登壇 ブラウザゲームをPWAで展開するなどお話しします。 https://conf2020.pwanight.jp/
  101. 101. 告知 JP公式サイト JP公式ツイッター https://twitter.com/playcanvasJP https://playcanvas.jp/ Qiita Organization https://qiita.com/organizations/playcanvas PlayCanvasMeetup https://playcanvasjp.connpass.com/
  102. 102. PlayCanvas x WebXR PlayCanvas運営事務局 羽賀 流登
  103. 103. はが りゅうと 羽賀 流登 GMOクラウド / PlayCanvas運営事務局 よく PlayCanvasでモックなどを作っている ハンズオンなどを開いています 自己紹介 技術書典で「実践PlayCanvas」を販売 @mxcn3
  104. 104. WebXRについて • XRとは? • WebXRについて • PlayCanvas x WebVR 1. 概要 2. 作り方 • PlayCanvas x WebARの活用について これから話すこと
  105. 105. XRとは?
  106. 106. • VR (Virtual Reality) • AR (Augmented Reality) • MR (Mixed Reality) これらの総称のこと XRとは VR AR MR
  107. 107. • WebXRはブラウザを使用して体験のできる、AR, VR, MRのこと • 主にJavaScript, HTML, CSSを使用して作成する WebXRとは
  108. 108. どうやってVRを実装しているのか?
  109. 109. WebVRを作成するための2つの部分について話をします 1. スマートフォンの情報にアクセスする部分 2. 描画の部分 WebVRを構成する要素
  110. 110. ブラウザの情報にアクセスをしている デバイスの角度これらを取得するための権限を手 に入れるためのAPIがある iOS13では • DeviceMotionEvent • DeviceOrientationEvent この2つの値を使用してVRに必要な情報を取得 デバイスの情報を取得する iOS 13 Safari
  111. 111. 実装
  112. 112. デバイスの情報を取得する <html> <head> <script> window.addEventListener("deviceorientation", (orientation) =>{ const { alpha, beta, gamma } = orientation; const element = document.getElementById("orientation"); element.innerText = ` alpha = ${alpha} beta = ${beta} gamma = ${gamma} ` }, false) function requesDeviceOrientationEventtPermission(){ DeviceOrientationEvent.requestPermission() } </script> </head> <button onclick="requestPermission()">Enter VR</button> <div id="orientation"><div> </html> ボタンが押されたら 権限を取得 ① ② https://yushimatenjin.github.io/interbee-2019-webxr-demo/
  113. 113. 許可をすると • デバイスの傾き(Alpha, Beta, Gamma)という プロパティを取得できるようになる 許可をするとどうなるのか Alpha Beta Gamma DeviceOrientation Event https://triple-underscore.github.io/deviceorientation-ja.html#deviceorientation 2019/11/07
  114. 114. デバイスの情報を取得する <html> <head> <script> window.addEventListener("deviceorientation", (orientation) =>{ const { alpha, beta, gamma } = orientation; const element = document.getElementById("orientation"); element.innerText = ` alpha = ${alpha} beta = ${beta} gamma = ${gamma} ` }, false) function requesDeviceOrientationEventtPermission(){ DeviceOrientationEvent.requestPermission() } </script> </head> <button onclick="requestPermission()">Enter VR</button> <div id="orientation"><div> </html> ③ alpha, beta, gammaを取得③
  115. 115. デバイスの情報を取ることができた
  116. 116. PlayCanvasでWebVRを作成する
  117. 117. PlayCanvasに新規登録をする • PlayCanvasに新規登録 1. PlayCanvas.jpにアクセス 2. 無料アカウント作成
  118. 118. PlayCanvasに新規登録をする • PlayCanvasに新規登録 1. メールアドレス 2. ユーザー名 3. パスワードを入力して次へ
  119. 119. • テンプレートを使用する 1. Projectの新規作成 2. VR Starter Kitを選択 PlayCanvasでVRを使用する方法について
  120. 120. PlayCanvasでVRを使用する方法について • PlayCanvasのゲームを起動 1. シーンを選択 2. 右上から起動
  121. 121. • プロジェクトを起動VRで遊ぶことができます PlayCanvasでVRを使用する方法について Google Chrome iPhone Safari ※ アップデートによりiOS13対応は個別少し 書き換える必要がある 2019/11/07
  122. 122. Oculusなどの機器に対応する
  123. 123. • WebVRをさらに使用する JavaScriptのGamepad APIを使用すると - Oculus Go (3dof) - Oculus Quest (6dof) に対応したゲームを作ることができます PlayCanvasでWebVRをさらに使用する WebVR Lab https://developer.playcanvas.com/ja/tutorials/webvr-lab/
  124. 124. Webブラウザから取得できる情報について navigator.getGamepads()で読み取ることが出来る • 左右それぞれ格納されている • pad.pose.とたどっていくことで • コントローラーの 加速度、回転、位置等が 取得できる。
  125. 125. • camera.enterVr カメラのこちらの関数を実行することで任 意のタイミングでVRに入る事ができます • camera. exitVr こちらの関数を使用することでVR空間から 抜けることができます 今回のVR Planetの実装について
  126. 126. WebVRを使用するためのスクリプト const onEnterVrPressedEventIOS13 = function () { DeviceOrientationEvent.requestPermission().then((state) => { if (state === "granted") { self.camera.camera.enterVr(function (err) { if (err) { console.warn(err); } }); } }; this.vrButtonDiv.addEventListener('click', onEnterVrPressedEventIOS13, false); ①クリックされたら ②VRに入る
  127. 127. • iOS 13に対応をする iOS 13とそれ以外でVRに入るボタンを押したときの動作を書き分け スクリプトを追加する必要がある 今回のVR Planetの実装について 【iOS13】新しくなったWebVRの使い方 [PlayCanvas] Qiita
  128. 128. PlayCanvasでiOS13のVRに対応をする if (DeviceOrientationEvent && DeviceOrientationEvent.requestPermission && typeof DeviceOrientationEvent.requestPermission === 'function') { DeviceOrientationEvent.requestPermission().then((state) => { if (state === "granted") { self.camera.camera.enterVr(function (err) { if (err) { console.error(err); } }); } else if (state === "denied") { alert("Permission is denied !"); } }); } デバイスの権限を取得 APIがあるかの確認の処理 stateにはgranted deniedのどちらか 権限を取得できたら camera.enterVrでVRのモードにする
  129. 129. WebVR実装の注意点 • ユーザーからの入力が必要 • HTTPSでないと動かない • iframeの中では動かない場合がある • iOS12では傾きの設定が必要 VR実装に関する注意点
  130. 130. • WebXRはブラウザでXRで使用するためのするための技術 • WebXRはVR, AR, MRなどをまとめた総称 • ブラウザのAPIと、ゲームエンジンを使用することでWebXRの ゲームが作れる まとめ
  131. 131. WebARについて
  132. 132. • 公式のAR Starter Kitを使用する https://playcanvas.com/project/481413/overview/ar-starter-kit • 8th Wallを使用する PlayCanvasでWebAR
  133. 133. • 8th Wall Webとは世界初のモバイルWeb用のARプラットフォー ム • 表面の検出や照明の検出が出来る • マーカレス・任意の画像をマーカーとして 使用すること可能 PlayCanvasでWebAR
  134. 134. https://playcanvas.com/the8thwall THE8THWALL • マーカーを使用したデモ • マーカーを使用しないデモがある PlayCanvasで8th Wallを使用する
  135. 135. 1. AR World Tracking Starter Kitをフォークする 2. Settings → EXTERNAL SCRIPTSから https://apps.8thwall.com/xrweb?appKey=???? この????となっている部分に8th Wallのダッ シュボードからAPIを取得したものを記入 ① ② AR World Trackingを使用する 1/2
  136. 136. 3. 8th wallの管理画面からDevice Authorization をクリックしてデバイスの登録をします。 PCとスマートフォンの両方をやると良い 4. PlayCanvasのプロジェクトを起動 ③ ④ AR World Trackingを使用する 2/2
  137. 137. 実際のデモがこちらになります 1. SandyちゃんというPlayCanvasJPの公式 キャラクターを埋め込んだ例となります 2. アニメーションを入れている 3. PlayCanvasのプロジェクトがそのまま表示される のでゲームなどをここで遊ぶこと・音声を入れる こともできる。
  138. 138. WebXRの開発についてまとめ • WebVRについて • 比較的簡単に作ることが出来る • iOS13のアップデートで少し個別に対応が必要になった • WebARについて • 8th Wallを使用することでかなり自由度の高いARを作ることができる。 総じて • サンプルプロジェクトがだいたいあるのでやりたい事にあった プロジェクトをフォークして開発するのが良い
  139. 139. ご清聴ありがとうございました。
  140. 140. マスター タイトルの書式設定告知 JP公式サイト JP公式ツイッター https://twitter.com/playcanvasJP https://playcanvas.jp/ Qiita Organization https://qiita.com/organizations/playcanvas PlayCanvasMeetup https://playcanvasjp.connpass.com/

×