Cubism WebAR Sample is sample project that combines Live2D Cubism SDK for Web and AR.js to display Live2D model output from Live2D Cubism Editor on AR marker via webcam.
This application runs on a web browser. This makes it easy to enjoy AR content in a browser without installing an application.
You can display your Live2D models just by replacing model data, and you can use your own AR marker. You can promote your Live2D models by embedding AR marker in business cards or posters.
Additionally, in the two-shot mode, which does not use markers, you can take pictures with the Live2D model.
Read this in other languages: English, 日本語.
See LICENSE.md.
| Android | iPhone, iPad | PC | |
|---|---|---|---|
| OS | Android 7.0 or higher | iOS 11 or higher | Windows or macOS |
| Browser | Google Chrome | Safari | Google Chrome |
| Name | Version |
|---|---|
| Cubism SDK | Cubism 5 SDK for Web R1 beta4 [5-r.1-beta.4] |
| Node.js | 20.11.0 |
- The eye tracking function does not work correctly depending on the value of scale item in model setting file
- Eye tracking function is disabled in
/src/lappdefine.ts
- Eye tracking function is disabled in
- The display position of model changes between normal display and billboarding display
- The display size of model changes depending on aspect ratio of device screen
.
├─ assets # Resource files
│ ├─ css # Style files
│ ├─ data # AR.js camera data file
│ └─ models # Live2D model files and AR.js marker file
├─ CubismWebSamples # Cubism SDK for Web (Git submodule)
├─ docs # Document files about this application
├─ lib # Third party files
├─ script # Autorun scripts
└─ src # Source code files
| Name | Version |
|---|---|
| AR.js | 2.0.8 |
We value and appreciate all the submitted pull requests, regardless of whether they contain fixes, improvements, or new features. To maintain a clean main repository, please create your own forks and feature branches as necessary.
If you have any questions, please visit the official Live2D forum and discuss them with other users.