Merge pull request #1412 from pixiv/dev-v3

`dev-v3`

Author: 0b5vr

.eslintignore

@@ -1,7 +1,7 @@
 /packages/*/docs/
 /packages/*/lib/
 /packages/*/node_modules/
-/packages/*/ts*/
 /packages/*/types/
+!/packages/types-*/types/
 
 jest.config.js

.eslintrc.json

@@ -9,6 +9,9 @@
     "plugin:@typescript-eslint/recommended",
     "plugin:@typescript-eslint/eslint-recommended"
   ],
+  "globals": {
+    "process": true
+  },
   "env": {
     "browser": true
   },
@@ -53,6 +56,10 @@
       {
         "selector": "enumMember",
         "format": ["PascalCase"]
+      },
+      {
+        "selector": "import",
+        "format": ["camelCase", "PascalCase", "UPPER_CASE"]
       }
     ],
     "@typescript-eslint/no-unused-vars": ["warn", { "args": "none" }], // we sometimes have to define unused arguments

.github/workflows/inspect.yml

@@ -56,7 +56,6 @@ jobs:
         path: |
           packages/*/lib/
           packages/*/types/
-          packages/*/ts*/
 
   lint:
     runs-on: ubuntu-latest

.github/workflows/publish.yml

@@ -65,4 +65,3 @@ jobs:
         path: |
           packages/*/lib/
           packages/*/types/
-          packages/*/ts*/

.gitignore

@@ -3,5 +3,5 @@
 /packages/*/node_modules
 /packages/*/docs
 /packages/*/lib
-/packages/*/ts*/
 /packages/*/types
+/tmp

README.md

@@ -14,39 +14,27 @@ Use [VRM](https://vrm.dev/) on [three.js](https://threejs.org/)
 
 [API Reference](https://pixiv.github.io/three-vrm/packages/three-vrm/docs)
 
-## v1
-
-**three-vrm v1 has been released!**
-
-three-vrm v1 supports [VRM1.0](https://vrm.dev/vrm1/), which is a new version of VRM format (the previous version of VRM is also supported, don't worry!).
-It also adopts the GLTFLoader plugin system which is a relatively new feature of GLTFLoader.
-
-There are a lot of breaking changes!
-See [the migration guide](https://github.com/pixiv/three-vrm/blob/dev/docs/migration-guide-1.0.md) for more info.
-
 ## How to Use
 
 ### from HTML
 
 You will need:
 
-- [Three.js build](https://github.com/mrdoob/three.js/blob/master/build/three.js)
-- [GLTFLoader](https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/GLTFLoader.js)
-- [A build of @pixiv/three-vrm](https://www.jsdelivr.com/package/npm/@pixiv/three-vrm?tab=files&path=lib)
+- Three.js build
+- GLTFLoader
+- A build of @pixiv/three-vrm
   - `.module` ones are ESM, otherwise it's UMD and injects its modules into global `THREE`
   - `.min` ones are minified (for production), otherwise it's not minified and it comes with source maps
 
-You can import all of them via CDN. See the example below.
-
-Code like this:
+You can import all the dependencies via CDN like [jsDelivr](https://www.jsdelivr.com/).
 
 ```html
 <script type="importmap">
   {
     "imports": {
-      "three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
-      "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/",
-      "@pixiv/three-vrm": "three-vrm.module.js"
+      "three": "https://cdn.jsdelivr.net/npm/three@0.167.0/build/three.module.js",
+      "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.167.0/examples/jsm/",
+      "@pixiv/three-vrm": "https://cdn.jsdelivr.net/npm/@pixiv/three-vrm@3/lib/three-vrm.module.min.js"
     }
   }
 </script>
@@ -56,11 +44,12 @@ Code like this:
   import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
   import { VRMLoaderPlugin } from '@pixiv/three-vrm';
 
-  const scene = new THREE.Scene();
+  // ... Setup renderer, camera, scene ...
 
+  // Create a GLTFLoader - The loader for loading VRM models
   const loader = new GLTFLoader();
 
-  // Install GLTFLoader plugin
+  // Install a GLTFLoader plugin that enables VRM support
   loader.register((parser) => {
     return new VRMLoaderPlugin(parser);
   });
@@ -87,9 +76,15 @@ Code like this:
     // called when loading has errors
     (error) => console.error(error),
   );
+
+  // ... Perform the render loop ...
 </script>
 ```
 
+See the Three.js document if you are not familiar with Three.js yet: https://threejs.org/docs/#manual/en/introduction/Creating-a-scene
+
+See the example for the complete code: https://github.com/pixiv/three-vrm/blob/release/packages/three-vrm/examples/basic.html
+
 ### via npm
 
 Install [`three`](https://www.npmjs.com/package/three) and [`@pixiv/three-vrm`](https://www.npmjs.com/package/@pixiv/three-vrm) :
@@ -98,46 +93,48 @@ Install [`three`](https://www.npmjs.com/package/three) and [`@pixiv/three-vrm`](
 npm install three @pixiv/three-vrm
 ```
 
-Code like this:
+### Use with WebGPURenderer
+
+Starting from v3, we provide [WebGPURenderer](https://github.com/mrdoob/three.js/blob/master/examples/jsm/renderers/webgpu/WebGPURenderer.js) compatibility.
+To use three-vrm with WebGPURenderer, specify the WebGPU-compatible `MToonNodeMaterial` for the `materialType` option of `MToonMaterialLoaderPlugin`.
 
-```javascript
-import * as THREE from 'three';
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+`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 { VRMLoaderPlugin } from '@pixiv/three-vrm';
+import { MToonNodeMaterial } from '@pixiv/three-vrm/nodes';
 
-const scene = new THREE.Scene();
+// ... Setup renderer, camera, scene ...
 
+// Create a GLTFLoader
 const loader = new GLTFLoader();
 
-// Install GLTFLoader plugin
+// Register a VRMLoaderPlugin
 loader.register((parser) => {
-  return new VRMLoaderPlugin(parser);
-});
 
-loader.load(
-  // URL of the VRM you want to load
-  '/models/VRM1_Constraint_Twist_Sample.vrm',
+  // create a WebGPU compatible MToonMaterialLoaderPlugin
+  const mtoonMaterialPlugin = new MToonMaterialLoaderPlugin(parser, {
+
+    // set the material type to MToonNodeMaterial
+    materialType: MToonNodeMaterial,
+
+  });
 
-  // called when the resource is loaded
-  (gltf) => {
-    // retrieve a VRM instance from gltf
-    const vrm = gltf.userData.vrm;
+  return new VRMLoaderPlugin(parser, {
 
-    // add the loaded vrm to the scene
-    scene.add(vrm.scene);
+    // Specify the MToonMaterialLoaderPlugin to use in the VRMLoaderPlugin instance
+    mtoonMaterialPlugin,
 
-    // deal with vrm features
-    console.log(vrm);
-  },
+  });
 
-  // called while loading is progressing
-  (progress) => console.log('Loading model...', 100.0 * (progress.loaded / progress.total), '%'),
+});
 
-  // called when loading has errors
-  (error) => console.error(error),
-);
+// ... 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/examples/webgpu-dnd.html
+
 ## Contributing
 
 See: [CONTRIBUTING.md](CONTRIBUTING.md)

bin/build.mjs

@@ -0,0 +1,134 @@
+// @ts-check
+import esbuild from 'esbuild';
+import path from 'node:path';
+import fs from 'node:fs/promises';
+
+// == envs =========================================================================================
+const NODE_ENV = process.env.NODE_ENV;
+const DEV = NODE_ENV === 'development';
+const SERVE = process.env.SERVE === '1';
+const PORT = parseInt(process.env.PORT || '10001', 10);
+
+// == build =========================================================================================
+
+const workDir = process.argv[2] ? path.join(process.cwd(), process.argv[2]) : process.cwd();
+await buildPackage(workDir);
+
+// == implement =====================================================================================
+
+/**
+ *
+ * @param {string} absWorkingDir
+ */
+async function buildPackage(absWorkingDir) {
+  /**
+   * @type {{ name: string, version: string, description: string, module: string }}
+   */
+  const packageJson = JSON.parse(await fs.readFile(path.join(absWorkingDir, './package.json'), 'utf-8'));
+
+  // == constants ====================================================================================
+  /** copyright text */
+  const copyright = '(c) 2019-2024 pixiv Inc.';
+
+  /** name of the license */
+  const licenseName = 'MIT License';
+
+  /** url of the license */
+  const licenseUri = 'https://github.com/pixiv/three-vrm/blob/release/LICENSE';
+
+  /** filename of output */
+  const filename = packageJson.name.split('/').at(-1) || 'index';
+
+  // == banner =======================================================================================
+  const bannerTextDev = `/*!
+ * ${packageJson.name} v${packageJson.version}
+ * ${packageJson.description}
+ *
+ * Copyright ${copyright}
+ * ${packageJson.name} is distributed under ${licenseName}
+ * ${licenseUri}
+ */`;
+
+  const bannerTextProd = `/*! ${copyright} - ${licenseUri} */`;
+
+  /**
+   * @param {'esm' | 'cjs'} format
+   */
+  const entryPoints = (format) => {
+    /**
+     * Add suffix according to the format to the given basename of the output file.
+     * @param {string} base Basename of the output file
+     * @returns {string} `<base>[.module][.min]`
+     */
+    const addSuffix = (base) => {
+      let outFilename = base + (format === 'esm' ? '.module' : '');
+      return outFilename + (DEV ? '' : '.min');
+    };
+
+    const needsNodesBuild = ['@pixiv/three-vrm', '@pixiv/three-vrm-materials-mtoon'].includes(packageJson.name);
+    const extraEntryPoints = needsNodesBuild
+      ? { [addSuffix('nodes/index')]: 'src/nodes/index.ts' }
+      : {};
+
+    return {
+      entryPoints: {
+        [addSuffix(filename)]: 'src/index.ts',
+        ...extraEntryPoints,
+      },
+      format,
+    };
+  };
+
+  /**
+   * @type {import('esbuild').BuildOptions}
+   */
+  const buildOptions = {
+    banner: {
+      js: DEV ? bannerTextDev : bannerTextProd,
+    },
+    bundle: true,
+    target: 'es6',
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    loader: { '.frag': 'text', '.vert': 'text' },
+    sourcemap: DEV ? 'inline' : false,
+    absWorkingDir,
+    logLevel: 'info',
+    color: true,
+    minify: !DEV,
+    external: ['three'],
+  };
+
+  // == serve ========================================================================================
+  async function serve() {
+    const esmContext = await esbuild.context({
+      ...buildOptions,
+      ...entryPoints('esm'),
+      outdir: 'lib',
+      absWorkingDir,
+    });
+
+    await esmContext.watch();
+    await esmContext.serve({ servedir: '.', port: PORT });
+  }
+
+  async function build() {
+    await esbuild.build({
+      ...buildOptions,
+      ...entryPoints('esm'),
+      outdir: 'lib',
+    });
+
+    await esbuild.build({
+      ...buildOptions,
+      ...entryPoints('cjs'),
+      outdir: 'lib',
+      outExtension: {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        '.js': '.cjs',
+      },
+    });
+  }
+
+  // == main =========================================================================================
+  await (SERVE ? serve : build)();
+}

jest.config.js

@@ -0,0 +1,6 @@
+// it's required to make vscode-jest work properly...
+export default {
+  transform: {
+    '^.+\\.ts$': 'ts-jest',
+  },
+};

jest.config.mjs

@@ -2,5 +2,5 @@
   "npmClient": "yarn",
   "useWorkspaces": true,
   "packages": ["packages/*"],
-  "version": "2.1.3"
+  "version": "3.0.0-beta.2"
 }