3D Subpixel Viewer

3D Subpixel Viewerは、テキスト文字をサブピクセル単位で3DボクセルとしてレンダリングするUnity製のビジュアライゼーションツールになる。

元々は、まったく別のものを作ろうとしていた。色付きの透明アクリルキューブをボクセル状に積み上げて作品を作りたかったのだけど、物理的にアクリルキューブを積むのはとても手間がかかる。特に、透明度のある色付きアクリルを奥行方向に何枚も重ねたときに、最終的にどんな色に見えるのかが事前にわからない。それを確認するためのシミュレーターとして開発を始めていた。

ところが、開発を進めるうちにリアルタイムシェーダーでの透明色の重ね合わせが、物理的なアクリルの重ね合わせとはまったく異なる結果になることに気づいた。シミュレーターとしての精度に限界があるとわかり、紆余曲折を経て、このツールはパフォーマンス用の映像生成ツールとして使われることになった。

最終的には、2023年10月5日から9日にかけて、CONTRASTギャラリーで開催されたEvery Subpixel Matters展で使用している。1つのアプリケーションから2つのモードで展示した。

1つ目はパフォーマンスモードで、プロジェクター + Mac Mini + R/G/Bの3つのキーだけがあるミニキーボードという構成になっている。R、G、Bいずれかのキーを押すと、その色に関連するテキストがOpenAIによって生成され、1文字ずつタイピングされていく様子がプロジェクターに投影される。

2つ目はインタラクティブモードで、マウスとキーボード + Mac + ディスプレイの構成で、来場者が自由にテキストをタイピングできるようにしている。

ソフトウェア

• Unity 2021.3.0f1 LTS + HDRP: レンダリングパイプラインにHDRP（High Definition Render Pipeline）を使用。ポストプロセッシングやライティング、透明マテリアルの表現にHDRPの機能が必要だった
• Substance Designer ランタイム: ボクセルのマテリアル（ガラス質感）をプロシージャラルに生成するために使用
• OpenAI API（gpt-3.5-turbo）: パフォーマンスモードでのテキスト生成に使用。Streaming APIで1文字ずつ受信している

ハードウェア（展示構成）

パフォーマンスモードとインタラクティブモードで構成が異なる。

• パフォーマンスモード: プロジェクター + Mac Mini + ミニキーボード（R/G/Bの3キーのみ使用）+ MIDIコントローラー
• インタラクティブモード: ディスプレイ + Mac + マウス + キーボード

技術スタックの選定

ベースにはUnity 2021.3.0f1 LTSを使い、レンダリングパイプラインにはHDRP（High Definition Render Pipeline）を選んでいる。HDRPを選んだのは、ポストプロセッシングやライティングの機能が必要だったからで、特にアクリルやガラスのような透明マテリアルの表現にはHDRPの機能が不可欠だった。

フォントのラスタライズとボクセル変換

テキストから3Dボクセルへの変換がこのツールのコア処理となる。処理の流れとしては、入力されたテキストの各文字をフォントとしてラスタライズし、ピクセル単位でデータを読み取る。そのピクセルデータをもとに、各ピクセルの位置に対応する3Dボクセルを生成している。1つのピクセルはRGBの3つのサブピクセルに分解され、それぞれが個別のボクセルとして配置される。

カラーパレットシステム

色の扱いには、限られた色数のパレットから選択する方式を採用している。ピクセルごとのRGB値をそのまま使うのではなく、外部のPNG画像から色を抽出してパレットを構成し、各ピクセルに最も近いパレット色を割り当てる。色の近さの判定にはHSV色空間での知覚的色距離計算を使っていて、ColorMixer.csに実装されている。色相環上の距離に基づく重み付けで、人間の知覚に近い色マッチングをしている。

パレットの色数を制限することは、表現として意図的にやっている部分になる。

マテリアルとレンダリング

ボクセルのマテリアル（ガラスのような質感）はSubstance Designerのランタイム統合で動的に生成している。Substance Designerのパラメータをリアルタイムに変更できるので、ボクセルの見た目をプロシージャルに調整できる。

ピクセルサイズは1から16の範囲で変更可能にしていて、表現のバリエーションを出すために実装している。サイズを変えるとボクセルの粗さが変わり、見た目の印象がかなり変わってくる。

パフォーマンスとインタラクション

パフォーマンスモードでは、テキスト生成にOpenAIのStreaming APIを使っている。OpenAIManager.csで実装していて、gpt-3.5-turboのChat Completions APIをストリーミングで呼び出し、返ってきたテキストを1文字ずつBoxGridのボクセルグリッドに挿入している。few-shotプロンプトで出力を短い単語に制約することで、ボクセルグリッドに収まるようにしている。

3Dメッシュの書き出し機能（OBJエクスポート）も実装していて、これは物理的な出力（3DプリントやUVプリントなど）に使うことを想定している。RuntimeObjExporter.csでメッシュのジオメトリをOBJ形式に、マテリアルをMTL形式にシリアライズし、テクスチャはBase64エンコードで埋め込んでいる。

透明色の重ね合わせ問題

開発で一番大きかった問題は、透明色の重ね合わせの結果が物理的なアクリルとまったく異なること。

リアルタイムシェーダーでの色の混合は基本的にRGBの加算混色になる。赤と緑を重ねると明るい黄色に近づくし、すべての色を重ねると白に近づいていく。一方、物理的な色付きアクリルの重ね合わせは減算混色になる。光がアクリルを通過するたびに特定の波長が吸収されるので、重ねるほど暗くなり、すべての色を重ねると黒に近づく。

この加算と減算の違いは根本的な問題で、色のCMYK変換はこの問題への1つのアプローチだった。CMYK色空間は減算混色のモデルなので、RGBからCMYKに変換して混色を計算し、結果をRGBに戻すことで、ある程度は物理的な混色に近づけようとしている。

時間をかけてレイトレーシングでレンダリングすればもっとリアルな結果が得られる可能性はあるけれど、リアルタイムで使いたかったのでその手法は採れなかった。

この制約があったことで、ツールの方向性がシミュレーターからパフォーマンスツールへと変わっていった。正確なシミュレーションができないなら、リアルタイム性を活かした別の使い方をしようという判断になっている。

パフォーマンスモードの開発

パフォーマンスモードの開発は2023年9月に集中的に行っている。フリーアニメーション機能を追加してから、9月中に状態遷移グラフの実装、インタラクション機能の更新、中断機能の追加、タイミング調整と、短期間で多くの機能を積み上げている。

アニメーションシステムはCSVファイルからフレームデータを読み込んで再生する仕組みにしている。31種類のイージングカーブを使って、パラメータの補間をしている。R/G/Bの各テーマでアニメーション内容を切り替えられるようになっていて、キーを押すとそのテーマの色に関連するテキストがOpenAIで生成され、タイピングされていく。

展示の準備段階では、オフラインでも動作するように単語・文章の辞書も追加している。ネットワークがない環境でも展示ができるようにするためのフォールバックになる。

ピクセルサイズの実験

ピクセルサイズを1から16まで変えられるようにしたことで、同じテキストでも見た目がかなり変わる。サイズ1だと非常に細かいボクセルが並び、サイズ16だと大きなブロック状になる。

リアルタイムシェーダーによる透明色混合の限界

複数枚の透明色の重ね合わせをリアルタイムシェーダーで正確に再現することには限界がある。特に減算混色のシミュレーションは、リアルタイムのフラグメントシェーダーの処理モデルとは相性が悪い。CMYK変換でのアプローチはある程度機能するけれど、物理的なアクリルの見た目を完全に再現するのはリアルタイムの制約下では難しかった。

OpenAI Streaming APIの活用

OpenAIのStreaming APIを使うことで、テキストが1文字ずつ生成されていく過程をそのままビジュアルに変換できている。通常のAPIコールでは全文が一度に返ってくるのに対して、ストリーミングでは文字単位で受け取れるので、1文字ごとにボクセルを生成していくパフォーマンス表現が可能になった。プロンプトで出力を短い単語に制約しているのは、ボクセルグリッドの表示領域に収まるようにするため。

法線のずらしによるガラス反射表現

一番面白い発見だったのが、ボクセルグリッドの各板を微妙にランダムな角度でわずかに回転させるテクニックになる。これによって各ボクセルの法線が微妙にずれ、光の反射方向がボクセルごとに少しずつ異なるようになる。結果として、均一なフラット面ではなく、リアルなガラスの反射のような表現が得られた。

完全に揃った法線だと、反射がべったりと均一になってしまって素材感が出ない。少しだけランダムに回転させることで法線にばらつきが生まれ、HDRPの反射・ライティング計算と組み合わさると、かなりリアリティのあるガラス質感になる。物理ベースレンダリングの仕組みを活かしたシンプルなテクニックだけど、効果は大きかった。