Drawing colliders with rapier2d-compat. debugRender returns an empty array

I try to use this example: Add basic debug-render support but I don't understand why debugRender.vertices returns an empty array. I added box and circle colliders to the world.

I created the issue: https://github.com/dimforge/rapier.js/issues/218

import rapier from "@dimforge/rapier2d-compat";
import { initRapier2D } from "./init-rapier2d.js";

let world, playerRigidBody, debugRender;

const maxTimeStepMs = 1 / 60 * 1000;

function step(deltaMs) {
    const dt = Math.min(deltaMs, maxTimeStepMs) / 1000;
    world.step();
}

function draw() {
    const vtx = debugRender.vertices;
    // console.log(vtx);
}

async function init() {
    await initRapier2D();
    console.log(`Rapier2D version: ${rapier.version()}`);

    const gravity = new rapier.Vector2(0, -9.8);
    world = new rapier.World(gravity);

    debugRender = world.debugRender();

    // Ground
    const groundColliderDesc = rapier.ColliderDesc.cuboid(5, 0.2);
    world.createCollider(groundColliderDesc);

    // Player
    const playerBodyDesc = rapier.RigidBodyDesc.dynamic()
        .setTranslation(0, 0);
    playerRigidBody = world.createRigidBody(playerBodyDesc);
    const playerColliderDesc = rapier.ColliderDesc.ball(0.5);
    world.createCollider(playerColliderDesc, playerRigidBody);

    (function animationLoop(prevMs) {
        const nowMs = window.performance.now()
        window.requestAnimationFrame(animationLoop.bind(null, nowMs));
        const deltaMs = nowMs - prevMs;
        step(deltaMs);
        draw();
    })(window.performance.now());
}

init();

gordonnl solved my problem here:

It's empty as you currently only call debugRender() upon initialisation. Move the debugRender = world.debugRender() line into the draw method so it can update the buffers every frame.