threejs-stress-test.js

// This is a stress test, it simulates load. In a real app you should try to avoid adding stuff runtime and
// re-use as much as you can, for instance by creating geometry once, then re-using it. But moren often than not
// app performance is affected by a "thousand cuts", and this is where scheduling can make a real difference.
// If React can schedule a 1-2 second CPU choke away (like the one below), it can balance a thousand cuts.
// The whole idea of virtualisation and scheduling is that the app is not beholden to load, just like a virtual
// list does not care if it has to render 10 or 100.000.000 items, it just renders enough.

async function test() {
  const chars = `!"§$%&/()=?*#<>-_.:,;+0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz`
  const font = await new Promise((res) => new THREE.FontLoader().load("https://raw.githubusercontent.com/drcmda/scheduler-test/master/public/Inter%20UI_Bold.json", res))
  console.time("test")
  for (let i = 0; i < 510; i++) {
    new THREE.TextGeometry(chars[Math.floor(Math.random() * chars.length)], {
      font,
      size: 1,
      height: 0.5,
      curveSegments: 80,
      bevelEnabled: false,
    })
  }
  console.timeEnd("test")
}

test()

// To really drive it home you'd have to repeat it every two seconds ...
// setInterval(test, 2000)