# Hime Display

<p align="center">
<img width="200px" src="./images/icon.png">
</p>

> illustrated by [MakoSaikou](https://www.pixiv.net/users/72669923)

[English](./README.md) | [简体中文](./README-CN.md) | 日本語

[ダウンロード](https://hime.xdrv.cn/download/) | [ドキュメント（中国語のみ）](https://hime.xdrv.cn/) | [紹介動画](https://www.bilibili.com/video/BV1Me411u7pF)

このアプリケーションは、オープンソースで、クロスプラットフォームのユニバーサルなデスクトップモデルディスプレイヤーを狙っています。

## プレビュー

### コントロールパネル

<p align="center">
<img width="450" src="./images/control-panel-jp.png">
</p>

### ディスプレイウインドウ

何も見えない？そう、ディスプレイは実際には透明なウィンドウです。

## 特徴

1. 多種類のモデルタイプをサポート：Live2D、MMD、VRoid、Spine を支持します。
2. モーションキャプチャ：Google の MediaPipe を使用して、Live2D、MMD、VRoid にモーションキャプチャを提供します。
3. クロスプラットフォーム：macOS と Windows の両方に対応しています。
4. 多言語対応：簡体中国語、日本語、英語に対応しています。
5. 全面的なモデルコントロール：モデルの各種操作を行うことができます。ボーン変形、モーフ、アニメーション再生など。
6. アニメーショントランスレート：MMD モデルは、Mixamo からのアニメーション（VRoid は後にサポートする予定）を直接ロードできます。

## 基本の使い方

### モデルデータベースのデザイン

1 つ以上のファイルパスをデータソースとして、いくつかのモデルファイルの特徴に基づいて、そのパス以下のモデルを再帰的に検出し、データベースに追加してから読み込みます。

### モデルをロードするの方法

1. コントロールパネルの`ソース`をクリックします。
2. そして`データソースを追加`をクリックし、モデルとアニメーションファイル、音声ファイルがあるディレクトリを選択します。
3. データソース操作の更新ボタンをクリックします。
4. コントロールパネルのメニューの`モデル`をクリックし、ロードしたいモデルを選択します。選択したモデルはハイライトで表示されます。
5. そして、データベースの下の`選択したモデルをロード`をクリックします。

### 注意事項

1.  異なるタイプのモデルと音声とアニメーションファイルを同じデータソースに配置できます。
2.  効率化と汎用性のため、ほとんどのファイルタイプは、検索プロセスでファイルの内容を読み取らず、主にファイルの拡張子で判断されます。サポートされていないファイルが存在する場合でも、データベースにロードされる可能性があります。
3.  モデルファイルについては、一部のモデルのファイル名は通常モデル名ではないため、モデルファイルの上位ディレクトリの名前がモデル名として使用されるから、複数のモデルを同じディレクトリに配置すれば、混乱を招く可能性があります。
4.  オーディオファイルとアクションファイルの場合、通常はファイル名はコンテンツに直接関係しているから、ファイル名がそのまま名前として使用され、同じディレクトリに配置しても混乱は起こりません。
5.  データソースを追加した後、検索タイプの編集をクリックするとロードされたいモデルタイプを配置できます。デフォルトでは全てびタイプが検索されます。
6.  更新操作を実行した後、統計インフォメーション、モデルデータベース、オーディオデータベース、モーションデータベースが自動的に更新されます (後者の 2 つは 3D モデルのアニメーションコントロールページに表示されます)。

## モデル機能の対比

|                      |             MMD              |         VRoid          |            Live2D            |            Spine             |
| :------------------: | :--------------------------: | :--------------------: | :--------------------------: | :--------------------------: |
|      モデル情報      |              ✅              |           ✅           |              ✅              |              ✅              |
|   オブジェクト変換   |              ✅              |           ✅           |              ✅              |              ✅              |
|  アニメーション再生  |              ✅              |   ❌<br/> (開発予定)   |              ✅              |              ✅              |
| 物理シミュレーション | ✅<br/> (アニメーションのみ) | ✅<br/> (すべての状態) | ❌<br/> (まだ調べていません) |   ❌<br/> (スパインは無理)   |
|    パラメータ制御    |            モーフ            |         モーフ         |      Parameter<br/>Part      |              ❌              |
|     顔キャプチャ     |              ✅              |           ✅           |              ✅              | ❌<br/> (パラメータ基準なし) |
|    全身キャプチャ    |              ✅              |           ✅           | ❌<br/> (パラメータ基準なし) | ❌<br/> (パラメータ基準なし) |

## 主な開発技術

このアプリケーションは、フロントエンド技術を使用し、[Electron](https://www.electronjs.org/) に使って開発されており、構築ツールは [Vite](https://vitejs.dev/) を使用しています。

データベースは [lowdb](https://github.com/typicode/lowdb) を使用しています。

多言語対応は[i18next](https://www.i18next.com/) を採用。

コントロールパネルは [Vue](https://vuejs.org/) フレームワークで開発され、[Element Plus](https://element-plus.org/) コンポーネントライブラリを使用します。

2D モデルはレンダリングエンジンに[Pixi.js](https://pixijs.com/)を、3D モデルはレンダリングエンジンに[Three.js](https://threejs.org/)を使用しています。

モーション キャプチャは、Google の [MediaPipe](https://mediapipe.dev/) を使用し、キャプチャデータの分析は [Kalidokit](https://github.com/yeemachine/kalidokit) を使用します。

## 開発

```bash
# デペンデンシーのインストール
yarn
# 起動
yarn start
# ビルド（具体的なビルドタイプは、ルートディレクトリのbuild.config.jsファイルで配置できます）
yarn build
```

## スペシャルサンクス

私にとって、健全なアプリケーションを開発のは初めてで、まだ右も左もわかりません。

このプロジェクトのファイル構造は、同じく Electron によって開発されたダウンロードツール [Motrix](https://motrix.app/) を参照しています。ありがとうございます。

アプリケーションをテストし、多くの提案を提供してくれた [笺染菲素](https://space.bilibili.com/33572615) に感謝します。

[HuiDesktop](https://github.com/HuiDesktop/HuiDesktop) の作成者 [pure01fx](https://github.com/pure01fx) による Spine のテクニカルサポートに感謝します。

[greenjerry](https://github.com/greenjerry) には、物質的、精神的、そしてソフトウェア、およびハードウェアで私をサポートしていただき、本当にありがとうございます。