×

ArshesのシェーダーをPCから編集できるようにする

ArshesはiPhoneでARのシェーダーを書いたり公開したりできるアプリで、現在ベータテスト中である。

シェーダーギーク向けアプリのつもりで作っていたが、先日YAMADAさんという映像制作をされている方にカメラアプリとして使っていただき、とても驚いた。

とても素敵で何度も見返している。うれしいね。 ARでやりたいと思ったのはシェーダーと場所とで組み合わせの自由度があるからで、そういう意図が実現されていてうれしい。 あと、なんというか、スマホでSlangがコンパイルされているとか、画面にコードが表示されているとか、そういう文脈とは関係なしに映像制作に使ってもらえるというのは、素直に嬉しいなと思う。

さて、Arshesでは、シェーダーをiPhoneで書く必要がある。

こんな感じでSwiftUIのTextEditorを表示していて、キーボードを表示するときは右のようにシェーダーで使用するボタンを追加で表示することで編集しやすくしているが、それでも大変であり、なかなか自分も手を動かそうという気にならない。

それで、当然PCから編集したくなる。 まず、以前にも書いた通り、ArshesはFirebase Authentication + Hasura Cloudで動いている。

Arshesのアカウント認証について - shivaduke28’s blog

なので、Webアプリを作ってそちらでもFirebaseで認証してHasuraにリクエストを投げるということが可能である。 GraphQL subscriptionを使うとWebで編集した内容をiOSに自動で反映する、なども可能そうであり、これはおしゃれである。 が、iOS版のUIについても方向性が固まってないのにメンテ対象を増やすべきじゃないかなぁという感じがある。

そこで、PCとiPhoneが同じWiFiに繋がってるという前提をおいて、 PC上で起動しているサーバーとiOSアプリをWebSocketで接続し、ファイルの編集はVSCodeなどのIDEに任せることにした。

サーバーのCLIはmacOSとWindows両方で簡単にビルドできるのでGoで作った（Claude Codeが全部書いた）。arshes serveを実行するとローカルでサーバが立ち上がってslangファイルが生成される。

iOSアプリを開いてアドレスを入力するとサーバーとWebSocketで接続される。その状態で、サーバーが起動時に生成したslangファイルをVSCodeなどで編集すると、サーバーがそれを検知してクライアントにシェーダーのコードを送りつける。クライアント側はサーバーから受け取ったコードを、UIから書いたものと同じようにコンパイルし、その結果をサーバーに返す。役割が分担されてシンプルで良い。

この構成の良いところは、ローカルネットワークを越えてやりとりしたくなった場合に、クライアントは実装を維持できるはずで、PC上で編集したシェーダーをサーバーに投げつけて、サーバーがそれをクライアントに流す、という構成になるはず（セキュリティなど考えることは別途ありそう）。

また、ファイルを編集すればクライアントに送られるので、AI AgentにArshesのシェーダーを書いてもらうこともできる。MCPサーバーにするとよりスムーズになりそうだが、そこまでやらんくてもいいかなぁという温度感である。arshses serve --logとオプションをつけると、ログをローカルのファイルに出力するようになるので、AIにファイルを読ませることでコンパイルエラーなどを検知できてフィードバックループが回せてそうだった。

gRPCの双方向ストリーミングにするとサーバーとクライアントで使用する型を共通のprotoファイルから作れて便利だが、ちょっとオーバースペックかなと思ってWebSocketにした。ベータテストをやめるときにはgRPCにしてるかもしれない。

GitHub - shivaduke28/arshes-cligithub.com

概ねいい感じに動いているので、UIなどの調整がおわったらベータテストとして公開する予定。

Continued by

References

Referenced by