2017.08.05 広島フロントエンド勉強会 & 広島Unity勉強会　特別版 にて発表 https://hfe.connpass.com/event/60118/

1. A-FRAME 詰め合わせ ～これから始めるWEBVR ～
SPEAKER ： 杉井 庸一

2. CAUTION!!
 本資料では数多くのデモを行います。お手持ちのデバイスで体験したい方は、ネッ
トに接続できる環境をご用意いただき、URLへアクセスください。
 ＜PC＞
 connpassサイトのコメント欄で共有します。以下の環境をご用意ください
 ブラウザ（Chrome もしくは Firefox）
 ＜スマホ＞
 資料中でQRコードを表示します。以下の環境をご用意ください。
 QRコードリーダー
 ブラウザ（Chrome もしくは Firefox）
 スマホ本体を動かすため、ご起立の上、周りに気を付けて体験願います。

3. 発表する人 こんな人
 杉井 庸一（Youichi Sugii）
 昭和51年生まれ（40歳）
 福岡在住。今年1月から 単身赴任で広島市西区 に。
 バックエンド システムエンジニア。
 AIX、Shell、DB2、DataStageなどを扱っています。
 バイク好き。
 Facebook：youichi.sugii 。A-Frame仲間を募集中

4. 今日の目的！！
 今日みなさんに持ち帰ってほしいこと！！
1. A-Frameはいろいろなことができる！
2. 実装がめちゃめちゃ簡単！！

5. 目次
 まずはデモ
 Hello World
 A-Frameの説明
 またまたデモ
 もっと詳しく知りたい！！

6. デモ
A-FRAMEというかWEBVRの体験

7. 操作方法
 PCの人
 移動：WASDキー（カーソルキー）
 向き：マウス移動。ESCで解除
 スマホの人
 移動：画面タッチで進みます
 向き：スマホ本体を動かします。

8. MINRCRAFT A-FRAME
http://minecraft-aframe-
sgi.azurewebsites.net/

9. HELLO WORLD
気になるソースコードの説明

10. HELLO WORLD https://aframe.io/examples/showcase/helloworld/

11. この時点でA-FRAMEが実現していること
 VR空間へのエンティティ表示
 デフォルトライトの設置
 デフォルトカメラの設置
 WASDキー or カーソルキーによる移動
 マウスによる視点変更
 スマホの6軸（加速度、ジャイロ）センサーによる視点変更
 VRモード（視差による立体視）
 Vive, RiftなどのPosition Trackingもサポート

12. ライブラリ読み込み
SCENEで囲む
ENTITYの記述

13. A-FRAMEのドキュメント
https://aframe.io/docs

14. A-FRAMEの説明
要点だけ押さえておきましょう

15. A-FRAMEってなに？
 WEBブラウザ上にVRコンテンツを構築するJavascriptフレームワーク。（https://aframe.io）
 Firefoxで有名なMozillaのVRチーム（https://mozvr.com/）が開発しています。
 最新のWebVR1.1 APIをサポート。（https://webvr.info/）
 PC、スマホはもとより、Vive, Rift, DayDream, GearVR, CardboardなどのHMDもサポート。
 難解なWebGL（Three.js）を隠蔽し、HTMLとJavascriptで簡単に実装可能。
 Entity-Component-Structure（ECS）を採用しており、柔軟なコンポーネント設計が可能
 本家はもとより、コミュニティが作成したコンポーネントが多数ある。

16. またまたデモ
時間の許す限り、A-FRAMEでできることをデモします

17. A-FRAME × ANIMATION

18. ANIMATION
 ENTITYに動き（ANIMATION）を付けることができます。
 ENTITYの属性値を一定時間かけて変化させることで、アニメーションを実現
 例： Y軸位置を0→1に1秒かけて変更する。
 例：COLOR値を青(0000FF)→赤(FF0000)に60秒かけてゆっくり変化させる。
 などなど。
https://aframe.io/examples/showcase/animati
on/

19. ANIMATION設定
A-BOXのPOSITIONを
変化させる。

20. A-FRAME × VISUAL INSPECTOR

21. VISUAL INSPECTOR
 WEBブラウザ上でVISUAL的にA-FRAME ENTITYを編集できます。（PCのみ）
 A-FRAMEを表示している画面で、 と入力します。
 そのまま保存はできません。HTMLソースをエクスポートします。
 操作方法
 回転： 左クリック＋マウス移動
 ズーム：マウスホイール
 移動： 右クリック＋マウス移動
 ヘルプ：「H」キー押下
CTRL ＋ ALT ＋ i
CTRL ＋ ALT ＋ i

22. A-FRAME × SKETCHFAB

23. SKETCHFAB
 SKETCHFABに特化した何かというわけではないのですが・・・
 A-Frameでは、様々な3Dモデルを読み込むことができます。
 glTF, OBJ, COLLADA形式をサポートしています。
 ※A-Frameとしては、glTFを推奨しています。
 SKETCHFABから3Dモデルのダウンロード方法はここがわかりやすかった
 http://blog.ifashion-lab.com/entry/styly-sketchfab
デモなし

24. OBJファイルの設定

25. A-FRAME × RICOH THETA

26. RICOH THETA
 RICOH THETAは、ワンショットで360度すべてを撮影できる
 THETA360.COM、FACEBOOKなどで共有可能。
 それ以外に共有方法が見当たらない。
 ↓
 A-FRAMEを360度天球画像のビューアとして使ってみよう。
https://aframe.io/examples/showcase/
sky/

27. 画像ファイルの設定

28. A-FRAME × PHYSICS

29.  A-FRAME内で物理現象を実現する。
 ENTITYとの衝突や、重力による落下など。
 AFRAME-PHYSICS-SYSTEMという別ライブラリを使用します。
PHYSICS
https://webvr.donmccurdy.com/force-
push/

30. ライブラリの読み込み
カメラエンティティ追加
各コンポーネント追加

31. A-FRAME × LINK TRAVERSAL

32. LINK TRAVERSAL
 複数のVR空間をつなぐリンクを作成できる。
 HTMLページにおけるハイパーリンクに相当する。
 V0.6.0からの機能です。
デモなし

33. カメラ、カーソルエンティティ追加
クリック可能とする。
リンクエンティティ追加

34. A-FRAME × LEAP MOTION

35. LEAP MOTION
 LEAP MOTIONは、ユーザの手・指の動きを検知することに特化したデバイス
 奥行きも含め立体的に手・指を検知するため、VRとの相性がよい。
 LEAP MOTIONで検知した手・指をA-FRAME内に表現し、
 ものをつかむなどの動きをA-FRAME上に再現することができる。
デモなし

36. ライブラリの読み込み
A-CAMERAで囲む
LEAP MOTIONの
HAND ENTITYを追
加する。

37. A-FRAME × OCULUS／HTC-VIVE

38. OCULUS/／HTC-VIVE
A-FrameはデフォルトでVR-HMDに対応しています。ブラウザ側の初期設定が必要です。
 https://mozvr.com/ にアクセス
 自分のVR-HMDに該当するINSTRUNCTIONを実施。
 VR-HMDの準備をする。
 FIREFOX NIGHTLY もしくは CHROMIUMを準備する。
 A-FRAMEサイトにアクセス。
 のマークをクリックする。
デモなし

39. A-FRAME × MMD

40. MMD
 MMD（MIKU MIKU DANCE）とは、フリーの3DCGムービー製作ツール
 VOCALOID「初音ミク」を動かせるというキャッチーさと、
 フリーで手軽に作成できるハードルの低さで人気があります。
 作成した3DCGのビューアーとして、A-FRAMEを使用できます。
 注意：リンク先にアクセスすると音楽が流れます。
https://cdn.rawgit.com/takahirox/a-
mmd/v1.0.2/index.html

41. ライブラリの読み込み
MMDを追加
モデルデータを追加

42. A-FRAME × AR

43. AR
 POKEMON GOや、AR TOOLKITで一般認知度が格段に上がったAR
 JAVASCRIPTでARができるAR.JSライブラリを使い、A-FRAMEでマーカー型ARを実現
 注意：IOSは未対応（IPHONE、IPADは動作不可）
 カメラへのアクセスを求められたら、許可を選択します。
https://jeromeetienne.github.io/AR.js/aframe/examples/basic.ht
ml

44. ライブラリの読み込み
カメラデバイスへのアクセス設定
「hiro」マーカーに対するENTITY設定

45. デモサイト、参考サイト一覧
 A-FRAME
 https://aframe.io/examples/
 http://drawvr.com/
 PHYSICS
 https://github.com/donmccurdy/aframe-physics-system
 LEAP MOTION
 https://github.com/openleap/aframe-leap-hands
 MMD
 https://github.com/takahirox/a-mmd
 http://kizunaai.com/download-page/
 http://seiga.nicovideo.jp/seiga/im4942407
 AR
 https://github.com/jeromeetienne/AR.js/tree/master/aframe
 https://aframe.io/blog/arjs/

46. もっと詳しく！！

47. 他にサンプルないの？
 A-Frame公式サイト（https://aframe.io/examples/）にサンプルがあります。
 A-FrameのGitHub（https://github.com/aframevr/aframe）のexamplesにもあります。
 各ライブラリのGitHubにもそれぞれのサンプルが置いてあります。
 Aframe AwesomeのGitHub（https://github.com/aframevr/awesome-aframe）もサンプルがあります。

48. A-FRAMEを使ったサイトって何があるの？
 Aframe-Awesome（https://github.com/aframevr/awesome-aframe/）に紹介されています。
 日本ではあまり多くはありません。（私が知らないだけ？）
 VR PARCO（https://vr-parco.jp/）：公開終了
 徳島VR映像祭（https://tokushima-vrfes.com/）：パルマーさんが・・・
 最新情報はBlog（https://aframe.io/blog/）にて多数紹介されています。

49. どうやって勉強するの？
 メインは公式サイトのドキュメント（https://aframe.io/docs/）を見ていく形になります。
1. A-Frame Blog（https://aframe.io/blog/）やAframe-Awesome（ https://github.com/aframevr/awesome-
aframe/ ）を見て、A-Frameで何ができるかチェックする。
2. ドキュメント（https://aframe.io/docs/）のIntroductionを一読する。
3. A-Frame School（https://aframe.io/aframe-school/）のチュートリアルを実施する。
4. ドキュメント（https://aframe.io/docs/）のGUIDESを一通り動かしてみる。
5. Slackで情報収集したり、StackOverflowで疑問点を質問してみる。
6. Twitterなどで作品を公開し、運が良ければA-Frame Blogで取り上げられる。

50.  A-Frameのハンズオンを行っています。
 https://hsc.connpass.com/event/52298/
 昨年より、福岡、東京、広島にて開催
 初学者向けでとっつきやすい内容
 HTC VIVEを使った体験も行っています。
 もくもく会などもやっていきたいです。
 Facebookで募集をかけます。友達申請お願いします。
一緒に勉強しましょう

51. Enjoy VR. Enjoy A-Frame.