v3d-core-realbits/README.md

WebGL-based humanoid model rendering engine.

# v3d-core

WebGL-based humanoid model rendering engine.

## Objectives

This project aims to be an easy-to-use library for rendering 3D and pseudo-2D humanoid models. We choose WebGL because of its portability across platforms, as well as the broad support from JavaScript community.

## Features

- Contains one simple API for interacting with scene and models
- Supports `.vrm` file loading, including:
  - Unity Humanoid bone mapping
  - [BlendShape](https://vrm.dev/univrm/components/univrm_blendshape/) morphing
  - [Secondary Animation](https://vrm.dev/univrm/components/univrm_secondary/)
  - [MToonMaterial](https://github.com/phantom-software-AZ/babylon-mtoon-material)

## Usage

### Install from NPM

```s
npm install v3d-core
```

### In browser

_Some older browsers may not be supported._

Please see [examples/browser](./examples/browser) for an example.

A more complicated example can be found in [examples/classroom](./examples/classroom).

### On Babylon.js Playground

Currently, this is not possible since we use a modified Babylon.js fork.

### For node.js and webpack

_All modules support ES6 imports._

Please see [index-test.ts](./src/index-test.ts) for an example.

## Contributing

See [CONTRIBUTING.md](./CONTRIBUTING.md).

## Build

1. Clone this repo and submodules:

   ```s
   git clone https://github.com/phantom-software-AZ/v3d-core.git --recurse-submodules
   ```

   If your Internet connection is slow, try the following instead:

   ```s
   git clone https://github.com/phantom-software-AZ/v3d-core.git --recurse-submodules --shallow-submodules
   ```

2. Build Babylon.js

   ```s
   cd lib/Babylon.js && git checkout master-custom && npm install
   cd Tools/Gulp && npm install
   gulp typescript-libraries --noGlobalInstall && gulp npmPackages-es6 --noGlobalInstall
   cd ../../../..
   ```

3. Build v3d-core

   ```s
   npm install
   npm run build
   ```

   Output files will be under `dist` folder.

## Debugging

Go to root folder of this repository and run:

```s
$ npm run debug
```

The debug page can be opened in any browser with `http://localhost:8080/`.

## Demo Video

See [this demo video](https://www.youtube.com/watch?v=pQnvU2PVymE).

## Credits

- [babylon-vrm-loader](https://github.com/virtual-cast/babylon-vrm-loader)
- [babylon-mtoon-material](https://github.com/virtual-cast/babylon-mtoon-material)

## Licenses

see [LICENSE](./LICENSE).

Babylon.js is licensed under [Apache License 2.0](https://github.com/BabylonJS/Babylon.js/blob/master/license.md).

## Git Submodule

- git submodule init
- git submodule sync
- git submodule update --remote
- git submodule status

## Git Submodule Remove

1. git submodule deinit <your_submodule>
2. rm -rf <your_submodule>
3. git rm <your_submodule>
4. git commit -m "Removed submodule"
5. rm -rf .git/modules/<your_submodule>

## For babylon-mtoon-material debugging with es6 option

- Patch material-value-binding-merger.ts and vrm-material-generator.ts file in babylon-vrm-loader package.
- copy shader/babylon-mtoon-material/src/shaders to dist/src/babylon-mtoon-material/src