本ブログでは今まで Unityでの ARアプリ開発の話を多く書いてきましたが、WebAR も書き出そうかと思います。
WebARを作成する場合、メジャーでかつ無料なライブラリと言ったら A-Frameと AR.jsです。
これらの利用法を何回かに渡って紹介していきます。
まず今回は ARに入る前に、A-Frame のみで実現できる WebVR の紹介です。
A-Frameのサイトにあるサンプルをスマホで実行すると以下のような形で表示されます。
【A-Frameのサンプル】
以下の A-Frameのサイトにアクセスします。
https://aframe.io/
「GET STARTED」をクリックで、簡単なサンプルソールが表示されますので、これを試してみましょう。
以下のサンプルプログラムの部分をテキストファイルにコピペして、HTMLファイルとして保存します。
この HTMLを Webブラウザで表示すると、WebVRとして表示できます。
このHTMLファイルをスマホにコピーして、直接スマホ内のブラウザで呼び出せば以下の様になります。
VRボタンをクリックで、スマホを用いたVR用の表示がされます。
【サンプルプログラムの詳細】
このサンプルプログラムの詳細説明です。
・<head>内の <script>タグで A-Frameのライブラリを指定して取り込みます。このサンプルでは直接ネットから取得してますが、ダウンロードしてPC内から直接取り込んでも構いません。
・<body>内に <a-scene>タグを追加し、その中にVR表示する画面の内容を記述していきます。
・<a-box>で直方体、<a-sphere>で球、<a-cylinder>で円柱、<a-plane>で平面の基本図形を描画します。
・基本図形タグ内のパラメータは、position: 位置（x y z）、rotation: 回転（向き）、radius: 半径、height: 高さ、width: 幅、color: 色を指定。
・<a-sky>タグで背景の色を指定。
【A-Frame Inspector】
A-Frameには A-Frame Inspector と言うブラウザベースのデバックツールが付属しています。
起動の方法は、デバックしたい A-Frame画面を表示して、Ctrl + Alt + I で以下のようなデバック画面が立ち上がります。
このツールにより、３D空間上のオブジェクトの位置調整が視覚的に認識しながら容易に行うことができます。操作も Unityなんかのゲームエンジンと近い操作法となっているので、直感的に操作が行えます。
今回は WebVRを簡単に実現することができる A-Frameの概要とサンプルプログラムを紹介しました。次回はいくつか他のタグも利用してサンプルプログラムを修正してみます。
【A-Frameで簡単にWebVRを実現 Part.2】
WebARを作成する場合、メジャーでかつ無料なライブラリと言ったら A-Frameと AR.jsです。
これらの利用法を何回かに渡って紹介していきます。
まず今回は ARに入る前に、A-Frame のみで実現できる WebVR の紹介です。
A-Frameのサイトにあるサンプルをスマホで実行すると以下のような形で表示されます。
【A-Frameとは】
A-Frameは HTMLを使って WebVRが作成できるオープンソースの Webフレームワークです。
Firefox、Chrome, Edge等、主要なWebブラウザ上で簡単に３D表現が実現でき、また、各種VRヘッドセットやスマホのブラウザにも対応しています。
そして、AR.jsと組み合わせることにより、WebARも簡単に実現可能となっております。
もともとは Mozillaの VRチーム内で Web開発者により WebGLを知らなくても HTMLを用いて3DVRを実現できるよう開発され、現在、Supermediumおよび Googleの開発者によって保守されています。
A-Frameは HTMLを使って WebVRが作成できるオープンソースの Webフレームワークです。
Firefox、Chrome, Edge等、主要なWebブラウザ上で簡単に３D表現が実現でき、また、各種VRヘッドセットやスマホのブラウザにも対応しています。
そして、AR.jsと組み合わせることにより、WebARも簡単に実現可能となっております。
もともとは Mozillaの VRチーム内で Web開発者により WebGLを知らなくても HTMLを用いて3DVRを実現できるよう開発され、現在、Supermediumおよび Googleの開発者によって保守されています。
【A-Frameのサンプル】
以下の A-Frameのサイトにアクセスします。
https://aframe.io/
「GET STARTED」をクリックで、簡単なサンプルソールが表示されますので、これを試してみましょう。
以下のサンプルプログラムの部分をテキストファイルにコピペして、HTMLファイルとして保存します。
この HTMLを Webブラウザで表示すると、WebVRとして表示できます。
このHTMLファイルをスマホにコピーして、直接スマホ内のブラウザで呼び出せば以下の様になります。
VRボタンをクリックで、スマホを用いたVR用の表示がされます。
【サンプルプログラムの詳細】
このサンプルプログラムの詳細説明です。
・<head>内の <script>タグで A-Frameのライブラリを指定して取り込みます。このサンプルでは直接ネットから取得してますが、ダウンロードしてPC内から直接取り込んでも構いません。
・<body>内に <a-scene>タグを追加し、その中にVR表示する画面の内容を記述していきます。
・<a-box>で直方体、<a-sphere>で球、<a-cylinder>で円柱、<a-plane>で平面の基本図形を描画します。
・基本図形タグ内のパラメータは、position: 位置（x y z）、rotation: 回転（向き）、radius: 半径、height: 高さ、width: 幅、color: 色を指定。
・<a-sky>タグで背景の色を指定。
【A-Frame Inspector】
A-Frameには A-Frame Inspector と言うブラウザベースのデバックツールが付属しています。
起動の方法は、デバックしたい A-Frame画面を表示して、Ctrl + Alt + I で以下のようなデバック画面が立ち上がります。
このツールにより、３D空間上のオブジェクトの位置調整が視覚的に認識しながら容易に行うことができます。操作も Unityなんかのゲームエンジンと近い操作法となっているので、直感的に操作が行えます。
今回は WebVRを簡単に実現することができる A-Frameの概要とサンプルプログラムを紹介しました。次回はいくつか他のタグも利用してサンプルプログラムを修正してみます。
【A-Frameで簡単にWebVRを実現 Part.2】
Sponsored Link
E-Mail: 