Integración avanzada

La API normal crea su propio canvas y bucle. Las aplicaciones avanzadas pueden proporcionar primitivas del navegador sin exponer la configuración del renderizador a los usuarios normales.

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() recibe el delta del frame en segundos, no el timestamp absoluto de requestAnimationFrame. Mantén autoStart con su valor predeterminado true o llama a flag.start() antes de la primera actualización externa. externalAnimationLoop evita que la biblioteca programe su propio frame; no ignora el estado de pausa ni de visibilidad.

La instancia sigue siendo propietaria de su geometría y simulación. Si compartes un contexto, coordina el orden de limpieza y el estado del viewport con el resto de tu renderizador.