[2026/9/13]

[WEB App] Live2D Model Viewer v1 — ブラウザ完結型 Live2D モデルビューアー

[WEB App] Live2D Model Viewer v1 — ブラウザ完結型 Live2D モデルビューアー

Live2D Model Viewer v1

ブラウザ上でサーバーサイドの処理を一切介さず、PixiJS v6 と pixi-live2d-display、JSZip を用いて Cubism 2 および Cubism 4 の Live2D モデル（.model.json / .model3.json）をロード・検証・操作できる Web アプリケーション。

モデルファイル群（ZIP アーカイブまたはフォルダ）をドラッグ＆ドロップするだけで、メモリ内で即座に構造を解析して描画。パラメータのリアルタイム書き換え、モーション・表情の個別再生、マウス追従・自動呼吸・自動目パチのトグル制御、背景画像の合成、透過 PNG エクスポートまで、モデル制作・動作確認に必要な機能を 3 カラム構成のインターフェースに統合しています。

スクリーンショット

メイン UI & モデル読み込み画面

Live2D Model Viewer v1 — モデル読み込み画面

背景画像合成 & スケール調整画面

Live2D Model Viewer v1 — 背景合成画面

動画（GIF）

model読み込み

Live2D Model Viewer 操作デモ

モーション再生

Live2D Model Viewer モーション再生

背景変更

Live2D Model Viewer 背景変更

Sample data

サンプルデータは、live2d 公式サイトよりお借りしています。

特徴

  • ブラウザ完結型の Live2D レンダリングエンジン:
    pixi-live2d-display と PixiJS v6 を組み合わせ、サーバーへのファイル送信なしでローカル環境だけで Cubism 2 / Cubism 4 モデルをレンダリング。
  • ZIP / フォルダのドラッグ＆ドロップ直接読み込み:
    JSZip を用いたメモリ内展開と webkitRelativePath 動的注入により、圧縮ファイルやフォルダ構造を維持したままモデルアセットを自動抽出・ロード。
  • 128+ パラメータのリアルタイム手動制御 & フィルタリング:
    モデル固有のパラメータ群を自動抽出し、スライダー操作でリアルタイムに変形状態を操作可能。検索フィルター機能により膨大なパラメータから目的の項目へ即座にアクセス。
  • モーション・表情（Expressions）・Hit Area インタラクティブ再生:
    モデルに定義されたモーションリストや表情アニメーションの個別再生、Hit Area の視覚化表示に対応。
  • 自動動作トグル & Pause Auto:
    マウス追従（Mouse Tracking）、自動呼吸（Auto Breath）、自動目パチ（Auto Blink）を個別にオン/オフ可能。Pause Auto 機能により自動モーションを固定した状態での詳細確認が可能。
  • 背景画像合成 & 透過 PNG スクリーンショット保存:
    背景色変更（ソリッドカラー / グリッド / チェッカー / カスタム背景画像）に対応し、現在の表示状態をそのまま高解像度 PNG（背景透過選択可能）でダウンロードエクスポート。

モジュール構成

モジュール名主要機能・パラメータ
MODEL FILEZIP Archive / フォルダのドラッグ＆ドロップ読み込み、.model.json / .model3.json 自動判定
MODEL INFOモデル名、Cubism バージョン（Cubism 2 / 4）、Canvas サイズ、テクスチャ数、パラメータ数、パーツ数
MOTIONS / EXPRESSIONS定義済みモーションの一覧再生、表情（Expressions）切り替えおよびリセット
HIT AREAS衝突判定・タップ判定エリア（Hit Area）の領域一覧表示および視覚化
DISPLAY (OPTIONS)Pause Auto、Mouse Tracking、Auto Breath、Auto Blink、Hit Area Overlay、Speed（再生速度スライダー）
LIVE PARAMSパラメータ検索フィルター、各パラメータスライダー（角度、表情、目パチ、口パク等）のリアルタイム書き換え
VIEWPORT & BOTTOM TOOLBAR視点リセット（Reset）、キャンバスフィット（Fit）、スクリーンショット保存（Save）、背景切り替え（BG / グリッド / チェッカー / カスタム画像）、ズーム倍率表示

使い方

1. モデルファイル（ZIP または フォルダ）の読み込み

左パネルの drop エリアに Live2D モデル群の ZIP ファイルまたはフォルダをドラッグ＆ドロップします。自動的にアセット構造が解析され、中央のキャンバスにモデルが表示されます。

2. モーション・表情の確認

左パネルの「MOTIONS」または「EXPRESSIONS」一覧からボタンをクリックすると、モデルのモーションアニメーションや表情切り替えが再生されます。

3. パラメータの個別調整

右パネルの「LIVE PARAMS」でフィルター入力欄にパラメータ名を入力するか、スライダーを直接操作してモデルの姿勢や顔の向き、表情パーツを個別に変化させます。自動動作用の「Pause Auto」を有効にすると、自動アニメーションを停止して静止状態でのパラメータ確認が可能です。

4. 背景の切り替えとスクリーンショット出力

下部ツールバーの背景切り替えボタンから、暗色背景・格子柄・カスタム背景画像の読み込みを選択できます。「Save」ボタンをクリックすると、表示中の画面が高解像度 PNG としてダウンロードされます。

技術スタック

  • PixiJS v6 — 2D WebGL レンダリングライブラリ
  • pixi-live2d-display — Cubism 2 / 4 WebGL レンダラー統合ライブラリ
  • JSZip — メモリ内 ZIP 解凍・ディレクトリツリー走査
  • HTML5 Canvas / WebGL — メモリ内テクスチャ展開・動的合成描画
  • JavaScript (ES6+) — 生 TypedArray パラメータ制御・状態管理
  • Astro — Webアプリケーション基盤

技術記事

更新履歴

  • [2026-09-12]: v1.0 初回公開。
    • pixi-live2d-display および PixiJS v6 に基づくブラウザ完結型 Cubism 2/4 モデル表示パイプラインの構築
    • JSZip と webkitRelativePath による ZIP / フォルダドロップ展開とネスト階層の自動抽出
    • TypedArray 直接操作による 128+ パラメータのリアルタイム書き換えおよび検索フィルター機能の搭載
    • モーション、表情（Expressions）、Hit Area 表示および再生コントロール機能の統合
    • 背景画像合成、透過 PNG エクスポート、Pause Auto 機能の実装