最初はARなどで検索をしていたのですが、自分が欲しい情報はWebARやWebVRで検索する必要があったことに段々気づいて行きます。
- ユーザ側が、端末問わず、アプリインストール無しで見られるもの
→ 前回AR.js Studioの途中ですが、そもそもAR.jsとは何かをしりたい。 - 紙面上で、出来れば画像ベース(Image Tracking) 無理ならマーカーベース
→画像ベースならAR.js Studioではなく、AR.jsでコードを書くしかなさそう。 - モデルは3D(LiDARスキャンかそれっぽいのを簡単に作る)
→3Dモデルキャラは作りましたが、今回は既存のプリミティブでA-Frame試し。 - 3Dが浮かび上がれば良い
→AR.jsを知るには、A-Frameを知る必要があるようなので、今回は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とはなにか?なぜみんな使っているのか?
上記の参考リンク「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> <a-light> <a-entity light><a-light>
→<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>両方追加
<a-entity light> <a-light> <a-entity light><a-light>
次回は、ONIちゃん、シロちゃんもVRの世界に入れてみたいと思います。
<3DのONIちゃんについてはこちら>
ブログ:ONIちゃん登場@Ps/Dimension
<シロちゃんについてはこちら>
チャとシロの日常