phoria2 1.2.0 → 1.3.0

package/dist/types/particles/Emitter.d.ts

@@ -61,6 +61,28 @@ export type EmitterOptions = NodeOptions & SpawnOptions & {
     frustumCulled?: boolean;
     renderOrder?: number;
     onParticle?: ((p: Particle) => boolean | void) | null;
+    sort?: boolean;
+} & LookOptions;
+export type LookOptions = {
+    /**
+     * a multiple of the material's size, or several each particle goes
+     * through over its life - [0.5, 3] for smoke that billows out (default 1)
+     */
+    size?: number | number[];
+    /**
+     * each particle's size varies by up to this share either way, 0-1 (default 0)
+     */
+    sizeSpread?: number;
+    /**
+     * 0-1, or several each particle goes through - [0, 1, 0] fades in
+     * and out (default 1)
+     */
+    opacity?: number | number[];
+    /**
+     * radians per second: a number turns each particle up to that
+     * fast either way, [min, max] a range. Spinning particles start at a random angle (default 0)
+     */
+    spin?: number | [number, number];
 };
 /**
  * Particles drawn as points. Add it to a scene and it runs itself.
@@ -102,11 +124,11 @@ export declare class Emitter extends Points {
     /**
      * Change several settings at once - a preset, say. Vectors are copied into the emitter's own,
      * so anything bound to `emitter.gravity` and friends stays bound. Live particles carry on.
-     * @param {SpawnOptions & { rate?: number, gravity?: Vec3Input, drag?: number, follow?: Node | null,
+     * @param {SpawnOptions & LookOptions & { rate?: number, gravity?: Vec3Input, drag?: number, follow?: Node | null,
      *   onParticle?: ((p: Particle) => boolean | void) | null }} options
      * @returns {this}
      */
-    set(options: SpawnOptions & {
+    set(options: SpawnOptions & LookOptions & {
         rate?: number;
         gravity?: Vec3Input;
         drag?: number;
@@ -121,6 +143,21 @@ export declare class Emitter extends Points {
     set color(v: ColorInput | ColorInput[]);
     /** @returns {[number, number, number][]} */
     get color(): [number, number, number][];
+    /** Each particle's size over its life, as multiples of the material's. @param {number | number[]} v */
+    set size(v: number | number[]);
+    /** @returns {number[]} */
+    get size(): number[];
+    /** How much each particle's size varies, 0-1 either way. @param {number} v */
+    set sizeSpread(v: number);
+    get sizeSpread(): number;
+    /** Each particle's opacity over its life. @param {number | number[]} v */
+    set opacity(v: number | number[]);
+    /** @returns {number[]} */
+    get opacity(): number[];
+    /** How fast particles turn, radians per second, as a [min, max] range. @param {number | [number, number]} v */
+    set spin(v: number | [number, number]);
+    /** @returns {[number, number]} */
+    get spin(): [number, number];
     /**
      * Birth `count` particles at once - explosions, splashes. Options override the emitter's own
      * spawn settings for this burst only.

package/dist/types/scene/drawables.d.ts

@@ -238,19 +238,40 @@ export declare class Points extends Drawable {
     static get OPTIONS(): string[];
     /** A label per point from its row of data - or a list of them, several per point. @type {ReturnType<typeof instanceLabels>} */
     labels: ReturnType<typeof instanceLabels>;
-    /** @param {DrawableOptions & { labels?: InstanceLabels | InstanceLabels[] | null }} options */
+    /**
+     * Draw the points back to front, furthest first, each frame - for soft points that cover what is
+     * behind them (smoke, with blending 'normal'), which then layer the right way round. Drawn as squares.
+     */
+    sort: boolean;
+    /** @param {DrawableOptions & { labels?: InstanceLabels | InstanceLabels[] | null, sort?: boolean }} options */
     constructor(options: DrawableOptions & {
         labels?: InstanceLabels | InstanceLabels[] | null;
+        sort?: boolean;
     });
     /** @returns {'points'} */
     get drawMode(): 'points';
 }
+export type LinesOptions = DrawableOptions & {
+    arrows?: 'none' | 'start' | 'end' | 'both';
+    arrowSize?: number;
+};
+/**
+ * @typedef {DrawableOptions & { arrows?: 'none' | 'start' | 'end' | 'both', arrowSize?: number }} LinesOptions
+ */
 /**
  * Line segments: indices (or consecutive vertices) in pairs. Width is in pixels and works on
- * every platform. edges(geometry) makes a wireframe of any geometry.
+ * every platform. edges(geometry) makes a wireframe of any geometry. Segments each starting where
+ * the one before ended make a chain - a polyline - which dashes run on along and arrowheads finish.
  */
 export declare class Lines extends Drawable {
     static type: string;
+    static get OPTIONS(): string[];
+    /** Arrowheads at the ends of each chain: at its 'start', its 'end', 'both' or 'none'. @type {'none' | 'start' | 'end' | 'both'} */
+    arrows: 'none' | 'start' | 'end' | 'both';
+    /** Arrowhead length in pixels; 0 sizes them from the material's width. */
+    arrowSize: number;
+    /** @param {LinesOptions} options */
+    constructor(options: LinesOptions);
     /** @returns {'lines'} */
     get drawMode(): 'lines';
 }

package/dist/types/webgl/resources.d.ts

@@ -101,8 +101,8 @@ export declare class Resources {
         count: number;
     } | null, withTangents?: boolean): number;
     /**
-     * Vertex array for Lines: one instance per segment with its two endpoints (and colours),
-     * expanded to a screen-space quad in the vertex shader.
+     * Vertex array for Lines: one instance per segment with its two endpoints (and colours) and where
+     * it is along its chain, expanded to a screen-space quad - and arrowheads - in the vertex shader.
      * @param {Geometry} geometry
      * @returns {MeshBuffers}
      */
@@ -119,6 +119,16 @@ export declare class Resources {
      * @param {object} owner @param {Scene} scene
      */
     release(owner: object, scene: Scene): void;
+    /**
+     * Vertex array for points drawn as squares: one instance a point - its position, colour, size,
+     * opacity, angle and index - over the corner strip lines use. Given a model-view matrix, the points
+     * go back to front (furthest first) - re-sorted every call, as the camera may have moved; without
+     * one, in their own order; with undefined, in whatever order they were last sent (picking, which
+     * reads each point's index and doesn't mind).
+     * @param {Geometry} geometry @param {ArrayLike<number> | null} [modelView]
+     * @returns {MeshBuffers}
+     */
+    sprites(geometry: Geometry, modelView?: ArrayLike<number> | null): MeshBuffers;
     /** Forget everything - after a lost context, when every GL object is already gone. */
     reset(): void;
 }

package/dist/types/webgl/shaders.d.ts

@@ -8,11 +8,16 @@ export declare const ATTRIBUTES: {
     instanceColor: number;
     tangent: number;
     uv2: number;
+    pointSize: number;
+    pointOpacity: number;
+    pointAngle: number;
+    pointIndex: number;
     segmentStart: number;
     segmentEnd: number;
     segmentColorStart: number;
     segmentColorEnd: number;
     corner: number;
+    segmentInfo: number;
 };
 export declare const CLIP = "\n#ifdef CLIP\nuniform vec4 uClipPlane; // world space, unit normal: cut away where dot(n, p) + d > 0\nvoid clipAway(vec3 p) {\n  if (dot(uClipPlane.xyz, p) + uClipPlane.w > 0.0) discard;\n}\n#else\nvoid clipAway(vec3 p) {}\n#endif\n";
 export declare const FOG = "\n#ifdef FOG\nuniform vec3 uFogColor;   // linear\nuniform vec2 uFogRange;   // linear fog: near, far\nuniform float uFogDensity; // exponential fog\nin float vFogDepth;\nvec3 fogged(vec3 c) {\n#ifdef FOG_LINEAR\n  float f = clamp((vFogDepth - uFogRange.x) / max(uFogRange.y - uFogRange.x, 1e-4), 0.0, 1.0);\n#else\n  float d = uFogDensity * vFogDepth;\n  float f = 1.0 - exp(-d * d);\n#endif\n#ifdef FOG_ADD\n  return c * (1.0 - f);\n#elif defined(FOG_MULTIPLY)\n  // a filter in the fog fades to white, which leaves what is behind it as it was\n  return mix(c, vec3(1.0), f);\n#else\n  return mix(c, uFogColor, f);\n#endif\n}\n#else\nvec3 fogged(vec3 c) { return c; }\n#endif\n";
@@ -22,8 +27,8 @@ export declare const EQUIRECT = "\nvec2 equirectUv(vec3 d) {\n  return vec2(atan
 export declare const FULLSCREEN_VERTEX = "\nout vec2 vUv;\nvoid main() {\n  vec2 p = vec2(float((gl_VertexID << 1) & 2), float(gl_VertexID & 2));\n  vUv = p;\n  gl_Position = vec4(p * 2.0 - 1.0, 0.0, 1.0);\n}\n";
 export declare const TONE_MAP = "\nuniform float uExposure;\nuniform int uToneMapping;    // 0 none, 1 aces, 2 neutral\n\nvec3 toneMap(vec3 c) {\n  c *= uExposure;\n  if (uToneMapping == 1) {\n    // ACES filmic, Narkowicz's fit\n    c = clamp((c * (2.51 * c + 0.03)) / (c * (2.43 * c + 0.59) + 0.14), 0.0, 1.0);\n  } else if (uToneMapping == 2) {\n    // Khronos PBR Neutral\n    float x = min(c.r, min(c.g, c.b));\n    float offset = x < 0.08 ? x - 6.25 * x * x : 0.04;\n    c -= offset;\n    float peak = max(c.r, max(c.g, c.b));\n    if (peak > 0.8) {\n      float d = 0.2;\n      float newPeak = 1.0 - d * d / (peak + d - 0.8);\n      c *= newPeak / peak;\n      float g = 1.0 - 1.0 / (0.15 * (peak - newPeak) + 1.0);\n      c = mix(c, vec3(newPeak), g);\n    }\n  }\n  return c;\n}\n";
 export declare const MESH_VERTEX = "\nlayout(location = 0) in vec3 position;\nlayout(location = 1) in vec3 normal;\nlayout(location = 2) in vec2 uv;\nlayout(location = 3) in vec3 color;\n#ifdef INSTANCED\nlayout(location = 4) in mat4 instanceMatrix;\nlayout(location = 8) in vec3 instanceColor;\n#endif\n#ifdef ANISOTROPY\nlayout(location = 9) in vec4 tangent;\nout vec4 vTangent;\n#endif\n#ifdef UV2\nlayout(location = 10) in vec2 uv2;\nout vec2 vUv2;\n#endif\n\nuniform mat4 uModel;\nuniform mat3 uNormalMatrix;\nuniform mat4 uViewProjection;\nuniform int uHighlightIndex; // -2 none, -1 the whole node, otherwise the instance\n#ifdef FOG\nuniform mat4 uView;\nout float vFogDepth;\n#endif\n\nout vec3 vWorldPosition;\nout vec3 vNormal;\nout vec2 vUv;\nout vec3 vColor;\nflat out float vHighlight;\n#ifdef TRIPLANAR\n// the mesh's own space, so projected maps stay on it as it moves; and how its normals turn into the world\nout vec3 vObjectPosition;\nout vec3 vObjectNormal;\nout mat3 vObjectToWorld;\n#endif\n#ifdef PICK\nflat out uint vPickElement; // which instance, point or segment, for GPU picking\n#endif\n\n\nvec3 srgbToLinear(vec3 c) {\n  return mix(c / 12.92, pow((c + 0.055) / 1.055, vec3(2.4)), step(0.04045, c));\n}\nvec3 linearToSrgb(vec3 c) {\n  c = clamp(c, 0.0, 1.0);\n  return mix(c * 12.92, 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055, step(0.0031308, c));\n}\n\n\n// Matrices times vectors only - a matrix times a matrix per vertex is four times the work, and\n// with 100,000 instances the vertex stage is most of the frame.\nvoid main() {\n  vColor = vec3(1.0);\n  vHighlight = uHighlightIndex == -1 ? 1.0 : 0.0;\n#ifdef INSTANCED\n  vec4 local = instanceMatrix * vec4(position, 1.0);\n  // the instance's normal matrix as its cofactor: the inverse transpose up to scale, from three\n  // cross products, flipped back for mirroring transforms\n  mat3 m = mat3(instanceMatrix);\n  mat3 instanceNormal = mat3(cross(m[1], m[2]), cross(m[2], m[0]), cross(m[0], m[1])) * sign(dot(m[0], cross(m[1], m[2])));\n  vec3 n = instanceNormal * normal;\n  vColor *= instanceColor;\n  if (gl_InstanceID == uHighlightIndex) vHighlight = 1.0;\n#else\n  vec4 local = vec4(position, 1.0);\n  vec3 n = normal;\n#endif\n#ifdef VERTEX_COLORS\n  vColor *= srgbToLinear(color);\n#endif\n  vec4 world = uModel * local;\n  vWorldPosition = world.xyz;\n  vNormal = uNormalMatrix * n;\n  vUv = uv;\n#ifdef UV2\n  vUv2 = uv2;\n#endif\n#ifdef ANISOTROPY\n  // a direction along the surface, so it turns as the model does\n#ifdef INSTANCED\n  vTangent = vec4(mat3(uModel) * (m * tangent.xyz), tangent.w);\n#else\n  vTangent = vec4(mat3(uModel) * tangent.xyz, tangent.w);\n#endif\n#endif\n#ifdef TRIPLANAR\n  vObjectPosition = position;\n  vObjectNormal = normal;\n#ifdef INSTANCED\n  vObjectToWorld = uNormalMatrix * instanceNormal;\n#else\n  vObjectToWorld = uNormalMatrix;\n#endif\n#endif\n  gl_Position = uViewProjection * world;\n#ifdef FOG\n  vFogDepth = -(uView * world).z;\n#endif\n#ifdef PICK\n  vPickElement = uint(gl_InstanceID);\n#endif\n}\n";
-export declare const POINTS_VERTEX = "\nlayout(location = 0) in vec3 position;\nlayout(location = 3) in vec3 color;\n\nuniform mat4 uModel;\nuniform mat4 uView;\nuniform mat4 uProjection;\nuniform float uSize;        // pixels (with the pixel ratio applied), or world units when attenuated\nuniform float uScale;       // projection focal term x half the buffer height: world size -> pixels at depth 1\nuniform int uHighlightIndex; // -2 none, -1 every point, otherwise the point\n\nout vec3 vColor;\nflat out float vHighlight;\n#ifdef PICK\nflat out uint vPickElement; // which instance, point or segment, for GPU picking\n#endif\n#ifdef FOG\nout float vFogDepth;\n#endif\n\n\nvec3 srgbToLinear(vec3 c) {\n  return mix(c / 12.92, pow((c + 0.055) / 1.055, vec3(2.4)), step(0.04045, c));\n}\nvec3 linearToSrgb(vec3 c) {\n  c = clamp(c, 0.0, 1.0);\n  return mix(c * 12.92, 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055, step(0.0031308, c));\n}\n\n\nvoid main() {\n  vec4 viewPosition = uView * (uModel * vec4(position, 1.0));\n  gl_Position = uProjection * viewPosition;\n#ifdef FOG\n  vFogDepth = -viewPosition.z;\n#endif\n#ifdef SIZE_ATTENUATION\n  // perspective shrinks with distance; an orthographic projection (w row 0, 0, 0, 1) doesn't\n  float depth = uProjection[3][3] == 1.0 ? 1.0 : max(-viewPosition.z, 1e-4);\n  gl_PointSize = uSize * uScale / depth;\n#else\n  gl_PointSize = uSize;\n#endif\n  vColor = vec3(1.0);\n#ifdef VERTEX_COLORS\n  vColor = srgbToLinear(color);\n#endif\n  vHighlight = uHighlightIndex == -1 || gl_VertexID == uHighlightIndex ? 1.0 : 0.0;\n#ifdef PICK\n  vPickElement = uint(gl_VertexID);\n#endif\n}\n";
-export declare const LINES_VERTEX = "\nlayout(location = 0) in vec3 segmentStart;\nlayout(location = 1) in vec3 segmentEnd;\nlayout(location = 2) in vec3 segmentColorStart;\nlayout(location = 3) in vec3 segmentColorEnd;\nlayout(location = 4) in vec2 corner; // x: 0 at start, 1 at end; y: -1 or 1 across\n\nuniform mat4 uModel;\nuniform mat4 uView;\nuniform mat4 uProjection;\nuniform vec2 uResolution;   // drawing buffer size in pixels\nuniform float uWidth;       // pixels, already scaled by the pixel ratio\nuniform float uNear;\n\nout vec3 vColor;\n#ifdef PICK\nflat out uint vPickElement; // which instance, point or segment, for GPU picking\n#endif\n#ifdef FOG\nout float vFogDepth;\n#endif\n\n\nvec3 srgbToLinear(vec3 c) {\n  return mix(c / 12.92, pow((c + 0.055) / 1.055, vec3(2.4)), step(0.04045, c));\n}\nvec3 linearToSrgb(vec3 c) {\n  c = clamp(c, 0.0, 1.0);\n  return mix(c * 12.92, 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055, step(0.0031308, c));\n}\n\n\nvoid main() {\n  vec4 a = uView * (uModel * vec4(segmentStart, 1.0));\n  vec4 b = uView * (uModel * vec4(segmentEnd, 1.0));\n  // clip the segment to the near plane so lines passing behind the camera stay correct\n  float clipZ = -uNear;\n  if (a.z > clipZ && b.z > clipZ) {\n    gl_Position = vec4(2.0, 2.0, 2.0, 1.0); // wholly behind: off screen\n    return;\n  }\n  if (a.z > clipZ) a = mix(a, b, (clipZ - a.z) / (b.z - a.z));\n  if (b.z > clipZ) b = mix(b, a, (clipZ - b.z) / (a.z - b.z));\n\n  vec4 ca = uProjection * a;\n  vec4 cb = uProjection * b;\n  vec2 sa = ca.xy / ca.w * uResolution * 0.5;\n  vec2 sb = cb.xy / cb.w * uResolution * 0.5;\n  vec2 dir = sb - sa;\n  float len = length(dir);\n  dir = len > 0.0 ? dir / len : vec2(1.0, 0.0);\n  vec2 normal = vec2(-dir.y, dir.x);\n\n  vec4 clip = mix(ca, cb, corner.x);\n#ifdef FOG\n  vFogDepth = -mix(a.z, b.z, corner.x);\n#endif\n  // extend past each end by half the width so joins look continuous\n  vec2 offset = normal * corner.y * uWidth * 0.5 + dir * (corner.x * 2.0 - 1.0) * uWidth * 0.5;\n  clip.xy += offset / (uResolution * 0.5) * clip.w;\n  gl_Position = clip;\n#ifdef PICK\n  vPickElement = uint(gl_InstanceID);\n#endif\n\n  vColor = vec3(1.0);\n#ifdef VERTEX_COLORS\n  vColor = srgbToLinear(mix(segmentColorStart, segmentColorEnd, corner.x));\n#endif\n}\n";
+export declare const POINTS_VERTEX = "\nlayout(location = 0) in vec3 position;\nlayout(location = 3) in vec3 color;\n#ifdef SPRITES\n// each point a square: one instance a point, drawn as a strip over the corners (along 0-1, across -1-1)\nlayout(location = 4) in vec2 corner;\nlayout(location = 11) in float pointSize;\nlayout(location = 12) in float pointOpacity;\nlayout(location = 13) in float pointAngle;\nlayout(location = 14) in float pointIndex;\nuniform vec2 uResolution;   // drawing buffer size in pixels\nout vec2 vUv;\nout float vOpacity;\n#endif\n\nuniform mat4 uModel;\nuniform mat4 uView;\nuniform mat4 uProjection;\nuniform float uSize;        // pixels (with the pixel ratio applied), or world units when attenuated\nuniform float uScale;       // projection focal term x half the buffer height: world size -> pixels at depth 1\nuniform int uHighlightIndex; // -2 none, -1 every point, otherwise the point\n\nout vec3 vColor;\nflat out float vHighlight;\n#ifdef PICK\nflat out uint vPickElement; // which instance, point or segment, for GPU picking\n#endif\n#ifdef FOG\nout float vFogDepth;\n#endif\n\n\nvec3 srgbToLinear(vec3 c) {\n  return mix(c / 12.92, pow((c + 0.055) / 1.055, vec3(2.4)), step(0.04045, c));\n}\nvec3 linearToSrgb(vec3 c) {\n  c = clamp(c, 0.0, 1.0);\n  return mix(c * 12.92, 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055, step(0.0031308, c));\n}\n\n\nvoid main() {\n  vec4 viewPosition = uView * (uModel * vec4(position, 1.0));\n#ifdef SPRITES\n  // the square's corner, turned by the point's angle: the texture turns with it\n  vec2 c = vec2(corner.x * 2.0 - 1.0, corner.y);\n  float s = sin(pointAngle), k = cos(pointAngle);\n  vec2 turned = vec2(c.x * k - c.y * s, c.x * s + c.y * k);\n  float size = uSize * pointSize;\n#ifdef SIZE_ATTENUATION\n  // world units: the square sits in the view, facing the camera\n  viewPosition.xy += turned * size * 0.5;\n  gl_Position = uProjection * viewPosition;\n#else\n  // pixels: the square is laid out on the screen\n  gl_Position = uProjection * viewPosition;\n  gl_Position.xy += turned * size / uResolution * gl_Position.w;\n#endif\n  // the image upright on the square, its top at the top, as a point's is\n  vUv = vec2(c.x * 0.5 + 0.5, 0.5 - c.y * 0.5);\n  vOpacity = pointOpacity;\n  int self = int(pointIndex + 0.5);\n#else\n  gl_Position = uProjection * viewPosition;\n  int self = gl_VertexID;\n#endif\n#ifdef FOG\n  vFogDepth = -viewPosition.z;\n#endif\n#ifdef SPRITES\n#elif defined(SIZE_ATTENUATION)\n  // perspective shrinks with distance; an orthographic projection (w row 0, 0, 0, 1) doesn't\n  float depth = uProjection[3][3] == 1.0 ? 1.0 : max(-viewPosition.z, 1e-4);\n  gl_PointSize = uSize * uScale / depth;\n#else\n  gl_PointSize = uSize;\n#endif\n  vColor = vec3(1.0);\n#ifdef VERTEX_COLORS\n  vColor = srgbToLinear(color);\n#endif\n  vHighlight = uHighlightIndex == -1 || self == uHighlightIndex ? 1.0 : 0.0;\n#ifdef PICK\n  vPickElement = uint(self);\n#endif\n}\n";
+export declare const LINES_VERTEX = "\nlayout(location = 0) in vec3 segmentStart;\nlayout(location = 1) in vec3 segmentEnd;\nlayout(location = 2) in vec3 segmentColorStart;\nlayout(location = 3) in vec3 segmentColorEnd;\n// the distance along its chain (segments joined end to start) where it starts, in the model's\n// units; 1 if it starts a chain; 1 if it ends one\nlayout(location = 5) in vec3 segmentInfo;\n\nuniform mat4 uModel;\nuniform mat4 uView;\nuniform mat4 uProjection;\nuniform vec2 uResolution;   // drawing buffer size in pixels\nuniform float uWidth;       // pixels, already scaled by the pixel ratio\nuniform float uNear;\nuniform int uArrows;        // arrowheads: 1 at the start of each chain, 2 at its end, 3 at both\nuniform float uArrowSize;   // their length in pixels, scaled by the pixel ratio\n\n// six vertices an instance make the segment's quad, as two triangles - x: 0 at its start, 1 at its\n// end; y: -1 or 1 across - and six more its two arrowheads, drawn only when asked for\nconst vec2 QUAD[6] = vec2[6](vec2(0.0, -1.0), vec2(0.0, 1.0), vec2(1.0, -1.0), vec2(1.0, -1.0), vec2(0.0, 1.0), vec2(1.0, 1.0));\n\nout vec3 vColor;\n#ifdef DASHED\nout float vDistance;        // along the chain, in the model's units\nflat out float vArrow;      // 1 on an arrowhead, which is never dashed\n#endif\n#ifdef PICK\nflat out uint vPickElement; // which instance, point or segment, for GPU picking\n#endif\n#ifdef FOG\nout float vFogDepth;\n#endif\n\n\nvec3 srgbToLinear(vec3 c) {\n  return mix(c / 12.92, pow((c + 0.055) / 1.055, vec3(2.4)), step(0.04045, c));\n}\nvec3 linearToSrgb(vec3 c) {\n  c = clamp(c, 0.0, 1.0);\n  return mix(c * 12.92, 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055, step(0.0031308, c));\n}\n\n\nvoid main() {\n  vec4 a = uView * (uModel * vec4(segmentStart, 1.0));\n  vec4 b = uView * (uModel * vec4(segmentEnd, 1.0));\n  // clip the segment to the near plane so lines passing behind the camera stay correct\n  float clipZ = -uNear;\n  if (a.z > clipZ && b.z > clipZ) {\n    gl_Position = vec4(2.0, 2.0, 2.0, 1.0); // wholly behind: off screen\n    return;\n  }\n  if (a.z > clipZ) a = mix(a, b, (clipZ - a.z) / (b.z - a.z));\n  if (b.z > clipZ) b = mix(b, a, (clipZ - b.z) / (a.z - b.z));\n\n  vec4 ca = uProjection * a;\n  vec4 cb = uProjection * b;\n  vec2 sa = ca.xy / ca.w * uResolution * 0.5;\n  vec2 sb = cb.xy / cb.w * uResolution * 0.5;\n  vec2 dir = sb - sa;\n  float len = length(dir);\n  dir = len > 0.0 ? dir / len : vec2(1.0, 0.0);\n  vec2 normal = vec2(-dir.y, dir.x);\n\n  bool arrowStart = (uArrows & 1) != 0 && segmentInfo.y > 0.5;\n  bool arrowEnd = (uArrows & 2) != 0 && segmentInfo.z > 0.5;\n  float along, arrow = 0.0;\n  vec2 offset;\n  if (gl_VertexID < 6) {\n    vec2 c = QUAD[gl_VertexID];\n    along = c.x;\n    // past each end by half the width so joins look continuous - or short of it, under an arrowhead\n    float startOut = arrowStart ? -uArrowSize * 0.8 : uWidth * 0.5;\n    float endOut = arrowEnd ? -uArrowSize * 0.8 : uWidth * 0.5;\n    offset = normal * c.y * uWidth * 0.5 + dir * (along > 0.5 ? endOut : -startOut);\n  } else {\n    // an arrowhead: its tip on the chain's end, pointing out along the segment\n    int which = (gl_VertexID - 6) / 3, k = gl_VertexID - 6 - which * 3;\n    if (which == 0 ? !arrowStart : !arrowEnd) {\n      gl_Position = vec4(2.0, 2.0, 2.0, 1.0);\n      return;\n    }\n    along = float(which);\n    vec2 d = which == 1 ? dir : -dir;\n    float wing = uArrowSize * 0.45;\n    offset = k == 0 ? vec2(0.0) : -d * uArrowSize + normal * (k == 1 ? wing : -wing);\n    arrow = 1.0;\n  }\n\n  vec4 clip = mix(ca, cb, along);\n#ifdef FOG\n  vFogDepth = -mix(a.z, b.z, along);\n#endif\n  clip.xy += offset / (uResolution * 0.5) * clip.w;\n  gl_Position = clip;\n#ifdef DASHED\n  vDistance = segmentInfo.x + length(segmentEnd - segmentStart) * along;\n  vArrow = arrow;\n#endif\n#ifdef PICK\n  vPickElement = uint(gl_InstanceID);\n#endif\n\n  vColor = vec3(1.0);\n#ifdef VERTEX_COLORS\n  vColor = srgbToLinear(mix(segmentColorStart, segmentColorEnd, along));\n#endif\n}\n";
 export type ShaderKind = 'mesh' | 'points' | 'lines';
 /**
  * Vertex and fragment source for a kind of drawable, or a pass's own pair, with a set of feature defines.

package/llms-full.txt

@@ -139,6 +139,8 @@ Methods:
 - `on('click' | 'hover', (hit, event) => ...)` - see Interaction. Returns an unsubscribe function.
 - `tooltip(fn)` - set the tooltip function later.
 - `pick(x, y)` / `pick(event)` - the hit under a canvas position; `pickAll` for every hit.
+- `pickArea(area)` - every hit inside a box `{ x, y, width, height }` or a lasso of `[x, y]` points
+  (CSS pixels), nearest first - see Interaction.
 - `rayAt(x, y)` / `rayAt(event)` - the world `Ray` through a canvas position, for placing things:
   `ray.at(ray.intersectPlane([0, 1, 0], [0, 0, 0]))` is the point on the floor under the pointer
   (`intersectPlane` returns null when the ray runs along the plane or away from it).
@@ -222,6 +224,24 @@ new Lines({ geometry: edges(box(2)), material: { color: '#333', width: 2 } })
 new Label({ text: 'Rack A1', position: [0, 2, 0], className: 'my-label', place: 'above' })
 ```
 
+**Lines** dashed and with arrowheads - flow and direction in network diagrams. Dashes are material
+options in the model's units: `dash` (0 is solid), `gap` (0 is the dash's length) and `dashOffset`,
+which moves them along - animate it for traffic. Arrowheads are Lines options: `arrows: 'start' |
+'end' | 'both'` puts them at the ends of each chain (segments each starting where the one before
+ended - a polyline is one chain, separate links are one each), `arrowSize` in pixels (0, the default,
+sizes them from the width). The dashes run on along a chain, and arrowheads are never dashed.
+
+```js
+const flow = view.scene.add(new Lines({ geometry: links, arrows: 'end', material: { color: '#4cc9f0', width: 2, dash: 0.3, gap: 0.15 } }))
+view.start((dt) => { flow.material.dashOffset += dt * 0.8 })   // traffic moving along each link
+```
+
+**Points** each their own size, opacity or angle: give the geometry `sizes` (multiples of the material's
+`size`), `opacities` (0-1) or `angles` (radians, turning the point's `map`), one per vertex. Such points
+are drawn as camera-facing squares, so any size works and they stay whole at the edge of the view.
+`sort: true` draws them furthest first each frame - for soft points with `blending: 'normal'`
+(smoke, cloud) that would otherwise layer wrongly; with additive blending order doesn't matter.
+
 **InstancedMesh** - many copies of one geometry in one draw call, for bars, racks, nodes:
 
 ```js
@@ -361,7 +381,10 @@ unless its `colorSpace` was set on purpose - `normalMap: await loadTexture('n.pn
 
 **Canvas and video textures**: a texture's `image` can be a canvas - draw on it, then call
 `texture.needsUpdate()` - or a `<video>`, whose frames upload by themselves while it plays, with
-nothing to call. `new Texture({ url: 'promo.mp4' })` (or .webm, .ogv, .mov, .m4v) makes the video
+nothing to call. For a big canvas drawn on a little at a time (paint, a map being revealed), say what
+changed - `texture.needsUpdate({ x, y, width, height })`, in the canvas's pixels from its top left -
+and only that rectangle is sent, rather than the whole canvas every frame (several calls before a
+frame add up). `new Texture({ url: 'promo.mp4' })` (or .webm, .ogv, .mov, .m4v) makes the video
 for you, muted and looping so browsers let it start by itself; `texture.image` is that `<video>` -
 pause, seek or unmute it as any other. A browser that blocks autoplay leaves it on its first frame
 until `texture.image.play()` from a click. Video textures make no mipmaps (they would be remade
@@ -537,6 +560,16 @@ view.on('hover', (hit) => show(hit?.datum))                 // fires when the th
 - The **nearest surface** under the pointer is the hit - a link drawn over a site's top wins the
   hover there. To let one kind of thing through, give it `pickable: false`; to choose among
   everything under the pointer, `view.pickAll(event)` lists every hit, nearest first.
+- **Selecting an area** - `view.pickArea({ x, y, width, height })` (width and height may be negative,
+  as a drag up or left makes them) or `view.pickArea([[x, y], ...])` for a lasso: a hit for each point,
+  instance and line segment whose place on screen is inside, and each mesh whose middle is. Places, not
+  surfaces: what is hidden behind other things is found too, so a box over a scatter takes that whole
+  region. Hidden, unpickable and zero-scale instances are left out. Turn `view.controls.enabled` off
+  while the user drags out the area.
+
+  ```js
+  const chosen = view.pickArea({ x: 40, y: 30, width: 200, height: 120 }).map((h) => h.datum)
+  ```
 - **Rays of your own** - line of sight, what's below a dropped object, picking in tests: a
   `Raycaster` finds what any ray hits, on the CPU. Set `raycaster.ray.origin` and `.direction`, or aim
   it with `setFromCamera([x, y], camera)` (-1 to 1, y up); `intersect(nodeOrNodes)` returns hits,
@@ -807,6 +840,20 @@ second), `follow` (a node whose position is the origin each frame - a trail), `o
 default material is small additive points. `burst(count, spawnOptions)`, `clear()`, `set(options)`,
 `count`.
 
+How particles look over their lives: `size` (a multiple of the material's size, or a list each particle
+goes through - `[0.5, 3]` billows), `sizeSpread` (each one's size varies by up to this share, 0-1),
+`opacity` (0-1, or a list - `[0, 1, 0]` fades in and out) and `spin` (radians per second: a number
+either way, or `[min, max]`; spinning particles start at a random angle). For smoke, a soft `map`,
+`blending: 'normal'` and `sort: true`:
+
+```js
+const smoke = view.scene.add(new Emitter({
+  rate: 40, velocity: [0, 1.5, 0], velocitySpread: 0.4, lifetime: [3, 5], color: ['#777', '#333'],
+  size: [0.6, 4], sizeSpread: 0.3, opacity: [0, 0.6, 0], spin: 0.5, sort: true,
+  material: { map: puff, size: 1, blending: 'normal' },
+}))
+```
+
 `Body` moves any node: `node.onUpdate(new Body({ velocity, gravity, drag }).update)`;
 `body.impulse([x, y, z])` kicks it.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phoria2",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Small, friendly 3D for the web - a WebGL 2 renderer with charts, labels, picking, particles and glTF",
   "keywords": [
     "3d",

package/schema/scene.schema.json

@@ -102,6 +102,10 @@
           "properties": {
             "type": {
               "const": "points"
+            },
+            "sort": {
+              "type": "boolean",
+              "description": "Draw the points furthest first each frame, for soft points that cover what is behind them."
             }
           },
           "unevaluatedProperties": false
@@ -113,6 +117,15 @@
           "properties": {
             "type": {
               "const": "lines"
+            },
+            "arrows": {
+              "enum": ["none", "start", "end", "both"],
+              "description": "Arrowheads at the ends of each chain of joined segments."
+            },
+            "arrowSize": {
+              "type": "number",
+              "description": "Arrowhead length in pixels; 0 sizes them from the material's width.",
+              "minimum": 0
             }
           },
           "unevaluatedProperties": false
@@ -916,6 +929,20 @@
           "description": "Lines: width in pixels.",
           "minimum": 0
         },
+        "dash": {
+          "type": "number",
+          "description": "Lines: dashed, with dashes this long in the model's units; 0 is solid.",
+          "minimum": 0
+        },
+        "gap": {
+          "type": "number",
+          "description": "Lines: the gaps between dashes; 0 is as long as the dashes.",
+          "minimum": 0
+        },
+        "dashOffset": {
+          "type": "number",
+          "description": "Lines: moves the dashes along the lines - animate it for flow."
+        },
         "alphaTest": {
           "type": "number",
           "description": "Cut-outs: drop pixels with less alpha.",
@@ -1280,6 +1307,27 @@
                 "type": "number"
               }
             },
+            "sizes": {
+              "type": "array",
+              "description": "Points: one per vertex, a multiple of the material's size.",
+              "items": {
+                "type": "number"
+              }
+            },
+            "opacities": {
+              "type": "array",
+              "description": "Points: one per vertex, 0-1, times the material's opacity.",
+              "items": {
+                "type": "number"
+              }
+            },
+            "angles": {
+              "type": "array",
+              "description": "Points: one per vertex, radians anticlockwise on screen.",
+              "items": {
+                "type": "number"
+              }
+            },
             "indices": {
               "type": "array",
               "items": {

package/src/View.js

@@ -4,6 +4,7 @@ import { DRAG_START, OrbitControl } from './OrbitControl.js'
 import { cameraPreset, fitPoints, framingScale, presetDirection } from './presets.js'
 import { EASES } from './ease.js'
 import { Raycaster } from './Raycaster.js'
+import { pickArea } from './area.js'
 import { ChangeWatch } from './watch.js'
 import { Box3 } from './value/Box3.js'
 import { Color } from './value/Color.js'
@@ -803,6 +804,21 @@ export class View {
     return new Mat4().multiplyMatrices(camera.projectionMatrix, camera.viewMatrix)
   }
 
+  /**
+   * Everything inside an area of the canvas, nearest first: a box `{ x, y, width, height }` or a
+   * lasso of `[x, y]` points, CSS pixels from the canvas's top left. Each point, instance and line
+   * segment is its own hit, found by where it is (a mesh by its middle) - hidden behind others or
+   * not - so a box dragged over a scatter selects that region of it.
+   *
+   *     const picked = view.pickArea({ x: 40, y: 30, width: 200, height: 120 }).map((h) => h.datum)
+   * @param {import('./area.js').PickArea} area
+   * @returns {Hit[]}
+   */
+  pickArea(area) {
+    this.scene.updateWorldTree()
+    return pickArea(this.scene, this.camera, this.#viewProjection(), this.#width, this.#height, area)
+  }
+
   /** Every hit under a canvas position, nearest first. @param {number | MouseEvent} x @param {number} [y] @returns {Hit[]} */
   pickAll(x, y) {
     if (typeof x === 'object') {

package/src/area.js

@@ -0,0 +1,131 @@
+// Picking an area of the canvas: everything whose place on screen falls inside a box or a lasso drawn
+// over it - each point, instance and line segment on its own, and a mesh by its middle. Positions
+// are tested, not surfaces, so what is hidden behind other things is found too: selecting a region
+// of a scatter takes the whole region, front to back.
+import * as mat4 from './math/mat4.js'
+import { hiddenInstance } from './scene/drawables.js'
+import { Vec3 } from './value/Vec3.js'
+import { describe, fail } from './validate.js'
+
+/** @import { Hit } from './Raycaster.js' */
+/** @import { Node } from './scene/Node.js' */
+/** @import { Camera } from './scene/cameras.js' */
+
+/**
+ * A box on the canvas, CSS pixels from its top left - width and height may be negative, as a drag
+ * up or left makes them - or a lasso: the points of a polygon, [x, y] each.
+ * @typedef {{ x: number, y: number, width: number, height: number } | [number, number][]} PickArea
+ */
+
+const instanceWorld = new Float32Array(16)
+
+/**
+ * The polygon an area is, and its bounding box, for the inside test.
+ * @param {PickArea} area
+ * @returns {{ points: number[], left: number, top: number, right: number, bottom: number }}
+ */
+function outline(area) {
+  /** @type {number[]} */
+  let points
+  if (Array.isArray(area)) {
+    if (area.length < 3 || !area.every((p) => Array.isArray(p) && p.length === 2 && p.every(Number.isFinite))) {
+      fail('View', `pickArea() takes a box { x, y, width, height } or a lasso of three or more [x, y] points, got ${describe(area)}`)
+    }
+    points = area.flat()
+  } else {
+    const { x, y, width, height } = area ?? /** @type {any} */ ({})
+    if (![x, y, width, height].every(Number.isFinite)) {
+      fail('View', `pickArea() takes a box { x, y, width, height } or a lasso of three or more [x, y] points, got ${describe(area)}`)
+    }
+    points = [x, y, x + width, y, x + width, y + height, x, y + height]
+  }
+  let left = Infinity, top = Infinity, right = -Infinity, bottom = -Infinity
+  for (let i = 0; i < points.length; i += 2) {
+    left = Math.min(left, points[i])
+    right = Math.max(right, points[i])
+    top = Math.min(top, points[i + 1])
+    bottom = Math.max(bottom, points[i + 1])
+  }
+  return { points, left, top, right, bottom }
+}
+
+/** Is (x, y) inside the polygon? Even-odd crossings. @param {number[]} p @param {number} x @param {number} y */
+function inside(p, x, y) {
+  let into = false
+  for (let i = 0, j = p.length - 2; i < p.length; j = i, i += 2) {
+    const yi = p[i + 1], yj = p[j + 1]
+    if ((yi > y) !== (yj > y) && x < p[i] + (p[j] - p[i]) * (y - yi) / (yj - yi)) into = !into
+  }
+  return into
+}
+
+/**
+ * Everything in the scene the camera shows, pickable, whose place falls inside the area - nearest
+ * the camera first.
+ * @param {Node} scene @param {Camera} camera @param {Float32Array} viewProjection
+ * @param {number} width @param {number} height the canvas, CSS pixels
+ * @param {PickArea} area
+ * @returns {Hit[]}
+ */
+export function pickArea(scene, camera, viewProjection, width, height, area) {
+  const shape = outline(area)
+  const eye = camera.worldPosition
+  const m = viewProjection
+  /** @type {Hit[]} */
+  const hits = []
+  /** World position (x, y, z) inside the area? @param {number} x @param {number} y @param {number} z */
+  const within = (x, y, z) => {
+    const w = m[3] * x + m[7] * y + m[11] * z + m[15]
+    if (w <= 0) return false
+    const nz = (m[2] * x + m[6] * y + m[10] * z + m[14]) / w
+    if (nz < -1 || nz > 1) return false
+    const sx = ((m[0] * x + m[4] * y + m[8] * z + m[12]) / w * 0.5 + 0.5) * width
+    const sy = (0.5 - (m[1] * x + m[5] * y + m[9] * z + m[13]) / w * 0.5) * height
+    return sx >= shape.left && sx <= shape.right && sy >= shape.top && sy <= shape.bottom && inside(shape.points, sx, sy)
+  }
+  /** @param {any} node @param {number} x @param {number} y @param {number} z @param {number | null} face @param {number | null} instance */
+  const hit = (node, x, y, z, face, instance) => {
+    const point = new Vec3(x, y, z)
+    hits.push({ node, point, distance: point.distanceTo(eye), normal: null, face, instance, uv: null, datum: node.datumAt(instance ?? face) })
+  }
+  const p = new Vec3()
+
+  /** @param {Node} node */
+  const visit = (node) => {
+    if (!node.shownTo(camera) || !node.pickable) return
+    const n = /** @type {any} */ (node)
+    if (n.isDrawable && n.geometry.vertexCount) {
+      const g = n.geometry, world = n.worldMatrix
+      if (n.drawMode === 'points') {
+        const pos = g.positions
+        for (let i = 0; i < g.drawnVertices; i++) {
+          p.set(pos[i * 3], pos[i * 3 + 1], pos[i * 3 + 2]).applyMatrix4(world)
+          if (within(p[0], p[1], p[2])) hit(n, p[0], p[1], p[2], i, null)
+        }
+      } else if (n.drawMode === 'lines') {
+        // a segment by its middle
+        const pos = g.positions, idx = g.indices
+        for (let s = 0; s < Math.floor(g.drawnCount / 2); s++) {
+          const a = idx ? idx[s * 2] : s * 2, b = idx ? idx[s * 2 + 1] : s * 2 + 1
+          p.set((pos[a * 3] + pos[b * 3]) / 2, (pos[a * 3 + 1] + pos[b * 3 + 1]) / 2, (pos[a * 3 + 2] + pos[b * 3 + 2]) / 2).applyMatrix4(world)
+          if (within(p[0], p[1], p[2])) hit(n, p[0], p[1], p[2], s, null)
+        }
+      } else if (n.instanceMatrices) {
+        // each instance by the middle of its copy of the geometry; hidden ones aren't there
+        const centre = g.bounds.getCenter()
+        for (let i = 0; i < n.count; i++) {
+          if (hiddenInstance(n.instanceMatrices, i)) continue
+          mat4.multiply(instanceWorld, world, n.instanceMatrices.subarray(i * 16, i * 16 + 16))
+          p.copy(centre).applyMatrix4(instanceWorld)
+          if (within(p[0], p[1], p[2])) hit(n, p[0], p[1], p[2], null, i)
+        }
+      } else {
+        p.copy(g.bounds.getCenter()).applyMatrix4(world)
+        if (within(p[0], p[1], p[2])) hit(n, p[0], p[1], p[2], null, null)
+      }
+    }
+    for (const child of node.children) visit(child)
+  }
+  visit(scene)
+  return hits.sort((a, b) => a.distance - b.distance)
+}

package/src/charts/marks.js

@@ -3,6 +3,7 @@
 // lay out and draw, never animate.
 import { Geometry } from '../geometry/Geometry.js'
 import { box as boxGeometry, icosphere } from '../geometry/generators.js'
+import { Texture } from '../material/Texture.js'
 import { InstancedMesh, Lines, Mesh, Points } from '../scene/drawables.js'
 import { fail } from '../validate.js'
 import { distinct } from './scales.js'
@@ -154,8 +155,10 @@ export function pointMark(ctx) {
   /** @type {any} */
   let node = sized
     ? new InstancedMesh({ geometry: icosphere({ radius: 1, detail: 1 }), material, count: 64, labels: labelsOf(ctx, 'above') })
-    : new Points({ geometry: emptyPoints(64), material: { size: ctx.spec.channels.size?.value ?? unit * 1.4, vertexColors: true, ...material },
-      labels: labelsOf(ctx, 'above') })
+    // dots with a darker rim, so each one reads where they crowd together - drawn furthest first, so
+    // each blends over the ones behind it
+    : new Points({ geometry: emptyPoints(64), material: { size: ctx.spec.channels.size?.value ?? unit * 1.4, vertexColors: true, map: dot(), depthWrite: false, ...material },
+      sort: true, labels: labelsOf(ctx, 'above') })
   if (sized) node.count = 0
   const mark = {
     nodes: [node],
@@ -205,6 +208,30 @@ export function pointMark(ctx) {
   return mark
 }
 
+/** @type {Texture | null} */
+let dotTexture = null
+
+/**
+ * A dot: a white disc whose outer part darkens to a rim, with a soft edge - pixels of its own, so
+ * charts need no canvas to make it. Shared by every scatter.
+ */
+function dot() {
+  if (dotTexture) return dotTexture
+  const size = 64, data = new Uint8Array(size * size * 4), r = size / 2
+  for (let y = 0; y < size; y++) {
+    for (let x = 0; x < size; x++) {
+      const d = Math.hypot(x + 0.5 - r, y + 0.5 - r) / r
+      // the colour full to 0.78 of the radius, then down to 0.62 at the edge; alpha soft over the last pixel and a half
+      const shade = d < 0.78 ? 1 : 1 - (d - 0.78) / 0.22 * 0.38
+      const alpha = Math.min(1, Math.max(0, (1 - d) * r / 1.5))
+      const o = (y * size + x) * 4
+      data[o] = data[o + 1] = data[o + 2] = Math.round(shade * 255)
+      data[o + 3] = Math.round(alpha * 255)
+    }
+  }
+  return (dotTexture = new Texture({ image: { data, width: size, height: size } }))
+}
+
 /** @param {number} n */
 function emptyPoints(n) {
   const g = new Geometry({ positions: new Float32Array(n * 3), colors: new Float32Array(n * 3) })

package/src/geometry/Geometry.js

@@ -9,10 +9,16 @@ import { checkOptions, describe, fail } from '../validate.js'
  * @property {ArrayLike<number>} [uvs2] a second uv per vertex, for maps that need every surface on its own
  *   patch of texture - baked occlusion and light maps (a texture's uvSet: 1 reads it)
  * @property {ArrayLike<number>} [colors] rgb per vertex, sRGB 0-1 like every colour input
+ * @property {ArrayLike<number>} [sizes] points: one per vertex, a multiple of the material's size
+ * @property {ArrayLike<number>} [opacities] points: one per vertex, 0-1, multiplying the material's opacity
+ * @property {ArrayLike<number>} [angles] points: one per vertex, radians anticlockwise on screen - turns
+ *   each point's texture
  * @property {ArrayLike<number>} [indices] vertex indices; triangles for meshes, pairs for lines
  */
 
-const OPTIONS = ['positions', 'normals', 'uvs', 'uvs2', 'colors', 'indices']
+const OPTIONS = ['positions', 'normals', 'uvs', 'uvs2', 'colors', 'sizes', 'opacities', 'angles', 'indices']
+// the per-point arrays: Points with any of them draw each point as its own square, sized, faded and turned
+const POINT_ARRAYS = /** @type {const} */ (['sizes', 'opacities', 'angles'])
 
 /**
  * Vertex data: flat typed arrays plus an optional index. Generators such as box() and sphere()
@@ -25,6 +31,9 @@ export class Geometry {
   /** @type {Float32Array | null} */ uvs = null
   /** A second UV set, for baked occlusion and light maps. @type {Float32Array | null} */ uvs2 = null
   /** @type {Float32Array | null} */ colors = null
+  /** Points: each one's size, as a multiple of the material's. @type {Float32Array | null} */ sizes = null
+  /** Points: each one's opacity, 0-1, times the material's. @type {Float32Array | null} */ opacities = null
+  /** Points: each one's turn on screen, in radians anticlockwise. @type {Float32Array | null} */ angles = null
   /** @type {Uint16Array | Uint32Array | null} */ indices = null
 
   /** @internal Bumped by needsUpdate() so renderers know to re-upload. */
@@ -62,6 +71,7 @@ export class Geometry {
     if (options.uvs) this.uvs = toFloat32('uvs', options.uvs, 2, n)
     if (options.uvs2) this.uvs2 = toFloat32('uvs2', options.uvs2, 2, n)
     if (options.colors) this.colors = toFloat32('colors', options.colors, 3, n)
+    for (const name of POINT_ARRAYS) if (options[name]) this[name] = toFloat32(name, options[name], 1, n)
     if (options.indices) {
       // -1: no indices at all refer to no vertex, so an empty geometry can say so
       let max = -1
@@ -191,6 +201,9 @@ export class Geometry {
       uvs: this.uvs ?? undefined,
       uvs2: this.uvs2 ?? undefined,
       colors: this.colors ?? undefined,
+      sizes: this.sizes ?? undefined,
+      opacities: this.opacities ?? undefined,
+      angles: this.angles ?? undefined,
       indices: this.indices ?? undefined,
     })
     g.source = this.source && { ...this.source }
@@ -218,6 +231,7 @@ export class Geometry {
     if (this.uvs) json.uvs = Array.from(this.uvs)
     if (this.uvs2) json.uvs2 = Array.from(this.uvs2)
     if (this.colors) json.colors = Array.from(this.colors)
+    for (const name of POINT_ARRAYS) if (this[name]) json[name] = Array.from(/** @type {Float32Array} */ (this[name]))
     if (this.indices) json.indices = Array.from(this.indices)
     return json
   }
@@ -242,6 +256,7 @@ export class Geometry {
     this.uvs = expand(this.uvs, 2)
     this.uvs2 = expand(this.uvs2, 2)
     this.colors = expand(this.colors, 3)
+    for (const name of POINT_ARRAYS) this[name] = expand(this[name], 1)
     this.indices = null
     this.source = null
   }