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.

OSC2020 Fukuoka: インストールいらず、WebAR入門

746 views

Published on

OSC2020 Fukuokaで使用したハンズオン資料
https://ospn.connpass.com/event/183864/

Published in: Technology
  • Be the first to comment

  • Be the first to like this

OSC2020 Fukuoka: インストールいらず、WebAR入門

  1. 1. インストールいらず! お手軽Web AR/VR開発入門
  2. 2. まずは素材のダウンロード http://arfukuoka.lolipop.jp /osc2020/sample.zip
  3. 3. 自己紹介 氏名:吉永崇(Takashi Yoshinaga) 所属:Steampunk Digital株式会社 専門:医療支援AR,運動計測,3DVideo コミュニティ:ARコンテンツ作成勉強会
  4. 4. Twitterと勉強会ページで情報を発信しています @AR_Fukuoka Googleで「AR勉強会」で検索
  5. 5. #AR_Fukuoka #osc20fk ハッシュタグ
  6. 6. 本題に入ります
  7. 7. A-Frameの概要  Webブラウザ上でVRなどの3D表現を簡単に実現するフレームワーク  HTMLのタグを書くだけで3Dオブジェクトを配置できる  Firefox、Chrome、Edgeなど主要なブラウザがWebVR対応を表明  Oculus QuestやHTC ViveなどのHMD、スマホVRにも対応  AR対応ライブラリも利用可能 (対応端末のみARモードもあり)
  8. 8. まずは体験 A-Frameのページにアクセス (https://aframe.io/)
  9. 9. まずは体験 ページの左側にサンプルがあります サンプル
  10. 10. まずは体験 基本サンプル Hello WebVRをクリック Hello WebVR
  11. 11. まずは体験 基本サンプル Hello WebVRをクリック 画面をクリック 回転:マウスでドラッグ 左右:[←][→]キー 前後:[↑][↓]キー ※前後左右は自分がどちらに動くかで考える
  12. 12. AR開発は?
  13. 13. A-Frame対応ARライブラリ AR.js ARToolKitをベースに開発されたjavascriptライブラリ 正方形の枠と内側の絵を組み合わせたマーカーを使用 画像の取得 ・ 二値化等の画像処理 ・ マーカの検出 位置・姿勢計算 CGを重畳 (引用元: http://www.youtube.com/watch?v=TqGAqAFlGg0)(D.Wagner et al. Computer Vision Winter Workshop, 2007)
  14. 14. 本日のゴール https://osc-fukuoka.glitch.me または QRコード
  15. 15. ハンズオン手順 Step1: A-Frame公式からサンプルを開発環境にコピー Step2: テクスチャを使ってCGの見た目の調整 Step3: AR.jsを使ってARコンテンツを作成
  16. 16. ハンズオン手順 Step1: A-Frame公式からサンプルを開発環境にコピー Step2: テクスチャを使ってCGの見た目の調整 Step3: AR.jsを使ってARコンテンツを作成
  17. 17. 必要なもの  Webブラウザ → コンテンツの体験や動作確認  テキストエディタ → HTMLやjavascriptの記述  Webサーバー → コンテンツの公開 サーバーに関して今回は・・・  Glitchを利用 https://glitch.com/  FacebookかGitHubのアカウントがあればOK  サーバーとエディタの両方を無料で提供 この資料ではGlitch使用を前提に説明します
  18. 18. 基本サンプルのコード Hello WebVRのコードを取得 GET STARTED
  19. 19. 基本サンプルのコードの複製 Hello WebVRに関する記述 (たったこれだけ!) Hello WebVR
  20. 20. 基本サンプルのコードの複製 Glitchユーザーはremix the starter example on Glitchをクリック ※通常はHello WebVRの記述をコピーし、自作のHTMLファイルにペースト Click
  21. 21. 基本サンプルのコードの複製 Remix your ownをクリック Click
  22. 22. 基本サンプルのコードの確認 index.htmlをクリックし、コードが表示されることを確認 Click
  23. 23. ソースの確認 <html> <head> <title>Hello, WebVR! - A-Frame</title> <meta name="description" content="Hello, WebVR! - A-Frame"> <script src="https://aframe.io/releases/1.0.4/aframe.min.js"> </script> </head> <body> <a-scene background="color: #FAFAFA"> 表示するオブジェクトや背景の設定をここに記述 </a-scene> </body> </html>  ヘッダー部でA-Frameの機能を提供するライブラリを取り込む  <a-scene>と</a-scene>の間に描画に関する記述をする
  24. 24. ソースの確認 <a-scene background="color: #FAFAFA"> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"> </a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"> </a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> </a-scene>  基本図形はa-xxxタグで提供されている https://aframe.io/docs/1.0.0/primi tives/a-box.html (例:a-boxの詳細) 位置 回転 色
  25. 25. 動作確認 Show
  26. 26. 動作確認 Next to The Code
  27. 27. 動作確認
  28. 28. ハンズオン手順 Step1: A-Frame公式からサンプルを開発環境にコピー Step2: テクスチャを使ったCGの見た目の調整 Step3: AR.jsを使ってARコンテンツを作成
  29. 29. ハンズオン手順 Step1: A-Frame公式からサンプルを開発環境にコピー Step2: テクスチャを使ったCGの見た目の調整 Step3: AR.jsを使ってARコンテンツを作成
  30. 30. アレンジしよう (まだやらなくてOK) タグ内の各パラメータを編集してCGの見た目を調整  position(位置):x y zの順にスペースで区切って指定 (0 1.25 -5) 位置 回転 色x y z座標
  31. 31. アレンジしよう (まだやらなくてOK) タグ内の各パラメータを編集してCGの見た目を調整  position(位置):x y zの順にスペースで区切って指定  rotation(傾き):各軸を中心とした回転で表現  color(色):カラーコード等で指定  他にも図形によって各種設定項目がある X Z Y (0 1.25 -5) 【設定項目の例】 radius(半径) width(幅) height(高さ) depth(奥行) src (画像など)原点
  32. 32. <a-scene background="color: #FAFAFA"> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"> </a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"> </a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> </a-scene> 不要なオブジェクトの削除  HTMLの記述の中からタグを削るだけ  この後の演習のため、a-sphereのみを 残して削除してみましょう <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"> </a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"> </a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> lesson01
  33. 33. 外見を整える 単色で塗りつぶすのではなくテクスチャをオブジェクトの表面に表示
  34. 34. 外見を整える テクスチャ画像を用意して、オブジェクトの表面に貼り付ける 3Dオブジェクト テクスチャ画像
  35. 35. テクスチャ画像をアップロード Glitchのエディタページに戻り、画面左の[assets]をクリック 続いて、画面上方の[Upload an Asset]をクリック ①assets ② Upload an Asset
  36. 36. テクスチャ画像をアップロード サンプルとして用意したテクスチャ画像earth.jpgを開く sample¥glitch¥earth.jpg
  37. 37. テクスチャ画像をアップロード Click
  38. 38. テクスチャ画像のURLを取得 Copyをクリック
  39. 39. ソースの書き換え index.htmlクリック
  40. 40. ソースの書き換え <head> <title>Hello, WebVR! - A-Frame</title> <meta name="description" content="Hello, WebVR! - A-Frame"> <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script> </head> <body> <a-scene background="color: #FAFAFA"> <a-sphere position="0 1.25 -5" radius="1.25" src="コピーしたURL" shadow> </a-sphere> </a-scene> </body>  a-sphereの色をcolor(色)ではなくsrc(画像へのリンク)に変更  srcの右辺に前操作でコピーした画像のURLを貼り付ける colorをsrcに変更 lesson02
  41. 41. 名前を付けて保存 文字列をクリック ここを書き換える
  42. 42. URLの確認 Change URL これ
  43. 43. ハンズオン手順 Step1: A-Frame公式からサンプルを開発環境にコピー Step2: テクスチャを使ったCGの見た目の調整 Step3: AR.jsを使ってARコンテンツを作成
  44. 44. ハンズオン手順 Step1: A-Frame公式からサンプルを開発環境にコピー Step2: テクスチャを使ったCGの見た目の調整 Step3: AR.jsを使ってARコンテンツを作成
  45. 45. 準備 プレビューを開きっぱなしだと、このあとカメラの使用許可確認が邪魔になる 閉じる
  46. 46. 準備 代わりに別のタブで実行画面を開いておく ①Show ②In a New Window
  47. 47. AR.jsをインポート & カメラ画像の表示 <head> <title>Hello, WebVR! - A-Frame</title> <meta name="description" content="Hello, WebVR! - A-Frame"> <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script> <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/ build/aframe-ar.js"></script> </head> <body> <a-scene background="color: #FAFAFA"> <a-sphere position="0 1.25 -5" radius="1.25" src="URL" shadow> </a-sphere> </a-scene> </body> AR.jsの読み込みをしたあと、a-sceneタグにembeddedを追加 追加 <a-scene embedded> 背景色を削除してembeded lesson03
  48. 48. マーカーを認識してその上にCGを表示 <body> <a-scene embedded arjs> <a-marker preset="hiro"> <a-sphere position="0 1.25 -5" radius="1.25" src="URL" shadow> </a-sphere> </a-marker> </a-scene> </body>  AR表示をするにはマーカーとCGとの関連付けが必要  A-Frameの場合<a-marker></a-marker>でCGを挟む  presetでマーカー名を指定 (付属マーカーのHiro使用)  正方形内のマーカーを独自に作ることも可能 (参考) マーカーの上にこれを表示したい 追加 lesson04
  49. 49. 動作確認 表示されたけど位置がズレてる
  50. 50. 理由と解決方法(1) <a-marker> </a-marker>で挟まれたCGの原点はマーカーの中心となる <a-sphere position="0 1.25 -5" radius="1.25" src="URL" shadow> 0 0 0 x y z -5 1.25 0 1.25 0
  51. 51. 動作確認 まだちょっとズレてる 下記のように変更して再度実行 <a-sphere position="0 1.25 0" radius="1.25" src="URL" shadow> lesson05
  52. 52. 理由と解決方法(2)  コンピュータで3D表現をする際に、本来は視点の位置を指定する必要がある  A-Frameでは「いい感じ」に表示される視点の位置をデフォルトで設定してくれる  マーカーの位置の計算はカメラが原点にあることを前提としているため要修正 <body> <a-scene embedded arjs> <a-marker preset="hiro"> <a-sphere position="0 1.25 0" radius="1.25" src="URL" shadow> </a-sphere> </a-marker> <a-entity camera></a-entity> </a-scene> </body> カメラを明示的に追加する(位置は原点) X Z Y lesson06
  53. 53. 完成
  54. 54. おまけ:アニメーションの追加 <a-sphere position="0 1.25 -5" radius="1.25" src="テクスチャのURL" shadow animation = " property :rotation; ←アニメーションの種類 dur : 10000; ←アニメーションにかける時間(ミリ秒) from : 0␣0␣0; ←開始時の角度(0,0,0) to: 0␣360␣0; ←終了時の角度(0,360,0) loop : -1; ←繰り返し回数 easing : linear; " > </a-sphere> animationを用いてアニメーションに関する設定を行う Z X Y "を忘れずに! lesson07

×