Giter VIP home page Giter VIP logo

hime-display's Introduction

Hime Display

illustrated by MakoSaikou

English | 简体中文 | 日本語

Download | Docs(Chinese Only) | Introduction Video

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

Preview

Control Panel

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
(Developing)
Physics Simulation
(Animation only)

(All status)

(Considering)

(Not support)
Parameter Control Morph Morph Parameter
Part

(TODO)
Face Capture
(No specification)
Holistic Capture
(No specification)

(No specification)

Main Techniques

This application mainly uses Front-end technology, based on Electron, mainly uses Vite as build tools.

Uses lowdb as the database.

Multilingual support adopted i18next.

The control panel adopted Vue framework and Element Plus component library.

Uses Pixi.js as the rendering engine of 2D models, and the 3D models use Three.js.

Motion capture adopts Google's MediaPipe, and adopts Kalidokit to analyse captured data.

Develop

# 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 which is also developed by Electron.

Thanks to 笺染菲素 for testing the application and providing many suggestions.

Thanks to pure01fx, the author of HuiDesktop for some technical support on Spine.

Thanks to greenjerry for supporting me in material, spiritual, software and hardware.

hime-display's People

Contributors

tski433 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

hime-display's Issues

能否增加一些功能?

首先非常感谢作者的这个作品,让我能够方便快捷地获得一个桌宠,经过几个月的使用,我感觉非常好。我冒昧地提出一个想法:是否能够为hime display添加一个播放声音和显示交互反馈文字的功能,类似一种聊天框?(不知道这样添加新功能会不会太困难或者大大增加了您的工作量)

[Feature Request]请求添加将模型置于最底层的选项

默认的情况,其实模型有点像窗口,在要处理的窗口一多的情况下,显示会变得有点混乱。希望参照置于顶层的方法添加一个置于底层。并且希望为Mac添加一个在最上方任务栏的小图标,能够最小化,不占用Docker。

写的太好了~

这个代码太优雅了,感谢作者开源!我直接开学!

"cannot set properties of null (setting 'scale')

Hi! I've been loving the app so far, unfortunately whenever I try to open an Spine file v3.5 I get the the error
"Display Error: Uncaught TypeError: Cannot set properties of null (setting 'scale').
And when I try to open another Spine file v4.01 I get the error
"Display Error: Uncaught RangeError: Offset is outside the bounds of the DataView"
I attached the files I was working with
c010_2.zip
baiken2.zip

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.