Skip to content

Commit 287e95c

Browse files
authored
📝 Update README.md
1 parent 0b3f845 commit 287e95c

File tree

1 file changed

+22
-23
lines changed

1 file changed

+22
-23
lines changed

README.md

Lines changed: 22 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -152,29 +152,6 @@ You can use it just by setting the atlas texture from your font :
152152
const material = new MSDFTextMaterial(options);
153153
material.uniforms.uMap.value = atlas;
154154
```
155-
156-
157-
### MSDFTextNodeMaterial (WebGPU)
158-
159-
It extends from Three.js WebGPU NodeMaterial
160-
161-
```js
162-
const material = new MSDFTextNodeMaterial({ map: atlas, color: '#ff0000' });
163-
164-
// Here no uniforms object, you can access materials properties directly.
165-
materials.strokeOutsetWidth = 0.2;
166-
materials.strokeInsetWidth = 0.2;
167-
materials.strokeColor = '#00ff00';
168-
```
169-
#### Properties
170-
171-
- `color`: fill color
172-
- `strokeColor`: stroke color
173-
- `strokeOutsetWidth`: stroke size outside the glyph
174-
- `strokeInsetWidth`: stroke size inside the glyph
175-
- `isSmooth`: Switch render mode from sharp to smooth, useful for tiny fonts –– use only 0 or 1
176-
- `threshold`: smooth threshold (only used for isSmooth === 1)
177-
178155
#### Initial Properties
179156

180157
```js
@@ -363,6 +340,28 @@ const material = new THREE.ShaderMaterial({
363340
});
364341
material.uniforms.uMap.value = atlas;
365342
```
343+
344+
### MSDFTextNodeMaterial (WebGPU)
345+
346+
It extends from Three.js WebGPU NodeMaterial
347+
348+
```js
349+
const material = new MSDFTextNodeMaterial({ map: atlas, color: '#ff0000' });
350+
351+
// Here no uniforms object, you can access materials properties directly.
352+
materials.strokeOutsetWidth = 0.2;
353+
materials.strokeInsetWidth = 0.2;
354+
materials.strokeColor = '#00ff00';
355+
```
356+
#### Properties
357+
358+
- `color`: fill color
359+
- `strokeColor`: stroke color
360+
- `strokeOutsetWidth`: stroke size outside the glyph
361+
- `strokeInsetWidth`: stroke size inside the glyph
362+
- `isSmooth`: Switch render mode from sharp to smooth, useful for tiny fonts –– use only 0 or 1
363+
- `threshold`: smooth threshold (only used for isSmooth === 1)
364+
366365
## Troubleshooting
367366

368367
If after trying a basic implementation of msdf text rendering you can't see anything :

0 commit comments

Comments
 (0)