AR作品「Chroma Lens」

この記事は[STYLY Advent Calendar 2024](https://qiita.com/advent-calendar/2024/styly)の14日目の記事です

2024/10/27〜11/3に山梨で開催されたグループ展「クジャクとパンダのイロナオシ」に出展しました。
本稿はその作品の解説になります。

# [クジャクとパンダのイロナオシ](https://kujyapan.studio.site/ironaoshi)とは

![IMG_7854.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5671/2bcc8566-67d7-d10f-8853-f4b867f42c15.jpeg)
アーティストグループ「クジャクとパンダ」の第４回目のグループ展です。
2018年に発足からモノクロ（パンダ）作品からカラー（クジャク）作品に変化する二部構成を基本コンセプトとして掲げています。

友人の主催するグループで、参加してみませんかと声をかけられたので二つ返事で承諾しました。
こういうグループ展に参加するのも初めてだったし、所謂ホワイトキューブのギャラリーで展示するのも初めてなので、これは良い経験だな、と。
会期の前半はモノクロ作品、後半はカラー作品に入れ替えての展示を行いました。

|![IMG_7855.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5671/5d187060-4df7-6f32-06ee-3151bb4430f0.jpeg)|
|--|
|前半のモノクロ展示の様子|

# 映像作品「Chroma Lens」

会期前半のモノクロ作品には映像作品を展示しました。

![IMG_7858.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5671/d2d6ee0f-ed6a-fd4d-5d44-05096e1beddf.jpeg)
<iframe width="560" height="315" src="https://www.youtube.com/embed/etcstUB4Ysk?si=PWsv86edTfz_d2Rg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

ちょうどうちに微妙に壊れたプロジェクターがあったんですよね。
以前VJとしてブッキングされたパーティで持ち込んだんですが、酔っ払ったお客さんが三脚ごと倒してしまって、その衝撃で何故かモノクロでしか出力できなくなってしまいました。
しかし文字が読めるぐらいはっきりと映りはするので、捨てるに捨てられなかったプロジェクターです。
今回の企画のコンセプトを聞いた時に「あ、この機を逃せばもうこのプロジェクターを有効活用できることはないかも」と直感し、そこから全体の構成を一気に考えました。

|![IMG_0087.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5671/7df46c43-fddb-c886-10f7-91258d8b8afd.jpeg)|
|--|
|居間での撮影風景|

最近の自分の活動はAudioVisualライブのパフォーマンスが主体となっています。
そんな今の自分が展示作品を作るとしても、ライブパフォーマンスからは軸足を動かさないかなぁと考えて次のような作り方をしました。

まずYAMAHAの[SEQTRAK](https://jp.yamaha.com/products/music_production/music-production-studios/seqtrak/index.html)でマシンライブを行い録音します。
今年1月の発売タイミングで買って以来、愛用している機材です。
事前にトラックごとの音色などは仕込んでおきますが、即興演奏した一回だけの本番録音一発録りです。
次にその音源を流しながら、手に馴染んだ[hydra](https://hydra.ojack.xyz/)でフルスクラッチのLiveCodingを行い映像を記録します。
こちらも本番一発だけでリハなどをやりません。
どうせ何度やり直しても百点満点になることはないんだし、それならたった一回の即興パフォーマンスに全力を尽くす。
（予定調和から逸脱した即興性こそが、LiveCoderの矜持ってぇもんだぜ）
そして完成した映像をそのまま展示するのではなく、一旦スクリーンにプロジェクターで投影してそれをiPhoneで録画したものが完成品となります。

当然、壊れたプロジェクターからの出力はモノクロになります。
会期前半のモノクロ作品はこれでいいですが、後半のカラフル作品をどうするのか？
私はこうしました。

# AR作品「Chroma Lens」

![IMG_7866.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5671/3b511350-3fd2-32b6-2c72-b41eb84d2d30.jpeg)

<iframe width="560" height="315" src="https://www.youtube.com/embed/8HZIjj8vGQ4?si=D1HqihDoixwqLowY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

|![sticker_入稿.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5671/64495fe5-c57f-553d-a13b-99328f592013.png)|
|--|
|このQRをスマホで読み取れば体験できます|

モノクロであっても強制的にカラフルになるカメラフィルタを作り、モノクロ映像をスクリーンにプロジェクターで投影してそれをSTYLYアプリ越しに見るとこうなりますよ、という映像を撮影しました。
実は前半のモノクロ映像作品はフリのようなもので、こっちが主の作品となるように考えました。
だから壊れてモノクロしか出力されないプロジェクターをわざわざ引っ張り出してきて、一旦スクリーンに投影したものを録画しました。
個人的にこういう手法が面白いかなと思ってやってみたのだが、いかがだろうか。

## 処理の概要

まずは彩度がほとんどない入力に対して、どんな加工を行うと面白いのかを探るため、hydraで下書きを行います。
短い記述で画像加工のフローを定義できるhydraを使って下書きする、というのを私はよく行います。
STYLY上で[MagiCamシリーズ](https://gallery.styly.cc/search/scenes?q=%23MagiCam)というカメラフィルタ作品群を公開していますが、これらもまずhydraでざっくり試作してみてからUnity上で動かすためのshaderを書いていきます。

<details><summary>hydraの下書きコード</summary>

```js
//s0.initVideo(xxxx) // 適当な動画ファイルパスを渡す
s0.initCam(0)

src(s0)
.blend(src(s0).luma(.5, .0).mult(osc(10,-.04,[1.8,.1].smooth().fast(2)).kaleid(9999)), .8)
.add(src(s0).thresh(.4,.0).mult(src(s0).thresh(.6, .0).invert()).color([1,.1].fast(8),0,[.1,.9].fast(16)).hue(()=>time), .25)
.diff(src(o0).hue(.17).scale(.95).mult(solid(),.5))
.add(src(o2).color(0,1,0).hue(()=>time*8), 1)
.out(o0)

src(s0)
.out(o1)

src(o1)
.diff(s0)
.thresh(.2,.02)
.add(src(o2).scale([1.0125,75,1.0125,1.025].fast(.5)).posterize(8), [.85,.5,.9,.5].fast(4))
//.mult(src(o3))
.out(o2)

src(s0)
.thresh(.5,.0)
.mult(src(s0).thresh(.7, .0).invert())
// .blend(src(s0).thresh(.4,.0).mult(src(s0).thresh(.6, .0).invert()), [0,1,0,0].fast(2))
.blend(src(s0).thresh(.5,.0).mult(src(s0).thresh(.8, .0).invert()), [0,1].smooth())
.out(o3)

render(o0) // ここの引数をなしにすると、各バッファを確認しやすい

bpm=120/2
```

</details>

なかなか言葉で説明するのが難しいのですが、幾つかポイントを挙げます。

### diff()

手っ取り早くフィードバックループを使った絵を作る際にとりあえず使うことが多いです。

```
src(s0)
.diff(src(o0).scale(.98).hue(.01))
.out(o0)
```

みたいな感じで色相と変形を組み合わせながら、1フレーム前の絵との差分を取ったりすると手軽に面白かったりします。

### src(s0).out(o1)

単純にs0入力を無加工でo1に書き込んでいます。
これが何の役に立つかというと、s0とo1のdiffを取ることで1フレーム間の映像差分を取れるんですね。
差分のある場所だけ着色してhueを激しく動かしたりすると、カラフルなモーションブラーのようになって面白いです。
ちなみにこの処理をメインに取り込んで作ったのが[MagiCam -Astral Mirage-](https://gallery.styly.cc/scene/36c28088-5246-4420-a812-90ccd1116fb8)です。

### 一部の明るさの帯域だけ取り出す 

```
src(s0)
.thresh(.5,.0)
.mult(src(s0).thresh(.7, .0).invert())
```

thresh()で一定以下の明るさをばっさり切りつつ、invert()したものとmult()を取ることで一定以上の明るさもばっさり切って帯域を取り出します。
シンセサイザなどによくあるバンドパスフィルタみたいなイメージですね。
何故一部分の帯域だけ取り出したいのかというと、画面全体にカラーを載せてしまうとちょっと画面が単調になりすぎるので、適度な帯域だけ異なるスピードで色味を変化させたりすることで少し複雑にしたいからです。

### STYLYへの移植

では出来上がったhydraのコードから、Unity上で動くshaderに移植します。
本稿では割愛しますが、hydraの[この辺りのコード](https://github.com/hydra-synth/hydra-synth/blob/main/src/glsl/glsl-functions.js)を読めば内部的にどんなglslに変換されているか分かります。
これを参考にshaderを書いていきます。

STYLYでのカメラ入力を使ったフィルタ処理の作り方については、昨年書いた記事の[GetARCameraTextureカスタムアクション](https://qiita.com/hacha_/items/c9c6fda49a5480e60d47#getarcameratexture%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%82%A2%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3)や[フィードバック処理の実装](https://qiita.com/hacha_/items/c9c6fda49a5480e60d47#%E3%83%95%E3%82%A3%E3%83%BC%E3%83%89%E3%83%90%E3%83%83%E3%82%AF%E5%87%A6%E7%90%86%E3%81%AE%E5%AE%9F%E8%A3%85)を参照してもらえればと思います。
（サンプルのunitypackageもあるよ）

## デバッグ

最終的には実機で、実際の撮影環境での出力を目でチェックしながらパラメータ調整を行います。
実機上で各バッファの状態をチェックしたり、パラメータを直接調整して探ったりするために本番用シーンとは別にデバッグ用のシーンを作っています。
[これ](https://www.youtube.com/shorts/qkVJ1Vj-9-c)はそのデバッグ用シーンの動画です。
展示用の映像作品とは別に、このカメラフィルタのQRコードを展示するのですが、実際には撮影用とは少しパラメータを変えています。
撮影環境は真っ暗な部屋でスクリーン投影されているので、それに合わせて一番良く見えるパラメータ調整を行います。
しかしQRコードで公開する方は、様々な環境で見られることが前提となります。
会場のギャラリーはほぼ真っ白なホワイトキューブですが、一歩外に出れば賑やかな駅前で彩度の強い入力が飛び込んできます。
環境によって見え方が異なるのはカメラフィルタ作品としての面白みではありますが、あまりにもガチャガチャしすぎるのを抑えるような調整を入れます。
まぁ、そんなこと言いながら結局はいつもバキバキでvividな感じに落ち着くんですけどね。

## 余談

余談ですが、後半の映像撮影はプロジェクターの調子が悪くてヒヤヒヤものでした。
まぁ既にブッ壊れているんだから調子が悪くて当然ですが、起動するとやたらカラカラ音が鳴ったり、逆さに振ったら謎の金属片がパラパラこぼれたり、定期的に1秒未満のカクつきが発生したりしました。
そういう場合は一旦電源を抜いて、軽くバチコンと小突いて左右に揺さぶってからもう一度電源を付けると、奇跡的に直ったりします。直ったりすることがある。
せめて今回の展示用の撮影が終わるまでは頑張ってくれ………と祈りながら何とか乗り切れて良かったです。
これで心置きなくプロジェクターを処分できそうです。

ちなみにカメラフィルタの処理的に、カラフルなものより真っ白なものの方が映えたりします。
先日3Dプリンタを買ったので自分の頭部スキャンモデルをプリントしてみたんですが、これを撮ってみると予想以上に面白い感じになりました。
やはりカメラフィルタ作品は作った時点ではまだ完成半分で、面白い映像を撮ってこそですね。
色んな場所で色んな物を撮ってみて面白みを探すのが醍醐味。

https://x.com/hacha/status/1868590478410846588

# 最後に

**額装されたものが作品ではない**
**プロセス・技法こそが作品なのだ**

前半はただの映像作品を展示しながら、後半でそれをARで上書きする。
当初の自分がイメージしたことを一応できたので概ね満足しています。
これもたまたま都合の良い壊れ方をしたプロジェクターがあったからこその着想かもしれません。
今回の「クジャクとパンダのイロナオシ」はモノクロ作品とカラー作品を展示する、という以外には内容について特にテーマが設けられていない展示でした。
それならば中途半端に「愛と平和〜」みたいな中身のテーマは考えずに、ただただ手法にこだわって作るのも面白いかなと。
作品の形式自体を越境するというのもやりたかったことの一つでした。
私としては映像作品とAR作品を展示したというより、その制作過程も含めた一連のフローこそが作品であるというつもりで臨んでみました。

まぁ、それを展示したものから伺い知ることができるかどうかってのが、難しいところですけどねぇ。
精進します。