A-Frameで始めるWebVR/AR

by TakashiYoshinaga

Slide 1

Slide 1 text

ARコンテンツ作成勉強会 A-Frameで始めるWebVR/AR #AR_Fukuoka

Slide 2

Slide 2 text

自己紹介氏名：吉永崇(Takashi Yoshinaga) 所属：九州先端科学技術研究所(ISIT) 専門：AR/VRを用いた情報可視化と各種計測コミュニティ：ARコンテンツ作成勉強会主催

Slide 3

Slide 3 text

A-Frameの概要  Webブラウザ上でVRなどの3D表現を簡単に実現するためのライブラリ  HTMLのタグを書くだけで3Dオブジェクトを配置できる  Firefox、Chrome、Edgeなど主要なブラウザがWebVR対応を表明  Windows MRやHTC ViveなどのHMD、スマホVRにも対応  外部ライブラリを組み合わせればARも実現できる (開発途上)

Slide 4

Slide 4 text

まずは体験 A-Frameのページにアクセス (https://aframe.io/)

Slide 5

Slide 5 text

まずは体験ページの左側にサンプルがありますサンプル

Slide 6

Slide 6 text

まずは体験基本サンプル Hello WebVRをクリック Hello WebVR

Slide 7

Slide 7 text

まずは体験基本サンプル Hello WebVRをクリック画面をクリック 回転：マウスでドラッグ 左右：[A][D]キー 前後：[W][S]キー ※前後左右は自分がどちらに動くかで考える

Slide 8

Slide 8 text

まずは体験 360°Imageをクリックして全天球コンテンツを表示 360°Image RICOH Theta

Slide 9

Slide 9 text

スマートフォンでも A-Frameで検索または QRコード

Slide 10

Slide 10 text

Windows Mixed Reality Headsetでも

Slide 11

Slide 11 text

AR開発は？

Slide 12

Slide 12 text

A-Frame対応ARライブラリ AR.js ARToolKitをベースに開発されたjavascriptライブラリ 正方形の枠と内側の絵を組み合わせたマーカーを使用画像の取得・二値化等の画像処理・マーカの検出位置・姿勢計算 CGを重畳 (引用元: http://www.youtube.com/watch?v=TqGAqAFlGg0) (D.Wagner et al. Computer Vision Winter Workshop, 2007)

Slide 13

Slide 13 text

本日のゴール https://miyazaki-ar.glitch.me/ または QRコード

Slide 14

Slide 14 text

ハンズオン手順 Step1: サンプルを使ってA-Frame基本操作を覚える Step2: CG見た目の調整やアニメーションの設定などを行い簡易VRコンテンツを作成 Step3: AR.jsを使ってARコンテンツを作成

Slide 15

Slide 15 text

必要なもの  Webブラウザ → コンテンツの体験や動作確認  テキストエディタ → HTMLやjavascriptの記述  Webサーバー → コンテンツの公開サーバーに関して今回は・・・  Glitchを利用 https://glitch.com/  FacebookかGitHubのアカウントがあればOK  サーバーとエディタの両方を無料で提供この資料ではGlitch使用を前提に説明します

Slide 16

Slide 16 text

基本サンプルのコード Hello WebVRのコードを取得 GET STARTED

Slide 17

Slide 17 text

基本サンプルのコードの複製 Hello WebVRに関する記述 (たったこれだけ！) Hello WebVR

Slide 18

Slide 18 text

基本サンプルのコードの複製 Glitchユーザーはremix the starter example on Glitchをクリック ※通常はHello WebVRの記述をコピーし、自作のHTMLファイルにペースト Click

Slide 19

Slide 19 text

基本サンプルのコードの複製 Remix your ownをクリック Click

Slide 20

Slide 20 text

基本サンプルのコードの確認 index.htmlをクリックし、コードが表示されることを確認 Click

Slide 21

Slide 21 text

ソースの確認 Hello, WebVR! - A-Frame 表示するオブジェクトや背景の設定をここに記述  ヘッダー部でA-Frameの機能を提供するライブラリを取り込む  との間に描画に関する記述をする

Slide 22

Slide 22 text

ソースの確認  基本図形はa-xxxタグで提供されている https://aframe.io/docs/0.7.0/primi tives/a-box.html(例：a-boxの詳細) 位置回転色

Slide 23

Slide 23 text

動作確認 Show Liveをクリック Click

Slide 24

Slide 24 text

動作確認

Slide 25

Slide 25 text

アレンジしよう (まだやらなくてOK) タグ内の各パラメータを編集してCGの見た目を調整  position(位置)：x y zの順にスペースで区切って指定 (0 1.25 -5) 位置回転色 x y z座標

Slide 26

Slide 26 text

アレンジしよう (まだやらなくてOK) タグ内の各パラメータを編集してCGの見た目を調整  position(位置)：x y zの順にスペースで区切って指定  rotation(傾き)：各軸を中心とした回転で表現  color(色)：カラーコード等で指定  他にも図形によって各種設定項目がある X Z Y (0 1.25 -5) 【設定項目の例】 radius(半径) width(幅) height(高さ) depth(奥行) src (画像など) 原点

Slide 27

Slide 27 text

見た目の変化を想像しながら数値を変えるのは慣れが必要

Slide 28

Slide 28 text

A-Frame Inspectorを利用しよう実行画面を開く

Slide 29

Slide 29 text

A-Frame Inspectorを利用しようキーボードの[Ctrl][Alt][i]を同時に押して下記表示に切り替える

Slide 30

Slide 30 text

boxの詳細情報を表示画面の左のリストからを選択

Slide 31

Slide 31 text

boxの詳細情報を表示画面右側に位置や角度、半径の具体的な数値が表示される位置・角度 depth height width

Slide 32

Slide 32 text

各種情報の変更の方法 (直打ち) positionのXの値を0に変更して最後に[Enter]キーを押下 position x y z

Slide 33

Slide 33 text

各種情報の変更の方法 (マウス操作) 移動回転拡大・縮小選択

Slide 34

Slide 34 text

プレビュー画面左上のBack To Sceneをクリックしてブラウザでの表示を確認 Back To Scene Inspect Scene

Slide 35

Slide 35 text

他のブラウザかスマホでアクセスしてみよう

Slide 36

Slide 36 text

注意編集画面で入力された値は元のソースには反映されていないブラウザで再読み込みをしたら元に戻ってしまう最後にHTMLソース内の該当箇所をその値に書き換える ※この演習では、今は書き換えなくてOK または編集後のHTMLをダウンロードかコピーして差し替える

Slide 37

Slide 37 text

結局のところ HTMLの記述は自分でやる必要がある

Slide 38

Slide 38 text

HTML編集に慣れよう左右分割表示で動作確認をしやすい環境を整えよう編集画面実行画面

Slide 39

Slide 39 text

[編集例] HTML編集に慣れよう角度高さ背景色テキスト

Slide 40

Slide 40 text

名前を付けて保存文字列をクリックここを書き換える

Slide 41

Slide 41 text

Slide 42

Slide 42 text

その前に

Slide 43

Slide 43 text

実行画面を閉じるエディタや実行画面が複数あると紛らわしいので使用中のものを閉じる編集画面実行画面閉じる閉じる

Slide 44

Slide 44 text

VRコンテンツ作りの準備 Hello WebVRのコードを取得 GET STARTED

Slide 45

Slide 45 text

Slide 46

Slide 46 text

基本サンプルのコードの複製 Remix your ownをクリック Click

Slide 47

Slide 47 text

index.htmlの表示 Click

Slide 48

Slide 48 text

動作確認の環境を整えるエディタのShow Liveをクリックして開いた実行画面を横に表示しておく編集画面実行画面

Slide 49

Slide 49 text

不要なオブジェクトの削除  HTMLの記述の中からタグを削るだけ  この後の演習のため、a-sphereと a-skyのみを残して削除してみましょう

Slide 50

Slide 50 text

外見を整える単色で塗りつぶすのではなくテクスチャをオブジェクトの表面に表示

Slide 51

Slide 51 text

外見を整えるテクスチャ画像を用意しオブジェクトの表面に貼り付ける 3Dオブジェクトテクスチャ画像

Slide 52

Slide 52 text

演習用素材こちらからダウンロード https://goo.gl/PwJa3q

Slide 53

Slide 53 text

テクスチャ画像をアップロード Glitchのページに戻り、画面左の[assets]をクリック続いて、画面上方の[Add asset]を開き[Computer→]をクリック ①assets ② Add asset

Slide 54

Slide 54 text

テクスチャ画像をアップロードサンプルとして用意したテクスチャ画像earth.jpgを開く earth.jpg

Slide 55

Slide 55 text

テクスチャ画像をアップロードクリック

Slide 56

Slide 56 text

テクスチャ画像のURLを取得 Copy Urlをクリック

Slide 57

Slide 57 text

ソースの書き換え index.htmlクリック

Slide 58

Slide 58 text

ソースの書き換え Hello, WebVR! - A-Frame  a-sphereの色をcolor(色)ではなくsrc(画像へのリンク)に変更  srcの右辺に前操作でコピーした“画像のURL”を貼り付けるここを変更

Slide 59

Slide 59 text

アニメーションの追加 a-animationタグを用いてアニメーションに関する設定を行う Z X Y

Slide 60

Slide 60 text

アニメーションを繰り返す repeatを"indefinite"にするといつまでも繰り返し続ける

Slide 61

Slide 61 text

同じ速度で回転させる easingを追加し、"linear"にすると同じ速度で動くようになる。ほかには最初がゆっくりなease-inや後半がゆっくりなease-outも。 → http://easings.net/ja

Slide 62

Slide 62 text

背景を変更しよう

Slide 63

Slide 63 text

テクスチャ画像をアップロード ① 画面左の[assets]をクリック ② [Add asset]を開き、[Computer→]をクリック ①assets ② Add asset

Slide 64

Slide 64 text

テクスチャ画像をアップロードサンプルとして用意した背景用画像space.jpgを開く space.jpg

Slide 65

Slide 65 text

テクスチャ画像のURLを取得クリック

Slide 66

Slide 66 text

テクスチャ画像のURLを取得 Copy Urlをクリック

Slide 67

Slide 67 text

ソースの書き換え index.htmlクリック

Slide 68

Slide 68 text

ソースの書き換え Hello, WebVR! - A-Frame 背景(a-sky)のcolorをsrcに変更し画像のURLを指定すればOK colorをsrcに変更

Slide 69

Slide 69 text

外部のオブジェクトを取り込もう追加

Slide 70

Slide 70 text

Poly Googleが提供する3Dデータ共有サービス https://poly.google.com/

Slide 71

Slide 71 text

オブジェクトの入手ここから検索画面上部のフォームから「Astronaut」で検索

Slide 72

Slide 72 text

オブジェクトの入手ここをクリック

Slide 73

Slide 73 text

オブジェクトの入手ダウンロード → OBJファイル

Slide 74

Slide 74 text

フォルダの構成まずはダウンロードしたzipファイルを分かり易い場所に解凍 mtl obj png 【各ファイルの解説】  objファイル 3Dモデルの形状のみを表現するファイル。色情報は持たない。  pngファイル 3Dモデルに割り当てる色情報を焼き込んだテクスチャ画像。  mtlファイル objファイルとpngファイルを関連付ける情報が記述されたファイル。

Slide 75

Slide 75 text

3Dモデルとテクスチャ画像をアップロード Glitchのページに戻り、画面左の[assets]をクリック続いて、画面上方の[Add asset]を開き[Computer→]をクリック ①assets ② Add asset

Slide 76

Slide 76 text

3Dモデルとテクスチャ画像をアップロード objファイルとpngファイルを選択してアップロード Astronaut.obj Astronaut_BaseColor.png

Slide 77

Slide 77 text

テクスチャ画像のURLを取得クリック mtlファイル(未アップロード)にテクスチャのURLを記述するための操作。 Glitchでは独自のフォルダ名に画像を保存しているためこの手順が必要。

Slide 78

Slide 78 text

テクスチャ画像のURLを取得 Copy Urlをクリック mtlファイル(未アップロード)にテクスチャのURLを記述するための操作。 Glitchでは独自のフォルダ名に画像を保存しているためこの手順が必要。

Slide 79

Slide 79 text

mtlの編集テキストエディタ等でmtlファイルを開きmap_Kdの後ろにURLを貼り付ける newmtl Astronaut_mat illum 4 Kd 0.50 0.50 0.50 Ka 0.00 0.00 0.00 Tf 1.00 1.00 1.00 Ni 1.00 map_Kd ここにURLを貼り付け

Slide 80

Slide 80 text

mtlファイルのアップロード Glitchのページに戻り、画面左の[assets]をクリック続いて、画面上方の[Add asset]を開き[Computer→]をクリック ①assets ② Add asset

Slide 81

Slide 81 text

3Dモデルとテクスチャ画像をアップロード mtlファイルを選択してアップロード Astronaut.mtl

Slide 82

Slide 82 text

ソースの書き換え index.htmlクリック

Slide 83

Slide 83 text

ソースの書き換え Hello, WebVR! - A-Frame をa-sphereの子要素として追加 a-sphereの子要素にすることでアニメーションに追従

Slide 84

Slide 84 text

ソースの書き換え Hello, WebVR! - A-Frame タグ内でobjファイルのURLを指定テクスチャのURL取得と同じ要領ヒント：画面左のassetsから

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

ソースの書き換え Hello, WebVR! - A-Frame タグ内でmtlファイルのURLを指定

Slide 87

Slide 87 text

No content

Slide 88

Slide 88 text

ソースの書き換え Hello, WebVR! - A-Frame Z X Y 地球を原点としてx=2

Slide 89

Slide 89 text

名前を付けて保存文字列をクリックここを書き換える

Slide 90

Slide 90 text

Slide 91

Slide 91 text

編集中のコードを複製画面右上のプロジェクト名が表示されている箇所からRemix This ①プロジェクト名 ②Remix This

Slide 92

Slide 92 text

AR.jsをインポート & カメラ画像の表示 Hello, WebVR! - A-Frame AR.jsの読み込みをしたあと、a-sceneタグにembeddedを追加追加追加

Slide 93

Slide 93 text

マーカーを認識してその上にCGを表示  AR表示をするにはマーカーとCGとの関連付けが必要  A-Frameの場合でCGを挟む  presetでマーカー名を指定 (付属マーカーのHiro使用)  正方形内のマーカーを独自に作ることも可能 (参考) マーカーの上にこれらを表示したい追加

Slide 94

Slide 94 text

動作確認表示されたけど位置がズレてる

Slide 95

Slide 95 text

理由と解決方法(1) で挟まれたCGの原点はマーカーの中心となる 0 0 0 x y z -5 1.25 0 1.25 0

Slide 96

Slide 96 text

動作確認まだちょっとズレてる下記のように変更して再度実行

Slide 97

Slide 97 text

理由と解決方法(2)  コンピュータで3D表現をする際に、本来は視点の位置を指定する必要がある  A-Frameでは「いい感じ」に表示される視点の位置をデフォルトで設定してくれる  マーカーの位置の計算はカメラが原点にあることを前提としているため要修正カメラを明示的に追加する(位置は原点) X Z Y

Slide 98

Slide 98 text

動作確認この辺りの表示がじゃま

Slide 99

Slide 99 text

Hello, WebVR! - A-Frame 追加

Slide 100

Slide 100 text

完成

Slide 101

Slide 101 text

ARToolKitの次の世代のAR

Slide 102

Slide 102 text

さらに次の世代のAR マーカーは意識しなくてよくなる

Slide 103

Slide 103 text

スマホ・タブレット対応の次世代ARプラットフォーム [特徴]  スマホ等の携帯端末で自己位置推定や平面検出が可能 • Tango: 特殊なカメラを搭載した専用端末で動作 • ARCore: 通常のAndroid端末で動作(予定) • ARKit: iOS11が動くiPhoneやiPadで動作

Slide 104

Slide 104 text

次世代ARプラットフォームでできること  背景をカメラ映像にすることでビデオシースルーAR  背景を仮想空間にすることでVRも可能

Slide 105

Slide 105 text

A-Frame対応の専用ブラウザが登場 WeARonTango WebARonARCore WebARonARKit

Slide 106

Slide 106 text

編集中のコードを複製画面右上のプロジェクト名が表示されている箇所からRemix This ①プロジェクト名 ②Remix This

Slide 107

Slide 107 text

AR.js関連や他不要な記述を削除 Hello, WebVR! - A-Frame 赤字の部分を削除

Slide 108

Slide 108 text

CGの位置・大きさを整える  マーカー使用時はマーカーに対する相対的な位置サイズだった  次世代ARプラットフォームを使う場合、実スケール(m)を用いるここを変更

Slide 109

Slide 109 text

Three.ar.jsとaframe-ar.jsをインポート Hello, WebVR! - A-Frame 追加

Slide 110

Slide 110 text

AR機能をオンにする追加追加

Slide 111

Slide 111 text

WebARonTangoで動作確認アドレスバーに https://xxxxx.glitch.me/と入力

Slide 112

Slide 112 text

参考 A-Frame https://aframe.io/ AR.js https://github.com/jeromeetienne/AR.js 解説ブログ(A-Frame公式) https://aframe.io/blog/arjs/ ハンズオン資料 by 杉井さん https://www.slideshare.net/YouichiSugii/a-frame-20170129 by 早井さん https://speakerdeck.com/shinjism/a-framedeoshou-qing-webar