BREAKING: WebGPU support (MToonNodeMaterial)

[0b5vr]

This PR supports WebGPURenderer by adding MToonNodeMaterial, which is a NodeMaterial port of MToonMaterial.

After the change is published, you can use three-vrm on WebGPU by using MToonNodeMaterialLoaderPlugin. To use the loader, specify the loader in the option of VRMLoaderPlugin. See the webgpu-dnd.html example for details.

BREAKING

• gltf.userData.vrmMToonMaterials might have materials other than MToonMaterial (namely, MToonNodeMaterial in this case).
  • This should not affect many users since the interface of MToonNodeMaterial is almost identical to MToonMaterial.

TODOs

• [x] Since three-vrm-material-mtoon imports three/addons/nodes/Nodes.js, the initial module loading time became longer when you are using certain CDNs like unpkg. We are currently seeking for a workaround.
  • See also: https://discourse.threejs.org/t/nodematerial-on-unpkg-slow-to-load-all-the-dependencies/63213
  • Replaced the CDN from unpkg to jsdelivr and the problem is resolved.
    • See: https://github.com/mrdoob/three.js/pull/28006
    • See: https://github.com/pixiv/three-vrm/pull/1385
• [x] Several type definitions on @types/three are patched by patch-package
  • We might want to fix by three-ts-types side before we ship this
• [x] The Type of property 'cache' circularly references itself ... error (TS2615) occurs
  • We might want to bump our TypeScript version to 5.1 or later
  • The issue is resolved, at least in the patch
    • See: https://github.com/three-types/three-ts-types/pull/744#issuecomment-2036440655

[0b5vr]

Examples are working properly with r163.

[0b5vr]

Ready to merge!

We are going to bump the major since the breaking change occurs.

[0b5vr]

日本語で恐縮ですが、NodeMaterialを継承したマテリアルのコードを読む上で、NodeMaterialの動作の流れ（r164現在のもの）を以下のページにまとめてあります。レビューの際にご活用ください。

https://scrapbox.io/0b5vr/Three.js:_NodeMaterial

[ke456-png]

The rendering result differs when there is no texture and only a normal map.

examples/feature-test

webgpu-feature-test

[ke456-png]

Perhaps MToonMaterial was wrong?

https://github.com/pixiv/three-vrm/blob/8a8944949e6475e1a418a260dcf443a6f6764289/packages/three-vrm-materials-mtoon/src/MToonMaterial.ts#L607-L614

 const useUvInFrag = 
...
      this.uvAnimationMaskTexture !== null ||
      this.normalMap !== null;

[0b5vr]

The rendering result differs when there is no texture and only a normal map.

It seems to be, yes! The blue ball in the example should have bumps on the surface since the normal map is assigned. I will fix this in another PR.

[ke456-png]

If possible, please incorporate this change. https://github.com/pixiv/three-vrm/commit/25cc2ba3f40c0f80d7da4a51a8e4cd84dc0a79ab

[0b5vr]

Resolved conflict with dev-v3, it's now ready to build using esbuild. I don't have to explicitly specify three/addons/nodes/Nodes.js, esbuild seems to handle this by only specifying three.

[0b5vr]

If possible, please incorporate this change. 25cc2ba

yes I have to indeed

[0b5vr]

If possible, please incorporate this change. 25cc2ba

yes I have to indeed

done @ https://github.com/pixiv/three-vrm/pull/1384/commits/36f064fb7653920ec4ff3bf453ac478ba08432dc

[0b5vr]

MToonNodeMaterial is gonna be compatible only with r161 or higher. I added a warning if the user attempts to use this in r160 or before.

https://github.com/pixiv/three-vrm/pull/1384/commits/afe9143d2054097c1b99aae876a77d4bbe58c38c