WebAR : Lab 7 in Singapore

7月5

【WebAR】AR.jsとA-Frameで簡単にWebARを実現 Part.2

前回から AR.js と A-Frame の組み合わせで実現する WebAR を試しています。前回は AR.js公式ページで紹介されている Marker Based WebAR のサンプルプログラムの使用方法を紹介しました。

【AR.jsとA-Frameで簡単にWebARを実現 Part.1】

今回はこのサンプルプログラムを修正して、以前 WebVRで試したものを WebARで表示してみようと思います。

タグ：: #AR; #AR_VR; #WebAR

2020年07月05日00:00
lab_7
コメント:0

7月1

【WebAR】AR.jsとA-Frameで簡単にWebARを実現 Part.1

以前 Webブラウザ上で簡単に３D表現が実現できる A-Frame を利用した WebVR を紹介しました。

【A-Frameで簡単にWebVRを実現】

そして、今回からは同じ A-Frame と、WebAR用の JavaScriptライブラリ AR.js を組み合わせた WebAR を紹介 します。

まず今回は写真にあるように、一番簡単な黒い枠線のあるマーカーを利用した Marker Based WebAR を公式にあるサンプルを使って説明していきます。

続きを読む

タグ：: #AR; #AR_VR; #WebAR

2020年07月01日00:00
lab_7
コメント:0

5月20

【WebAR】A-Frameで簡単にWebVRを実現 Part.2

本ブログでは今まで Unityでの ARアプリ開発の話を多く書いてきましたが、WebAR も書き出そうかと思います。

前回から ARの前に、A-Frame のみで実現できる WebVR を紹介しています。A-Frameとはと言う概要から、A-Frameのサイトにあるサンプルをスマホで実行するまでの方法、プログラムの詳細を説明しました。

【A-Frameで簡単にWebVRを実現 Part.1】

今回は前回のサンプルには含まれない他のいくつかのタグを紹介します。
以下の様に画像ファイル、アニメーション、３Dモデルの表示ができるようなプログラム（HTML）です。

タグ：: #AR; #AR_VR; #WebAR

2020年05月20日00:00
lab_7
コメント:0

5月13

【WebAR】A-Frameで簡単にWebVRを実現 Part.1

本ブログでは今まで Unityでの ARアプリ開発の話を多く書いてきましたが、WebAR も書き出そうかと思います。

WebARを作成する場合、メジャーでかつ無料なライブラリと言ったら A-Frameと AR.jsです。
これらの利用法を何回かに渡って紹介していきます。

まず今回は ARに入る前に、A-Frame のみで実現できる WebVR の紹介です。
A-Frameのサイトにあるサンプルをスマホで実行すると以下のような形で表示されます。

タグ：: #AR; #AR_VR; #WebAR

2020年05月13日00:00
lab_7
コメント:0