Icon as VRM as Code (アイコンをコードで管理したい)
現在使っているアイコン
各種SNSなどで使っているアイコン、Miitomo(2016～2018年)という任天堂がかつて出していたアプリで2016年頃(記憶が曖昧)に作って約9年間使い続けています。
そして、飽きたとか、権利的にもっと自由に使えるものが欲しい(SNSのアイコンに使うくらいなら大丈夫なはずですが…)などの理由で2019年くらいからアイコンを変えたいと言い続けており、過去にはBlenderに手を出して挫折したりもしました。
また、変えたいとはいいつつも、長い期間同じアイコンを使い続けてしまったので、遠目で見れば大体同じに見えるものにしたいです(たまにアイコンで認識されている人がいるので)。
画像生成AIにお願いしてみよう
ここ数年画像生成AIなどというものが流行っており、頼めばアイコンくらいならさっと作ってくれます。例えば少し前にCopilotに「今使っているアイコンと似たような構図のイラストを描いて」とお願いしたら↓のようなものを出してくれました。悪くはないですね。
ただこれ、ちょっと背景を変えたいとか、ポーズを変えたいなどと思ったときに修正できません。つまり、同じキャラクターの別のバリエーションを作れません。画像生成AIの扱いに慣れている人ならできるのかもしれませんが…。そもそも生成画像のキャラクターは雰囲気が似ているだけで元アイコンと同一キャラクターかといわれると怪しいですし。
キャラクターの一貫性を保ちながら、ポーズや背景を変えたいならおそらく3Dモデルが一番楽です。でもモデリングはもうしたくありません。いくつか3Dモデル自動生成サイトも試しましたが、思うような結果は得られませんでした。もしいい感じの3Dモデルを自動生成できてobjファイルなどを返されても、画像生成AIに画像を返されるのと同じで自分で修正できませんし。
欲しい3Dモデル、単純なのでは？
アイコンをよく見てみると3Dモデル自体は別にそんな複雑ではないです。単純な球などの組み合わせで再現できる構造をしています。SVGの3D版とかあればそれだけで作れそう。p5.jsという3D描画ライブラリを少し触ったことがあるので使ってみましょう。
ということで「p5.jsの3D描画機能を使ってアイコンっぽいキャラクターを作って」とChatGPTにお願いしてみます。
大体欲しいのはこういうのです。この画像のものは目なども球で表現していたのですが、そこに立体感はいらないのでテクスチャ画像貼り付けたほうがよさそうですね。テクスチャ画像もp5.jsの2D描画機能で作ってしまいましょう。頼んだChatGPT！
？？？？？？？？？？？？？。ﾄﾞｳｼﾃｺｳﾅｯﾀ…。まあ全てコードで表現されているので自分で修正できます。これが画像生成AIだったら修正も頼むしかないのでコードで表現されているのっていいですね。
平面の画像はデバッグ用に表示しているテクスチャ画像です。改善の余地はありますが、一旦これでよしとしましょう。
他アプリケーションでも使える形式でエクスポートしたい
これでp5.jsで描画できるようになりました。しかし他のアプリケーションから使えるような3Dモデルのフォーマットではありません。p5.jsから3Dモデルファイルとしてエクスポートできないか調べてみましたがあまり柔軟性はないようです。three.jsという高機能なライブラリならそういうこともできるらしいのでまたChatGPTに頼んで移植してもらいました。座標系が違うなどの問題で少しバグっていましたが(↓)、まあ大体上手くいきました。
そして GLTFExporter というものを使えば簡単にgltf形式でエクスポートでき、テクスチャ含めて他のアプリケーションでも使えるようになりました。
VRMに対応したい
ここまでやったならVRM(周りにVRChatなどをやってる人がいるので名前だけ知っている)とかいうやつに対応したくなります。そのためにはまず骨格というものを設定しないといけないらしいです。BoneとSkeletonの違いは？Mesh、Material、Geometryって何？？？となりながら(ChatGPTに概念の説明をしてもらいながら)ごにょごにょ設定していきました。
ここまで出来たら最後はVRMファイルを出力するだけです。色々調べてみると、VRMはGLB(GLTFはJSONだが、それをバイナリにしたもの)の拡張プロパティに色々(このBoneは人間の腕だよ～とか)必要な値を設定して拡張子を変えたものであることが分かりました。しかし、作り方を調べてもBlenderやUnityを使って変換するのが基本のようです。でも、ここまでコードで完結させて、最後の変換部分だけGUIで…とかやりたくないですよね。このページを読んで頑張りましょう。GLTFExporterの制限でルート要素に拡張プロパティを簡単に設定できなかったりしてハマりましたが、まあなんとかなりました。
ということでVRM Viewerの1つに読み込ませてみました。
なんか今のモデルだと他のVRM Viewerに読み込ませるとエラーになったりするのでもう少し改善が必要そうですが…まあ一旦ヨシ
まとめ
- 生成AIの出力はできれば自分でも修正可能であってほしい
- as Codeっていいですね
- 単純な図形を組み合わせるだけなら絵描けない人でもアイコン作れそう
- 知識が一切ない領域だとChatGPTは有能