初心者向けWebXR (AR/VR)開発資料 随時内容を追加していきます。
ARコンテンツ作成勉強会はじめようWebVR/AR
View Slide
自己紹介氏名：吉永崇(Takashi Yoshinaga)所属：九州先端科学技術研究所(ISIT)専門：ARを用いた医療支援や運動計測コミュニティ：ARコンテンツ作成勉強会 主催
本資料の内容• 本資料では下記の内容をご紹介します1. A-Frameを用いたVR/AR2. 8th wall webを用いたノンプログラミングAR3. 8th wall webとA-Frameを用いたAR(今後追加予定)もしWebVRを用いたOculusQuestアプリ開発に興味があればこちらもご覧ください。https://www.slideshare.net/ssuserc0d7fb/aframeoculus-questwebvr-151354119
事前準備(Android)1. スマホにインストールされているChromeを起動2. アドレスバーに下記を入力chrome://flags3. 検索エリアにxrと入力4. WebVRをEnabledに変更※ ほかのXR/VR/AR関連の項目は変更しないでください
事前準備(iOS)1. iPhone/iPadの設定を開く2. Safariを選択3. モーションと画面の向きのアクセスをON4. カメラとマイクのアクセスをON
事前準備(共通)Glitchのアカウント作成https://glitch.com/
事前準備(共通)Sign InGitHubかFacebook、Googleのアカウントを使用(e-mailは非推奨)
事前準備(共通)8thWallのアカウント作成https://www.8thwall.com/
事前準備(共通)Create Account
事前準備(共通)氏名・メールアドレス・パスワードを入力し、最後にGet Started
事前準備(共通)日本を選択し、電話番号を入力日本先頭の0を外した電話番号例)09012345678なら9012345678
事前準備(共通)携帯電話に届く確認コードを入力しVerifyをクリック確認コードを入力
演習用素材http://arfukuoka.lolipop.jp/webxr2019/sample.zip
A-Frame編
A-Frameの概要 Webブラウザ上でVRなどの3D表現を簡単に実現するためのライブラリ HTMLのタグを書くだけで3Dオブジェクトを配置できる Firefox、Chrome、Edgeなど主要なブラウザがWebVR対応を表明 Oculus QuestやHTC ViveなどのHMD、スマホVRにも対応 外部ライブラリを組み合わせればARも実現できる (開発途上)
検索結果を写真でも動画でもなくARで表示Web ARの利用事例
まずは体験A-Frameのページにアクセス (https://aframe.io/)
まずは体験ページの左側にサンプルがありますサンプル
まずは体験基本サンプル Hello WebVRをクリックHello WebVR
まずは体験基本サンプル Hello WebVRをクリック画面をクリック回転：マウスでドラッグ左右：[A][D]キー前後：[W][S]キー※前後左右は自分がどちらに動くかで考える
まずは体験360°Imageをクリックして全天球コンテンツを表示360°ImageRICOH Theta
スマートフォンでもA-Frameで検索またはQRコード
スマートフォンでもゴーグルマークをタップ
Windows Mixed Reality Headsetでも
AR開発は？
A-Frame対応ARライブラリAR.jsARToolKitをベースに開発されたjavascriptライブラリ正方形の枠と内側の絵を組み合わせたマーカーを使用画像の取得 ・ 二値化等の画像処理・ マーカの検出位置・姿勢計算 CGを重畳(引用元: http://www.youtube.com/watch?v=TqGAqAFlGg0)(D.Wagner et al. Computer Vision Winter Workshop, 2007)
本日のゴールhttps://kougi2019.glitch.me/または
本日のゴールコンテンツにアクセス後、Sampleフォルダにあるマーカーを撮影
ハンズオン手順Step1: サンプルを使ってA-Frame基本操作を覚えるStep2: CG見た目の調整やアニメーションの設定などを行い簡易VRコンテンツを作成Step3: AR.jsを使ってARコンテンツを作成
必要なもの Webブラウザ → コンテンツの体験や動作確認 テキストエディタ → HTMLやjavascriptの記述 Webサーバー → コンテンツの公開サーバーに関して今回は・・・ Glitchを利用 https://glitch.com/◆ FacebookかGitHubのアカウントがあればOK◆ サーバーとエディタの両方を無料で提供この資料ではGlitch使用を前提に説明します
基本サンプルのコードHello WebVRのコードを取得GET STARTED
基本サンプルのコードの複製Hello WebVRに関する記述 (たったこれだけ！)Hello WebVR
基本サンプルのコードの複製Glitchユーザーはremix the starter example on Glitchをクリック※通常はHello WebVRの記述をコピーし、自作のHTMLファイルにペーストClick
基本サンプルのコードの複製Remix your ownをクリックClick
基本サンプルのコードの確認index.htmlをクリックし、コードが表示されることを確認Click
ソースの確認Hello, WebVR! - A-Frame<br/>表示するオブジェクトや背景の設定をここに記述 ヘッダー部でA-Frameの機能を提供するライブラリを取り込む との間に描画に関する記述をする
ソースの確認color="#FFC65D">width="4" height="4" color="#7BC8A4"> 基本図形はa-xxxタグで提供されているhttps://aframe.io/docs/0.9.0/primitives/a-box.html (例：a-boxの詳細)位置 回転 色
動作確認Show
動作確認In a New Window
動作確認
アレンジしよう (まだやらなくてOK)タグ内の各パラメータを編集してCGの見た目を調整 position(位置)：x y zの順にスペースで区切って指定(0 1.25 -5)位置 回転 色x y z座標
アレンジしよう (まだやらなくてOK)タグ内の各パラメータを編集してCGの見た目を調整 position(位置)：x y zの順にスペースで区切って指定 rotation(傾き)：各軸を中心とした回転で表現 color(色)：カラーコード等で指定 他にも図形によって各種設定項目があるXZY(0 1.25 -5) 【設定項目の例】radius(半径)width(幅)height(高さ)depth(奥行)src (画像など)原点
見た目の変化を想像しながら数値を変えるのは慣れが必要
A-Frame Inspectorを利用しよう実行画面を開く
A-Frame Inspectorを利用しようキーボードの[Ctrl][Alt][i]を同時に押して下記表示に切り替える
boxの詳細情報を表示画面の左のリストからを選択
boxの詳細情報を表示画面右側に位置や角度、半径の具体的な数値が表示される位置・角度depthheightwidth
各種情報の変更の方法 (直打ち)positionのXの値を0に変更して最後に[Enter]キーを押下positionx y z
各種情報の変更の方法 (マウス操作)移動 回転 拡大・縮小選択
プレビュー画面左上のBack To Sceneをクリックしてブラウザでの表示を確認Back To SceneInspect Scene
ブラウザを再読み込みさせてみましょう
注意編集画面で入力された値は元のソースには反映されていないブラウザで再読み込みをしたら元に戻ってしまう最後にHTMLソース内の該当箇所をその値に書き換える※この演習では、今は書き換えなくてOKまたは編集後のHTMLをコピーして差し替える
結局のところHTMLの記述は自分でやる必要がある
HTML編集に慣れよう左右分割表示で動作確認をしやすい環境を整えよう編集画面 実行画面
[編集例]color="#FFC65D">width="4" height="4" color="#7BC8A4">HTML編集に慣れよう角度高さ色
URLの変更文字列をクリックここを書き換える
その前に
実行画面を閉じるエディタや実行画面が複数あると紛らわしいので使用中のものを閉じる編集画面 実行画面閉じる閉じる
VRコンテンツ作りの準備Hello WebVRのコードを取得GET STARTED
index.htmlの表示Click
動作確認の環境を整えるエディタのShowをクリックして開いた実行画面を横に表示しておく編集画面 実行画面
color="#FFC65D">width="4" height="4" color="#7BC8A4">不要なオブジェクトの削除 HTMLの記述の中からタグを削るだけ この後の演習のため、a-sphereのみを残して削除してみましょうcolor="#FFC65D">width="4" height="4" color="#7BC8A4">
外見を整える単色で塗りつぶすのではなくテクスチャをオブジェクトの表面に表示
外見を整えるテクスチャ画像を用意しオブジェクトの表面に貼り付ける3Dオブジェクト テクスチャ画像
テクスチャ画像をアップロードGlitchのエディタページに戻り、画面左の[assets]をクリック続いて、画面上方の[Upload an Asset]をクリック①assets② Upload an Asset
テクスチャ画像をアップロードサンプルとして用意したテクスチャ画像earth.jpgを開くearth.jpg
テクスチャ画像をアップロードクリック
テクスチャ画像のURLを取得Copyをクリック
ソースの書き換えindex.htmlクリック
ソースの書き換えHello, WebVR! - A-Frameshadow> a-sphereの色をcolor(色)ではなくsrc(画像へのリンク)に変更 srcの右辺に前操作でコピーした“画像のURL”を貼り付けるcolorをsrcに変更
アニメーションの追加src="テクスチャのURL" shadowanimation = "property :rotation; ←アニメーションの種類dur : 10000; ←アニメーションにかける時間(ミリ秒)from : 0␣0␣0; ←開始時の角度(0,0,0)to: 0␣360␣0; ←終了時の角度(0,360,0)loop : 0; ←繰り返し回数">a-animationタグを用いてアニメーションに関する設定を行うZXY"を忘れずに！
アニメーションを繰り返すsrc="テクスチャのURL" shadowanimation = "property :rotation; ←アニメーションの種類dur : 10000; ←アニメーションにかける時間(ミリ秒)from : 0␣0␣0; ←開始時の角度(0,0,0)to: 0␣360␣0; ←終了時の角度(0,360,0)loop : -1; ←繰り返し回数">repeatを"-1"にするといつまでも繰り返し続ける
同じ速度で回転させるanimation = "attribute : rotation; ←アニメーションの種類dur : 10000; ←アニメーションにかける時間(ミリ秒)from : 0␣0␣0; ←開始時の角度(0,0,0)to : 0␣360␣0; ←終了時の角度(0,360,0)loop : -1; ←繰り返し回数easing : linear; ←速度の変化"easingを追加し、"linear"にすると同じ速度で動くようになる。ほかには最初がゆっくりなease-inや後半がゆっくりなease-outも。→ http://easings.net/ja
背景を変更しよう
テクスチャ画像をアップロード① 画面左の[assets]をクリック② [Upload an Asset]をクリック①assets② Upload an Asset
テクスチャ画像をアップロードサンプルとして用意した背景用画像space.jpgを開くspace.jpg
テクスチャ画像のURLを取得クリック
タグの追加Hello, WebVR! - A-Frameanimation = "長いので割愛">a-skyタグを利用し、背景情報として画像のURLを指定すればOKa-skyを追加
名前を付けて保存文字列をクリックここを書き換える
ほか、A-Frameで利用できるデータの例• 文字列 • 音 • ビデオ • 3Dファイルobj glTF • VRコントローラによる入力HTC ViveOculusQuest など
編集中のコードを複製画面右上のプロジェクト名が表示されている箇所からRemix This①プロジェクト名②Remix This
AR.jsをインポート & カメラ画像の表示Hello, WebVR! - A-Frameanimation = "中略">AR.jsの読み込みをしたあと、a-sceneタグにembeddedを追加追加色を削除してembededa-sky削除
マーカーを認識してその上にCGを表示animation = "中略"> AR表示をするにはマーカーとCGとの関連付けが必要 A-Frameの場合でCGを挟む presetでマーカー名を指定 (付属マーカーのHiro使用) 正方形内のマーカーを独自に作ることも可能 (参考)マーカーの上にこれを表示したい追加
動作確認表示されたけど位置がズレてる
理由と解決方法(1) で挟まれたCGの原点はマーカーの中心となる0 0 0xyz-51.250 1.25 0
動作確認まだちょっとズレてる下記のように変更して再度実行
理由と解決方法(2) コンピュータで3D表現をする際に、本来は視点の位置を指定する必要がある A-Frameでは「いい感じ」に表示される視点の位置をデフォルトで設定してくれる マーカーの位置の計算はカメラが原点にあることを前提としているため要修正animation = "中略"> カメラを明示的に追加する(位置は原点)XZY
動作確認この辺りの表示がじゃま
Hello, WebVR! - A-Frameanimation = "中略"追加
完成
マーカーレスARにも対応今後のWebAR
8th Wall Web編
ARCore/ARKit非対応スマホでも利用可能8thWallWeb
ログインLog In
ログインアカウント作成時に使用/設定したメールアドレスとパスワードを入力
開発方法を選択ここではノンプログラミングで開発できるARCameraを選択AR Camera
コンテンツの作成新しいARCamera(ARコンテンツ)を作成Create a new Camera
コンテンツ作成画面の確認コンテンツデザイン用の画面が表示されるこのあとここからCGをアップロードする
PolyからCGを入手Googleが提供する3Dデータ共有サービスhttps://poly.google.com/
オブジェクトの入手ここから検索画面上部のフォームから「Astronaut」で検索
オブジェクトの入手ここをクリック
オブジェクトの入手ダウンロード→ glTFファイル
フォーマットの変換 ダウンロードしたzipファイルを解凍 GLB Packerにアクセス (https://glb-packer.glitch.me/) 解凍したフォルダ内のファイルを全てGLB Packerにドラッグアンドドロップ
フォーマットの変換out.glbがダウンロードできればOK
CGのアップロードUploadout.glbを選択してアップロード
詳細設定Sceneタブで詳細情報(サイズや挙動)を設定
詳細設定最後にPublishPublish
詳細設定スマホで読み込めば体験できますQRが発行される
takashiyoshinaga
sbtechnight
sparty
stefafafan
pauloxnet
sat
kentosuzuki
fixstars
kaznishi
sakaitakeshi
oracle4engineer
hhc0null
marktimemedia
aki_iinuma
holman
yeseniaperezcruz
bermonpainter
moore
davidbonilla
philhawksworth
paigeccino
lara
mthomps
rasmusluckow