じゅころぐAR

ARのブログ

トップ > AR > カスタムシェーダーでARに光学迷彩やエッジ検出を実装してみた

カスタムシェーダーでARに光学迷彩やエッジ検出を実装してみた

AR ARKit ARCore AR Foundation

ようやくですが、シェーダー完全に理解した。

はじめに

ARKit3で発表されたPeople Occlusionのように機械学習の結果をARに反映させて体験を向上させる実装が今後増えていきそうです。
そのため、Unityでの画像処理やシェーダーについて最低限の基礎知識はあった方がよいです。

シェーダーをARに活かした事例として印象的なのは、アカツキさんがSIGGRAPH2018に出展した「THE INVISIBLE」です。以前、xR Tech Tokyoで体験させてもらいましたが、今まで体験したARの中でもトップクラスで体験の質はよかったです。

まるで光学迷彩 "見えない敵"と戦うARゲーム 開発に込められたこだわり | Mogura VR

youtu.be

仮想コンテンツの現実感を増す方向ではなく、ARを通すことで世界の見え方を変えてしまうというアプローチなのですが、結果としてAR空間への没入感を感じるというのが面白いところ。

シェーダー適用例

実装方法は探せば出てくるので、本記事では詳しく書きません。
参考サイトを参照ください。

GameObject

Mesh RendererまたはSkinned Mesh RendererにMaterialsをセットして、作成したシェーダーを選択します。

被験体はクエリちゃん。

query-chan.com

光学迷彩

背景を歪ませて、薄っすら輪郭が見えるようになっています。ノイズはスクリプトで発生させます。

ドット

一部の頂点を描画せずにスキップします。ドットの部分は描画自体をしていないので、ARだと背景が透けて見えます。

カメラ映像

AR Foundationの場合、"AR Camera" > "AR Camera BackGround"にCustum Materialを有効にすると、マテリアルにセットされたカスタムシェーダーが適用されます。

f:id:jyuko49:20190617082517p:plain

ARKitのシェーダーは以下をベースに作成できます。

f:id:jyuko49:20190619074600p:plain

ARCoreの場合、AR XR Pluginに含まれているARCoreShaderはNot suppotedとなり利用できませんでした。

f:id:jyuko49:20190619075622p:plain

ARCore SDK for Unityで使われているARBackGroundを用いるとカメラ映像が正しく表示されます。

f:id:jyuko49:20190619084310p:plain

同一のシェーダーでiOSとAndroidは両対応せず（できるかわからない）、ビルド時もしくはスクリプトでMaterialを切り替えて使う想定です。

ネガティブフィルター

各ピクセルの色を反転します。

パステルフィルター

パステルカラーは淡い色調なので、ピクセルのRGB値それぞれに対して、0.5以下なら値を加算して1に近付けます。全体的に白に近くするイメージ。

エッジ検出

周囲のピクセルの色の差が大きいピクセルをエッジと判断します。ソーベルフィルタという方式です。

おわりに

本記事に記載したような例は実装例も多くあり、処理内容が大枠理解できればすぐに作れると思います。
シェーダーを覚えれば、もっと色々なことができるはずで、学習するほど沼にハマっていくらしいです。

参考サイト

シェーダーの書き方の基礎はUnityマニュアル+はてなブログ、原理から理解するにはwgld.org、ピンポイントで実装方法を調べたい場合はQiita+はてなブログが有効でした。

書籍としてはthree.jsを始めた頃に買った明解WebGLを使っていますが、既に販売終了になっているらしく、Amazonだとプレミアが付いてるので推しにくい。内容的にはwgld.orgで代用できます。

明解WebGL　iOS/Androidも対応した3D CGプログラミングのWeb標準

明解WebGL　iOS/Androidも対応した3D CGプログラミングのWeb標準

  • 作者:杉本雅広
  • 発売日: 2015/05/13
  • メディア: 単行本（ソフトカバー）