スターティアラボ 初心者向けWebVR勉強会 part1
勉強会を開催しました
先日、スターティアラボ主催で初心者向けWebVR勉強会を開催しました。
https://startialab.connpass.com/event/180157/
10名以上の方に参加いただきました。オンライン開催にもかかわらず様々な質問をいただき、WebVRへの興味を持っている人がこんなにもいることに嬉しく思いました。
今回のBlogでは、その勉強会の内容をご紹介したいと思います。
作成したもの
ブラウザ上に迷路を作成します。
https://startialab-webvr-maze-handson.glitch.me/
A-Frameの体験
まずは、A-Frameがどのようなものか体験してもらいました。
https://aframe.io/ へアクセスし、左のExamplesから「Hello WebVR」を選択します。
球、立方体、円柱、平面が置かれたサイトが表示されました。
マウスをドラッグ＆ドロップしてみましょう。見る方向を変えることができます。
キーボードのWASDキー（もしくは十字キー）を押すと、３D空間内を移動できます。
A-Frameの説明
簡単ですが、A-Frameの説明を行いました。
その前に、A-Frameが使っているWebVR／ARについても説明しました。
WebVR／ARとは？
VRとは、”Virtual Reality”の略で”人工現実感/仮想現実”と訳されます。コンピュータによって作り出された世界を現実として知覚させる技術。
ARとは、”Augmented Reality”の略で”拡張現実感”と訳されます。現実世界をベースに3Dモデルやグラフィックスを利用して情報を加えることで、現実世界を”拡張”します。
WebVR/ARとは、VR/ARをWebブラウザで利用できる技術です。
URLでアクセスするためアプリのインストールが不要で、手軽にVR/ARを利用することができます。最近は総称としてWebXRと呼ぶことが多いです。
A-Frameとは？
Webブラウザ上でVRなどの3D表現を簡単に実現できるフレームワークです。
HTMLタグを書くだけで3Dオブジェクトをブラウザに配置できます。
Chrome、Firefox、Edge、Safariなど主要なブラウザで動作します。
Oculus Quest、HTC ViveなどのHMD、スマホVRにも対応しています。
外部ライブラリを組み合わせることでARや様々な機能を利用可能です。
開発環境設定
今回のハンズオンでは、https://glitch.com/ を利用します。glitch.comとは、Webブラウザ上でコーディング及び外部公開できるWebサービスです。利用する際はアカウントを作成しておきましょう。
glitch.comを詳しく知りたい方は、https://laboradian.com/glitch/ のblogがお勧めです。
基本サンプルコードをGlitchへ
再び、https://aframe.io/ へアクセスし、右側の「GET STARTED」をクリックします。クリックすると、A-Frameのドキュメントサイトへ移動します。
A-frameのドキュメントサイトへ移動後、本文中の「remix the starter example on Glitch」をクリックします。クリックすると、glitch.com上のA-Frameサンプルサイトへ移動します。
ログインしてない場合はここでログインします。ログイン後、右下の「Remix Your Own」をクリックすることで、A-Frameのソースコードを自分のGlitchプロジェクトとしてRemixします。
PCブラウザでの動作確認
Remixしたプロジェクトから、左上のShow→「In a New Window」を選択し、動作確認します。
ソース説明
先ほどRemixしたA-Frameのソース説明を行います。
A-Frameソース説明
ソースのindex.htmlを確認しましょう。
７行目のscriptタグが、A-Frameライブラリ本体です。
body句内に見慣れない「a-scene」というタグがあります。これはA-Frameのカスタムタグで、A-Frameで表現する３D空間を表します。３Dオブジェクトや背景設定などは、このa-sceneタグ内にカスタムタグ配置することで表現できます。
a-scene内のタグ説明です。
a-box、a-sphere、a-cylinder、a-planeの４つのタグが存在します。
それぞれ以下に対応しています。
・a-box: 水色の立方体
・a-sphere: 赤色の球
・a-cylinder: 黄色の円柱
・a-plane: 緑色の床面（平面）
タグには属性を設定することで、位置や向きなどを変更できます。主な属性を説明します。
・position: 位置（x y z） 座標位置をスペース区切り
・rotation: 向き（x y z）0〜360度をスペース区切り
・color: 色（カラーコード）#000000〜#FFFFFF
・shadow: 影の有無
タグによっては独自の属性を持っています。詳細は https://aframe.io/docs/ の左下にある PRIMITIVES を確認ください。
座標・回転・スケール（X、Y、Z）
座標位置、回転、スケール属性の設定には、X、Y、Z軸に沿って設定します。
・X軸: 自分から見て左右方向。右がプラス、左がマイナス。
・Y軸: 自分から見て上下方向。上がプラス、下がマイナス。
・Z軸: 自分から見て前後方向。後ろがプラス、前がマイナス。
A-Frameでは「Y-up 右手系」の座標軸を使います。そのため「Z軸は、後ろがプラス／前がマイナス」になることに注意しましょう。
動作画面で「<ctrl> + <alt> + i」を押すと、インスペクター画面に切り替わります。これはデバッグで利用するツールで、３Dコンテンツの状態を視覚的に確認することができます。
左側で対象とするオブジェクトを選択し、右側のposition、rotation、scaleを変更してみましょう。値に応じて画面の表示も変更されますので、設定によってオブジェクトがどのように表示されるか確認できて便利です。
インスペクターで変更した値はソースコードに反映されませんので、手動で反映しましょう。
長くなりましたので、一旦切ります。
次回はいよいよハンズオンの内容を記載いたします。