hime-display - GitLite

KO | EN

gitlite — search

#hacktoberfest #typescript #go #golang #machine-learning #rust #macos #windows #awesome #kubernetes #awesome-list #vue #security #ios

hime-display

(★ 252)

A universal desktop model displayer for Live2D, Spine, MMD and VRoid.

파일 탐색기

최종 버전 다운로드 (.zip)

- - release.yml
- control-panel-cn.png
- control-panel-en.png
- control-panel-jp.png
- icon.png
- - background.tiff
- - icon.png
- build.js
- constants.js
- dev-runner.js
- - Application.js
  - index.js
  - Launcher.js
  - package.json
  - vite.config.js
- - package.json
- - control.html
  - display.html
  - package.json
  - vite.config.js
- - constants.js
.eslintrc.js
.gitignore
build.config.js
LICENSE
package.json
README-CN.md
README-JP.md
README.md
yarn.lock

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/TSKI433/hime-display

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd hime-display

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

yarn

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

yarn start

개발/실행 서버를 켭니다.

yarn build

배포용으로 코드를 최적화해서 빌드 파일을 생성합니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Hime Display

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

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

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

[Download](https://hime.xdrv.cn/download/) | [Docs(Chinese Only)](https://hime.xdrv.cn/) | [Introduction Video](https://www.bilibili.com/video/BV1Me411u7pF)

Hime Display aims to create an open-source, cross-platform, universal desktop model presenter.

## Preview

### Control Panel

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

### Display Window

Can't see anything? that's right, the display window is just a transparent window.

## Features

1. Multiple Model Type Support: Supports loading Live2D, MMD, VRoid, Spine models.
2. Motion Capture: Provides motion capture support for Live2D, MMD, VRoid with the help of Google's MediaPipe.
3. Cross Platform: Supports Windows and macOS.
4. Multilingual support: Supports English, Simplified Chinese, and Japanese.
5. Full Model Control: Various operations can be performed on the model, including bone transformation, deformation, and animation playback.
6. Animation transition: MMD model can load animations from Mixamo directly (Plan to support VRoid).

## Basic Usage

### Design of model database

The application uses one or more paths as the model data source. It can recursively detect the model under these paths according to some model file features and add them to the database.

### Method to load models

1. Click `Source` in left row of the control panel.
2. `Add Data Source`, select the directory of models, motions, and audios.
3. Click `Refresh` in the source path operations.
4. Click `Model` in left row, select the model you want to load in the model database, the selected one will be highlighted.
5. Last step, Click `Load Selected Model` under the database.

### Attentions

1. Different types of models, motions, audios can be put in the same data source.
2. In order to improve efficiency and enhance generality, for most file types, the detection process does not read the content of the file, and mainly judges by the file extension. So even if the file has problems or is not supported, it may be loaded into the database.
3. For some types of models, their file names are usually not the model names, and the names of the upper-level directory of the model files will be used as the model names, so placing multiple model files in the same directory may be confusing.
4. For motions and audios, their file names are usually related to the contents, so the file names will be used as the names, and placeing them into one directory will not cause naming confusion.
5. After adding data source, you can click `Edit` and decide the search type. All types will be detected by default.
6. When the search is complete, it will automatically update the statistic info, model database, motion database, and audio database (the latter two are displayed in the animation control page of the selected and displayed 3D model)

## Implemented Features Comparison

|                    |           MMD           |        VRoid        |          Live2D           |           Spine           |
| :----------------: | :---------------------: | :-----------------: | :-----------------------: | :-----------------------: |
| Model Description  |           ✅            |         ✅          |            ✅             |            ✅             |
|  Object Transform  |           ✅            |         ✅          |            ✅             |            ✅             |
| Animation Control  |           ✅            | ❌<br/>(Developing) |            ✅             |            ✅             |
| Physics Simulation | ✅<br/>(Animation only) | ✅<br/>(All status) |   ❌<br/>(Considering)    |   ❌<br/>(Not support)    |
| Parameter Control  |          Morph          |        Morph        |    Parameter<br/>Part     |       ❌<br/>(TODO)       |
|    Face Capture    |           ✅            |         ✅          |            ✅             | ❌<br/>(No specification) |
|  Holistic Capture  |           ✅            |         ✅          | ❌<br/>(No specification) | ❌<br/>(No specification) |

## Main Techniques

This application mainly uses Front-end technology, based on [Electron](https://www.electronjs.org/), mainly uses [Vite](https://vitejs.dev/) as build tools.

Uses [lowdb](https://github.com/typicode/lowdb) as the database.

Multilingual support adopted [i18next](https://www.i18next.com/).

The control panel adopted [Vue](https://vuejs.org/) framework and [Element Plus](https://element-plus.org/) component library.

Uses [Pixi.js](https://pixijs.com/) as the rendering engine of 2D models, and the 3D models use [Three.js](https://threejs.org/).

Motion capture adopts Google's [MediaPipe](https://mediapipe.dev/), and adopts [Kalidokit](https://github.com/yeemachine/kalidokit) to analyse captured data.

## Develop

```bash
# Install dependencies
yarn
# start
yarn start
# build (The specific build version can be configured in the `build.config.js` file in the root directory)
yarn build
```

## Special Thanks

This is my first attempt to develop a full application, maybe there are some deficiencies.

The file structure of this application refers to a download tool [Motrix](https://motrix.app/) which is also developed by Electron.

Thanks to [笺染菲素](https://space.bilibili.com/33572615) for testing the application and providing many suggestions.

Thanks to [pure01fx](https://github.com/pure01fx), the author of [HuiDesktop](https://github.com/HuiDesktop/HuiDesktop) for some technical support on Spine.

Thanks to [greenjerry](https://github.com/greenjerry) for supporting me in material, spiritual, software and hardware.