✨ Add MSDFTextNodeMaterial for WebGPU support

Author: leochocolat

README.md

@@ -11,6 +11,7 @@ Forked from [three-bmfont-text](https://github.com/Jam3/three-bmfont-text).
 -   Replace some deprecated three.js code
 -   Add more geometry attributes : layout uv, letter center positions, letter index, line index, letter index by line, word index, word index by line...
 -   Compatibility check with [Three.js FontLoader](https://github.com/mrdoob/three.js/blob/master/examples/jsm/loaders/FontLoader.js)
+-   WebGPU MSDFTextNodeMaterial
 -   More to come...
 
 ## Demo
@@ -19,7 +20,7 @@ Forked from [three-bmfont-text](https://github.com/Jam3/three-bmfont-text).
 -   [Stroke](https://leochocolat.github.io/three-msdf-text-utils/demo/?demo=stroke)
 -   [Editor](https://leochocolat.github.io/three-msdf-text-utils/demo/?demo=editor)
 -   [Reveal](https://leochocolat.github.io/three-msdf-text-utils/demo/?demo=reveal)
--   More to come...
+-   [WebGPU](https://leochocolat.github.io/three-msdf-text-utils/demo/?demo=webgpu)
 
 ## Bitmap Font and Font Atlas
 
@@ -152,6 +153,28 @@ const material = new MSDFTextMaterial(options);
 material.uniforms.uMap.value = atlas;
 ```
 
+
+### MSDFTextNodeMaterial (WebGPU)
+
+It extends from Three.js WebGPU NodeMaterial
+
+```js
+const material = new MSDFTextNodeMaterial({ map: atlas, color: '#ff0000' });
+
+// Here no uniforms object, you can access materials properties directly.
+materials.strokeOutsetWidth = 0.2;
+materials.strokeInsetWidth = 0.2;
+materials.strokeColor = '#00ff00';
+```
+#### Properties
+
+- `color`: fill color
+- `strokeColor`: stroke color
+- `strokeOutsetWidth`: stroke size outside the glyph
+- `strokeInsetWidth`: stroke size inside the glyph
+- `isSmooth`: Switch render mode from sharp to smooth, useful for tiny fonts –– use only 0 or 1
+- `threshold`: smooth threshold (only used for isSmooth === 1)
+
 #### Initial Properties
 
 ```js
@@ -363,10 +386,3 @@ npm install
 ```bash
 npm run dev
 ```
-
-## Roadmap
-
--   More examples
--   More docs for custom shader material
--   Manage versions
--   NPM Publish workflow

demo/build/bundle-demo.js

@@ -2,5 +2,5 @@ import scenes from './scenes';
 
 const urlParams = new URLSearchParams(location.search);
 const demoName = urlParams.get('demo');
-const scene = scenes[demoName] ? new scenes[demoName]() : new scenes.basic();
+const scene = scenes[demoName.toLowerCase()] ? new scenes[demoName.toLowerCase()]() : new scenes.basic();
 scene.start();

demo/index.js

@@ -66,6 +66,7 @@ export default class Basic {
             mesh.rotation.x = Math.PI;
             const scale = 3;
             mesh.position.x = -geometry.layout.width / 2 * scale;
+            mesh.position.y = -geometry.layout.height / 2 * scale;
             mesh.scale.set(scale, scale, scale);
             this.scene.add(mesh);
 

demo/scenes/Basic/index.js

@@ -0,0 +1,9 @@
+export default {
+    name: 'WebGPU',
+
+    text: 'WebGPU',
+
+    settings: {
+        color: '#ffffff',
+    },
+};

demo/scenes/WebGPU/config.js

@@ -0,0 +1,125 @@
+// THREE WEBGPU
+import { WebGPURenderer } from 'three/webgpu';
+
+// THREE
+import { Scene, PerspectiveCamera, TextureLoader, Mesh, DoubleSide, Color } from 'three';
+import { FontLoader } from 'three/examples/jsm/loaders/FontLoader.js';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+
+// Vendor
+import { Pane } from 'tweakpane';
+
+// Lib
+import { MSDFTextGeometry, MSDFTextNodeMaterial } from '../../../src/index';
+
+// Config
+import config from './config';
+
+export default class WebGPU {
+    constructor() {
+        this.canvas = document.querySelector('.js-canvas');
+        this.renderer = null;
+        this.scene = null;
+        this.camera = null;
+        this.controls = null;
+        this.debugger = new Pane({ title: `${config.name} Example` });
+    }
+
+    start() {
+        this.setupEventListeners();
+        this.setup();
+        this.setupText();
+        this.update();
+    }
+
+    setup() {
+        this.camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000);
+        this.camera.position.z = 1000;
+
+        this.scene = new Scene();
+        this.scene.background = new Color('black');
+
+        this.renderer = new WebGPURenderer({ antialias: true, canvas: this.canvas });
+        this.renderer.setPixelRatio(Math.min(2, window.devicePixelRatio));
+        this.renderer.setSize(window.innerWidth, window.innerHeight);
+
+        this.controls = new OrbitControls(this.camera, this.renderer.domElement);
+        this.controls.target.set(0, 0, 0);
+        this.controls.update();
+    }
+
+    setupText() {
+        const promises = [
+            this.loadFontAtlas('./fonts/roboto/roboto-regular.png'),
+            this.loadFont('./fonts/roboto/roboto-regular.fnt'),
+        ];
+
+        Promise.all(promises).then(([atlas, font]) => {
+            const geometry = new MSDFTextGeometry({
+                text: config.text,
+                font: font.data,
+                width: 1000,
+                align: 'center',
+            });
+
+            const material = new MSDFTextNodeMaterial({ map: atlas });
+            material.side = DoubleSide;
+
+            const mesh = new Mesh(geometry, material);
+            mesh.rotation.x = Math.PI;
+            const scale = 3;
+            mesh.position.x = -geometry.layout.width / 2 * scale;
+            mesh.scale.set(scale, scale, scale);
+            this.scene.add(mesh);
+
+            // Debug
+            const debugFolderCommon = this.debugger.addFolder({ title: 'Common' });
+            debugFolderCommon.addInput(material.opacity, 'value', { label: 'Opacity', min: 0, max: 1 });
+            debugFolderCommon.addInput(config.settings, 'color', { label: 'Color' }).on('change', () => { material.color.value.set(config.settings.color); });
+
+            const debugFolderRendering = this.debugger.addFolder({ title: 'Rendering' });
+            debugFolderRendering.addInput(material.isSmooth, 'value', { label: 'Is Smooth', options: [{ text: 'False', value: 0 }, { text: 'True', value: 1 }] });
+            debugFolderRendering.addInput(material, 'alphaTest', { label: 'Alpha test', min: 0, max: 1 });
+            debugFolderRendering.addInput(material.threshold, 'value', { label: 'Threshold (isSmooth)', min: 0, max: 1 });
+        });
+    }
+
+    loadFontAtlas(path) {
+        const promise = new Promise((resolve, reject) => {
+            const loader = new TextureLoader();
+            loader.load(path, resolve);
+        });
+
+        return promise;
+    }
+
+    loadFont(path) {
+        const promise = new Promise((resolve, reject) => {
+            const loader = new FontLoader();
+            loader.load(path, resolve);
+        });
+
+        return promise;
+    }
+
+    render() {
+        this.renderer.renderAsync(this.scene, this.camera);
+    }
+
+    update() {
+        this.render();
+
+        requestAnimationFrame(this.update.bind(this));
+    }
+
+    setupEventListeners() {
+        window.addEventListener('resize', this.resizeHandler.bind(this));
+    }
+
+    resizeHandler() {
+        this.camera.aspect = window.innerWidth / window.innerHeight;
+        this.camera.updateProjectionMatrix();
+        this.renderer.setPixelRatio(Math.min(2, window.devicePixelRatio));
+        this.renderer.setSize(window.innerWidth, window.innerHeight);
+    }
+}

demo/scenes/WebGPU/index.js

@@ -2,10 +2,12 @@ import Basic from './Basic';
 import Editor from './Editor';
 import Stroke from './Stroke';
 import Reveal from './Reveal';
+import WebGPU from './WebGPU';
 
 export default {
     basic: Basic,
     stroke: Stroke,
     editor: Editor,
     reveal: Reveal,
+    webgpu: WebGPU,
 };