@pascal-app/editor 1.0.3 → 1.0.5

package/src/lib/point-ask/target-scope.ts

@@ -0,0 +1,338 @@
+import {
+  type AnyNode,
+  containsPoint,
+  detectSpacesForLevel,
+  getBlockFaceFrame,
+  getFloorPlacedFootprints,
+  getWallBodyCenterOffset,
+  getWallCurveFrameAt,
+  getWallCurveLength,
+  measurementCentroid,
+  nodeRegistry,
+  polygonInteriorPoint,
+  type SeparatorNode,
+  type WallNode,
+} from '@pascal-app/core'
+import { Euler, Matrix4, Quaternion, Vector3 } from 'three'
+
+type Nodes = Readonly<Record<string, AnyNode>>
+type Point = [number, number]
+type Frame = { nodeId: string; levelId: string; matrix: Matrix4 }
+type Shape = { polygon: Point[]; holes: Point[][] }
+
+function fields(node: AnyNode): Record<string, unknown> {
+  return node as unknown as Record<string, unknown>
+}
+
+function vector(value: unknown): [number, number, number] | null {
+  return Array.isArray(value) && value.length === 3 && value.every(Number.isFinite)
+    ? (value as [number, number, number])
+    : null
+}
+
+function ring(value: unknown): Point[] {
+  return Array.isArray(value)
+    ? value.filter(
+        (point): point is Point =>
+          Array.isArray(point) && point.length === 2 && point.every(Number.isFinite),
+      )
+    : []
+}
+
+function centroid(polygon: Point[]): Point | null {
+  const centre = measurementCentroid(polygon.map(([x, z]) => [x, 0, z]))
+  return centre ? [centre[0], centre[2]] : null
+}
+
+function covers(shape: Shape, point: Point): boolean {
+  return containsPoint([{ outer: shape.polygon, holes: shape.holes }], point)
+}
+
+function snapshotScope(nodes: Nodes, targetIds: readonly string[], roomContentsOnly = false) {
+  const children = new Map<string, Set<string>>()
+  const listedParents = new Map<string, string>()
+  const addChild = (parent: string, child: string) => {
+    const ids = children.get(parent) ?? new Set<string>()
+    ids.add(child)
+    children.set(parent, ids)
+  }
+  for (const node of Object.values(nodes)) {
+    if (node.parentId) addChild(node.parentId, node.id)
+    for (const child of 'children' in node ? (node.children ?? []) : []) {
+      addChild(node.id, child)
+      if (!listedParents.has(child)) listedParents.set(child, node.id)
+    }
+    const wallId = fields(node).wallId
+    if (typeof wallId === 'string') addChild(wallId, node.id)
+  }
+  const parentId = (node: AnyNode): string | undefined => {
+    const wallId = fields(node).wallId
+    if (typeof wallId === 'string' && nodes[wallId]?.type === 'wall') return wallId
+    return node.parentId ?? listedParents.get(node.id)
+  }
+  const frames = new Map<string, Frame | null>()
+  const resolving = new Set<string>()
+  const attachmentFrame = (node: AnyNode, host: Frame): Frame => {
+    const hostNode = nodes[host.nodeId]
+    if (node.type !== 'item' || hostNode?.type !== 'block' || !node.blockFaceId) return host
+    const face = getBlockFaceFrame(hostNode.topology, node.blockFaceId)
+    if (!face) return host
+    // Stored item coordinates are in the face basis, as in BlockFaceHostFrame.
+    const local = new Matrix4()
+      .makeBasis(
+        new Vector3(...face.xAxis),
+        new Vector3(...face.yAxis),
+        new Vector3(...face.normal),
+      )
+      .setPosition(...face.origin)
+    return { ...host, matrix: host.matrix.clone().multiply(local) }
+  }
+  const wallPose = (wall: WallNode, position: [number, number, number]) => {
+    const curve = getWallCurveFrameAt(wall, position[0] / (getWallCurveLength(wall) || 1))
+    const across = getWallBodyCenterOffset(wall) + position[2]
+    return {
+      position: [
+        curve.point.x + curve.normal.x * across,
+        position[1],
+        curve.point.y + curve.normal.y * across,
+      ] as [number, number, number],
+      yaw: -Math.atan2(curve.tangent.y, curve.tangent.x),
+    }
+  }
+  const frame = (id: string): Frame | null => {
+    if (frames.has(id)) return frames.get(id) ?? null
+    const node = nodes[id]
+    if (!node || resolving.has(id)) return null
+    if (node.type === 'level') {
+      const result = { nodeId: id, levelId: id, matrix: new Matrix4() }
+      frames.set(id, result)
+      return result
+    }
+    resolving.add(id)
+    const parent = parentId(node)
+    const host = parent ? frame(parent) : null
+    let result: Frame | null = null
+    if (host) {
+      const data = fields(node)
+      let position: [number, number, number] = vector(data.position) ?? [0, 0, 0]
+      let rotation: [number, number, number] = vector(data.rotation) ?? [
+        0,
+        typeof data.rotation === 'number' ? data.rotation : 0,
+        0,
+      ]
+      if (node.type === 'wall') {
+        const [dx, dz] = [node.end[0] - node.start[0], node.end[1] - node.start[1]]
+        position = [node.start[0], 0, node.start[1]]
+        rotation = [0, -Math.atan2(dz, dx), 0]
+      }
+      // Item scale belongs to its model, not the group that hosts its children.
+      const scale: [number, number, number] =
+        node.type === 'item' ? [1, 1, 1] : (vector(data.scale) ?? [1, 1, 1])
+      let basis = attachmentFrame(node, host).matrix
+      const hostNode = nodes[host.nodeId]
+      let orientation = new Quaternion().setFromEuler(new Euler(...rotation))
+      if (hostNode?.type === 'wall') {
+        const wallParent = parentId(hostNode)
+        const wallHost = wallParent ? frame(wallParent) : null
+        if (wallHost) {
+          const pose = wallPose(hostNode, position)
+          position = pose.position
+          basis = wallHost.matrix
+          orientation = new Quaternion()
+            .setFromEuler(new Euler(0, pose.yaw, 0))
+            .multiply(orientation)
+        }
+      }
+      const local = new Matrix4().compose(
+        new Vector3(...position),
+        orientation,
+        new Vector3(...scale),
+      )
+      result = { nodeId: id, levelId: host.levelId, matrix: basis.clone().multiply(local) }
+    }
+    resolving.delete(id)
+    frames.set(id, result)
+    return result
+  }
+  const parentFrame = (node: AnyNode): Frame | null => {
+    const parent = parentId(node)
+    return parent ? frame(parent) : null
+  }
+  const transform = (point: [number, number, number], host: Frame): Point => {
+    const hostNode = nodes[host.nodeId]
+    if (hostNode?.type === 'wall') {
+      const wallHost = parentFrame(hostNode)
+      if (wallHost) return transform(wallPose(hostNode, point).position, wallHost)
+    }
+    const transformed = new Vector3(...point).applyMatrix4(host.matrix)
+    return [transformed.x, transformed.z]
+  }
+  const shape = (node: AnyNode, host: Frame): Shape => {
+    const data = fields(node)
+    const transformRing = (points: Point[]) => points.map(([x, z]) => transform([x, 0, z], host))
+    return {
+      polygon: transformRing(ring(data.polygon)),
+      holes: Array.isArray(data.holes) ? data.holes.map((hole) => transformRing(ring(hole))) : [],
+    }
+  }
+  const centres = (node: AnyNode, host: Frame): Point[] => {
+    host = attachmentFrame(node, host)
+    const data = fields(node)
+    const position = vector(data.position)
+    const floorPlaced = nodeRegistry.get(node.type)?.capabilities?.floorPlaced
+    if (
+      floorPlaced &&
+      (!floorPlaced.applies || floorPlaced.applies(node)) &&
+      (floorPlaced.footprint || floorPlaced.footprints)
+    ) {
+      // Resolvers read this snapshot, never the current scene store. Their positions,
+      // like node.position, are in the parent's frame rather than offsets from it.
+      return getFloorPlacedFootprints(floorPlaced, node, { nodes }).flatMap((footprint) => {
+        const centre = vector(footprint.position) ?? position
+        return centre ? [transform(centre, host)] : []
+      })
+    }
+    if (position) return [transform(position, host)]
+    const polygonCentre = centroid(ring(data.polygon))
+    if (polygonCentre) return [transform([polygonCentre[0], 0, polygonCentre[1]], host)]
+    const start = ring([data.start])[0]
+    const end = ring([data.end])[0]
+    return start && end
+      ? [transform([(start[0] + end[0]) / 2, 0, (start[1] + end[1]) / 2], host)]
+      : []
+  }
+
+  const nodesByLevel = new Map<string, AnyNode[]>()
+  for (const node of Object.values(nodes)) {
+    const host = parentFrame(node)
+    if (!host) continue
+    const members = nodesByLevel.get(host.levelId) ?? []
+    members.push(node)
+    nodesByLevel.set(host.levelId, members)
+  }
+  const topology = new Map<string, ReturnType<typeof detectSpacesForLevel>>()
+  const rooms = (levelId: string) => {
+    let result = topology.get(levelId)
+    if (!result) {
+      const boundaries = (nodesByLevel.get(levelId) ?? []).flatMap<WallNode | SeparatorNode>(
+        (node) => {
+          if (node.type !== 'wall' && node.type !== 'separator') return []
+          const host = parentFrame(node)
+          if (!host) return []
+          return [
+            {
+              ...node,
+              start: transform([node.start[0], 0, node.start[1]], host),
+              end: transform([node.end[0], 0, node.end[1]], host),
+            },
+          ]
+        },
+      )
+      result = detectSpacesForLevel(levelId, boundaries)
+      topology.set(levelId, result)
+    }
+    return result
+  }
+  const seeds = new Set<string>(roomContentsOnly ? [] : targetIds)
+  const roomExcluded = (node: AnyNode) =>
+    node.type === 'zone' ||
+    node.type === 'level' ||
+    node.type === 'building' ||
+    node.type === 'site' ||
+    node.type === 'unit'
+  for (const id of targetIds) {
+    const zone = nodes[id]
+    if (zone?.type !== 'zone') continue
+    const data = fields(zone)
+    const host = parentFrame(zone)
+    if (!host) continue
+    for (const key of roomContentsOnly ? [] : ['boundaryWallIds', 'boundarySeparatorIds']) {
+      const ids = data[key]
+      if (Array.isArray(ids))
+        for (const boundaryId of ids) {
+          if (typeof boundaryId !== 'string') continue
+          const boundary = nodes[boundaryId]
+          if (
+            boundary &&
+            parentFrame(boundary)?.levelId === host.levelId &&
+            ((key === 'boundaryWallIds' && boundary.type === 'wall') ||
+              (key === 'boundarySeparatorIds' && boundary.type === 'separator'))
+          )
+            seeds.add(boundaryId)
+        }
+    }
+    const outline = shape(zone, host)
+    if (outline.polygon.length < 3) continue
+    const levelNodes = nodesByLevel.get(host.levelId) ?? []
+    const inRoom = (node: AnyNode) => {
+      const nodeHost = parentFrame(node)
+      return nodeHost && centres(node, nodeHost).some((point) => covers(outline, point))
+    }
+    if (roomContentsOnly) {
+      for (const node of levelNodes) {
+        if (nodeRegistry.get(node.type)?.category === 'furnish' && inRoom(node)) seeds.add(node.id)
+      }
+      continue
+    }
+    const needsWalls = !Array.isArray(data.boundaryWallIds) || data.boundaryWallIds.length === 0
+    const needsSeparators =
+      !Array.isArray(data.boundarySeparatorIds) || data.boundarySeparatorIds.length === 0
+    if (
+      levelNodes.some(
+        (node) =>
+          (node.type === 'wall' && needsWalls) || (node.type === 'separator' && needsSeparators),
+      )
+    ) {
+      const interior = polygonInteriorPoint(outline, true)
+      for (const room of rooms(host.levelId).rooms) {
+        const roomShape = {
+          polygon: room.polygon.map(({ x, y }): Point => [x, y]),
+          holes: room.holes,
+        }
+        if (!covers(roomShape, interior) && !covers(outline, polygonInteriorPoint(roomShape, true)))
+          continue
+        for (const span of room.spans) {
+          const boundary = nodes[span.boundaryId]
+          if (
+            (boundary?.type === 'wall' && needsWalls) ||
+            (boundary?.type === 'separator' && needsSeparators)
+          )
+            seeds.add(span.boundaryId)
+        }
+      }
+    }
+    for (const node of levelNodes) {
+      if (roomExcluded(node)) continue
+      if (!inRoom(node)) continue
+      seeds.add(node.id)
+      // A member hosted on a wall brings the geometry host, not its level ancestors.
+      const geometryHost = nodes[parentId(node) ?? '']
+      if (geometryHost?.type === 'wall') seeds.add(geometryHost.id)
+    }
+  }
+  // Contents are spatial members, not every descendant of a room or shared boundary wall.
+  if (roomContentsOnly) return seeds
+  const scope = new Set<string>()
+  const pending = [...seeds]
+  while (pending.length) {
+    const id = pending.pop()!
+    if (scope.has(id)) continue
+    scope.add(id)
+    for (const child of children.get(id) ?? []) pending.push(child)
+  }
+  return scope
+}
+
+/** Current furnishings use the same footprint centres and hosting frames as the pin's scope. */
+export function pointRoomHasContents(roomId: string, nodes: Nodes): boolean {
+  return snapshotScope(nodes, [roomId], true).size > 0
+}
+
+/** Target ancestry and room membership are evaluated independently in each snapshot. */
+export function pointTargetScope(
+  targetIds: readonly string[],
+  before: Nodes,
+  current: Nodes,
+): ReadonlySet<string> {
+  return new Set([...snapshotScope(before, targetIds), ...snapshotScope(current, targetIds)])
+}

package/src/lib/point-ask/types.ts

@@ -0,0 +1,48 @@
+// Point and ask, scene side (the owner, 8 October): the shapes the pure modules, the store and the
+// overlay share. Screen units are CSS pixels in viewport coordinates; world units are metres.
+
+export type ScreenPoint = { x: number; y: number }
+
+/** A screen rectangle by its edges. */
+export type Rect = { x0: number; y0: number; x1: number; y1: number }
+
+/** The sides a bubble can sit on beside its target, or `dock` when the target is off screen. */
+export type BubbleSide = 'right' | 'left' | 'below' | 'above' | 'dock'
+
+/** What the bubble's suggestions and placeholder are chosen by (spec 2.4). */
+export type PointKind =
+  | 'room'
+  | 'wall'
+  | 'window'
+  | 'door'
+  | 'item'
+  | 'roof'
+  | 'stair'
+  | 'several'
+  | 'area'
+  | 'other'
+
+/** One pointed element as the overlay holds it. */
+export type PointTarget = {
+  /** The node id, authoritative. */
+  id: string
+  /** The node's type ('zone', 'wall', 'window', ...). */
+  type: string
+  kind: PointKind
+  /** "Kitchen", "Wall, north side of Kitchen", "Sofa". */
+  name: string
+  /** The chip's size line in the viewer's unit: "14.2 m²", "4.80 × 2.70 m", "1.20 × 1.40 m". */
+  size: string
+}
+
+/** The pin's states (spec 2.6): a presence on the element while the ask runs, then its receipt. */
+export type PinState =
+  | 'sent'
+  | 'queued'
+  | 'working'
+  | 'needs-input'
+  | 'done'
+  | 'answered'
+  | 'no-change'
+  | 'error'
+  | 'undone'

package/src/lib/portable-export.test.ts

@@ -69,6 +69,34 @@ describe('portable vertex-color boundary', () => {
     })
   })
 
+  test('spreads a mesh with more faces than one atlas holds over several atlases', () => {
+    withCanvasCapture((capture) => {
+      const faceCount = 256 * 256 + 2
+      const colors = new Float32Array(faceCount * 3 * 4)
+      for (let vertex = 0; vertex < faceCount * 3; vertex++) {
+        colors.set(vertex < (faceCount - 2) * 3 ? [1, 0, 0, 1] : [0, 0, 1, 1], vertex * 4)
+      }
+      const geometry = new BufferGeometry()
+      geometry.setAttribute('position', new Float32BufferAttribute(faceCount * 9, 3))
+      geometry.setAttribute('color', new Float32BufferAttribute(colors, 4))
+      const mesh: Mesh = new Mesh(geometry, new MeshStandardMaterial({ vertexColors: true }))
+      const root = new Group()
+      root.add(mesh)
+
+      expect(normalizePortableScene(root)).toEqual([])
+
+      const materials = mesh.material as MeshStandardMaterial[]
+      expect(materials).toHaveLength(2)
+      expect(materials[0]!.map).not.toBe(materials[1]!.map)
+      expect(mesh.geometry.groups).toEqual([
+        { start: 0, count: (faceCount - 2) * 3, materialIndex: 0 },
+        { start: (faceCount - 2) * 3, count: 6, materialIndex: 1 },
+      ])
+      // The capture holds the last atlas painted: the page with the two blue faces.
+      expect(portableColorAt(mesh, faceCount * 3 - 1, capture)).toEqual([0, 0, 255, 255])
+    })
+  })
+
   test('does not warn when every channel is already portable', () => {
     withCanvasCapture(() => {
       const geometry = triangleGeometry(
@@ -300,7 +328,12 @@ function portableColorAt(mesh: Mesh, vertexIndex: number, capture: () => ImageDa
       Math.round((colors.itemSize >= 4 ? colors.getW(vertexIndex) : 1) * 255),
     ]
   }
-  const material = mesh.material as MeshStandardMaterial
+  const group = mesh.geometry.groups.find(
+    ({ start, count }) => vertexIndex >= start && vertexIndex < start + count,
+  )
+  const material = (
+    Array.isArray(mesh.material) ? mesh.material[group?.materialIndex ?? 0] : mesh.material
+  ) as MeshStandardMaterial
   if (!material.map) throw new Error('Portable color has no material-connected carrier')
   const channel = material.map.channel ?? 0
   const uvName = channel === 0 ? 'uv' : `uv${channel}`

package/src/lib/portable-export.ts

@@ -5,6 +5,7 @@ import { cloneExportUserData } from './export-user-data'
 const VERTEX_COLOR_UV_CHANNEL = 0
 const VERTEX_COLOR_TILE_SIZE = 8
 const MAX_VERTEX_COLOR_ATLAS_SIZE = 2048
+const MAX_VERTEX_COLOR_ATLAS_FACES = (MAX_VERTEX_COLOR_ATLAS_SIZE / VERTEX_COLOR_TILE_SIZE) ** 2
 
 const MATERIAL_TEXTURE_SLOTS = [
   'map',
@@ -260,14 +261,26 @@ function colorComponent(
   return attribute.itemSize >= 4 ? attribute.getW(index) : 1
 }
 
+interface VertexColorAtlasPage {
+  /** First face of the expanded geometry painted on this page. */
+  firstFace: number
+  faceCount: number
+  texture: THREE.CanvasTexture
+  hasAlpha: boolean
+}
+
+/**
+ * Paints each face of a vertex-colored geometry into its own atlas tile. A geometry with more faces
+ * than one export-sized atlas holds spreads over several pages, each covering a consecutive run of
+ * faces, so a large mesh exports at the same tile resolution as a small one.
+ */
 function buildVertexColorAtlas(
   geometry: THREE.BufferGeometry,
   materials: readonly THREE.Material[],
   relocatedUvChannel?: number,
 ): {
   geometry: THREE.BufferGeometry
-  texture: THREE.CanvasTexture
-  hasAlpha: boolean
+  pages: VertexColorAtlasPage[]
   clampedHdr: boolean
 } {
   const expanded = geometry.index ? geometry.toNonIndexed() : geometry.clone()
@@ -286,21 +299,6 @@ function buildVertexColorAtlas(
     throw new Error('Vertex-color baking requires triangle geometry with a color attribute')
   }
 
-  const faceCount = position.count / 3
-  const tilesPerRow = Math.ceil(Math.sqrt(faceCount))
-  const atlasSize = THREE.MathUtils.ceilPowerOfTwo(tilesPerRow * VERTEX_COLOR_TILE_SIZE)
-  if (atlasSize > MAX_VERTEX_COLOR_ATLAS_SIZE) {
-    expanded.dispose()
-    throw new Error(
-      `Vertex-color atlas requires ${atlasSize}px, exceeding the ${MAX_VERTEX_COLOR_ATLAS_SIZE}px export limit`,
-    )
-  }
-
-  const { canvas, context } = canvas2d(atlasSize, atlasSize)
-  const image = context.createImageData(atlasSize, atlasSize)
-
-  const uv = new Float32Array(position.count * 2)
-  let hasAlpha = false
   let clampedHdr = false
   for (let index = 0; index < color.count && !clampedHdr; index++) {
     const triangleOffset = index - (index % 3)
@@ -312,9 +310,38 @@ function buildVertexColorAtlas(
     clampedHdr = red < 0 || red > 1 || green < 0 || green > 1 || blue < 0 || blue > 1
   }
 
-  for (let face = 0; face < faceCount; face++) {
-    const tileX = (face % tilesPerRow) * VERTEX_COLOR_TILE_SIZE
-    const tileY = Math.floor(face / tilesPerRow) * VERTEX_COLOR_TILE_SIZE
+  const totalFaces = position.count / 3
+  const uv = new Float32Array(position.count * 2)
+  const pages: VertexColorAtlasPage[] = []
+  for (let firstFace = 0; firstFace < totalFaces; firstFace += MAX_VERTEX_COLOR_ATLAS_FACES) {
+    const faceCount = Math.min(MAX_VERTEX_COLOR_ATLAS_FACES, totalFaces - firstFace)
+    pages.push(paintVertexColorAtlasPage(expanded, materials, uv, firstFace, faceCount))
+  }
+
+  expanded.setAttribute(uvAttributeName(VERTEX_COLOR_UV_CHANNEL), new THREE.BufferAttribute(uv, 2))
+  expanded.deleteAttribute('color')
+  return { geometry: expanded, pages, clampedHdr }
+}
+
+/** Paints faces `firstFace … firstFace + faceCount` into one atlas and writes their tile UVs. */
+function paintVertexColorAtlasPage(
+  expanded: THREE.BufferGeometry,
+  materials: readonly THREE.Material[],
+  uv: Float32Array,
+  firstFace: number,
+  faceCount: number,
+): VertexColorAtlasPage {
+  const color = expanded.getAttribute('color')
+  const tilesPerRow = Math.ceil(Math.sqrt(faceCount))
+  const atlasSize = THREE.MathUtils.ceilPowerOfTwo(tilesPerRow * VERTEX_COLOR_TILE_SIZE)
+  const { canvas, context } = canvas2d(atlasSize, atlasSize)
+  const image = context.createImageData(atlasSize, atlasSize)
+  let hasAlpha = false
+
+  for (let tile = 0; tile < faceCount; tile++) {
+    const face = firstFace + tile
+    const tileX = (tile % tilesPerRow) * VERTEX_COLOR_TILE_SIZE
+    const tileY = Math.floor(tile / tilesPerRow) * VERTEX_COLOR_TILE_SIZE
     const vertices = [face * 3, face * 3 + 1, face * 3 + 2]
     const colors = vertices.map((vertex) => [
       colorComponent(color, vertex, 0),
@@ -375,14 +402,14 @@ function buildVertexColorAtlas(
       const tileColumn = Math.floor(x / VERTEX_COLOR_TILE_SIZE)
       const tileIndex = tileRow * tilesPerRow + tileColumn
       if (tileColumn < tilesPerRow && tileIndex < faceCount) continue
-      const sourceFace =
+      const sourceTile =
         tileRow * tilesPerRow < faceCount
           ? Math.min((tileRow + 1) * tilesPerRow - 1, faceCount - 1)
           : faceCount - 1
       const sourceX =
-        (sourceFace % tilesPerRow) * VERTEX_COLOR_TILE_SIZE + (x % VERTEX_COLOR_TILE_SIZE)
+        (sourceTile % tilesPerRow) * VERTEX_COLOR_TILE_SIZE + (x % VERTEX_COLOR_TILE_SIZE)
       const sourceY =
-        Math.floor(sourceFace / tilesPerRow) * VERTEX_COLOR_TILE_SIZE + (y % VERTEX_COLOR_TILE_SIZE)
+        Math.floor(sourceTile / tilesPerRow) * VERTEX_COLOR_TILE_SIZE + (y % VERTEX_COLOR_TILE_SIZE)
       const sourcePixel = (sourceY * atlasSize + sourceX) * 4
       const targetPixel = (y * atlasSize + x) * 4
       image.data[targetPixel] = image.data[sourcePixel]!
@@ -393,16 +420,45 @@ function buildVertexColorAtlas(
   }
 
   context.putImageData(image, 0, 0)
-  expanded.setAttribute(uvAttributeName(VERTEX_COLOR_UV_CHANNEL), new THREE.BufferAttribute(uv, 2))
-  expanded.deleteAttribute('color')
   const texture = new THREE.CanvasTexture(canvas)
   texture.name = 'pascal_vertex_color_atlas'
   texture.channel = VERTEX_COLOR_UV_CHANNEL
   texture.colorSpace = THREE.SRGBColorSpace
   texture.flipY = true
   texture.needsUpdate = true
-  return { geometry: expanded, texture, hasAlpha, clampedHdr }
+  return { firstFace, faceCount, texture, hasAlpha }
+}
+
+/**
+ * Geometry groups for a geometry whose faces are spread over atlas pages: every source group is cut
+ * at page boundaries, and the piece on page `p` uses material `p * materialCount + its own index`.
+ */
+function pagedGroups(
+  geometry: THREE.BufferGeometry,
+  pages: readonly VertexColorAtlasPage[],
+  materialCount: number,
+): { start: number; count: number; materialIndex: number }[] {
+  const vertexCount = geometry.getAttribute('position').count
+  const sources = geometry.groups.length
+    ? geometry.groups
+    : [{ start: 0, count: vertexCount, materialIndex: 0 }]
+  const groups: { start: number; count: number; materialIndex: number }[] = []
+  for (const source of sources) {
+    const sourceEnd = Math.min(source.start + source.count, vertexCount)
+    pages.forEach((page, pageIndex) => {
+      const start = Math.max(source.start, page.firstFace * 3)
+      const end = Math.min(sourceEnd, (page.firstFace + page.faceCount) * 3)
+      if (end <= start) return
+      groups.push({
+        start,
+        count: end - start,
+        materialIndex: pageIndex * materialCount + (source.materialIndex ?? 0),
+      })
+    })
+  }
+  return groups
 }
+
 function hasDeformedGeometry(mesh: THREE.Mesh): boolean {
   const skinnedMesh = mesh as THREE.SkinnedMesh
   return (
@@ -466,36 +522,46 @@ function bakeVertexColors(root: THREE.Object3D, preserveDeformations = false): b
     if (baked.clampedHdr) mesh.userData.pascalHdrVertexColor = 'clamped-to-portable-range'
     clampedHdr ||= baked.clampedHdr
     const relocatedTextures = new Map<THREE.Texture, THREE.Texture>()
-    const convertedMaterials = new Map<THREE.Material, THREE.Material>()
-    const converted = materials.map((material) => {
-      const cached = convertedMaterials.get(material)
-      if (cached) return cached
-      if (!material.vertexColors && relocatedUvChannel === undefined) return material
-      const clone = material.clone() as TexturedMaterial
-      if (relocatedUvChannel !== undefined) {
-        for (const slot of MATERIAL_TEXTURE_SLOTS) {
-          const sourceTexture = clone[slot]
-          if (!(sourceTexture instanceof THREE.Texture) || sourceTexture.channel !== 0) continue
-          let relocatedTexture = relocatedTextures.get(sourceTexture)
-          if (!relocatedTexture) {
-            relocatedTexture = sourceTexture.clone()
-            relocatedTexture.channel = relocatedUvChannel
-            relocatedTexture.needsUpdate = true
-            relocatedTextures.set(sourceTexture, relocatedTexture)
-            rememberDiscarded(root, sourceTexture)
+    const converted = baked.pages.flatMap((page) => {
+      const convertedMaterials = new Map<THREE.Material, THREE.Material>()
+      return materials.map((material) => {
+        const cached = convertedMaterials.get(material)
+        if (cached) return cached
+        if (!material.vertexColors && relocatedUvChannel === undefined) return material
+        const clone = material.clone() as TexturedMaterial
+        if (relocatedUvChannel !== undefined) {
+          for (const slot of MATERIAL_TEXTURE_SLOTS) {
+            const sourceTexture = clone[slot]
+            if (!(sourceTexture instanceof THREE.Texture) || sourceTexture.channel !== 0) continue
+            let relocatedTexture = relocatedTextures.get(sourceTexture)
+            if (!relocatedTexture) {
+              relocatedTexture = sourceTexture.clone()
+              relocatedTexture.channel = relocatedUvChannel
+              relocatedTexture.needsUpdate = true
+              relocatedTextures.set(sourceTexture, relocatedTexture)
+              rememberDiscarded(root, sourceTexture)
+            }
+            clone[slot] = relocatedTexture
           }
-          clone[slot] = relocatedTexture
         }
-      }
-      if (material.vertexColors) {
-        clone.vertexColors = false
-        clone.map = baked.texture
-        if (baked.hasAlpha) clone.transparent = true
-      }
-      convertedMaterials.set(material, clone)
-      return clone
+        if (material.vertexColors) {
+          clone.vertexColors = false
+          clone.map = page.texture
+          if (page.hasAlpha) clone.transparent = true
+        }
+        convertedMaterials.set(material, clone)
+        return clone
+      })
     })
-    mesh.material = Array.isArray(mesh.material) ? converted : converted[0]!
+    if (baked.pages.length > 1) {
+      const groups = pagedGroups(mesh.geometry, baked.pages, materials.length)
+      mesh.geometry.clearGroups()
+      for (const group of groups)
+        mesh.geometry.addGroup(group.start, group.count, group.materialIndex)
+      mesh.material = converted
+    } else {
+      mesh.material = Array.isArray(mesh.material) ? converted : converted[0]!
+    }
     rememberDiscarded(root, originalGeometry)
     for (const material of materials) rememberDiscarded(root, material)
   }