#16 VRoidのTシャツ用テクスチャ作成支援ツールを作ってみる https://gyazo.com/ce2adfb9c19c7e25a7fd64634fe8bec4
基本情報
はじめに
プリントTシャツが好きなのでVRoidのTシャツ用のテクスチャ作成支援ツールを作ってみます。 欲しい機能はこんな感じです。
画像を貼れる
文字が入れられる
リアルタイムに3dモデルでプレビューできる
あとは出来るだけ簡単に操作したいのでドラッグで配置を動かせたり、直接テキストを入力できるようにします。
機能
機能はこんな感じで作ってみます。
プレビュー
3Dモデル
オービットカメラ
テクスチャエディタ
画像
サイズ
配置
テキスト
入力
配置
設定メニュー
カラーピッカー
画像インポート
テクスチャエクスポート
アプリの画面
https://gyazo.com/ce2adfb9c19c7e25a7fd64634fe8bec4
3つの画面を表示します。
プレビュー画面
テクスチャをリアルタイムで3dモデルに適用して確認する
カメラをマウスで動かす
テクスチャエディタ画面
画像やテキストの要素の位置をドラッグで動かしてテクスチャを編集する
設定メニュー画面
画像読み込みボタンなどのUIを配置する
操作方法の違う画面を3つ作ることに…
スクリーンに複数のカメラを使用して表示します。
Viewport Rect の値を変更する
https://gyazo.com/1070ba9e093242f425a5701c8039f05f
カメラだらけ…
プレビュー
RenderTextureを作成します
テクスチャエディタ用CameraのTargetTextureにRenderを指定します。
モデルのMtoonマテリアルのテクスチャにRenderTextureを指定します。
https://gyazo.com/6c5af9eebd0067248975de92a8d34557
https://gyazo.com/01a8471d4b4f34414ac4c939f492a7ef
モデルの前のカメラでやるとループする
テクスチャエディタ
RenderModeをWorldSpaceに設定したCanvasをTシャツ用のテクスチャにします。
テクスチャ用と画面用にカメラを二つ使いました
この実装は嫌でしたがUIをテクスチャとして使える別の方法が思いつかなかったので
https://gyazo.com/80a13755b2a7eb2bcef72a09b9a6ff41
テクスチャ用のCanvasにプリントTシャツのように画像や文字を入れられるようにします。
画像要素
RawImage
テキスト要素
InputField
TextじゃなくてInputFieldを使うとそのまま入力できて嬉しいです。
これらの要素をドラッグで移動できるようにします。
https://gyazo.com/3e1575f0b6fc63323cdd3d6e6c2fab49
設定メニュー
カラーピッカー
https://gyazo.com/9749708dbe829824808b0259934f5526
ベース用のテクスチャを表示しているImageのcolorに適用します。
https://gyazo.com/7680baa1b3d827e64458dff3b517ade1
画像インポート
読み込んだ画像サイズに対応するために縦横サイズを取得します。
テクスチャエクスポート
RenderTextureをpng画像として保存します。
code:cs
var width = renderTexture.width;
var height = renderTexture.height;
var exportTexture = new Texture2D(width, height, TextureFormat.RGBA32, false);
CustomRenderTexture.active = renderTexture;
exportTexture.ReadPixels(new Rect(0, 0, width, height), 0, 0);
exportTexture.Apply();
var bytes = exportTexture.EncodeToPNG();
File.WriteAllBytes(path, bytes);
Destroy(exportTexture);
おわりに
こんな感じになりました
https://youtu.be/uN2u-dNkqiU
プロシージャル生成要素は一体どこへ…
参考