Importing models

async function convert({ name, bytes, folder, dropped }: ConvertRequest): Promise<ConvertReply> {
  const started = performance.now();
  const file = new Uint8Array(bytes);
  /* A file the model names, by the places it could be: the engine says what to look for. */
  const beside = async (named: string): Promise<Uint8Array | null> => {
    for (const candidate of assetCandidates(named)) {
      const own = dropped?.[basenameOf(candidate)];
      if (own !== undefined) return new Uint8Array(own);
      if (folder === undefined) continue;
      const found = await fetch(new URL(candidate, folder));
      if (found.ok) return new Uint8Array(await found.arrayBuffer());
    }
    return null;
  };
  /* The two zipped or deflated formats need their decompressor ready before the parse. */
  const ext = extensionOf(name);
  const inflate = ext === '.fbx' ? await prepareFbxInflate(bytes, browserInflate) : undefined;
  const inflateRaw = ext === '.3mf' ? await prepareZipInflate(bytes, browserInflateRaw) : undefined;
  const imported = await readModel({
    name,
    bytes: file,
    beside,
    decompress: unpack,
    ...(inflate === undefined ? {} : { inflate }),
    ...(inflateRaw === undefined ? {} : { inflateRaw }),
  });

  /* Y up, one vertex per distinct corner, and no attribute every vertex holds the same value of. */
  const up = imported.declaredUp;
  const oriented = up === undefined ? imported.meshes : orientMeshes(imported.meshes, up);
  const meshes = oriented.map((mesh) => dropDefaultAttributes(weldMesh(mesh)));

  /* The pictures the model carries or names, by what their own bytes say they are. A picture
     that cannot be found is left out, and the surfaces that wear it draw untextured. */
  const textures = [];
  for (const reference of imported.textures ?? []) {
    const image = reference.bytes ?? (await beside(reference.name));
    if (image === null) continue;
    const info = describeImage(image);
    textures.push({
      name: reference.name,
      codec: info.codec,
      width: info.width,
      height: info.height,
      bytes: image,
    });
  }

  /* A coarse outline of the whole model, drawn while the rest arrives, where one is worth it. */
  const outline = buildCoarseLevel(meshes, { cells: DEFAULT_COARSE_CELLS });
  const drft = writeDrft({
    meshes,
    ...(outline !== null && isOutlineWorthWriting(outline, meshes) ? { lods: [outline] } : {}),
    ...(imported.materials === undefined
      ? {}
      : { materials: imported.materials as DrftMaterial[] }),
    ...(textures.length === 0 ? {} : { textures }),
  });
  return { ok: true, drft, meshes: meshes.length, ms: performance.now() - started };
}

/** Every model is fitted to the turntable: this wide, this tall, standing on it. */
const FIT: DrftFit = { footprint: 1.8, height: 1.6, baseY: 0.1 };
const worker = new Worker(new URL('./convert.ts', import.meta.url), { type: 'module' });
let loader: DrftLoader | null = null;

/** Send a file's bytes to the worker, and stream the container it answers with. */
function open(request: ConvertRequest): void {
  status = { label: request.name, line: 'READING' };
  worker.postMessage(request, [request.bytes]);
}
worker.onmessage = (event: MessageEvent<ConvertReply>) => {
  const reply = event.data;
  if (!reply.ok) {
    status = { label: status.label, line: reply.reason };
    return;
  }
  loader?.dispose();
  loader = new DrftLoader(renderer, { uploadsPerFrame: 4 });
  status = {
    label: status.label,
    line: `${reply.meshes} ${reply.meshes === 1 ? 'MESH' : 'MESHES'} CONVERTED IN ${reply.ms.toFixed(0)} MS`,
  };
  /* The loader streams from a response; a container from a worker is wrapped in one. */
  void loader.consume(new Response(reply.drft), FIT);
};

/** Three formats: glTF with its pictures inside it, OBJ with a material beside it, and STL. */
const SAMPLES: Record<string, string> = {
  lantern: 'lantern.glb',
  vase: 'vase.obj',
  gear: 'gear.stl',
};
/* Beside this page: a bundler rewrites `new URL(..., import.meta.url)` for a file, not a folder. */
const folder = new URL('assets/', location.href).href;
async function sample(label: string): Promise<void> {
  const name = SAMPLES[label] ?? 'lantern.glb';
  const response = await fetch(new URL(name, folder));
  open({ name, bytes: await response.arrayBuffer(), folder });
}
/* Any model dropped on the page, and the files dropped with it, such as its `.mtl` or textures. */
addEventListener('dragover', (event) => event.preventDefault());
addEventListener('drop', (event) => {
  event.preventDefault();
  const files = [...(event.dataTransfer?.files ?? [])];
  const model = files.find((file) => readerFor(extensionOf(file.name)) !== undefined);
  if (model === undefined) return;
  void Promise.all(files.map(async (file) => [file.name, await file.arrayBuffer()] as const)).then(
    (read) => {
      const dropped = Object.fromEntries(read);
      const bytes = dropped[model.name] as ArrayBuffer;
      delete dropped[model.name];
      open({ name: model.name, bytes, dropped });
    },
  );
});

/* Each part with the images its material names: colour, the packed occlusion, roughness and
   metal map, normals and emission, each -1 where the file had none. */
const textures = loader?.textures ?? null;
const image = (index: number) => (index >= 0 ? (textures?.at(index) ?? null) : null);
for (const part of parts) {
  renderer.setMaterial({
    albedo: image(part.albedo),
    orm: image(part.orm),
    normal: image(part.normal),
    emissive: image(part.emissive),
    roughnessScale: part.roughnessScale,
    metallicScale: part.metallicScale,
    occlusionStrength: part.occlusionStrength,
  });
  if (part.opacity >= 1) renderer.drawMesh(part.mesh, IDENTITY);
  else renderer.drawTranslucentMesh(part.mesh, IDENTITY, part.opacity);
}
renderer.setMaterial(null);