loomlarge 0.2.0 → 0.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +126 -20
- package/dist/index.cjs +357 -34
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +114 -30
- package/dist/index.d.ts +114 -30
- package/dist/index.js +358 -36
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -10,16 +10,17 @@ LoomLarge provides pre-built mappings that connect [Facial Action Coding System
|
|
|
10
10
|
|
|
11
11
|
1. [Installation & Setup](#1-installation--setup)
|
|
12
12
|
2. [Using Presets](#2-using-presets)
|
|
13
|
-
3. [
|
|
14
|
-
4. [
|
|
15
|
-
5. [
|
|
16
|
-
6. [
|
|
17
|
-
7. [
|
|
18
|
-
8. [
|
|
19
|
-
9. [
|
|
20
|
-
10. [
|
|
21
|
-
11. [
|
|
22
|
-
12. [
|
|
13
|
+
3. [Getting to Know Your Character](#3-getting-to-know-your-character)
|
|
14
|
+
4. [Extending & Custom Presets](#4-extending--custom-presets)
|
|
15
|
+
5. [Action Unit Control](#5-action-unit-control)
|
|
16
|
+
6. [Mix Weight System](#6-mix-weight-system)
|
|
17
|
+
7. [Composite Rotation System](#7-composite-rotation-system)
|
|
18
|
+
8. [Continuum Pairs](#8-continuum-pairs)
|
|
19
|
+
9. [Direct Morph Control](#9-direct-morph-control)
|
|
20
|
+
10. [Viseme System](#10-viseme-system)
|
|
21
|
+
11. [Transition System](#11-transition-system)
|
|
22
|
+
12. [Playback & State Control](#12-playback--state-control)
|
|
23
|
+
13. [Hair Physics](#13-hair-physics)
|
|
23
24
|
|
|
24
25
|
---
|
|
25
26
|
|
|
@@ -198,7 +199,112 @@ const loom = new LoomLargeThree({ auMappings: CC4_PRESET });
|
|
|
198
199
|
|
|
199
200
|
---
|
|
200
201
|
|
|
201
|
-
## 3.
|
|
202
|
+
## 3. Getting to Know Your Character
|
|
203
|
+
|
|
204
|
+
Before customizing presets or extending mappings, it's helpful to understand what's actually in your character model. LoomLarge provides several methods to inspect meshes, morph targets, and bones.
|
|
205
|
+
|
|
206
|
+
### Listing meshes
|
|
207
|
+
|
|
208
|
+
Get all meshes in your character with their visibility and morph target counts:
|
|
209
|
+
|
|
210
|
+
```typescript
|
|
211
|
+
const meshes = loom.getMeshList();
|
|
212
|
+
console.log(meshes);
|
|
213
|
+
// [
|
|
214
|
+
// { name: 'CC_Base_Body', visible: true, morphCount: 142 },
|
|
215
|
+
// { name: 'CC_Base_Tongue', visible: true, morphCount: 12 },
|
|
216
|
+
// { name: 'CC_Base_EyeOcclusion_L', visible: true, morphCount: 8 },
|
|
217
|
+
// { name: 'CC_Base_EyeOcclusion_R', visible: true, morphCount: 8 },
|
|
218
|
+
// { name: 'Male_Bushy_1', visible: true, morphCount: 142 },
|
|
219
|
+
// ...
|
|
220
|
+
// ]
|
|
221
|
+
```
|
|
222
|
+
|
|
223
|
+
### Listing morph targets
|
|
224
|
+
|
|
225
|
+
Get all morph target names grouped by mesh:
|
|
226
|
+
|
|
227
|
+
```typescript
|
|
228
|
+
const morphs = loom.getMorphTargets();
|
|
229
|
+
console.log(morphs);
|
|
230
|
+
// {
|
|
231
|
+
// 'CC_Base_Body': [
|
|
232
|
+
// 'A01_Brow_Inner_Up', 'A02_Brow_Down_Left', 'A02_Brow_Down_Right',
|
|
233
|
+
// 'A04_Brow_Outer_Up_Left', 'A04_Brow_Outer_Up_Right',
|
|
234
|
+
// 'Mouth_Smile_L', 'Mouth_Smile_R', 'Eye_Blink_L', 'Eye_Blink_R',
|
|
235
|
+
// ...
|
|
236
|
+
// ],
|
|
237
|
+
// 'CC_Base_Tongue': [
|
|
238
|
+
// 'V_Tongue_Out', 'V_Tongue_Up', 'V_Tongue_Down', ...
|
|
239
|
+
// ],
|
|
240
|
+
// ...
|
|
241
|
+
// }
|
|
242
|
+
```
|
|
243
|
+
|
|
244
|
+
This is invaluable when creating custom presets—you need to know the exact morph target names your character uses.
|
|
245
|
+
|
|
246
|
+
### Listing bones
|
|
247
|
+
|
|
248
|
+
Get all resolved bones with their current positions and rotations (in degrees):
|
|
249
|
+
|
|
250
|
+
```typescript
|
|
251
|
+
const bones = loom.getBones();
|
|
252
|
+
console.log(bones);
|
|
253
|
+
// {
|
|
254
|
+
// 'HEAD': { position: [0, 156.2, 0], rotation: [0, 0, 0] },
|
|
255
|
+
// 'JAW': { position: [0, 154.1, 2.3], rotation: [0, 0, 0] },
|
|
256
|
+
// 'EYE_L': { position: [-3.2, 160.5, 8.1], rotation: [0, 0, 0] },
|
|
257
|
+
// 'EYE_R': { position: [3.2, 160.5, 8.1], rotation: [0, 0, 0] },
|
|
258
|
+
// 'TONGUE': { position: [0, 152.3, 1.8], rotation: [0, 0, 0] },
|
|
259
|
+
// }
|
|
260
|
+
```
|
|
261
|
+
|
|
262
|
+
### Controlling mesh visibility
|
|
263
|
+
|
|
264
|
+
Hide or show individual meshes:
|
|
265
|
+
|
|
266
|
+
```typescript
|
|
267
|
+
// Hide hair mesh
|
|
268
|
+
loom.setMeshVisible('Side_part_wavy_1', false);
|
|
269
|
+
|
|
270
|
+
// Show it again
|
|
271
|
+
loom.setMeshVisible('Side_part_wavy_1', true);
|
|
272
|
+
```
|
|
273
|
+
|
|
274
|
+
### Adjusting material properties
|
|
275
|
+
|
|
276
|
+
Fine-tune render order, transparency, and blending for each mesh:
|
|
277
|
+
|
|
278
|
+
```typescript
|
|
279
|
+
// Get current material config
|
|
280
|
+
const config = loom.getMeshMaterialConfig('CC_Base_Body');
|
|
281
|
+
console.log(config);
|
|
282
|
+
// {
|
|
283
|
+
// renderOrder: 0,
|
|
284
|
+
// transparent: false,
|
|
285
|
+
// opacity: 1,
|
|
286
|
+
// depthWrite: true,
|
|
287
|
+
// depthTest: true,
|
|
288
|
+
// blending: 'Normal'
|
|
289
|
+
// }
|
|
290
|
+
|
|
291
|
+
// Set custom material config
|
|
292
|
+
loom.setMeshMaterialConfig('CC_Base_EyeOcclusion_L', {
|
|
293
|
+
renderOrder: 10,
|
|
294
|
+
transparent: true,
|
|
295
|
+
opacity: 0.8,
|
|
296
|
+
blending: 'Normal' // 'Normal', 'Additive', 'Subtractive', 'Multiply', 'None'
|
|
297
|
+
});
|
|
298
|
+
```
|
|
299
|
+
|
|
300
|
+
This is especially useful for:
|
|
301
|
+
- Fixing render order issues (eyebrows behind hair, etc.)
|
|
302
|
+
- Making meshes semi-transparent for debugging
|
|
303
|
+
- Adjusting blending modes for special effects
|
|
304
|
+
|
|
305
|
+
---
|
|
306
|
+
|
|
307
|
+
## 4. Extending & Custom Presets
|
|
202
308
|
|
|
203
309
|
### Extending an existing preset
|
|
204
310
|
|
|
@@ -275,7 +381,7 @@ const current = loom.getAUMappings();
|
|
|
275
381
|
|
|
276
382
|
---
|
|
277
383
|
|
|
278
|
-
##
|
|
384
|
+
## 5. Action Unit Control
|
|
279
385
|
|
|
280
386
|
Action Units are the core of FACS. Each AU represents a specific muscular movement of the face.
|
|
281
387
|
|
|
@@ -349,7 +455,7 @@ loom.setAU(12, 0.8, 1); // Right side only
|
|
|
349
455
|
|
|
350
456
|
---
|
|
351
457
|
|
|
352
|
-
##
|
|
458
|
+
## 6. Mix Weight System
|
|
353
459
|
|
|
354
460
|
Some AUs can be driven by both morph targets (blend shapes) AND bone rotations. The mix weight controls the blend between them.
|
|
355
461
|
|
|
@@ -394,7 +500,7 @@ if (isMixedAU(26)) {
|
|
|
394
500
|
|
|
395
501
|
---
|
|
396
502
|
|
|
397
|
-
##
|
|
503
|
+
## 7. Composite Rotation System
|
|
398
504
|
|
|
399
505
|
Bones like the head and eyes need multi-axis rotation (pitch, yaw, roll). The composite rotation system handles this automatically.
|
|
400
506
|
|
|
@@ -452,7 +558,7 @@ loom.setAU(64, 0.4);
|
|
|
452
558
|
|
|
453
559
|
---
|
|
454
560
|
|
|
455
|
-
##
|
|
561
|
+
## 8. Continuum Pairs
|
|
456
562
|
|
|
457
563
|
Continuum pairs are bidirectional AU pairs that represent opposite directions on the same axis. They're linked so that activating one should deactivate the other.
|
|
458
564
|
|
|
@@ -498,7 +604,7 @@ const pair = CONTINUUM_PAIRS_MAP[51];
|
|
|
498
604
|
|
|
499
605
|
---
|
|
500
606
|
|
|
501
|
-
##
|
|
607
|
+
## 9. Direct Morph Control
|
|
502
608
|
|
|
503
609
|
Sometimes you need to control morph targets directly by name, bypassing the AU system.
|
|
504
610
|
|
|
@@ -537,7 +643,7 @@ LoomLarge caches morph target lookups for performance. The first time you access
|
|
|
537
643
|
|
|
538
644
|
---
|
|
539
645
|
|
|
540
|
-
##
|
|
646
|
+
## 10. Viseme System
|
|
541
647
|
|
|
542
648
|
Visemes are mouth shapes used for lip-sync. LoomLarge includes 15 visemes with automatic jaw coupling.
|
|
543
649
|
|
|
@@ -622,7 +728,7 @@ speak([5, 0, 10, 4]);
|
|
|
622
728
|
|
|
623
729
|
---
|
|
624
730
|
|
|
625
|
-
##
|
|
731
|
+
## 11. Transition System
|
|
626
732
|
|
|
627
733
|
All animated changes in LoomLarge go through the transition system, which provides smooth interpolation with easing.
|
|
628
734
|
|
|
@@ -702,7 +808,7 @@ loom.clearTransitions();
|
|
|
702
808
|
|
|
703
809
|
---
|
|
704
810
|
|
|
705
|
-
##
|
|
811
|
+
## 12. Playback & State Control
|
|
706
812
|
|
|
707
813
|
### Pausing and resuming
|
|
708
814
|
|
|
@@ -757,7 +863,7 @@ loom.dispose();
|
|
|
757
863
|
|
|
758
864
|
---
|
|
759
865
|
|
|
760
|
-
##
|
|
866
|
+
## 13. Hair Physics
|
|
761
867
|
|
|
762
868
|
LoomLarge includes an experimental hair physics system that simulates hair movement based on head motion.
|
|
763
869
|
|