Advanced integration

The normal API creates its own canvas and loop. Advanced applications can provide browser primitives without exposing renderer setup to ordinary users.

const flag = createFlagCloth({
  container,
  texture,
  advanced: {
    canvas: existingCanvas,
    context: existingCanvas.getContext('webgl2')!,
    externalAnimationLoop: true,
  },
});

let previous = performance.now();
function frame(now: number) {
  const deltaSeconds = (now - previous) / 1000;
  previous = now;
  flag.update(deltaSeconds);
  requestAnimationFrame(frame);
}
requestAnimationFrame(frame);

update() receives a frame delta in seconds, not the absolute requestAnimationFrame timestamp. Keep autoStart at its default true, or call flag.start() before the first external update. externalAnimationLoop prevents the library from scheduling its own frame; it does not bypass pause or visibility state.

The cloth instance still owns its geometry and simulation. If you supply a shared context, coordinate clear order and viewport state with the rest of your renderer.