# うごくメモ帳シェーダー

このページは https://www.liamarmitage.com/ja/projects/flipnote のMarkdown版です。

3Dシーンを、ニンテンドーDSi・3DSのアニメーション作成ソフト『うごくメモ帳』で描いたように見せるUnityのポストエフェクト。うごくメモ帳の6色までディザリングで落とし込み、ラフな輪郭線を加えます。テックアートの制作日誌を毎日つけながら16日間ひとりで開発し、HLSLで実装、カラーテーブルはPythonで生成しました。

- **役割**：個人研究開発
- **期間**：2023
- **ツール**：Unity, HLSL, URP, C#, Python

- **色：**3Dルックアップテクスチャが任意のRGBカラーを231段階のディザ色のうち最も近いものに対応づけ、8×8のベイヤーパターンで画面に描画。
- **輪郭線：**シーンの深度と法線にSobelフィルターをかけ、ノイズで手描きらしい線に。
- **調整項目：**彩度、パレット、輪郭線のディテール。
- **使い方：**.unitypackageを任意のURPカメラにポストエフェクトとして追加するだけ。

## リンク

- [.unitypackageをダウンロード](https://www.liamarmitage.com/assets/downloads/flipnoteshader.unitypackage)
- [制作ジャーナル](https://snowy-engine-238.notion.site/100-Days-of-Tech-Art-94e362b1607e45029b795429b6d6c4f6)

## 色

3DS版のうごくメモ帳は、黒、白、赤、青、黄、緑の6色で描きます。DSi版は4色です。Pythonスクリプトで、これらの色から2色ずつ選んだすべての組み合わせを8×8のベイヤー行列で17段階に混ぜて231の色調を作り、ディザパレットとして保存しました。

次に、シェーダーは画面上のあらゆる色について、最も近い色調を見つける必要があります。ピクセルごとにパレットを探索すると遅いため、2つ目のスクリプトでRGBキューブ全体の答えを3Dルックアップテクスチャ（LUT）として事前に計算し、C#のエディタースクリプトでUnityのTexture3Dに変換しました。その赤と緑のチャンネルには、ディザパレット内で対応する色調の位置が入っています。シェーダーはその位置を読み取り、ピクセルのスクリーン座標（8で割った余り）を使ってパターンの正しいテクセルを選びます。

「最も近い」の意味は、距離の測り方しだいです。RGB、HSV、CIELABの距離を比較しました。HSVは結果がちぐはぐで、見せた友人たちはRGBのマップを気に入ったので、シェーダーではRGBを使っています。

6色のパレットでは、くすんだシーンが灰色になってしまいました。そこで、パレット処理の前に小さなシェーダーでシーンの彩度を上げています。

*動画：3DSパレット用の3Dルックアップテクスチャを、RGBキューブの断面で表示したもの*

*画像：ディザリングした4つのカラーマップ：3DSとDSiのパレットを、それぞれCIELAB距離とRGB距離で対応づけたもの*

## 輪郭線

カラー画像だけでエッジ検出をすると、同じ色の2つのオブジェクトの境目を見逃し、影に輪郭線を引いてしまいます。そこでSobelフィルターは、代わりにデプス・ノーマルテクスチャ（シーンの法線に深度を掛けたもの）にかけています。

フィルターは各カラーチャンネルの変化を測り、最大のものを採用します。輝度だけを使うより少し負荷は上がりますが、明るさの近い色どうしの境目も検出できます。

うごくメモ帳の線はきれいというよりラフなので、疑似乱数のオフセットで輪郭線のサンプルをひとつずつ少しずらしています。輪郭線は、ディザリングした色の上に合成します。

*動画：ノイズで崩れていく輪郭線*

## 改善したい点

デモ動画を作っている最中に、フレーム落ちに気づきました。各ピクセルはルックアップテクスチャ、次にディザパレットの順にサンプリングしています。この2つを統合すればサンプル呼び出しを1回減らせますし、ノイズ関数ももっと軽くできるはずです。

## クレジット

テスト用のシーンは、JustCreate、karboosx、Polygonal MindによるUnity Asset Storeのパックです。うごくメモ帳のカエルのスプライトはthatmusicweeb作。シェーダーの世界への入り口になったのは、[Acerola](https://www.youtube.com/@Acerola_t) と [Freya Holmér](https://www.youtube.com/@Acegikmo) の動画、そして [Ronja](https://www.ronja-tutorials.com/) のチュートリアルでした。

## 連絡先

サイトにはメール、LinkedIn、GitHubのボタンがあります。

- LinkedIn: https://www.linkedin.com/in/liamarmitage/
- GitHub: https://github.com/PukekoKiwi

## このサイトのページ

- [琉煌・庵三灯寺 — VFX・テクニカルアーティスト](https://www.liamarmitage.com/ja/index.md)
- [スター・ウォーズ ジェダイ シリーズ](https://www.liamarmitage.com/ja/projects/jedi.md)
- [チェンジリング VR](https://www.liamarmitage.com/ja/projects/changeling.md)
- [キノコの子のくそデカ草剣](https://www.liamarmitage.com/ja/projects/mushroom.md)
- [徐倫の糸](https://www.liamarmitage.com/ja/projects/jolyne.md)
- [English: Flipnote Shader | Liam Armitage — VFX / Technical Artist](https://www.liamarmitage.com/projects/flipnote.md)
- [中文: Flipnote 着色器 | 琉煌·庵](https://www.liamarmitage.com/zh/projects/flipnote.md)