前回の検証 のイメージトラッキング（NFT）版です。 結論としては、前回の結果と全く同様でした。ARとしてはARオブジェクトの位置を合わせるのが難しく、ちょっと実戦で使用するのは厳しいかなという印象だったイメージトラッキングですが、簡単な画像認証の…

かつて、 A-Frameでマーカーの検知イベントを使ったこと がありましたが、今回はThree.jsで実装してみます。blog.kimizuka.org といっても、A-Frameも内部ではThree.jsを使っているので、実装方法はほとんど変わりません。 ただし、認識時のイベント（marker…

いわゆるひとつのクロマキー合成です。❶ 背景が単色の動画をつくる ❷ 動画の背景色を透明に置き換えてCanvasにレンダリングする ❸ Canvasを CanvasTexture に設定するという流れで実装します。 ❶ 背景が単色の動画をつくる ひさしぶりに Animate を使ってつ…

ar-js-org.github.ioAR.jsのドキュメント にはA-Frame用を使ったコードが記載されているのですが、Three.jsを使った実装も検証します。 結論 先に結論を書いておきます。 A-Frame を使っても Three.js を使ってもイメージトラッキングの実装は可能でした。 …

最近は、もっぱらAR.jsの検証を行なっていますが、2つのマーカーを同時に認識できるかを検証しました。結果としては、PC版のChromeでも、mobile Safariでも、同時に認識できました。 いくつまで同時にいけるか試そうかとも思ったのですが、今回は一旦2つまで…

これまで、ARマーカーは白黒の画像で作成してきました。 しかし、 こちらのサイト でデフォルトで表示されている画像は青が入っていて、ずーっと気になってました。jeromeetienne.github.ioというのも、pattern-marker.pattをテキストエディタで開いてみると…

AR.jsの/three.js/examples/mobile-performance.htmlというサンプルを見ていて、THREEx.ArSmoothedControlsというものを見つけました。github.com早速、サンプルのコードを参考に 以前のコード を修正してみました。blog.kimizuka.org ソースコード（全文） …

こちらのサイト でARマーカーを作成とする際、Pattern Ratioを変更するとマーカーにする画像の大きさを変更することができるので、結果として相対的に縁の太さを変更することができます。jeromeetienne.github.ioただ、Pattern Ratioを0.5以外に設定した場合…

これまで、 A-Frameを使ったWebAR を実装して来たり、 AR.js + Three.js + Next.jsを使ったWebAR を実装してきたりしました。blog.kimizuka.org blog.kimizuka.org今回は極限までシンプルに、必要最低限のライブラリ（AR.js + Three.js）のみを使って、画面…

AR.js + Three.js + Next.js（React.js） でWebARコンテンツを作る際、AR.jsの読み込みをどうするのがスマートなのか、ずーっと悩んでいたのですが、とりあえずカスタムフックを作ってみました。 ソースコード useMakerAr.js import { useEffect, useState }…

先日、AR.js + Three.js + Next.jsでスマートフォン向けのウェブARをつくりました。3Dオブジェクトをブラウザ上に、3Dオブジェクトの影を現実空間に表示する、ウェブAR + プロジェクションマッピングを作りました。名付けて「影絵R（カゲエーアール）」です…

久しぶりにWebARを実装する機会があり、自分の記事を読み返していたのですが、いつの間にか動かなくなっていました。。blog.kimizuka.org「何もしてないのに壊れた！」と思ったりしましたが、検証してみた結果、 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/master/three.js"></script> <script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/GLTFLoader.js">

これまでWebARの実装には、A-Frame + AR.jsを使ってきましたが、細かい調整が必要になってきたのでThree.js + AR.jsで実装してみようと思います。aframe.iothreejs.orgA-Frameも内部ではThree.jsを使っているので、ライブラリをひとつ減らすイメージです。AR…