01
AI Character System
Unity / FastAPI / OpenAI API によるAIキャラクター会話システム
UnityFastAPIOpenAI APIVOICEVOXVRM
Interactive Developer
Web・3D・AI を横断しながら、触れて理解できる インタラクティブなシステム体験を設計・実装しています。
AIツールを補助として使いながら、生成されたコードを読み解き、 構造を理解した上で実装と改善を積み重ねています。
ROOM Navigation
Portfolio 2026
ROOM の3D空間から Chat、Model、Music へ移動できます。 作品一覧ではなく、空間の中でポートフォリオを回遊できる導線です。
Monitor
Chat
Rack
Model
Piano
Music
Featured Works
Core Projects
HOME では AI Character と ROOM を主要プロジェクトとして見せ、 そのほかの制作領域は後段の supporting section に整理しています。
02
3D Portfolio Room
React Three Fiber / Three.js を使用したWeb3Dポートフォリオ
React Three FiberThree.jsBlender
01 — AI Character
AI Character
概要
Unity / FastAPI / OpenAI API / VOICEVOX を連携させた、 3Dキャラクター対話デモです。
実装構成
Unity 側で VRM キャラクター表示、会話UI、リップシンク制御を担当し、 FastAPI 側で API 通信とチャットログ管理を処理しています。
実装機能
- LLMストリーミング応答
- VOICEVOXによる音声合成
- 音声に連動したリップシンク
- 会話履歴を保持するチャットログ管理
Stack
UnityFastAPIOpenAI APIVOICEVOXVRM
02 — ROOM
3D Portfolio Room
概要
ブラウザ上で動作する3Dポートフォリオ空間です。ページ遷移の導線として機能させながら、 3Dデータの最適化を中心に改善を進めました。
技術
React Three Fiber と Three.js でブラウザ描画を構成し、Blender でルームモデルと アセットを調整しています。
Tap
Tap
Tap
最適化
Draco圧縮、KTX2テクスチャ圧縮、CycleBake、DrawCall削減を組み合わせ、 転送量と描画負荷の両面を調整しました。
Mobile Transfer
-91.8%
初回通信量を大幅に削減
Draw Calls
-99.4%
描画負荷を最小化
GLB Transfer
-95.3%
ROOM.glbの転送量を削減
結果
実機計測では Mobile transfer を 91.8%、Draw calls を 99.4% 削減し、最終的に ROOM.glb の転送サイズを 95.3% 圧縮しました。
React Three FiberThree.jsBlender
04 — About
About Me
Domain
3D / Web / AI
Goal
インタラクティブ体験の設計と実装。
Web開発・3D表現・AIシステムを横断し、インタラクティブ体験の設計と実装を進めています。
AIは補助として活用しつつ、生成コードを読み解きながら構造理解と改善を重ねています。
UX + EngineeringReal-time Interaction
Focus
AIは補助として使い、設計・実装・調整・改善は自分の手で積み重ねながら、コードを読み解いて構造理解を深めています。
Core Stack
- Next.js
- Three.js
- Unity
- AI API
Stack
Next.jsThree.jsUnityAI API
Supporting Work
Creative + Utility
HOME では主要プロジェクトを前面に出しつつ、Model・Music・Chat は補助的な制作領域として まとめて確認できるようにしています。
Model
Character Modeling
Blender を中心に、キャラクターモデルと ROOM 用アセットの制作を進めています。
BlenderSubstance Painter
Music
Music Production
Logic Pro による作曲・編曲・ミックス制作。ポートフォリオ内の音響にも反映しています。
Logic ProGarageBandMixing