「p5.simpleAR」、めちゃくちゃお手軽にARが作れて面白いです！！



使い方は簡単！
いつもどおりp5.jsのスケッチを描く！
↑のページを参考にライブラリをhtml側で読み込む！
createCanvasをcreateARCanvasに書き換える！
実行するとカメラが起動するので↑のページにあるマーカー画像にかざす！
ARが表示されてたのしい！！！
以上！！かんたん！！

ポイントとして、背景の更新をbackground(なんとか)ではなくclear()にするといい感じです。
background(なんとか)だとキャンバスの領域いっぱいに背景色がつきますが、
clear()だと透過状態で画面を更新できます。

あと、せっかくのARだしスマホのカメラで見てみたい！という場合は下記のやり方で開くといいかもしれません。

Androidの場合



iOSの場合(safariで確認。ライブラリをローカルに設置する必要あり)



ついでに女の子の画像を表示したソースコードはこちら。
バーチャルな感じに出現させるエフェクトを作ってみました。



透過png+clear()で画面更新することでARでもきれいにキャラクターの形に浮き上がっているように見せることができました。

画像はこちらのジェネレータで作成しました。



【追記】
ARでつくってみたやつ: