string-tune-3d 0.0.6 → 0.0.8
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/dist/index.cjs +161 -136
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.mts +257 -51
- package/dist/index.d.ts +257 -51
- package/dist/index.js +161 -136
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +161 -136
- package/dist/index.mjs.map +1 -1
- package/package.json +9 -4
- package/readme.md +191 -107
package/dist/index.d.mts
CHANGED
|
@@ -1,5 +1,63 @@
|
|
|
1
1
|
import { StringModule, StringContext, StringObject, StringData } from '@fiddle-digital/string-tune';
|
|
2
2
|
|
|
3
|
+
type UniformType = "float" | "int" | "vec2" | "vec3" | "vec4" | "color" | "texture" | "mat3" | "mat4";
|
|
4
|
+
type UniformDefinition = {
|
|
5
|
+
type: UniformType;
|
|
6
|
+
value: any;
|
|
7
|
+
css?: string;
|
|
8
|
+
};
|
|
9
|
+
type ShaderInjectionPoint = "vertex_pars" | "vertex_header" | "vertex_transform" | "vertex_output" | "fragment_pars" | "fragment_header" | "fragment_color" | "fragment_normal" | "fragment_emissive" | "fragment_output";
|
|
10
|
+
type ShaderInjection = {
|
|
11
|
+
point: ShaderInjectionPoint;
|
|
12
|
+
code: string;
|
|
13
|
+
order?: number;
|
|
14
|
+
};
|
|
15
|
+
type MaterialBlendMode = "normal" | "additive" | "subtractive" | "multiply";
|
|
16
|
+
type MaterialSide = "front" | "back" | "double";
|
|
17
|
+
type String3DCustomMaterialDefinition = {
|
|
18
|
+
name: string;
|
|
19
|
+
extends?: "basic" | "standard" | "physical" | "shader";
|
|
20
|
+
vertexShader?: string;
|
|
21
|
+
fragmentShader?: string;
|
|
22
|
+
injections?: ShaderInjection[];
|
|
23
|
+
uniforms?: Record<string, UniformDefinition>;
|
|
24
|
+
properties?: {
|
|
25
|
+
transparent?: boolean;
|
|
26
|
+
side?: MaterialSide;
|
|
27
|
+
depthWrite?: boolean;
|
|
28
|
+
depthTest?: boolean;
|
|
29
|
+
blending?: MaterialBlendMode;
|
|
30
|
+
wireframe?: boolean;
|
|
31
|
+
};
|
|
32
|
+
lights?: boolean;
|
|
33
|
+
parse?: (element: HTMLElement, style: CSSStyleDeclaration) => Record<string, any>;
|
|
34
|
+
};
|
|
35
|
+
declare class String3DCustomMaterialRegistry {
|
|
36
|
+
private static materials;
|
|
37
|
+
private static registeredCssVars;
|
|
38
|
+
static register(definition: String3DCustomMaterialDefinition): void;
|
|
39
|
+
private static registerCssVarsForMaterial;
|
|
40
|
+
private static resolveCssSyntax;
|
|
41
|
+
private static defaultCssInitialValue;
|
|
42
|
+
static get(name: string): String3DCustomMaterialDefinition | undefined;
|
|
43
|
+
static has(name: string): boolean;
|
|
44
|
+
static list(): String3DCustomMaterialDefinition[];
|
|
45
|
+
static unregister(name: string): boolean;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
type MaterialUpdateCallback = (uniforms: Record<string, any>) => void;
|
|
49
|
+
interface IMaterialInstance {
|
|
50
|
+
material: any;
|
|
51
|
+
definition: String3DCustomMaterialDefinition;
|
|
52
|
+
update: MaterialUpdateCallback;
|
|
53
|
+
dispose: () => void;
|
|
54
|
+
}
|
|
55
|
+
interface IMaterialFactory {
|
|
56
|
+
supports(definition: String3DCustomMaterialDefinition): boolean;
|
|
57
|
+
create(definition: String3DCustomMaterialDefinition, initialUniforms?: Record<string, any>): IMaterialInstance;
|
|
58
|
+
parseUniformsFromCSS(definition: String3DCustomMaterialDefinition, element: HTMLElement, style: CSSStyleDeclaration): Record<string, any>;
|
|
59
|
+
}
|
|
60
|
+
|
|
3
61
|
interface I3DVector3 {
|
|
4
62
|
x: number;
|
|
5
63
|
y: number;
|
|
@@ -81,6 +139,55 @@ interface I3DRenderTarget {
|
|
|
81
139
|
setSize(width: number, height: number): void;
|
|
82
140
|
dispose(): void;
|
|
83
141
|
}
|
|
142
|
+
type ParticleMode = "emitter" | "instanced";
|
|
143
|
+
type ParticleSystemConfig = {
|
|
144
|
+
mode: ParticleMode;
|
|
145
|
+
count: number;
|
|
146
|
+
size: number;
|
|
147
|
+
color: string;
|
|
148
|
+
opacity: number;
|
|
149
|
+
spread: number;
|
|
150
|
+
spreadX: number;
|
|
151
|
+
spreadY: number;
|
|
152
|
+
seed: number;
|
|
153
|
+
emitRate: number;
|
|
154
|
+
emitBurst: number;
|
|
155
|
+
particleLife: number;
|
|
156
|
+
particleSpeed: number;
|
|
157
|
+
particleDirection: [number, number, number];
|
|
158
|
+
particleGravity: [number, number, number];
|
|
159
|
+
particleDrag: number;
|
|
160
|
+
particleSizeVariation: number;
|
|
161
|
+
particleColorVariation: number;
|
|
162
|
+
particleShape: "box" | "sphere" | "model";
|
|
163
|
+
particleModelUrl: string;
|
|
164
|
+
particleModelLoader: string;
|
|
165
|
+
particleModelNode: string;
|
|
166
|
+
instanceShape: "box" | "sphere" | "model";
|
|
167
|
+
instanceModelUrl: string;
|
|
168
|
+
instanceModelLoader: string;
|
|
169
|
+
instanceModelNode: string;
|
|
170
|
+
instanceScale: number;
|
|
171
|
+
instanceScaleVariation: number;
|
|
172
|
+
instanceRotationSpeed: number;
|
|
173
|
+
instanceJitter: number;
|
|
174
|
+
instanceFlow: number;
|
|
175
|
+
instanceDisperse: number;
|
|
176
|
+
instanceDisperseScatter: number;
|
|
177
|
+
instanceDisperseScatterX: number;
|
|
178
|
+
instanceDisperseScatterY: number;
|
|
179
|
+
instanceDisperseScatterZ: number;
|
|
180
|
+
modelTransitionDuration: number;
|
|
181
|
+
};
|
|
182
|
+
interface I3DParticleSystem extends I3DObject {
|
|
183
|
+
update?(dt: number): void;
|
|
184
|
+
setConfig?(config: ParticleSystemConfig): void;
|
|
185
|
+
setMaterial?(material: I3DMaterial | null, options?: {
|
|
186
|
+
points?: boolean;
|
|
187
|
+
meshes?: boolean;
|
|
188
|
+
}): void;
|
|
189
|
+
dispose?(): void;
|
|
190
|
+
}
|
|
84
191
|
interface I3DLight extends I3DObject {
|
|
85
192
|
color: any;
|
|
86
193
|
intensity: number;
|
|
@@ -131,6 +238,25 @@ interface I3DRenderer {
|
|
|
131
238
|
interface I3DTextureLoader {
|
|
132
239
|
load(url: string, onLoad?: (texture: any) => void): any;
|
|
133
240
|
}
|
|
241
|
+
type TextGeometryOptions = {
|
|
242
|
+
size: number;
|
|
243
|
+
height: number;
|
|
244
|
+
curveSegments: number;
|
|
245
|
+
bevelEnabled: boolean;
|
|
246
|
+
bevelThickness: number;
|
|
247
|
+
bevelSize: number;
|
|
248
|
+
bevelOffset: number;
|
|
249
|
+
bevelSegments: number;
|
|
250
|
+
lineHeight: number;
|
|
251
|
+
letterSpacing: number;
|
|
252
|
+
align: "left" | "center" | "right";
|
|
253
|
+
layout?: Array<{
|
|
254
|
+
char: string;
|
|
255
|
+
x: number;
|
|
256
|
+
y: number;
|
|
257
|
+
scale?: number;
|
|
258
|
+
}>;
|
|
259
|
+
};
|
|
134
260
|
interface I3DModelLoader {
|
|
135
261
|
load(url: string, onLoad?: (model: any) => void, onProgress?: (progress: any) => void, onError?: (error: any) => void): void;
|
|
136
262
|
}
|
|
@@ -166,6 +292,11 @@ interface I3DEngine {
|
|
|
166
292
|
createTextureLoader(): I3DTextureLoader;
|
|
167
293
|
createModelLoader(type: string): I3DModelLoader;
|
|
168
294
|
createRenderTarget?(width: number, height: number, options?: any): I3DRenderTarget;
|
|
295
|
+
getMaterialFactory?(): IMaterialFactory | null;
|
|
296
|
+
createParticleSystem?(config: ParticleSystemConfig): I3DParticleSystem;
|
|
297
|
+
loadFont?(url: string): Promise<any>;
|
|
298
|
+
createTextGeometry?(text: string, font: any, options: TextGeometryOptions): I3DGeometry | null;
|
|
299
|
+
simplifyGeometry?(geometry: I3DGeometry, quality: number): I3DGeometry | null;
|
|
169
300
|
degToRad(degrees: number): number;
|
|
170
301
|
radToDeg(radians: number): number;
|
|
171
302
|
computeBoundingBoxRecursively(object: I3DObject): I3DBox3;
|
|
@@ -184,8 +315,8 @@ interface String3DOptions {
|
|
|
184
315
|
modelLoader?: I3DModelLoader;
|
|
185
316
|
modelLoaderFactory?: (engine: I3DEngine, type?: string) => I3DModelLoader;
|
|
186
317
|
useDirtySync?: boolean;
|
|
187
|
-
|
|
188
|
-
|
|
318
|
+
styleReadIntervalMs?: number;
|
|
319
|
+
layoutReadIntervalMs?: number;
|
|
189
320
|
}
|
|
190
321
|
declare class String3D extends StringModule {
|
|
191
322
|
private static provider;
|
|
@@ -198,21 +329,14 @@ declare class String3D extends StringModule {
|
|
|
198
329
|
private isLoading;
|
|
199
330
|
private options;
|
|
200
331
|
private useDirtySync;
|
|
201
|
-
private
|
|
202
|
-
private observedElements;
|
|
203
|
-
private resizeObserver;
|
|
204
|
-
private mutationObserver;
|
|
332
|
+
private dirtySyncManager;
|
|
205
333
|
private lastSyncData;
|
|
206
|
-
private
|
|
207
|
-
private workerHasResult;
|
|
208
|
-
private workerObjectMap;
|
|
209
|
-
private domVersion;
|
|
210
|
-
private lastSubmittedVersion;
|
|
211
|
-
private scrollTicking;
|
|
212
|
-
private onScrollBound;
|
|
213
|
-
private filterStates;
|
|
214
|
-
private filterWarnings;
|
|
334
|
+
private filterController;
|
|
215
335
|
static setProvider(provider: I3DEngineProvider): void;
|
|
336
|
+
static registerFont(name: string, url: string, options?: {
|
|
337
|
+
default?: boolean;
|
|
338
|
+
}): void;
|
|
339
|
+
static setDefaultFont(name: string): void;
|
|
216
340
|
constructor(context: StringContext);
|
|
217
341
|
canConnect(object: StringObject): boolean;
|
|
218
342
|
initializeObject(globalId: number, object: StringObject, element: HTMLElement, attributes: Record<string, any>): void;
|
|
@@ -227,43 +351,10 @@ declare class String3D extends StringModule {
|
|
|
227
351
|
private applyContainerStyles;
|
|
228
352
|
onObjectConnected(object: StringObject): void;
|
|
229
353
|
onFrame(data: StringData): void;
|
|
354
|
+
private batchReadLayouts;
|
|
230
355
|
private syncRecursive;
|
|
231
356
|
private injectCSS;
|
|
232
357
|
private registerTypedProperties;
|
|
233
|
-
private setupObservers;
|
|
234
|
-
private setupScrollListeners;
|
|
235
|
-
private removeScrollListeners;
|
|
236
|
-
private handleScroll;
|
|
237
|
-
private observeElement;
|
|
238
|
-
private observeSceneElements;
|
|
239
|
-
private observeRecursive;
|
|
240
|
-
private markDirty;
|
|
241
|
-
private markAllDirty;
|
|
242
|
-
private readNumberStyle;
|
|
243
|
-
private readFilterRaw;
|
|
244
|
-
private parseFilterChain;
|
|
245
|
-
private warnFilterIssues;
|
|
246
|
-
private readFilterChain;
|
|
247
|
-
private collectFilterTargets;
|
|
248
|
-
private stringifyFilterChain;
|
|
249
|
-
private getFilterTransition;
|
|
250
|
-
private splitTransitionList;
|
|
251
|
-
private findTransitionIndex;
|
|
252
|
-
private parseTime;
|
|
253
|
-
private parseTransitionShorthand;
|
|
254
|
-
private parseEasing;
|
|
255
|
-
private cubicBezier;
|
|
256
|
-
private canInterpolate;
|
|
257
|
-
private makeZeroChain;
|
|
258
|
-
private sampleTransition;
|
|
259
|
-
private getCurrentChain;
|
|
260
|
-
private interpolateChain;
|
|
261
|
-
private interpolateEffect;
|
|
262
|
-
private isNumeric;
|
|
263
|
-
private isZeroChain;
|
|
264
|
-
private buildWorkerCameraData;
|
|
265
|
-
private collectWorkerInputs;
|
|
266
|
-
private applyWorkerResults;
|
|
267
358
|
destroy(): void;
|
|
268
359
|
}
|
|
269
360
|
|
|
@@ -356,6 +447,7 @@ declare class String3DScene {
|
|
|
356
447
|
private _objects;
|
|
357
448
|
private _rootObjects;
|
|
358
449
|
private _elementMap;
|
|
450
|
+
private _materialInstances;
|
|
359
451
|
private engine;
|
|
360
452
|
private _modelLoader?;
|
|
361
453
|
private _modelLoaderFactory?;
|
|
@@ -376,11 +468,17 @@ declare class String3DScene {
|
|
|
376
468
|
private createPlane;
|
|
377
469
|
private createCylinder;
|
|
378
470
|
private createModel;
|
|
471
|
+
private createParticles;
|
|
472
|
+
private createText;
|
|
473
|
+
private getGeometryQuality;
|
|
379
474
|
private resolveModelLoader;
|
|
380
475
|
private centerObject;
|
|
381
476
|
private getBoxCenter;
|
|
382
477
|
private createMaterialFromObject;
|
|
383
478
|
private createMaterialFromElement;
|
|
479
|
+
private tryCreateCustomMaterial;
|
|
480
|
+
updateMaterialUniforms(objectId: string, uniforms: Record<string, any>): void;
|
|
481
|
+
getMaterialInstance(objectId: string): IMaterialInstance | undefined;
|
|
384
482
|
private loadTexture;
|
|
385
483
|
private parseFlipY;
|
|
386
484
|
private shouldOverrideModelMaterial;
|
|
@@ -477,8 +575,17 @@ declare class String3DSynchronizer {
|
|
|
477
575
|
viewportHeight: number;
|
|
478
576
|
engine: I3DEngine;
|
|
479
577
|
private strategies;
|
|
578
|
+
private styleReadIntervalMs;
|
|
579
|
+
private layoutReadIntervalMs;
|
|
480
580
|
constructor(camera: String3DCamera, viewportWidth: number, viewportHeight: number, engine: I3DEngine);
|
|
481
|
-
syncElement(el: HTMLElement, object: String3DObject, parentData: any
|
|
581
|
+
syncElement(el: HTMLElement, object: String3DObject, parentData: any, hints?: {
|
|
582
|
+
dirtySet?: Set<HTMLElement> | null;
|
|
583
|
+
forceSync?: boolean;
|
|
584
|
+
}): any;
|
|
585
|
+
setSyncOptions(options: {
|
|
586
|
+
styleReadIntervalMs?: number;
|
|
587
|
+
layoutReadIntervalMs?: number;
|
|
588
|
+
}): void;
|
|
482
589
|
updateViewportSize(width: number, height: number): void;
|
|
483
590
|
}
|
|
484
591
|
|
|
@@ -496,10 +603,68 @@ declare class String3DCustomFilterRegistry {
|
|
|
496
603
|
static list(): String3DCustomFilterDefinition[];
|
|
497
604
|
}
|
|
498
605
|
|
|
606
|
+
type String3DFontEntry = {
|
|
607
|
+
name: string;
|
|
608
|
+
url: string;
|
|
609
|
+
};
|
|
610
|
+
declare class String3DFontRegistry {
|
|
611
|
+
private static fonts;
|
|
612
|
+
private static defaultFont;
|
|
613
|
+
static register(name: string, url: string): void;
|
|
614
|
+
static setDefault(name: string): void;
|
|
615
|
+
static get(name: string): String3DFontEntry | undefined;
|
|
616
|
+
static list(): String3DFontEntry[];
|
|
617
|
+
static resolveFontFamily(fontFamily: string): String3DFontEntry | null;
|
|
618
|
+
private static getDefault;
|
|
619
|
+
}
|
|
620
|
+
|
|
621
|
+
interface FontData {
|
|
622
|
+
glyphs: Record<string, GlyphData>;
|
|
623
|
+
familyName: string;
|
|
624
|
+
ascender: number;
|
|
625
|
+
descender: number;
|
|
626
|
+
underlinePosition: number;
|
|
627
|
+
underlineThickness: number;
|
|
628
|
+
boundingBox: {
|
|
629
|
+
xMin: number;
|
|
630
|
+
xMax: number;
|
|
631
|
+
yMin: number;
|
|
632
|
+
yMax: number;
|
|
633
|
+
};
|
|
634
|
+
resolution: number;
|
|
635
|
+
original_font_information: Record<string, any>;
|
|
636
|
+
}
|
|
637
|
+
interface GlyphData {
|
|
638
|
+
ha: number;
|
|
639
|
+
x_min: number;
|
|
640
|
+
x_max: number;
|
|
641
|
+
o: string;
|
|
642
|
+
}
|
|
643
|
+
type FontSource = string | ArrayBuffer | Uint8Array;
|
|
644
|
+
declare class FontConverter {
|
|
645
|
+
private static cache;
|
|
646
|
+
private static loadingPromises;
|
|
647
|
+
static load(source: FontSource): Promise<FontData>;
|
|
648
|
+
private static doLoad;
|
|
649
|
+
private static convertToTypeFace;
|
|
650
|
+
private static pathToOutline;
|
|
651
|
+
private static round;
|
|
652
|
+
static isTypefaceJson(url: string): boolean;
|
|
653
|
+
static isFontFile(url: string): boolean;
|
|
654
|
+
static clearCache(): void;
|
|
655
|
+
}
|
|
656
|
+
|
|
499
657
|
declare class ThreeJSEngine implements I3DEngine {
|
|
500
658
|
private THREE;
|
|
501
659
|
private loaders;
|
|
660
|
+
private materialFactory;
|
|
661
|
+
private particleModelCache;
|
|
662
|
+
private particleModelPromiseCache;
|
|
663
|
+
private fontCache;
|
|
664
|
+
private fontPromiseCache;
|
|
665
|
+
private fontMetricsCache;
|
|
502
666
|
constructor(THREE: any, loaders?: Record<string, any>);
|
|
667
|
+
getMaterialFactory(): IMaterialFactory | null;
|
|
503
668
|
createVector3(x?: number, y?: number, z?: number): I3DVector3;
|
|
504
669
|
createVector2(x?: number, y?: number): I3DVector2;
|
|
505
670
|
createQuaternion(x?: number, y?: number, z?: number, w?: number): I3DQuaternion;
|
|
@@ -531,6 +696,23 @@ declare class ThreeJSEngine implements I3DEngine {
|
|
|
531
696
|
createTextureLoader(): I3DTextureLoader;
|
|
532
697
|
createModelLoader(type: string): I3DModelLoader;
|
|
533
698
|
createRenderTarget(width: number, height: number, options?: any): I3DRenderTarget;
|
|
699
|
+
loadFont(url: string): Promise<any>;
|
|
700
|
+
private loadFontWithConverter;
|
|
701
|
+
private loadFontWithLoader;
|
|
702
|
+
private createFontFromData;
|
|
703
|
+
private generateShapesFromFontData;
|
|
704
|
+
private getOutlineXMin;
|
|
705
|
+
private getOutlineXMax;
|
|
706
|
+
private parseOutlineToShapes;
|
|
707
|
+
private reversePath;
|
|
708
|
+
createTextGeometry(text: string, font: any, options: any): I3DGeometry | null;
|
|
709
|
+
private buildLineShapes;
|
|
710
|
+
private getGlyphAdvance;
|
|
711
|
+
private translateShape;
|
|
712
|
+
private scaleShape;
|
|
713
|
+
private resolveParticleModelGeometry;
|
|
714
|
+
createParticleSystem(config: ParticleSystemConfig): I3DParticleSystem;
|
|
715
|
+
simplifyGeometry(geometry: I3DGeometry, quality: number): I3DGeometry | null;
|
|
534
716
|
degToRad(degrees: number): number;
|
|
535
717
|
radToDeg(radians: number): number;
|
|
536
718
|
computeBoundingBoxRecursively(object: I3DObject): I3DBox3;
|
|
@@ -542,4 +724,28 @@ declare class ThreeJSProvider implements I3DEngineProvider {
|
|
|
542
724
|
getName(): string;
|
|
543
725
|
}
|
|
544
726
|
|
|
545
|
-
|
|
727
|
+
declare class ThreeJSMaterialFactory implements IMaterialFactory {
|
|
728
|
+
private THREE;
|
|
729
|
+
private textureLoader;
|
|
730
|
+
private textureCache;
|
|
731
|
+
constructor(THREE: any);
|
|
732
|
+
supports(definition: String3DCustomMaterialDefinition): boolean;
|
|
733
|
+
create(definition: String3DCustomMaterialDefinition, initialUniforms?: Record<string, any>): IMaterialInstance;
|
|
734
|
+
parseUniformsFromCSS(definition: String3DCustomMaterialDefinition, element: HTMLElement, style: CSSStyleDeclaration): Record<string, any>;
|
|
735
|
+
private buildUniforms;
|
|
736
|
+
private convertUniformValue;
|
|
737
|
+
private loadTexture;
|
|
738
|
+
private createShaderMaterial;
|
|
739
|
+
private createExtendedMaterial;
|
|
740
|
+
private injectVertexShader;
|
|
741
|
+
private injectFragmentShader;
|
|
742
|
+
private generateUniformDeclarations;
|
|
743
|
+
private inferGLSLType;
|
|
744
|
+
private applyMaterialProperties;
|
|
745
|
+
private updateUniforms;
|
|
746
|
+
private getDefaultVertexShader;
|
|
747
|
+
private getDefaultFragmentShader;
|
|
748
|
+
dispose(): void;
|
|
749
|
+
}
|
|
750
|
+
|
|
751
|
+
export { type CameraMode, FontConverter, type FontData, type FontSource, type I3DBox3, type I3DCamera, type I3DEngine, type I3DEngineProvider, type I3DEuler, type I3DGeometry, type I3DLight, type I3DMaterial, type I3DMatrix4, type I3DMesh, type I3DModelLoader, type I3DObject, type I3DOrthographicCamera, type I3DParticleSystem, type I3DPerspectiveCamera, type I3DQuaternion, type I3DRenderTarget, type I3DRenderer, type I3DScene, type I3DTextureLoader, type I3DVector2, type I3DVector3, type IMaterialFactory, type IMaterialInstance, type MaterialBlendMode, type MaterialSide, type ParticleMode, type ParticleSystemConfig, type ShaderInjection, type ShaderInjectionPoint, String3D, String3DCamera, type String3DCustomFilterDefinition, String3DCustomFilterRegistry, type String3DCustomMaterialDefinition, String3DCustomMaterialRegistry, type String3DFontEntry, String3DFontRegistry, String3DObject, type String3DOptions, String3DRenderer, String3DScene, String3DSynchronizer, ThreeJSEngine, ThreeJSMaterialFactory, ThreeJSProvider, type UniformDefinition, type UniformType };
|