46 lines
1.7 KiB
Markdown
46 lines
1.7 KiB
Markdown
|
# @pixiv/three-vrm-materials-mtoon
|
||
|
|
|
||
|
|
MToon (toon material) module for @pixiv/three-vrm
|
||
|
|
|
||
|
|
[GitHub Repository](https://github.com/pixiv/three-vrm/tree/dev/packages/three-vrm-materials-mtoon)
|
||
|
|
|
||
|
|
[Examples](https://pixiv.github.io/three-vrm/packages/three-vrm-materials-mtoon/examples)
|
||
|
|
|
||
|
|
[API Reference](https://pixiv.github.io/three-vrm/docs/modules/three-vrm-materials-mtoon)
|
||
|
|
|
||
|
|
## WebGPU Support
|
||
|
|
|
||
|
|
Starting from v3, we provide [WebGPURenderer](https://github.com/mrdoob/three.js/blob/master/examples/jsm/renderers/webgpu/WebGPURenderer.js) compatibility.
|
||
|
|
To use MToon with WebGPURenderer, specify the WebGPU-compatible `MToonNodeMaterial` for the `materialType` option of `MToonMaterialLoaderPlugin`.
|
||
|
|
|
||
|
|
`MToonNodeMaterial` only supports Three.js r167 or later.
|
||
|
|
The NodeMaterial system of Three.js is still under development, so we may break compatibility with older versions of Three.js more frequently than other parts of three-vrm.
|
||
|
|
|
||
|
|
```js
|
||
|
|
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
|
||
|
|
import { MToonMaterialLoaderPlugin } from '@pixiv/three-vrm-materials-mtoon';
|
||
|
|
import { MToonNodeMaterial } from '@pixiv/three-vrm-materials-mtoon/nodes';
|
||
|
|
|
||
|
|
// ... Setup renderer, camera, scene ...
|
||
|
|
|
||
|
|
// Create a GLTFLoader
|
||
|
|
const loader = new GLTFLoader();
|
||
|
|
|
||
|
|
// Register a MToonMaterialLoaderPlugin with MToonNodeMaterial
|
||
|
|
loader.register((parser) => {
|
||
|
|
|
||
|
|
// create a WebGPU compatible MToonMaterialLoaderPlugin
|
||
|
|
return new MToonMaterialLoaderPlugin(parser, {
|
||
|
|
|
||
|
|
// set the material type to MToonNodeMaterial
|
||
|
|
materialType: MToonNodeMaterial,
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
// ... Load the VRM and perform the render loop ...
|
||
|
|
```
|
||
|
|
|
||
|
|
See the example for the complete code: https://github.com/pixiv/three-vrm/blob/release/packages/three-vrm-materials-mtoon/examples/webgpu-loader-plugin.html
|