オリジナルポストカードは”こちら”で好評発売中!

AR.js を使ってみたい1 まずはA-Frame 3D/AR21

最初はARなどで検索をしていたのですが、自分が欲しい情報はWebARやWebVRで検索する必要があったことに段々気づいて行きます。

 WebARを使いたい 目標の復習と更新

  • ユーザ側が、端末問わず、アプリインストール無しで見られるもの
    → 前回AR.js Studioの途中ですが、そもそもAR.jsとは何かをしりたい。
  • 紙面上で、出来れば画像ベース(Image Tracking) 無理ならマーカーベース
    →画像ベースならAR.js Studioではなく、AR.jsでコードを書くしかなさそう。
  • モデルは3D(LiDARスキャンかそれっぽいのを簡単に作る)
    →3Dモデルキャラは作りましたが、今回は既存のプリミティブでA-Frame試し。
  • 3Dが浮かび上がれば良い
    →AR.jsを知るには、A-Frameを知る必要があるようなので、今回はA-Frame。

 AR.js実装の前にA-Frameでやってみる

色々なサイトを見る限り、皆さん、このサイトのGet startedを参考にされているんですね。
参考:AR-js-org/AR.js 

フレームワークが何をするものか定かではないものの、A-Frameを読み込む事で、javascriptを書かずに、HTMLタグだけでシーンができるようになるらしい。

A-FrameのInstallationはいくつか方法があるようで、AR.jsをやってみよう的なサイトをいくつか見た限りでは、CDNビルドという方法以外は見当たらなかった。他にnpmという言葉があったので参考に少し読む。
参考:VR表現をカンタンに実装できる?「A-Frame」であそんでみたよ!
   A-Frame1.2.0>Installation
   結局ライブラリはCDNから読み込むのとnpm installして自前配信のどっちが良いのか?


後日、Node.jsに関する記事を読んでいたら、npmという記述が出てきました。npmはNode.jsのパッケージ管理ツールで、Pythonにおけるpipみたいな感じとのこと。Python少しやってみててよかった。なるほど。この記事でJavaScript実行環境という言葉の意味は理解できました。
参考:Node.jsとはなにか?なぜみんな使っているのか?

 A-FrameはARじゃなくてVRらしい

上記の参考リンク「VR表現をカンタンに実装できる?「A-Frame」であそんでみたよ!」のサイトに習って、A-Frameをやってみる事に。プリミティブはもう専用タグがある感じなのですね。

参考:A-Frame1.2.0>Introduction
   A-Frame1.2.0>Introduction>HTML & Primitives
   A-FRAME プリミティブ一覧
   A-Frameのprimitive object全部書かなきゃ帰れま10

おおぉ!
サイトのバージョン0.8.0と最新の1.2.0で試してみる。VRのアイコンが違う。
こういうのはどのバージョンにすればいいのか迷う。CDNという方法で、現在の最新、1.2.0で進めてみることに。

 スカイボックス色の変更とライトの追加

上記からskyの色を水色に変えました。色の数字を適当に何度か変えたら水色になった。


なぜ light が2種類あるのかの理解はここでは飛ばして、先ずは<a-entity light>と<a-light>タグを追加して様子見。
それぞれ下記日本語の参考サイトの値のままにしています。
モデル作りで3DCG少し触ったから、光源タイプなど聞いたことのある単語で想像がつくのは嬉しい。

→<a-entity light>タグのみ追加 castShadow:true
→<a-light>タグのみ追加 directional & ambient
→<a-entity light>&<a-light>両方追加

参考:VR表現をカンタンに実装できる?「A-Frame」であそんでみたよ!
   【blender2.8】AR.js(A-Frame)で簡単にARを実する方法 (AR.js Marker Training.patt/.glTF+animation)
   A-Frameを使った基本的なデモの作成 (→あとでちゃんと読む)
   A-Frame1.2.0>Primitives><a-light> <a-light>
   A-Frame1.2.0>Components>light <a-entity light>

 影とライトの追加


光と影の記述なし(デフォルト環境)
→床と黒い球体に影を追加 shadow=”receive: true” (影響する側とされる側の両方に必要。)


上記の球体の影を追加した状態に
→<a-entity light>タグのみ追加 castShadow:true
→<a-light>タグのみ追加 directional & ambient
→<a-entity light>&<a-light>両方追加

次回は、ONIちゃん、シロちゃんもVRの世界に入れてみたいと思います。


<3DのONIちゃんについてはこちら>
ブログ:ONIちゃん登場@Ps/Dimension

<シロちゃんについてはこちら>
チャとシロの日常