trid3d 0.2.0 → 0.3.1
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 +38 -18
- package/package.json +1 -1
- package/trid/export/mtl.js +119 -0
- package/trid/export/obj.js +107 -21
- package/trid/index.d.ts +419 -8
- package/trid/index.js +19 -3
- package/trid/loaders/mtl.js +63 -0
- package/trid/loaders/obj.js +58 -6
- package/trid/loaders/texture.js +47 -6
- package/trid/math/matrix.js +200 -0
- package/trid/math/noise.js +162 -0
- package/trid/math/rotation.js +152 -0
- package/trid/render/canvasRenderer.js +40 -23
- package/trid/render/draw.js +6 -2
- package/trid/render/meshUtils.js +257 -0
- package/trid/render/proceduralTextures.js +211 -0
- package/trid/render/shapes.js +95 -27
- package/trid/render/webglRenderer.js +98 -27
- package/trid/scene.js +20 -9
- package/trid/sceneGraph.js +131 -0
- package/trid/tools/dragObject.js +33 -9
- package/trid/tools/helpers.js +109 -10
- package/trid/tools/hoverHighlight.js +4 -2
- package/trid/tools/index.js +3 -1
- package/trid/tools/orbitCamera.js +9 -0
- package/trid/tools/transformGizmo.js +316 -0
- package/trid/tools/viewGizmo.js +178 -0
package/trid/index.d.ts
CHANGED
|
@@ -91,6 +91,8 @@ export type TextureSource = CanvasImageSource;
|
|
|
91
91
|
|
|
92
92
|
/** How an object's faces look. Objects without one are drawn as wireframes. */
|
|
93
93
|
export interface Material {
|
|
94
|
+
/** A name: `exportOBJ` / `exportMTL` write it as the material's name (`usemtl` / `newmtl`) */
|
|
95
|
+
name?: string;
|
|
94
96
|
/** Face color, any CSS color (default: the scene's color, or white with a texture) */
|
|
95
97
|
fill?: string;
|
|
96
98
|
/** Darken faces that turn away from the light (default true) */
|
|
@@ -106,6 +108,11 @@ export interface Material {
|
|
|
106
108
|
smooth?: boolean | number;
|
|
107
109
|
/** Image drawn on the faces (needs texture coordinates). `fill` tints it. */
|
|
108
110
|
texture?: TextureSource;
|
|
111
|
+
/**
|
|
112
|
+
* Read the texture again every frame (default: only videos). For a canvas redrawn every
|
|
113
|
+
* frame; for one redrawn now and then, call `updateTexture(canvas)` instead.
|
|
114
|
+
*/
|
|
115
|
+
liveTexture?: boolean;
|
|
109
116
|
/** Keep texture pixels sharp instead of smoothing them (default false) */
|
|
110
117
|
pixelated?: boolean;
|
|
111
118
|
/** Effects applied in order, like `[toon(), rim()]` */
|
|
@@ -129,12 +136,22 @@ export type MappingType = "uv" | "planar" | "box" | "sphere" | "cylinder";
|
|
|
129
136
|
*/
|
|
130
137
|
export type Mapping = MappingType | { type: MappingType; axis?: "x" | "y" | "z" };
|
|
131
138
|
|
|
132
|
-
/**
|
|
139
|
+
/**
|
|
140
|
+
* What you pass to `scene.add`. Missing transform fields get defaults.
|
|
141
|
+
* Give it `children` to make a group (and leave out `mesh` for a group that only holds them).
|
|
142
|
+
*/
|
|
133
143
|
export interface SceneObjectInput {
|
|
134
|
-
|
|
144
|
+
/** What's drawn. Leave it out for a group that only holds `children` */
|
|
145
|
+
mesh?: Mesh;
|
|
135
146
|
pos?: Vec3;
|
|
136
147
|
rot?: Vec3;
|
|
137
148
|
scale?: Vec3;
|
|
149
|
+
/** Objects placed relative to this one: they move, turn and scale with it. Read every frame */
|
|
150
|
+
children?: SceneObjectInput[];
|
|
151
|
+
/** Set to false to hide this object and everything under it (default true) */
|
|
152
|
+
visible?: boolean;
|
|
153
|
+
/** A name, used by `exportOBJ` and handy for finding objects */
|
|
154
|
+
name?: string;
|
|
138
155
|
/** Wireframe color (default: the scene's color) */
|
|
139
156
|
color?: string;
|
|
140
157
|
/** Wireframe width (default: the scene's lineWidth) */
|
|
@@ -151,7 +168,12 @@ export interface SceneObjectInput {
|
|
|
151
168
|
* An object in a scene, after `scene.add` filled in its transform.
|
|
152
169
|
* Extra fields you add (like `{ mesh, name: "box" }`) are kept in the type.
|
|
153
170
|
*/
|
|
154
|
-
export type SceneObject<T extends SceneObjectInput = SceneObjectInput> = T & Transform
|
|
171
|
+
export type SceneObject<T extends SceneObjectInput = SceneObjectInput> = T & Transform & {
|
|
172
|
+
/** The group it's a child of, or null at the top. Kept up to date by the scene (not enumerable) */
|
|
173
|
+
parent: SceneObject | null;
|
|
174
|
+
/** World matrix from the last frame: parents' transforms × its own (not enumerable). See `worldMatrix` */
|
|
175
|
+
world: Mat4;
|
|
176
|
+
};
|
|
155
177
|
|
|
156
178
|
// ---------------------------------------------------------------------------
|
|
157
179
|
// Scene
|
|
@@ -298,7 +320,16 @@ export interface Point2 {
|
|
|
298
320
|
* Turns a flat outline in the XY plane into a solid `depth` thick along Z
|
|
299
321
|
* (default 0.2), centered on the origin. Either direction, concave is fine, no holes.
|
|
300
322
|
*/
|
|
301
|
-
export
|
|
323
|
+
export interface ExtrudeOptions {
|
|
324
|
+
/** How much the edges between sides and front / back are cut, up to half the depth (default 0) */
|
|
325
|
+
bevel?: number;
|
|
326
|
+
/** Steps around a bevel: 1 = flat chamfer, more = rounded (default 1) */
|
|
327
|
+
bevelSegments?: number;
|
|
328
|
+
/** Size of the back compared to the front, around the outline's middle (default 1) */
|
|
329
|
+
taper?: number;
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
export function extrude(outline: Point2[], depth?: number, opts?: ExtrudeOptions): Mesh;
|
|
302
333
|
|
|
303
334
|
/** Cuts a counter-clockwise polygon into counter-clockwise triangles (ear clipping). */
|
|
304
335
|
export function triangulate(pts: Point2[]): number[][];
|
|
@@ -306,6 +337,53 @@ export function triangulate(pts: Point2[]): number[][];
|
|
|
306
337
|
/** Scales a mesh's vertices in place. Returns the same mesh. */
|
|
307
338
|
export function scaleMesh<M extends { vertices: Vec3[] }>(mesh: M, sx?: number, sy?: number, sz?: number): M;
|
|
308
339
|
|
|
340
|
+
/** A transform to bake into a mesh; parts left out change nothing. A scene object fits. */
|
|
341
|
+
export interface MeshTransform {
|
|
342
|
+
pos?: Partial<Vec3>;
|
|
343
|
+
rot?: Partial<Vec3>;
|
|
344
|
+
scale?: Partial<Vec3>;
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
/** Deep copy of a mesh (vertices, edges, faces, UVs, normals, materials). */
|
|
348
|
+
export function cloneMesh<M extends Mesh>(mesh: M): M;
|
|
349
|
+
|
|
350
|
+
/**
|
|
351
|
+
* Bakes a transform into a mesh's vertices, in place (scale, rotate X→Y→Z, move).
|
|
352
|
+
* Normals turn with it; a mirroring scale reverses the faces. Returns the same mesh.
|
|
353
|
+
*/
|
|
354
|
+
export function transformMesh<M extends Mesh>(mesh: M, transform: MeshTransform): M;
|
|
355
|
+
|
|
356
|
+
/**
|
|
357
|
+
* Moves every vertex to `fn(vertex, index)`, in place. Removes the mesh's own normals
|
|
358
|
+
* (they no longer fit), so the renderers compute new ones. Returns the same mesh.
|
|
359
|
+
*/
|
|
360
|
+
export function displaceMesh<M extends Mesh>(mesh: M, fn: (v: Vec3, index: number) => Vec3): M;
|
|
361
|
+
|
|
362
|
+
export interface MergeOptions {
|
|
363
|
+
/** Faces of the i-th mesh use material i (default false: keep each mesh's faceMaterials) */
|
|
364
|
+
materialPerMesh?: boolean;
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
/**
|
|
368
|
+
* Joins meshes into a new one, keeping faces, edges, UVs, normals and materials.
|
|
369
|
+
* Scene objects in the list are merged where they stand (transform baked in).
|
|
370
|
+
*/
|
|
371
|
+
export function mergeMeshes(items: (Mesh | SceneObjectInput)[], opts?: MergeOptions): Mesh;
|
|
372
|
+
|
|
373
|
+
/** A box around some geometry. */
|
|
374
|
+
export interface Bounds {
|
|
375
|
+
min: Vec3;
|
|
376
|
+
max: Vec3;
|
|
377
|
+
center: Vec3;
|
|
378
|
+
size: Vec3;
|
|
379
|
+
}
|
|
380
|
+
|
|
381
|
+
/**
|
|
382
|
+
* The box around a mesh, a scene object, a list of them or a Scene (objects measured
|
|
383
|
+
* where they stand). Null when there are no vertices.
|
|
384
|
+
*/
|
|
385
|
+
export function meshBounds(input: Mesh | SceneObjectInput | (Mesh | SceneObjectInput)[] | Scene): Bounds | null;
|
|
386
|
+
|
|
309
387
|
// ---------------------------------------------------------------------------
|
|
310
388
|
// Renderers
|
|
311
389
|
// ---------------------------------------------------------------------------
|
|
@@ -338,6 +416,8 @@ export class CanvasRenderer implements Renderer {
|
|
|
338
416
|
export interface WebGLRendererOptions {
|
|
339
417
|
/** Smooth edges (default true) */
|
|
340
418
|
antialias?: boolean;
|
|
419
|
+
/** Free meshes and textures not drawn for this many frames (default 300, about 5 s). Infinity: never */
|
|
420
|
+
releaseAfter?: number;
|
|
341
421
|
}
|
|
342
422
|
|
|
343
423
|
/** Draws a scene with WebGL and a depth buffer. */
|
|
@@ -349,7 +429,13 @@ export class WebGLRenderer implements Renderer {
|
|
|
349
429
|
/** The hidden canvas WebGL draws on. */
|
|
350
430
|
canvas: HTMLCanvasElement;
|
|
351
431
|
gl: WebGLRenderingContext | WebGL2RenderingContext;
|
|
432
|
+
/** Frames a mesh or texture can go undrawn before it's freed (Infinity: never). */
|
|
433
|
+
releaseAfter: number;
|
|
434
|
+
/** What's on the graphics card right now. */
|
|
435
|
+
readonly memory: { meshes: number; buffers: number; textures: number };
|
|
352
436
|
render(scene: Scene): void;
|
|
437
|
+
/** Frees a mesh's buffers or a texture now; it's sent again if drawn again. */
|
|
438
|
+
release(item: Mesh | TextureSource): void;
|
|
353
439
|
/** Frees the graphics card memory. The renderer can't be used afterwards. */
|
|
354
440
|
dispose(): void;
|
|
355
441
|
}
|
|
@@ -535,15 +621,36 @@ export function newell(pts: Vec3[]): Vec3;
|
|
|
535
621
|
/** A mesh loaded from an OBJ file. Always has faces. */
|
|
536
622
|
export interface ObjMesh extends Mesh {
|
|
537
623
|
faces: number[][];
|
|
538
|
-
/** Material names from `usemtl` lines,
|
|
624
|
+
/** Material names from `usemtl` lines, in the order they first appear */
|
|
539
625
|
materialNames?: string[];
|
|
626
|
+
/** The .mtl file the OBJ names (`mtllib`) */
|
|
627
|
+
mtllib?: string;
|
|
628
|
+
/** With `loadOBJ(url, { materials: true })`: one material per `materialNames` entry, from the .mtl file */
|
|
629
|
+
materials?: Material[];
|
|
540
630
|
}
|
|
541
631
|
|
|
542
632
|
export interface ObjOptions {
|
|
543
633
|
/** Center the model and scale it so its largest side is this long */
|
|
544
634
|
fit?: number;
|
|
635
|
+
/** `loadOBJ` only: also load the .mtl file and its textures into `mesh.materials` (default false) */
|
|
636
|
+
materials?: boolean;
|
|
545
637
|
}
|
|
546
638
|
|
|
639
|
+
/** A material from an MTL file. */
|
|
640
|
+
export interface MtlMaterial {
|
|
641
|
+
name: string;
|
|
642
|
+
/** "#rrggbb" from `Kd`, or "rgba(...)" when see-through */
|
|
643
|
+
fill?: string;
|
|
644
|
+
/** From `d` / `Tr`, 0 to 1 */
|
|
645
|
+
opacity?: number;
|
|
646
|
+
/** The texture's file name (`map_Kd`), relative to the .mtl file */
|
|
647
|
+
textureFile?: string;
|
|
648
|
+
}
|
|
649
|
+
/** Parses the text of an MTL file: materials by name. */
|
|
650
|
+
export function parseMTL(text: string): Record<string, MtlMaterial>;
|
|
651
|
+
/** The materials of a parsed OBJ from its .mtl file (one per `materialNames` entry), textures loaded. */
|
|
652
|
+
export function loadMaterials(mesh: ObjMesh, base: URL | string): Promise<Material[]>;
|
|
653
|
+
|
|
547
654
|
/** Parses the text of an OBJ file. */
|
|
548
655
|
export function parseOBJ(text: string, opts?: ObjOptions): ObjMesh;
|
|
549
656
|
/** Downloads an OBJ file and parses it. */
|
|
@@ -561,8 +668,15 @@ export function loadTexture(url: string): Promise<HTMLImageElement>;
|
|
|
561
668
|
export function textureReady(src: TextureSource | null | undefined): boolean;
|
|
562
669
|
/** Pixel size of a texture source. */
|
|
563
670
|
export function textureSize(src: TextureSource): { w: number; h: number };
|
|
564
|
-
/** Whether a
|
|
565
|
-
export function textureIsLive(src: TextureSource): boolean;
|
|
671
|
+
/** Whether a texture is read again every frame: videos, or any source whose material has `liveTexture: true`. */
|
|
672
|
+
export function textureIsLive(src: TextureSource, material?: { liveTexture?: boolean }): boolean;
|
|
673
|
+
/**
|
|
674
|
+
* Tells the renderers a texture changed (call it after drawing on a canvas used as a texture):
|
|
675
|
+
* it's read again once, on the next frame. Canvases are otherwise read only once.
|
|
676
|
+
*/
|
|
677
|
+
export function updateTexture(src: TextureSource): void;
|
|
678
|
+
/** How many times `updateTexture` was called for a source (0 when never). */
|
|
679
|
+
export function textureVersion(src: TextureSource): number;
|
|
566
680
|
|
|
567
681
|
// ---------------------------------------------------------------------------
|
|
568
682
|
// Exporting
|
|
@@ -582,8 +696,37 @@ export interface ExportOBJOptions {
|
|
|
582
696
|
precision?: number;
|
|
583
697
|
/** Comment at the top of the file; "" for none (default "Exported by Trid") */
|
|
584
698
|
header?: string;
|
|
699
|
+
/** Link this .mtl file and name every material (the names `exportMTL` writes) */
|
|
700
|
+
mtllib?: string;
|
|
585
701
|
}
|
|
586
702
|
|
|
703
|
+
/** A material description for `exportMTL`. */
|
|
704
|
+
export interface MtlDescription {
|
|
705
|
+
name: string;
|
|
706
|
+
fill?: string;
|
|
707
|
+
opacity?: number;
|
|
708
|
+
/** Texture file name */
|
|
709
|
+
texture?: string;
|
|
710
|
+
}
|
|
711
|
+
|
|
712
|
+
/** The materials an export names, with each texture's file name. */
|
|
713
|
+
export function objMaterials(
|
|
714
|
+
input: OBJExportable | OBJExportable[] | Scene,
|
|
715
|
+
opts?: { textureFile?: (name: string, texture: TextureSource) => string },
|
|
716
|
+
): { name: string; material: Material | null; texture: TextureSource | null; file: string | null }[];
|
|
717
|
+
/** Writes an MTL file: for what `exportOBJ` takes (same names), or for plain descriptions. */
|
|
718
|
+
export function exportMTL(
|
|
719
|
+
input: OBJExportable | OBJExportable[] | Scene | MtlDescription[],
|
|
720
|
+
opts?: { textureFile?: (name: string, texture: TextureSource) => string; header?: string },
|
|
721
|
+
): string;
|
|
722
|
+
/** A texture image as a PNG (or other) file. */
|
|
723
|
+
export function textureToBlob(src: TextureSource, type?: string): Promise<Blob>;
|
|
724
|
+
/** Every file of a model: name.obj, name.mtl and one PNG per texture. */
|
|
725
|
+
export function exportModel(
|
|
726
|
+
input: OBJExportable | OBJExportable[] | Scene,
|
|
727
|
+
opts?: { name?: string; obj?: ExportOBJOptions },
|
|
728
|
+
): Promise<{ name: string; data: string | Blob }[]>;
|
|
729
|
+
|
|
587
730
|
/** Something exportOBJ can write: a mesh, or an object placed in a scene. */
|
|
588
731
|
export type OBJExportable = Mesh | (SceneObjectInput & Partial<Transform> & { name?: string });
|
|
589
732
|
|
|
@@ -754,6 +897,8 @@ export class OrbitCamera implements Tool {
|
|
|
754
897
|
blockContextMenu: boolean;
|
|
755
898
|
/** Places the camera from the target, distance, yaw and pitch. */
|
|
756
899
|
apply(camera: Camera): void;
|
|
900
|
+
/** Restarts the auto-rotate wait, as if the user had just dragged (for tools that turn the camera). */
|
|
901
|
+
holdAutoRotate(): void;
|
|
757
902
|
attach(scene: Scene): void;
|
|
758
903
|
pointerDown(e: ToolPointerEvent): boolean;
|
|
759
904
|
pointerMove(e: ToolPointerEvent, scene: Scene): void;
|
|
@@ -792,6 +937,10 @@ export interface DragObjectOptions {
|
|
|
792
937
|
button?: number;
|
|
793
938
|
/** Which objects can be dragged (default: those without `draggable: false`) */
|
|
794
939
|
filter?: (obj: SceneObject) => boolean;
|
|
940
|
+
/** Pick by triangles instead of bounding boxes (default false, see `pickHit`) */
|
|
941
|
+
exact?: boolean;
|
|
942
|
+
/** Drag the top-level object (the whole group) of what was clicked (default false) */
|
|
943
|
+
root?: boolean;
|
|
795
944
|
/** Called when an object is picked */
|
|
796
945
|
onPick?: (obj: SceneObject) => void;
|
|
797
946
|
/** Called each time the object moves */
|
|
@@ -805,6 +954,8 @@ export class DragObject implements Tool {
|
|
|
805
954
|
constructor(opts?: DragObjectOptions);
|
|
806
955
|
button: number;
|
|
807
956
|
filter: (obj: SceneObject) => boolean;
|
|
957
|
+
exact: boolean;
|
|
958
|
+
root: boolean;
|
|
808
959
|
onPick?: (obj: SceneObject) => void;
|
|
809
960
|
onMove?: (obj: SceneObject) => void;
|
|
810
961
|
onDrop?: (obj: SceneObject) => void;
|
|
@@ -821,6 +972,8 @@ export interface HoverHighlightOptions {
|
|
|
821
972
|
color?: string;
|
|
822
973
|
/** Which objects can be highlighted (default: those without `hoverable: false`) */
|
|
823
974
|
filter?: (obj: SceneObject) => boolean;
|
|
975
|
+
/** Pick by triangles instead of bounding boxes (default false, see `pickHit`) */
|
|
976
|
+
exact?: boolean;
|
|
824
977
|
/** Called when the hovered object changes */
|
|
825
978
|
onChange?: (obj: SceneObject | null) => void;
|
|
826
979
|
}
|
|
@@ -830,6 +983,7 @@ export class HoverHighlight implements Tool {
|
|
|
830
983
|
constructor(opts?: HoverHighlightOptions);
|
|
831
984
|
color: string;
|
|
832
985
|
filter: (obj: SceneObject) => boolean;
|
|
986
|
+
exact: boolean;
|
|
833
987
|
onChange?: (obj: SceneObject | null) => void;
|
|
834
988
|
/** The object under the pointer, or null. */
|
|
835
989
|
hovered: SceneObject | null;
|
|
@@ -897,6 +1051,97 @@ export class ObjUploader implements Tool {
|
|
|
897
1051
|
draw(ctx: CanvasRenderingContext2D, scene: Scene): void;
|
|
898
1052
|
}
|
|
899
1053
|
|
|
1054
|
+
export interface ViewGizmoOptions {
|
|
1055
|
+
/** Camera controls to turn (default: the scene's first OrbitCamera). Without one, it only shows the axes */
|
|
1056
|
+
orbit?: OrbitCamera;
|
|
1057
|
+
/** Where it sits (default "top-right") */
|
|
1058
|
+
corner?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
|
|
1059
|
+
/** Radius in CSS pixels (default 42) */
|
|
1060
|
+
size?: number;
|
|
1061
|
+
/** Distance from the canvas corner in CSS pixels (default 14) */
|
|
1062
|
+
margin?: number | { x: number; y: number };
|
|
1063
|
+
/** Seconds the camera takes to turn to a clicked axis (default 0.35) */
|
|
1064
|
+
duration?: number;
|
|
1065
|
+
}
|
|
1066
|
+
|
|
1067
|
+
/**
|
|
1068
|
+
* The X, Y, Z axes in a corner, turning with the camera; click one to look along it.
|
|
1069
|
+
* Add it after the OrbitCamera.
|
|
1070
|
+
*/
|
|
1071
|
+
export class ViewGizmo implements Tool {
|
|
1072
|
+
constructor(opts?: ViewGizmoOptions);
|
|
1073
|
+
orbit: OrbitCamera | null;
|
|
1074
|
+
corner: "top-right" | "top-left" | "bottom-right" | "bottom-left";
|
|
1075
|
+
size: number;
|
|
1076
|
+
margin: { x: number; y: number };
|
|
1077
|
+
duration: number;
|
|
1078
|
+
/** Hide or show the gizmo without removing the tool. */
|
|
1079
|
+
visible: boolean;
|
|
1080
|
+
/** Whether a canvas pixel is on the gizmo (as last drawn). */
|
|
1081
|
+
contains(x: number, y: number): boolean;
|
|
1082
|
+
/** Turns the camera smoothly to look at its target from `dir` ({ x: 0, y: 1, z: 0 }: from above). */
|
|
1083
|
+
lookAlong(dir: Vec3): void;
|
|
1084
|
+
attach(scene: Scene): void;
|
|
1085
|
+
detach(): void;
|
|
1086
|
+
pointerDown(e: ToolPointerEvent): boolean;
|
|
1087
|
+
update(dt: number, scene: Scene): void;
|
|
1088
|
+
draw(ctx: CanvasRenderingContext2D, scene: Scene): void;
|
|
1089
|
+
}
|
|
1090
|
+
|
|
1091
|
+
export type TransformMode = "move" | "rotate" | "scale";
|
|
1092
|
+
|
|
1093
|
+
/** A move, rotate or scale in world space, as `TransformGizmo` reports it. */
|
|
1094
|
+
export type TransformOp =
|
|
1095
|
+
| { mode: "move"; delta: Vec3 }
|
|
1096
|
+
/** A right-handed turn of `angle` radians around the unit `axis`, about `center` */
|
|
1097
|
+
| { mode: "rotate"; axis: Vec3; angle: number; center: Vec3 }
|
|
1098
|
+
/** `factor` about `center`: uniform when `axis` is null, otherwise along that unit axis */
|
|
1099
|
+
| { mode: "scale"; axis: Vec3 | null; factor: number; center: Vec3 };
|
|
1100
|
+
|
|
1101
|
+
export interface TransformGizmoOptions {
|
|
1102
|
+
/** Default "move" */
|
|
1103
|
+
mode?: TransformMode;
|
|
1104
|
+
/** Objects it edits (default none) */
|
|
1105
|
+
targets?: SceneObject[];
|
|
1106
|
+
/** Handle length in CSS pixels (default 70) */
|
|
1107
|
+
size?: number;
|
|
1108
|
+
/** Change the targets' transforms while dragging (default true) */
|
|
1109
|
+
apply?: boolean;
|
|
1110
|
+
/** A handle was grabbed */
|
|
1111
|
+
onGrab?: (targets: SceneObject[]) => void;
|
|
1112
|
+
/** While dragging: the operation since the grab */
|
|
1113
|
+
onChange?: (op: TransformOp, targets: SceneObject[]) => void;
|
|
1114
|
+
/** On release: the whole operation */
|
|
1115
|
+
onDrop?: (op: TransformOp, targets: SceneObject[]) => void;
|
|
1116
|
+
}
|
|
1117
|
+
|
|
1118
|
+
/**
|
|
1119
|
+
* Move arrows, rotate rings or scale handles on one or more objects, around their
|
|
1120
|
+
* shared center. Add it after the camera tool.
|
|
1121
|
+
*/
|
|
1122
|
+
export class TransformGizmo implements Tool {
|
|
1123
|
+
constructor(opts?: TransformGizmoOptions);
|
|
1124
|
+
mode: TransformMode;
|
|
1125
|
+
targets: SceneObject[];
|
|
1126
|
+
size: number;
|
|
1127
|
+
apply: boolean;
|
|
1128
|
+
onGrab?: (targets: SceneObject[]) => void;
|
|
1129
|
+
onChange?: (op: TransformOp, targets: SceneObject[]) => void;
|
|
1130
|
+
onDrop?: (op: TransformOp, targets: SceneObject[]) => void;
|
|
1131
|
+
/** Hide the handles (and ignore clicks) without removing the tool. */
|
|
1132
|
+
visible: boolean;
|
|
1133
|
+
/** True while a handle is being dragged. */
|
|
1134
|
+
readonly dragging: boolean;
|
|
1135
|
+
/** Middle of the targets' bounding box in world space, or null. */
|
|
1136
|
+
center(): Vec3 | null;
|
|
1137
|
+
draw(ctx: CanvasRenderingContext2D, scene: Scene): void;
|
|
1138
|
+
pointerDown(e: ToolPointerEvent, scene: Scene): boolean;
|
|
1139
|
+
pointerMove(e: ToolPointerEvent, scene: Scene): void;
|
|
1140
|
+
pointerUp(): void;
|
|
1141
|
+
pointerLeave(scene: Scene): void;
|
|
1142
|
+
detach(scene: Scene): void;
|
|
1143
|
+
}
|
|
1144
|
+
|
|
900
1145
|
export interface ScreenBox {
|
|
901
1146
|
minX: number;
|
|
902
1147
|
minY: number;
|
|
@@ -909,9 +1154,31 @@ export function pick(
|
|
|
909
1154
|
scene: Scene,
|
|
910
1155
|
x: number,
|
|
911
1156
|
y: number,
|
|
912
|
-
opts?: { filter?: (obj: SceneObject) => boolean; padding?: number },
|
|
1157
|
+
opts?: { filter?: (obj: SceneObject) => boolean; padding?: number; exact?: boolean },
|
|
913
1158
|
): SceneObject | null;
|
|
914
1159
|
|
|
1160
|
+
/** What `pickHit` found. */
|
|
1161
|
+
export interface PickHit {
|
|
1162
|
+
object: SceneObject;
|
|
1163
|
+
/** Index in `mesh.faces`, or -1 for a line of a wireframe */
|
|
1164
|
+
face: number;
|
|
1165
|
+
/** Distance in front of the camera */
|
|
1166
|
+
depth: number;
|
|
1167
|
+
/** The object, then its groups up to the top: `[part, group, ..., root]` */
|
|
1168
|
+
path: SceneObject[];
|
|
1169
|
+
}
|
|
1170
|
+
|
|
1171
|
+
/**
|
|
1172
|
+
* Exact picking: the nearest object whose triangles (or, without faces, lines
|
|
1173
|
+
* within `padding` pixels) are under a canvas pixel.
|
|
1174
|
+
*/
|
|
1175
|
+
export function pickHit(
|
|
1176
|
+
scene: Scene,
|
|
1177
|
+
x: number,
|
|
1178
|
+
y: number,
|
|
1179
|
+
opts?: { filter?: (obj: SceneObject) => boolean; padding?: number; objects?: SceneObject[] },
|
|
1180
|
+
): PickHit | null;
|
|
1181
|
+
|
|
915
1182
|
/** Screen-space bounding box of an object, or null if it's all behind the camera. */
|
|
916
1183
|
export function screenBounds(scene: Scene, obj: SceneObject): ScreenBox | null;
|
|
917
1184
|
|
|
@@ -945,6 +1212,8 @@ export function drawInstance(
|
|
|
945
1212
|
h: number,
|
|
946
1213
|
color: string,
|
|
947
1214
|
lineWidth?: number,
|
|
1215
|
+
/** World matrix to place it with (e.g. `obj.world` inside a group); default: its own transform */
|
|
1216
|
+
world?: Mat4,
|
|
948
1217
|
): void;
|
|
949
1218
|
/** Turns edge definitions into pairs of vertex indices. */
|
|
950
1219
|
export function edgeSegments(edges?: number[][]): Generator<[number, number]>;
|
|
@@ -986,3 +1255,145 @@ export function rotateXYZ(p: Vec3, rot: Vec3): Vec3;
|
|
|
986
1255
|
export function project(p: Vec3, fov?: number, aspect?: number): Vec2;
|
|
987
1256
|
/** Normalized coordinates to canvas pixels. */
|
|
988
1257
|
export function screen(p: Vec2, w: number, h: number): Vec2;
|
|
1258
|
+
|
|
1259
|
+
// ---------------------------------------------------------------------------
|
|
1260
|
+
// Rotations
|
|
1261
|
+
// ---------------------------------------------------------------------------
|
|
1262
|
+
|
|
1263
|
+
/** 3×3 matrix, row-major (m[row][col]), applied as M · v. */
|
|
1264
|
+
export type Mat3 = [[number, number, number], [number, number, number], [number, number, number]];
|
|
1265
|
+
|
|
1266
|
+
/** The matrix `rotateXYZ(p, rot)` applies. */
|
|
1267
|
+
export function matFromEuler(rot: Vec3): Mat3;
|
|
1268
|
+
/** Angles for `rotateXYZ` (an object's `rot`) from a rotation matrix; the inverse of `matFromEuler`. */
|
|
1269
|
+
export function eulerFromMat(m: Mat3): Vec3;
|
|
1270
|
+
/** A right-handed turn of `angle` radians around a unit `axis`. */
|
|
1271
|
+
export function matFromAxisAngle(axis: Vec3, angle: number): Mat3;
|
|
1272
|
+
/** Matrix product a · b (b is applied first). */
|
|
1273
|
+
export function mulMat(a: Mat3, b: Mat3): Mat3;
|
|
1274
|
+
/** m · v */
|
|
1275
|
+
export function mulVec(m: Mat3, v: Vec3): Vec3;
|
|
1276
|
+
/** Applies a world-space move / rotate / scale to a transform and returns the new one. */
|
|
1277
|
+
export function applyTransformOp(t: Transform, op: TransformOp): Transform;
|
|
1278
|
+
|
|
1279
|
+
// ---------------------------------------------------------------------------
|
|
1280
|
+
// Procedural textures
|
|
1281
|
+
// ---------------------------------------------------------------------------
|
|
1282
|
+
|
|
1283
|
+
export type TextureStyle = "noise" | "marble" | "wood" | "bricks" | "checker" | "bark" | "spots" | "stripes" | "solid";
|
|
1284
|
+
/** The built-in styles of `makeTexture`. */
|
|
1285
|
+
export const TEXTURE_STYLES: TextureStyle[];
|
|
1286
|
+
|
|
1287
|
+
export interface MakeTextureOptions {
|
|
1288
|
+
/** Width and height in pixels (default 256) */
|
|
1289
|
+
size?: number;
|
|
1290
|
+
/** [first, second]: hex, rgb() / rgba(), CSS names or [r, g, b, a?] (default: suits the style) */
|
|
1291
|
+
colors?: (string | number[])[];
|
|
1292
|
+
/** How many times the pattern repeats across, a whole number (default 4) */
|
|
1293
|
+
scale?: number;
|
|
1294
|
+
/** Another whole number gives another texture of the same style (default 0) */
|
|
1295
|
+
seed?: number;
|
|
1296
|
+
/** Fine speckles on top, 0 to 1 (default 0) */
|
|
1297
|
+
grain?: number;
|
|
1298
|
+
/** Paint into this canvas instead of a new one (calls `updateTexture` for you) */
|
|
1299
|
+
canvas?: HTMLCanvasElement | OffscreenCanvas;
|
|
1300
|
+
}
|
|
1301
|
+
|
|
1302
|
+
/**
|
|
1303
|
+
* Paints a seamless procedural texture on a canvas. `style` is a built-in style, or
|
|
1304
|
+
* `(u, v) => t` (0: first color, 1: second).
|
|
1305
|
+
*/
|
|
1306
|
+
export function makeTexture(
|
|
1307
|
+
style?: TextureStyle | ((u: number, v: number) => number),
|
|
1308
|
+
opts?: MakeTextureOptions,
|
|
1309
|
+
): HTMLCanvasElement | OffscreenCanvas;
|
|
1310
|
+
/** The pixels of a procedural texture (RGBA, top row first), without a canvas. */
|
|
1311
|
+
export function texturePixels(
|
|
1312
|
+
style?: TextureStyle | ((u: number, v: number) => number),
|
|
1313
|
+
opts?: Omit<MakeTextureOptions, "canvas">,
|
|
1314
|
+
): { width: number; height: number; data: Uint8ClampedArray };
|
|
1315
|
+
/** [r, g, b, a] (0..255, a 0..1) from a color string or array. */
|
|
1316
|
+
export function colorBytes(color: string | number[]): [number, number, number, number];
|
|
1317
|
+
|
|
1318
|
+
// ---------------------------------------------------------------------------
|
|
1319
|
+
// Groups (scene graph)
|
|
1320
|
+
// ---------------------------------------------------------------------------
|
|
1321
|
+
|
|
1322
|
+
/**
|
|
1323
|
+
* Every visible object of a scene (or of objects and their subtrees), parents first,
|
|
1324
|
+
* with `parent` and `world` set. Groups without a mesh are included.
|
|
1325
|
+
*/
|
|
1326
|
+
export function worldObjects(input: Scene | SceneObjectInput | SceneObjectInput[]): SceneObject[];
|
|
1327
|
+
/** An object's world matrix right now, from its transform and its parents'. */
|
|
1328
|
+
export function worldMatrix(obj: SceneObjectInput): Mat4;
|
|
1329
|
+
/** Where an object's origin is in the world right now. */
|
|
1330
|
+
export function worldPosition(obj: SceneObjectInput): Vec3;
|
|
1331
|
+
/** The chain from an object up to the top: `[obj, parent, ..., root]`. */
|
|
1332
|
+
export function ancestors(obj: SceneObject): SceneObject[];
|
|
1333
|
+
/**
|
|
1334
|
+
* Calls `fn(obj, world, parent)` for every visible object under some roots, parents first,
|
|
1335
|
+
* without changing anything. `baseOf(root)` is the matrix a root goes under (null: none).
|
|
1336
|
+
*/
|
|
1337
|
+
export function forEachPlaced(
|
|
1338
|
+
roots: SceneObjectInput[],
|
|
1339
|
+
baseOf: (root: SceneObjectInput) => Mat4 | null,
|
|
1340
|
+
fn: (obj: SceneObjectInput, world: Mat4, parent: SceneObjectInput | null) => void,
|
|
1341
|
+
): void;
|
|
1342
|
+
|
|
1343
|
+
// ---------------------------------------------------------------------------
|
|
1344
|
+
// Matrices
|
|
1345
|
+
// ---------------------------------------------------------------------------
|
|
1346
|
+
|
|
1347
|
+
/** 4×4 transform matrix, 16 numbers in column-major order (`m[col * 4 + row]`), like WebGL. */
|
|
1348
|
+
export type Mat4 = number[];
|
|
1349
|
+
|
|
1350
|
+
/** The identity matrix. */
|
|
1351
|
+
export function identityMat4(): Mat4;
|
|
1352
|
+
/** The matrix of a transform: scale, rotate X → Y → Z, then move. */
|
|
1353
|
+
export function mat4FromTransform(t: MeshTransform): Mat4;
|
|
1354
|
+
/** a · b (b applied first): a child's world matrix is `mulMat4(parentWorld, childLocal)`. */
|
|
1355
|
+
export function mulMat4(a: Mat4, b: Mat4): Mat4;
|
|
1356
|
+
/** Inverse of a transform matrix (identity if it flattens space). */
|
|
1357
|
+
export function invertMat4(m: Mat4): Mat4;
|
|
1358
|
+
/** Determinant of the 3×3 part: < 0 when the matrix mirrors. */
|
|
1359
|
+
export function determinantMat4(m: Mat4): number;
|
|
1360
|
+
/** A point through a matrix. */
|
|
1361
|
+
export function transformPoint(m: Mat4, p: Vec3): Vec3;
|
|
1362
|
+
/** A direction or offset through a matrix (not moved). */
|
|
1363
|
+
export function transformDirection(m: Mat4, v: Vec3): Vec3;
|
|
1364
|
+
/** The 3×3 normal matrix (inverse transpose), column-major. */
|
|
1365
|
+
export function normalMatrix(m: Mat4): number[];
|
|
1366
|
+
/** A normal through a normal matrix, unit length. */
|
|
1367
|
+
export function transformNormal(nm: number[], n: Vec3): Vec3;
|
|
1368
|
+
/** A world-space `TransformOp` in a parent's space, for objects inside groups. */
|
|
1369
|
+
export function transformOpToLocal(op: TransformOp, parentWorld: Mat4): TransformOp;
|
|
1370
|
+
|
|
1371
|
+
// ---------------------------------------------------------------------------
|
|
1372
|
+
// Random numbers and noise
|
|
1373
|
+
// ---------------------------------------------------------------------------
|
|
1374
|
+
|
|
1375
|
+
/** A seeded random generator (mulberry32): each call returns the next number in [0, 1). */
|
|
1376
|
+
export function rng(seed?: number): () => number;
|
|
1377
|
+
|
|
1378
|
+
export interface NoiseOptions {
|
|
1379
|
+
/** Whole number; another seed gives other noise (default 0) */
|
|
1380
|
+
seed?: number;
|
|
1381
|
+
/** Repeat every this many units, a whole number, for seamless textures (default 0: never) */
|
|
1382
|
+
period?: number;
|
|
1383
|
+
}
|
|
1384
|
+
|
|
1385
|
+
export interface FbmOptions extends NoiseOptions {
|
|
1386
|
+
/** Layers of detail (default 5) */
|
|
1387
|
+
octaves?: number;
|
|
1388
|
+
/** Strength of each layer compared to the one before (default 0.5) */
|
|
1389
|
+
gain?: number;
|
|
1390
|
+
}
|
|
1391
|
+
|
|
1392
|
+
/** Smooth 2D value noise in [0, 1). */
|
|
1393
|
+
export function noise2(x: number, y: number, opts?: NoiseOptions): number;
|
|
1394
|
+
/** Smooth 3D value noise in [0, 1). */
|
|
1395
|
+
export function noise3(x: number, y: number, z: number, opts?: NoiseOptions): number;
|
|
1396
|
+
/** Fractal 2D noise: octaves of noise2, each twice as fine. About [0, 1), averaging 0.5. */
|
|
1397
|
+
export function fbm2(x: number, y: number, opts?: FbmOptions): number;
|
|
1398
|
+
/** Fractal 3D noise: octaves of noise3, each twice as fine. About [0, 1), averaging 0.5. */
|
|
1399
|
+
export function fbm3(x: number, y: number, z: number, opts?: FbmOptions): number;
|
package/trid/index.js
CHANGED
|
@@ -11,9 +11,11 @@
|
|
|
11
11
|
|
|
12
12
|
// Scene
|
|
13
13
|
export { Scene } from "./scene.js";
|
|
14
|
+
export { worldObjects, worldMatrix, worldPosition, ancestors, forEachPlaced } from "./sceneGraph.js";
|
|
14
15
|
|
|
15
16
|
// Shapes and meshes
|
|
16
17
|
export { makeShape, scaleMesh, lathe, extrude, triangulate } from "./render/shapes.js";
|
|
18
|
+
export { cloneMesh, transformMesh, displaceMesh, mergeMeshes, meshBounds } from "./render/meshUtils.js";
|
|
17
19
|
|
|
18
20
|
// Renderers
|
|
19
21
|
export { CanvasRenderer, DEFAULT_LIGHT, DEFAULT_AMBIENT, materialsOf } from "./render/canvasRenderer.js";
|
|
@@ -25,6 +27,9 @@ export {
|
|
|
25
27
|
buildEffects, effectsKey, uniformType, SURFACE_GLSL,
|
|
26
28
|
} from "./render/effects.js";
|
|
27
29
|
|
|
30
|
+
// Procedural textures
|
|
31
|
+
export { makeTexture, texturePixels, colorBytes, TEXTURE_STYLES } from "./render/proceduralTextures.js";
|
|
32
|
+
|
|
28
33
|
// Texture mapping
|
|
29
34
|
export { computeUVs, mapUVs, uvsFor, uvTransform, applyUVTransform, mappingOf, mappingKey, MAPPINGS } from "./render/uvMapping.js";
|
|
30
35
|
|
|
@@ -32,17 +37,20 @@ export { computeUVs, mapUVs, uvsFor, uvTransform, applyUVTransform, mappingOf, m
|
|
|
32
37
|
export { cornerNormals, creaseOf, newell, DEFAULT_CREASE } from "./render/normals.js";
|
|
33
38
|
|
|
34
39
|
// Loading files
|
|
35
|
-
export { parseOBJ, loadOBJ, readOBJFile, pickOBJFile, fitMesh } from "./loaders/obj.js";
|
|
36
|
-
export {
|
|
40
|
+
export { parseOBJ, loadOBJ, loadMaterials, readOBJFile, pickOBJFile, fitMesh } from "./loaders/obj.js";
|
|
41
|
+
export { parseMTL } from "./loaders/mtl.js";
|
|
42
|
+
export { loadTexture, textureReady, textureSize, textureIsLive, updateTexture, textureVersion } from "./loaders/texture.js";
|
|
37
43
|
|
|
38
44
|
// Exporting
|
|
39
45
|
export { exportOBJ } from "./export/obj.js";
|
|
46
|
+
export { exportMTL, objMaterials, exportModel, textureToBlob } from "./export/mtl.js";
|
|
40
47
|
export { screenshot, record, download } from "./export/capture.js";
|
|
41
48
|
|
|
42
49
|
// Tools
|
|
43
50
|
export {
|
|
44
51
|
OrbitCamera, FlyCamera, DragObject, HoverHighlight, FpsMeter, ObjUploader,
|
|
45
|
-
|
|
52
|
+
ViewGizmo, TransformGizmo,
|
|
53
|
+
ToolManager, pick, pickHit, screenBounds, worldPerPixel,
|
|
46
54
|
} from "./tools/index.js";
|
|
47
55
|
|
|
48
56
|
// Drawing and the frame loop
|
|
@@ -58,3 +66,11 @@ export {
|
|
|
58
66
|
DEFAULT_FOV, DEFAULT_NEAR,
|
|
59
67
|
} from "./math/transform.js";
|
|
60
68
|
export { project, screen } from "./math/projection.js";
|
|
69
|
+
export { matFromEuler, eulerFromMat, matFromAxisAngle, mulMat, mulVec, applyTransformOp } from "./math/rotation.js";
|
|
70
|
+
export {
|
|
71
|
+
identityMat4, mat4FromTransform, mulMat4, invertMat4, determinantMat4,
|
|
72
|
+
transformPoint, transformDirection, normalMatrix, transformNormal, transformOpToLocal,
|
|
73
|
+
} from "./math/matrix.js";
|
|
74
|
+
|
|
75
|
+
// Random numbers and noise
|
|
76
|
+
export { rng, noise2, noise3, fbm2, fbm3 } from "./math/noise.js";
|