# Overview

A DLP3D data visualization application built with Vue 3, TypeScript, and Babylon.js. This application allows you to view and analyze motion capture data with interactive 3D models and data visualization charts.

## Supported Character Models

The application supports multiple character models for motion data visualization:

<table align="center">
  <tr>
    <td align="center"><img src="../../_static/MotionDataViewer/Ani.png" alt="Ani Character Model" width="200" height="350" /></td>
    <td align="center"><img src="../../_static/MotionDataViewer/FNN.png" alt="FNN Character Model" width="200" height="350" /></td>
    <td align="center"><img src="../../_static/MotionDataViewer/HT.png" alt="HT Character Model" width="200" height="350" /></td>
    <td align="center"><img src="../../_static/MotionDataViewer/KQ.png" alt="KQ Character Model" width="200" height="350" /></td>
  </tr>
</table>

## Features

- **3D Motion Data Visualization**: View motion capture data using interactive 3D models with Babylon.js
- **Multi-Model Support**: View motion data for different characters in the database
- **Database Integration**: SQLite database support for storing and querying motion data
- **Database Modification**: Directly modify data in the data panel
<div align="left" style="margin-left: 40px;">
  <img src="../../_static/MotionDataViewer/data-table.png" alt="Data Table Interface" width="200" />
</div>

- **Data Filtering**: Advanced search and filtering capabilities for motion data

<div align="left" style="margin-left: 40px;">
  <img src="../../_static/MotionDataViewer/search-bar.png" alt="Search Bar Interface" width="200" />
</div>

- **Multi-language Support**: Internationalization support for multiple languages
- **Real-time Data Analysis**: Interactive charts and data visualization
- **Motion Data Type Classification**: Support for various motion data types (idle, random, loopable, speech, etc.)