最初に試す順番
- 「モデル製作 簡易版」を開き、写真を1枚選びます。
- 表示された柄を確認し、「ブラウザに保存」で端末内へ保存します。
- ITタブへ戻り、AR・VTuber・ホログラム・サイバー空間から見せ方を選びます。
- 細かく柄の位置を直したい場合だけ、「テクスチャ編集」を使います。
デジタル展示
モデルを作り、AR・VR・箱庭で表示する。
IT展示 取扱説明書
作る、保存する、見せるまでの流れ
ここにあるIT展示は、写真から柄を作り、ブラウザ内に保存し、その柄をAR・VTuber・ホログラム・3D空間で試すための試作ページです。 画像処理やカメラ処理は基本的に端末のブラウザ内で行い、アップロードした写真やカメラ映像をサーバーへ保存しません。
柄の保存と反映
- 保存先は、いま使っているブラウザのローカル保存領域です。
- 保存した柄は同じブラウザ内の他ツールから読み込めます。
- 保存しても他の人には公開されません。
- 別の端末や別ブラウザで使う場合は、PNGとして書き出してから読み込み直します。
- 公開展示で共有する場合は、写真の権利と写っている人の同意を先に確認してください。
モデル製作 簡易版
- PNG / JPG / WebPの画像を1枚選ぶだけで、着物・浴衣のテクスチャへ反映します。
- 柄は着物部分だけに乗るようにし、顔・髪・肌へ広がらない設計にしています。
- まず展示用の雰囲気を短時間で確認したいときに使います。
- 結果がよければブラウザ保存、細かく直したければじっくり編集へ進みます。
テクスチャ編集
- Fabric.jsの2D編集画面で、画像を移動・拡大縮小・回転できます。
- UV台紙と領域データを使い、袖・身頃・襟・帯など必要な部分だけを書き出します。
- 柄合わせを見ながら整えたい場合や、写真の使う位置を決めたい場合に向いています。
- 作ったPNGは保存でき、同じブラウザ内の各展示ツールで呼び出せます。
AR / VTuber
- カメラを使うページでは、ブラウザのカメラ許可が必要です。
- ARは投影展示や重ね表示の確認、VTuberは顔・手・体のトラッキング確認に使います。
- 顔と上半身だけのモードでは、肩と首より上を中心に動かし、立ち姿が崩れにくいようにしています。
- トラッキングが乱れる場合は、明るい場所で全身または上半身が画面に入るようにしてください。
ホログラム展示
- 保存した柄のモデルを、ホログラムステージ風に表示できます。
- 静止画像を4方向に配置するモードと、連番画像をまとめて変換するモードがあります。
- 表示画面では4枚が連動して拡大縮小され、投影サイズを直感的に調整できます。
- 全画面表示に切り替え、スマホ画面の上に透明板ピラミッドを置く流れを想定しています。
サイバー空間への投影
- 保存した柄を着た仲居さんを、日本庭園風の3D空間に表示します。
- WebGLで空間を描画し、キーボードや画面操作で視点を動かせます。
- 展示物としては、着物の柄が空間内でどう見えるかを確認する用途です。
- 今後、学内展示や説明会で見せるデモとして拡張できます。
使っている技術
- HTML / CSS: 1ページ構成、タブ、レスポンシブ表示、和装と未来感のUI。
- JavaScript: タブ切替、編集モード、画像保存、ホログラム変換、カメラ連携。
- Three.js / WebGL: VRM表示、3D空間、投影ステージの描画。
- @pixiv/three-vrm: 仲居さんVRMの読み込み、ボーン制御、着物マテリアル差し替え。
- MediaPipe / Kalidokit: 顔・手・体の推定と、VRMへのトラッキング反映。
- Fabric.js: UV台紙上での画像配置、拡大縮小、回転編集。
権利・安全・公開前確認
- 画像、VRM、テクスチャ、音声、キャラクターには、それぞれ権利があります。
- 版権キャラクター、商用作品、他人の写真を無断で展示・配布しないでください。
- この試作は学内説明・非営利展示・技術検証を想定しています。
- 販売、広告、受託制作、有料イベント、収益化動画などには使わないでください。
- カメラを使う展示では、撮影範囲と「映像を保存しない」ことを事前に説明してください。
うまく動かない時
- ChromeまたはEdgeの最新版で開いてください。
- カメラが映らない場合は、URLバー横の権限設定でカメラ許可を確認してください。
- 保存した柄が出ない場合は、同じブラウザで開いているか確認してください。
- ローカル確認では、ファイル直開きよりもローカルサーバーのURLで見る方が安定します。
- 表示が重い場合は、他のタブを閉じてから再読み込みしてください。
重要: ここで作った柄や展示素材は、ブラウザ内で試すためのものです。公開・配布・学外展示をする前に、写真・モデル・画像素材の権利と本人同意を必ず確認してください。