A-Frame で WebXR hit-test を利用する方法
A-Frame v1.1.0 でDom-Overlay、hit-testが使えるようになったのは、以前記事にしました。
Dom-Overlayについては、以下に記載しています。
今回は hit-test について書いていきます。
これで現実空間の垂直面/水平面を取得することができます。
WebXR の設定
前回も書きましたが、A-FrameにWebXRを利用することを知らせる必要があります。
そのため、A-Frameにはwebxrコンポーネントが用意されています。
実装は簡単で、a-sceneタグにwebxrコンポーネントを設定するだけ
<a-scene webxr>
hit-test の設定
これだけでは hit-test を利用することはできません。
以下の4ステップの設定が必要です。
- webxr コンポーネントの設定
- xrHitTestSource の取得
- hitTestResult の取得
- 位置情報・回転情報の反映
それぞれ見ていきましょう。
webxr コンポーネントの設定
先ほど設定したwebxrコンポーネントの引数として、
- optionalFeatures: hit-test
を設定します。
<a-scene webxr="optionalFeatures: hit-test">
xrHitTestSource の取得
xrHitTestSource とはhit-testの結果を取得するための事前準備・インターフェースと考えてください。
詳しくは以下を参考に。
具体的にどのように取得するかは、
- a-scene から renderer を取得
- renderer から session を取得
- session からxrRefereneceSpaceを取得します。
- 取得したxrReferenceSpace を引数にxrHitTestSourceを取得します。
let scene = document.querySelector('a-scene'); let renderer = scene.renderer; let session = renderer.xr.getSession(); let viewerSpace = await session.requestReferenceSpace("viewer"); let xrHitTestSource = await session.requestHitTestSource({ space: viewerSpace });
xrReferenceSpace について別途説明を書こうと思います。
hitTestResult の取得
取得した xrHitTestSource を使って、hit-testを実行して結果（hitTestResult）を取得します。
- AnimationFrameを取得する。
- xrReferenceSpaceを取得する。
- AnimationFrameからhitTestResultを取得する
let frame = scene.frame; let refSpace = renderer.xr.getReferenceSpace(); let hitTestResults = frame.getHitTestResults(refSpace);
位置情報・回転情報の反映
取得したhitTestResultを解析して、位置・回転情報を取得する。
- hitTestResultからpose情報を取得する
- pose情報から位置、回転情報を取得する
- それぞれを対象に反映する
const pose = hitTestResults[0].getPose(refSpace); target.setAttribute("position", pose.transform.position); target.object3D.quaternion.copy(pose.transfrom.orientation);
コンポーネント化する
実際に使うことを考えてコンポーネント化しておくと便利になります。
hit-test結果を自分自身に反映するコンポーネントを作成します。
ARセッションスタート時にxrHitTestSourceを取得して、
フレーム毎にhitTestResultを取得して、自分自身の位置、回転情報を更新します。
AFRAME.registerComponent("ar-hit-test", { init: function() { // session start this.el.sceneEl.renderer.xr.addEventListener("sessionstart", async () => { if (this.el.sceneEl.is("ar-mode")) { this.renderer = this.el.sceneEl.renderer; let session = this.renderer.xr.getSession(); let viewerSpace = await session.requestReferenceSpace("viewer"); this.xrHitTestSource = await session.requestHitTestSource({ space: viewerSpace }); } }); // session end this.el.sceneEl.renderer.xr.addEventListener("sessionend", async () => { this.xrHitTestSource = null; }); }, tick: function() { const frame = this.el.sceneEl.frame; if (!frame) return; // hit-test in real world const xrHitTestSource = this.xrHitTestSource; if (xrHitTestSource) { const refSpace = this.renderer.xr.getReferenceSpace(); const hitTestResults = frame.getHitTestResults(xrHitTestSource); if (hitTestResults.length > 0) { const pose = hitTestResults[0].getPose(refSpace); this.el.setAttribute("position", pose.transform.position); this.el.object3D.quaternion.copy(pose.transform.orientation); } } } });
A-Frame で WebXR Dom-Overlay を利用する方法
A-Frame v1.1.0 でDom-Overlay、hit-testが使えるようになったのは、以前記事にしました。
今回は、そのうち、Dom-Overlayの設定方法を記載します。
WebXR の設定
Dom-Overlay設定の前に、A-FrameにWebXRを利用することを知らせる必要があります。
そのため、A-Frameにはwebxrコンポーネントが用意されています。
実装は簡単で、a-sceneタグにwebxrコンポーネントを設定するだけ
<a-scene webxr>
Dom-Overlay の設定
これだけではDom-Overlayを利用することができません。
Dom-Overlayを設定するには、以下２つが必要となります。
webxrコンポーネントの設定
先ほど設定したwebxrコンポーネントの引数として、
- optionalFeatures: dom-overlay
- overlayElement:#overlay
を設定します。
<a-scene webxr="optionalFeatures: dom-overlay; overlayElement:#overlay;">
これにより、dom-overlay機能が有効となり、IDがoverlayのタグ以下を対象として表示いたします。
overlayElementに設定する情報は任意となります。#overlayではなくても大丈夫です。
表示するDOMエレメントの作成
実際に表示するDOMエレメントの実装を行います。
<div id="overlay" ・・・></div>
上記divタグ配下にボタンなどを配置して、XR表示時に様々なコントロール可能とします。
ソロキャンプの準備 最小構成の道具
ソロキャンプに行きたいけどまだまだ寒いし、雨降っているしで実現は先になりそう。
その間、着々と道具だけは揃ってきています。
前回のブログで揃えようとしているキャンプ用品のお品書きを書きました。
今回は実際に揃えたものを紹介したいと思います。
最小構成
まずは最小構成のキャンプ用品について
- テント
- グラウンドシート（ブルーシート）
- シュラフ
- 銀マット
- ランタン
これは最低限必要なものかなと。
テント
むかーし買ったテントが残っていました。
当時3,500円の安さで衝動買いした覚えがあります。
コメントみてもコスパ最強で、大きな問題もなさそうです。
一度だけキャンプで使いましたが、ふつーに使えていました。
買ったのが6年前だったので、今だと新しい物が出ているようですね。
BDK-17→BDK-18。新しいほうが安いという。
グラウンドシート（ブルーシート）
これはダイソーのブルーシートを買いました。
1.8mx1.8m（2畳分）で100円とか、安すぎますね。
テントの下に引く汚れ防止のためと思っているので、消耗品と考えて割り切りました。
水分を通すと思うので、使い勝手が悪かったらちゃんとしたものを買おうと思います。
シュラフ
これも昔買ったやつがありました。
防災用に買った大きめのやつと、夏用の小さめのやつの２つ
大きめの方で使用最低気温５度と書いてあった。
もう少し暖かくなってからじゃないと厳しめかな。
銀マット
これも昔買ってた。なんの変哲もない銀マットですね。
これがないと、地面に熱を奪われてしまいます。
また、地面が硬い場合にクッションとして使います。
ダイソーにも銀マットがありますが、ペラペラのようです。
保温にだけ使うならダイソー銀マットでも良いのかな。
ランタン
ダイソーで300円でLEDランタンが売っていました。
特にこだわりがないのでこれを使います。
単3電池3本で40時間以上持つようで、コスパも良さげ。
余裕が出てきたらこういう充電式LEDランタンをGETしようかなと
まとめ
探したら昔買ってたので、思ったほど出費がかさまなくて済んだ。
嬉しい誤算です。
次は、テーブル、イスとかをご紹介したいと思います。
朝活コミュニティ「朝渋」に参加してみました
朝活を初めてみました
Peatixをみていると、北野唯我さんをゲストとした朝活イベントがあったので参加してみました。
【参加無料】朝渋Vol.186／北野唯我が実践する超実践型仕事術図鑑（ゲスト・北野唯我さん）#朝渋 #朝活
北野唯我さんは何冊か本を読ませていただいています。
「転職の思考法」は、今の会社に転職する際に読ませていただきました。
転職の仕方、というより転職に当たっての転職以外の方法（今の会社にいる方が良いかもとか）の考える方法をまとめられている本です。とても参考になりました。
「天才を殺す凡人」は、天才という特異なマイノリティな人が村八分にされるような状況が起こる理由を知れました。天才／秀才／凡人はジャンケンなんですね。
上記の流れで「オープネス」を読みました。
この本はあまり記憶がない。。。
新しい書籍をイベント内で紹介されていました。
Kindle Unlimitedだと無料だそうです。
朝渋って？
朝渋コミュニティは渋谷で集まるリアルの朝活コミュニティからスタートし、現在は日本全国のメンバーとオンライン・オフラインを両立しながら、朝活を楽しんでいるようです。
朝はあなたの可能性が目覚める時間。
MISSION
早起きをきっかけに、人生を自分で選択できる人を増やす。
詳しくはこちら。
イベントの内容
イベントの内容はトークセッションとQ&Aで構成されていました。
トークセッションテーマは以下の通り
・北野唯我x仕事術図鑑
・20代の仕事術
・メンターが必要な理由
・努力の方向性
・TOP1%との人との対談で学んだこと
・あなたと一緒に仕事がしたい
・人望のある人
・石を積む
・内定者への手紙①②
・質疑応答
・今日から行動できること
新しい本「内定者への手紙」からピックアップした内容になっているようです。
様々な金言をいただいたのですが、その中でも心に刺さったフレーズがありました。
（イベント中のメモですので読みづらいです。すみません）
--
Q：なにかしなきゃ、でも失敗したくない。どこに向かってアクセルを踏めばいいかわからない問題
A：なんでもやってみないとわからない。やってみて選択する。
--
毎日何かをやるのは良い。毎日15分〜30分は本を読んでいます。
人の心は弱いです。「いつか」なんて時はないので、今やる。
--
自分の能力や才能を出し切って死ぬと満足すると思います。
「あ、自分もっとできたのにな」と思いながら死ぬのは一番後悔する。
--
才能を出し切るのは怖いし、嫌われるかもしれない。
ただ、出し切っている人は顔の表情が良いので人が集まってくる。
--
失敗した時だけ変えるのは間違い。勝っても負けても変える必要がある。
負けた場合変えるということは、環境が間違っているという非科学的な根拠。
--
質を上げていく。お客様が質の正誤を決定する。
リーダーが高いクオリティを知っていないと、上がっていかない。
現場目線だと、「そこまでがんばらなくてもよくないですか？」となる。
リーダーとして妥協してはいけない。自分が担保する。そこだけは譲ってはいけない。
--
Q：今まで捨ててきたものはなんですか？
A：羞恥心。自分を出す、Blog・本を出す、SNSを利用する。
絶対に笑われるだろうな。意識高い系だよねとか
→ 先のことを見据えてやらないといけないと思ったのでやった。
やらないと後悔するからね。
--
Q：自分に自信がない時どうしたらいいでしょう。
A：物事がごちゃごちゃしていてうまくいない時はみんな足そうとする。
逆に捨てることを考える。「全員から好かれる」とか、
あとは準備しかない。
不安ではなく危機感
不安： 次が見えない。何をすればいいかわからない。（≒自信がない）
危機感： 次にやることが明確。
→ 前日夜に準備して、翌日実行。これで改善する。
--
ブランドは思想と一貫性から生まれる。
その人が長く続けているから信頼できる。
それを言語化することで明確になるし、他人に示すことができる。
迷ったときに確認できる。これが一番大事なんだ。
俺なんで頑張っているんだっけ？→確認できる。Mission確認。旗を持つ。
--
何かを深めたという経験は、人生において貴重。
まとめ
北野唯我さんの本を読んで、勝手にスーパーマンのような人を想像していました。
Zoom越しに北野唯我さんが話しているのをみて、今までの経歴や様々な苦労、創意工夫をされているのを聞いて、イメージがガラッと変わりました。
「石を積む」という言葉通りコツコツと努力した結果なのだと。
いろいろな金言いただきましたが、一番響いたのは「今まで捨てたものは→羞恥心」でした。ちょうどこれがネックで様々な行動ができなくなっていたところだったので、背中を押された気がしています。
朝渋に参加して、北野さんの言葉に出会えたことに感謝いたします。
ソロキャンプの準備中
ソロキャンプの準備中
去年バイクを買ったときから「ソロキャン行こう！」と決めていました。「ゆるキャン△」の影響です。ミーハーですみません。
2月も終わりに近づいてきて、福岡は最低気温が5〜10度を行き来するくらいの気候になってきました。そろそろ良い時期かな？キャンプ用品を揃えてお試しに近場のキャンプ場に行ってみようと計画しています。
キャンプ道具
ソロキャンするにもまずは道具を揃えないと始まりません。
ただ、いきなり全部揃えるのはお金が足りなくなってしまうので、最小構成で何度かやってみて足りないものを揃えていく感じで行こうかと。
最小構成
さて最小構成を見ていきましょう。
- テント
- グラウンドシート（ブルーシート）
- シュラフ
- 銀マット
- ランタン
お茶をのみながらゆっくり本を読む
キャンプするだけなら最小構成で良いのですが、僕はお茶をのみながらイスに座ってゆっくり本を読みたいので、以下のアイテムを追加します。
- テーブル
- イス
- バーナー
- コップ
料理と焚き火も
あと簡単な料理もしたいので、以下のアイテムを追加します。薪で焚き火もしてみたいけど、とりあえず炭で。慣れてきたら薪で焚き火にも挑戦していきたい。
- 焚き火台
- 火起こし器
- トング、火ばさみ
- 網、スキレット
- クッカー、メスティン
食材とか消耗品とか
あとは消耗品、食材など当日用意するものです。
- 食材
- 米（無洗米）
- 水（２L）
- ビール
- 炭、着火剤
- CB缶
- ランタン用の電池
- 非常食（カップ麺）
日用品
身の回りのもの、家で用意できるもの
- 洗面道具（歯磨きセット、タオル）
- 着替え
- サンダル
- ゴミ袋
- 軍手
- 雑巾、トイレットペーパー
- 救急道具（絆創膏）
- ライター
- クーラーボックス
買い揃えていきましょう
さて、洗い出しが完了しましたね。
欲を言えば、薪で焚き火がしたいのですが、そうすると薪を買って、ナタを買って、大きめの焚き火台を用意して・・・出費が痛いので今後揃えていきます。
では買い揃えていきます。
これ、単純にAmazonで買っていくとかなりの出費ですね。
できるだけ工夫してお得に買い揃えていこうと思います。
実際にどんなものを買うかはまた別のblogで紹介していきたいと思います。
そういえば、A-Frame v1.1.0でdom-overlayとhit-testの実装が入りました。
Blogにメモにしようと思っていて忘れていました。
A-Frame v1.1.0
去年の12月ですがA-Frame v1.1.0がリリースされました。
このバージョンから、Dom-overlayとhit-testの実装が入っています。
他にも、hand-trackingもありますが、今の所は動作環境はQuest2限定ぽいです。
WebXR Device API自体にはA-Frame v1.0.0から対応していたのですが、
本格的にインタラクション可能となる実装が入るのは今回からとなります。
今回追加された、Dom-overlayとhit-testについて簡単に紹介します。
WebXR
ブラウザ上でAR/VRを実現する技術で、WebXR Device APIを利用し、精度の高いトラッキングを実現しています。
Mozillaさんのサイトに日本語でまとまっていますね。
A-Frameでの具体的な実装方法は、ドキュメントを参照しましょう。
WebXR Device API自体がまだDraftなのでAndroid Chromeしか動作しません。
Dom-overlay
A-Frame v1.0.0でWebXRでARモードの場合は、DOM表示できませんでした。それが、v1.1.0でDom-overlayが導入されたことにより、ARモードにもDOM表記できるようになります。
これで、ボタンやSelectorなど、一般的な2D部品を表示して操作することができます。
hit-test
現実空間の平面などを認識することができ、その位置に3Dモデルを配置するなど、現実とリンクしたXR体験を行うことができます。
VR空間におけるRaycasterと同様に現実のものとRayがぶつかった箇所を認識できます。
それぞれのA-Frameにおける実装方法はまた別の記事で。
Insta360 One R でバイクの走行中の360度動画を撮影した
ちょっと前に、Insta360 One Rを買って、バイク動画を撮影するblogを書きました。
今回は撮影した動画の紹介になります。
バイクに取り付けて撮影
マウント位置については前のblogに書いた通り、以下の３箇所
・エンジンガード付近
・マフラー付近
・グラブバーの上
それぞれどのような見え方になるのか、撮影してYoutubeにアップしました。
※車体から多少離してマウントしていますが、他の車両と接触しないように配慮して撮影しております。
エンジンガード付近
車体から多少離してマウントしているので、車体全体を捉えることができています。バンクした際に地面すれすれを撮影できてなかなか迫力のある動画が撮れているかと思います。車体がすこし写り込んだ状態で前方向に向けるのが良いかと思います。
マフラー付近
後続車両を写すのに向いているかな。マスツーリングで使えそうなアングルですね。
グラブバーの上
ライダーと車体の映り込みが一番少ないので、周りの風景やマスツーリングで他のライダーや車両を撮るのに向いていますね。ヘルメットの頭にカメラをつけた場合より広く撮影することができます。
（カメラの向きを逆につけて、後ろをむいてしまっています。）
番外編：バイクの前
一度撮ったけど絵的にあまりにも面白くないので没となったマウント方法です。
いろいろな場所にマウントして撮影してみましたが、360度動画で面白い絵が撮れたのはこの３点でした。360度の空間を撮影する点で言うとグラブバーの上が一番いいですね。
撮った後は？
360度動画で撮っておいて、あとはどこをどんな感じで切り出していくか編集の腕次第なのかなと思います。（めんどい）
360度カメラで撮った動画から2D動画を切り出してみました。対向車を目線で追う感じにしています。
Insta360 One Rは「Insta360 Studio」という編集アプリがあり、簡単に編集できます。面白い動画を作ったらこのblogでも紹介していきたいと思います。
まとめ
いろいろなところにマウントして撮影してみましたが、場所によって見え方が全然違うと思います。360度動画はこれ自体がコンテンツですが、編集次第ではさらに面白い動画を作ることもできます。広角2Dカメラでライダー視点の動画を取りつつ、360度カメラで流し撮り。編集でつなげていくなんてことができそう。
Ricoh Theta Sと比べてになりますが、解像度が上がってめちゃくちゃ綺麗に撮影できるようになっていますね。ブレもかなり吸収しています。360度動画は解像度が荒くて使えないってのは過去のものになってしまいました。
Insta360 One Rはライブストリーミングもできるようなので、ツーリング中360度動画をYoutubeに垂れ流しなどやってみたいと思っています。
これからはどんどん撮影して配信していこうと思います。
Insta360 ONE R ツインモジュールセット (ONE R本体 + 360度撮影モジュール + 4K広角撮影モジュール) CM533 CINAKGP/A 【国内正規品】
- 発売日: 2020/01/29
- メディア: Camera
