![まずは体験
基本サンプル Hello WebVRをクリック
画面をクリック
?回転：マウスでドラッグ
?左右：[←][→]キー
?前後：[↑][↓]キー
※前後左右は自分がどちらに動くかで考える](https://image.slidesharecdn.com/oscshortss-201128071152/85/OSC2020-Fukuoka-WebAR-11-320.jpg)
![テクスチャ画像をアップロード
Glitchのエディタページに戻り、画面左の[assets]をクリック
続いて、画面上方の[Upload an Asset]をクリック
①assets
② Upload an Asset](https://image.slidesharecdn.com/oscshortss-201128071152/85/OSC2020-Fukuoka-WebAR-35-320.jpg)
![[Glitch版] 0から始めよう奥别产础搁/痴搁入门ハンズオン with 織りなすラボ](https://cdn.slidesharecdn.com/ss_thumbnails/yoshinagaglitchss2-200719023821-thumbnail.jpg?width=560&fit=bounds)
![[Netlify版] 0から始めよう奥别产础搁/痴搁入门ハンズオン with 織りなすラボ](https://cdn.slidesharecdn.com/ss_thumbnails/yoshinaganetlifyss-200719024058-thumbnail.jpg?width=560&fit=bounds)
More Related Content
What's hot (20)
Similar to OSC2020 Fukuoka: インストールいらず、WebAR入門 (20)
More from Takashi Yoshinaga (19)
Recently uploaded (15)
OSC2020 Fukuoka: インストールいらず、WebAR入門
- 3. 自己紹介 氏名：吉永崇(Takashi Yoshinaga) 所属：Steampunk Digital株式会社 専門：医療支援AR,運動計測,3DVideo コミュニティ：ARコンテンツ作成勉強会
- 6. 本题に入ります
- 7. A-Frameの概要 ? Webブラウザ上でVRなどの3D表現を簡単に実現するフレームワーク ? HTMLのタグを書くだけで3Dオブジェクトを配置できる ? Firefox、Chrome、Edgeなど主要なブラウザがWebVR対応を表明 ? Oculus QuestやHTC ViveなどのHMD、スマホVRにも対応 ? AR対応ライブラリも利用可能 (対応端末のみARモードもあり)
- 10. まずは体験 基本サンプル Hello WebVRをクリック Hello WebVR
- 11. まずは体験 基本サンプル Hello WebVRをクリック 画面をクリック ?回転：マウスでドラッグ ?左右：[←][→]キー ?前後：[↑][↓]キー ※前後左右は自分がどちらに動くかで考える
- 12. 础搁开発は？
- 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)
- 15. ハンズオン手順 Step1: A-Frame公式からサンプルを開発環境にコピー Step2: テクスチャを使ってCGの見た目の調整 Step3: 础搁.箩蝉を使って础搁コンテンツを作成
- 16. ハンズオン手順 Step1: A-Frame公式からサンプルを開発環境にコピー Step2: テクスチャを使ってCGの見た目の調整 Step3: 础搁.箩蝉を使って础搁コンテンツを作成
- 17. 必要なもの ? Webブラウザ → コンテンツの体験や动作确认 ? テキストエディタ → HTMLやjavascriptの記述 ? Webサーバー → コンテンツの公開 サーバーに関して今回は??? ? Glitchを利用 https://glitch.com/ ? FacebookかGitHubのアカウントがあればOK ? サーバーとエディタの両方を無料で提供 この資料ではGlitch使用を前提に説明します
- 20. 基本サンプルのコードの複製 Glitchユーザーはremix the starter example on Glitchをクリック ※通常はHello WebVRの記述をコピーし、自作のHTMLファイルにペースト Click
- 23. ソースの確認 <html> <head> <title>Hello, WebVR! - A-Frame</title> <meta name="description" content="Hello, WebVR! - A-Frame"> <script src=/slideshow/osc2020-fukuoka-webar/239562033/"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. ソースの確認 <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. 动作确认 Show
- 26. 动作确认 Next to The Code
- 27. 动作确认
- 28. ハンズオン手順 Step1: A-Frame公式からサンプルを開発環境にコピー Step2: テクスチャを使ったCGの見た目の調整 Step3: 础搁.箩蝉を使って础搁コンテンツを作成
- 29. ハンズオン手順 Step1: A-Frame公式からサンプルを開発環境にコピー Step2: テクスチャを使ったCGの見た目の調整 Step3: 础搁.箩蝉を使って础搁コンテンツを作成
- 30. アレンジしよう (まだやらなくてOK) タグ内の各パラメータを編集してCGの見た目を調整 ? position(位置)：x y zの順にスペースで区切って指定 (0 1.25 -5) 位置 回転 色x y z座標
- 31. アレンジしよう (まだやらなくてOK) タグ内の各パラメータを編集してCGの見た目を調整 ? position(位置)：x y zの順にスペースで区切って指定 ? rotation(傾き)：各軸を中心とした回転で表現 ? color(色)：カラーコード等で指定 ? 他にも図形によって各種設定項目がある X Z Y (0 1.25 -5) 【設定項目の例】 radius(半径) width(幅) height(高さ) depth(奥行) src (画像など)原点
- 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
- 35. テクスチャ画像をアップロード Glitchのエディタページに戻り、画面左の[assets]をクリック 続いて、画面上方の[Upload an Asset]をクリック ①assets ② Upload an Asset
- 40. ソースの書き換え <head> <title>Hello, WebVR! - A-Frame</title> <meta name="description" content="Hello, WebVR! - A-Frame"> <script src=/slideshow/osc2020-fukuoka-webar/239562033/"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
- 43. ハンズオン手順 Step1: A-Frame公式からサンプルを開発環境にコピー Step2: テクスチャを使ったCGの見た目の調整 Step3: 础搁.箩蝉を使って础搁コンテンツを作成
- 44. ハンズオン手順 Step1: A-Frame公式からサンプルを開発環境にコピー Step2: テクスチャを使ったCGの見た目の調整 Step3: 础搁.箩蝉を使って础搁コンテンツを作成
- 46. 準備 代わりに別のタブで実行画面を開いておく ①Show ②In a New Window
- 47. AR.jsをインポート & カメラ画像の表示 <head> <title>Hello, WebVR! - A-Frame</title> <meta name="description" content="Hello, WebVR! - A-Frame"> <script src=/slideshow/osc2020-fukuoka-webar/239562033/"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=/slideshow/osc2020-fukuoka-webar/239562033/"URL" shadow> </a-sphere> </a-scene> </body> AR.jsの読み込みをしたあと、a-sceneタグにembeddedを追加 追加 <a-scene embedded> 背景色を削除してembeded lesson03
- 48. マーカーを認識してその上にCGを表示 <body> <a-scene embedded arjs> <a-marker preset="hiro"> <a-sphere position="0 1.25 -5" radius="1.25" src=/slideshow/osc2020-fukuoka-webar/239562033/"URL" shadow> </a-sphere> </a-marker> </a-scene> </body> ? AR表示をするにはマーカーとCGとの関連付けが必要 ? A-Frameの場合<a-marker></a-marker>でCGを挟む ? presetでマーカー名を指定 (付属マーカーのHiro使用) ? 正方形内のマーカーを独自に作ることも可能 (参考) マーカーの上にこれを表示したい 追加 lesson04
- 50. 理由と解決方法(1) <a-marker> </a-marker>で挟まれたCGの原点はマーカーの中心となる <a-sphere position="0 1.25 -5" radius="1.25" src=/slideshow/osc2020-fukuoka-webar/239562033/"URL" shadow> 0 0 0 x y z -5 1.25 0 1.25 0
- 51. 动作确认 まだちょっとズレてる 下記のように変更して再度実行 <a-sphere position="0 1.25 0" radius="1.25" src=/slideshow/osc2020-fukuoka-webar/239562033/"URL" shadow> lesson05
- 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=/slideshow/osc2020-fukuoka-webar/239562033/"URL" shadow> </a-sphere> </a-marker> <a-entity camera></a-entity> </a-scene> </body> カメラを明示的に追加する(位置は原点) X Z Y lesson06
- 53. 完成
- 54. おまけ：アニメーションの追加 <a-sphere position="0 1.25 -5" radius="1.25" src=/slideshow/osc2020-fukuoka-webar/239562033/"テクスチャの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