Challenges/A hundred thousand of them/Run

Run Detail

completedqwen3.8-2.4t-a95b

Unscored

Every model's answer from this round

Recorded for these videos

47:51

Ranking major U.S. Open-Weights Models. (Where does Ripple 65B fit in?)

Nov 6, 2026 · YouTube

38:58

Testing Particle-1: a post-trained DeepSeek V4.1 Flash specializing in coding and efficiency

Oct 28, 2026 · YouTube

29:55

Kimi K3.1 Pro Looked Incredible. Then I Kept Testing.

Oct 26, 2026 · YouTube

22:47

Mistral Large 4 Is Cheap. But Is It Good Enough to Compete?

Oct 6, 2026 · YouTube

16:54

Stealth Union Alpha: Is this another cheap GPT model? (better than Luna, cheaper than Terra?)

Sep 16, 2026 · YouTube

16:45

DeepSeek V4.1 Flash Is Shockingly Good for the Price

Sep 10, 2026 · YouTube

17:14

How much better is GPT-6 Astra over Claude Opus 5? Real Website and Coding Tests

Sep 5, 2026 · YouTube

29:13

Implementing a multiplayer game with GPT-6 Astra (+ Gemini 3.8, Opus 5, Sol Pro)

Sep 5, 2026 · YouTube

19:42

Meta Muse Spark 1.3 Review: A Huge Leap Forward

Sep 2, 2026 · YouTube

17:31

Testing Gemini 3.8 Flash on Real Coding Challenges (vs. other models)

Sep 2, 2026 · YouTube

Provider

openrouter

Challenge Version

v1.0

Turns

Duration

309.0s

Total Tokens

40,913

Input Tokens

733

Output Tokens

40,180

Reasoning Tokens

29,150

Reasoning Effort

default

Est. Cost

$0.2425

Started

8/31/2026, 3:37:38 AM

OR Provider

Modal

Finish Reason

stop

Generation ID

gen-1788147459-OFsEYbvSLRl5XVkdeBd5

Turns (1)

Turn #1

733 in40,180 out29,150 reasoning40,913 total308.9s

user

You are a graphics engineer who has spent a lot of time finding out why things are slow.

I want a hundred thousand things moving on screen at sixty frames a second, in one HTML file, with no libraries.

What to build

A canvas, 900 × 600.
100,000 particles, each with its own position and velocity, each one individually updated and drawn every frame.
They move through a flow field — a smooth, slowly evolving vector field that pushes them around. Curl, drift, eddies. It should look like weather, or ink in water, not like confetti.
Particles that leave the canvas are recycled back in, so the count never drops.
The field itself must evolve over time. A static field that particles merely settle into is not what I asked for.

On screen, always visible

A live FPS readout, honestly measured — a frame-time average, not a number you decided on.
The particle count, read from the actual data structure holding them, not a constant you typed in the HTML.

House rules

One file. Everything inline — no CDN, no external stylesheet, font, script or image. data: URIs are fine.
No libraries. No WebGL helper you paste in. If you want to use WebGL, write it yourself.
No network at runtime.
No localStorage, sessionStorage, cookies or indexedDB — sandboxed frame, they throw.
Return the file as exactly one fenced html block.

Answer in exactly these sections

The plan

One paragraph, before the file. Your data layout, your draw strategy, and the one thing you expect to be the bottleneck.

The file

The single fenced html block.

The prediction

This is the section I care most about. Be specific and commit to numbers:

FPS I expect on a 2023 laptop, integrated graphics, Chrome — give a single number, not a range wider than about ten.
Where the time goes — roughly what share is update versus draw, and why.
The first thing that breaks if I raise the count to a million.
What you'd need to go ten times faster. Name the technique, not "optimize further".

If you fell short

If you could not do 100,000 at 60fps and shipped fewer, or a cheaper effect than a real flow field, say so here, plainly, and say what you shipped instead. Write Nothing dropped. if you delivered the brief in full.

How this is scored

I am going to open the file and read the FPS counter.

Then I am going to compare it against your prediction. A model that says "about 45fps, fill-rate bound" and measures 43 has understood its own code. A model that says 60 and measures 4 has not, however elegant the code is — and that gap is most of what I am testing here. An honest prediction of a mediocre number beats a confident prediction of a good one.

assistant

The plan

All 100,000 particles live in one interleaved Float32Array (x, y, vx, vy) that seeds two ping-pong GPU buffers; after upload, JavaScript never touches particle data again. Each frame, a hand-rolled WebGL2 transform-feedback vertex shader advects every particle through an analytic curl field — the curl of a potential built from four plane-wave octaves whose wave directions slowly rotate and whose phases scroll, plus a turning large-scale wind and a pointer-driven vortex — and writes the new state into the other buffer, so each particle is individually updated on the GPU. Drawing is one additive pass of 1-px points into the default framebuffer; trails come from a full-screen reverse-subtract blend that fades the previous frame toward true black (the tiny subtract term cures the classic 8-bit "ghost trails never reach zero" bug). The FPS/count HUD is DOM text refreshed twice a second from a real windowed average of rAF deltas. The one thing I expect to be the bottleneck: not the particles — total GPU work is ~1 ms, and the single most expensive item inside that is the full-screen fade's 540,000-pixel blend read-modify-write; the frame is vsync-paced, so the display, not the sim, sets the number.

The file

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CURL/100K — flow-field particles</title>
<style>
  :root{
    --bg:#07090d; --line:#1b2531; --ink:#e9eef4; --dim:#5e6f82; --faint:#415062;
    --amber:#ffb454; --teal:#3fd6de;
    --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,"Liberation Mono",monospace;
    --sans:"Avenir Next","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  body{
    min-height:100vh; display:grid; place-items:center; padding:28px 16px;
    background:
      radial-gradient(1100px 700px at 18% -10%, rgba(63,214,222,.07), transparent 60%),
      radial-gradient(900px 620px at 105% 112%, rgba(255,180,84,.06), transparent 60%),
      var(--bg);
    color:var(--ink); font-family:var(--sans);
  }
  .wrap{width:900px; max-width:100%}
  header{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:0 2px 10px}
  h1{margin:0; font-size:15px; font-weight:800; letter-spacing:.16em; text-transform:uppercase}
  h1 em{font-style:normal; color:var(--teal)}
  .meta{font:11px/1.4 var(--mono); color:var(--dim); letter-spacing:.04em; text-align:right}
  .dot{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--teal);
       margin-right:6px; vertical-align:1px; animation:pulse 2.2s ease-in-out infinite}
  @keyframes pulse{50%{opacity:.3}}
  #stage{position:relative; border:1px solid var(--line); background:#000;
         box-shadow:0 24px 80px rgba(0,0,0,.55); transition:border-color .4s, box-shadow .4s}
  #stage:hover{border-color:#25364c; box-shadow:0 24px 80px rgba(0,0,0,.55), 0 0 44px rgba(63,214,222,.07)}
  #stage::before,#stage::after{content:""; position:absolute; width:14px; height:14px;
         border:1px solid rgba(63,214,222,.45); pointer-events:none}
  #stage::before{top:-5px; left:-5px; border-right:none; border-bottom:none}
  #stage::after{bottom:-5px; right:-5px; border-left:none; border-top:none}
  canvas{display:block; width:100%; height:auto; cursor:crosshair; touch-action:none}
  .panel{position:absolute; background:rgba(5,8,12,.8); border:1px solid rgba(120,150,180,.16);
         padding:8px 12px; pointer-events:none; user-select:none; transition:border-color .3s}
  #stage:hover .panel{border-color:rgba(130,170,200,.32)}
  .label{font:600 9px/1 var(--mono); letter-spacing:.24em; text-transform:uppercase; color:var(--dim); margin-bottom:6px}
  #fpsPanel{top:12px; left:12px; min-width:118px}
  #fpsPanel .num{font:700 30px/1 var(--mono); color:var(--amber); font-variant-numeric:tabular-nums}
  #fpsPanel .unit{font:600 11px var(--mono); color:var(--dim); margin-left:5px}
  #fpsPanel .sub{font:10.5px/1.5 var(--mono); color:var(--dim); margin-top:5px}
  #countPanel{top:12px; right:12px; text-align:right}
  #countPanel .num{font:700 19px/1 var(--mono); color:var(--ink); font-variant-numeric:tabular-nums}
  #countPanel .sub{font:10px/1.6 var(--mono); color:var(--faint); margin-top:5px}
  #hint{bottom:12px; left:12px; font:10.5px/1.4 var(--mono); color:var(--faint);
        background:none; border-color:transparent; transition:color .3s}
  #stage:hover #hint{color:var(--dim)}
  #legend{bottom:12px; right:12px; display:flex; align-items:center; gap:8px;
          font:600 9px var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--dim)}
  #legend .bar{width:92px; height:4px; background:linear-gradient(90deg,#0c3f4c,var(--teal) 42%,var(--amber))}
  footer{display:flex; justify-content:space-between; gap:12px; padding:10px 2px 0;
         font:10.5px/1.5 var(--mono); color:var(--faint)}
  .fail{padding:60px 30px; font:13px/1.7 var(--mono); color:#ff8f6b; white-space:pre-wrap}
</style>
</head>
<body>
<div class="wrap">
  <header>
    <h1>CURL<em>/</em>100K</h1>
    <div class="meta"><span class="dot"></span>live &middot; webgl2 transform feedback &middot; zero libraries</div>
  </header>

  <div id="stage">
    <canvas id="c" width="900" height="600"></canvas>

    <div class="panel" id="fpsPanel">
      <div class="label">frame rate</div>
      <div><span class="num" id="fps">--</span><span class="unit">fps</span></div>
      <div class="sub"><span id="ms">--</span> ms/frame</div>
    </div>

    <div class="panel" id="countPanel">
      <div class="label">particles live</div>
      <div class="num" id="count">--</div>
      <div class="sub">state: 2 &times; 1.6 MB ping-pong<br>field clock <span id="ft">0.0</span> s</div>
    </div>

    <div class="panel" id="hint">pointer stirs a vortex &middot; press for a harder kick</div>

    <div class="panel" id="legend">slow <span class="bar"></span> fast</div>
  </div>

  <footer>
    <span>analytic curl of 4 rotating plane-wave octaves + drifting wind</span>
    <span>900&times;600 &middot; additive 1px points &middot; trail fade 0.934</span>
  </footer>
</div>

<script>
'use strict';
(function(){
  const W = 900, H = 600, N = 100000;
  const stage = document.getElementById('stage');
  const canvas = document.getElementById('c');
  const fpsEl = document.getElementById('fps'), msEl = document.getElementById('ms'),
        countEl = document.getElementById('count'), ftEl = document.getElementById('ft');

  function fail(msg){
    stage.innerHTML = '<div class="fail">' + msg + '</div>';
    throw new Error(msg);
  }

  let gl = null;
  try {
    gl = canvas.getContext('webgl2', {
      alpha:false, depth:false, stencil:false, antialias:false,
      premultipliedAlpha:true, preserveDrawingBuffer:false,
      powerPreference:'high-performance'
    });
  } catch(e){}
  if(!gl) fail('WebGL2 is unavailable in this browser/context.\nThis build needs hardware-accelerated WebGL2 (transform feedback).');

  /* ---------------- particle store ----------------
     One interleaved Float32Array: x, y, vx, vy per particle.
     It seeds two GPU buffers; after this the CPU never touches it. */
  const state = new Float32Array(N * 4);
  for(let i = 0; i < N; i++){
    state[i*4]   = Math.random() * W;
    state[i*4+1] = Math.random() * H;
  }
  const COUNT = state.length >> 2;               // count read from the actual store
  countEl.textContent = COUNT.toLocaleString('en-US');

  /* ---------------- shaders ---------------- */
  const VS_UPDATE = `#version 300 es
precision highp float;
layout(location = 0) in vec4 aPosVel;
out vec4 vPosVel;
uniform vec2  uSize;
uniform float uDt;
uniform float uLerp;
uniform float uSeed;
uniform vec2  uDir[4];
uniform float uFreq[4];
uniform float uPhase[4];
uniform float uAmp[4];
uniform vec2  uWind;
uniform vec2  uMouse;
uniform float uSwirl;

float hash(float n){ return fract(sin(n) * 43758.5453123); }

vec2 fieldVel(vec2 p){
  vec2 q = p * 0.0075;
  vec2 v = uWind;
  for(int i = 0; i < 4; i++){
    vec2 d = uDir[i];
    float w = dot(q, d) * uFreq[i] + uPhase[i];
    v += uAmp[i] * vec2(d.y, -d.x) * cos(w);
  }
  vec2 m = p - uMouse;
  float r = length(m) + 1e-4;
  v += uSwirl * exp(-r * r * 0.00011) * vec2(-m.y, m.x) / r;
  return v;
}

void main(){
  vec2 p = aPosVel.xy;
  vec2 vel = aPosVel.zw;
  vec2 fv = fieldVel(p);
  vel += (fv - vel) * uLerp;
  p += vel * uDt;
  if(p.x < -3.0 || p.x > uSize.x + 3.0 || p.y < -3.0 || p.y > uSize.y + 3.0){
    float id = float(gl_VertexID);
    p = vec2(hash(id * 0.0671 + uSeed * 1.31),
             hash(id * 0.1377 - uSeed * 0.77 + 3.7)) * uSize;
    vel = fieldVel(p);
  }
  vPosVel = vec4(p, vel);
}`;

  const FS_NULL = `#version 300 es
precision mediump float;
out vec4 outColor;
void main(){ outColor = vec4(0.0); }`;

  const VS_FADE = `#version 300 es
void main(){
  vec2 v = vec2(float((gl_VertexID << 1) & 2), float(gl_VertexID & 2));
  gl_Position = vec4(v * 2.0 - 1.0, 0.0, 1.0);
}`;

  const FS_FADE = `#version 300 es
precision mediump float;
uniform float uFade;
out vec4 outColor;
void main(){ outColor = vec4(vec3(uFade), 1.0); }`;

  const VS_POINT = `#version 300 es
precision highp float;
layout(location = 0) in vec4 aPosVel;
uniform vec2 uSize;
out vec3 vColor;
float hash(float n){ return fract(sin(n) * 43758.5453123); }
void main(){
  vec2 ndc = aPosVel.xy / uSize * 2.0 - 1.0;
  gl_Position = vec4(ndc.x, -ndc.y, 0.0, 1.0);
  gl_PointSize = 1.0;
  float sp = length(aPosVel.zw);
  float s = clamp(sp * 0.015, 0.0, 1.0);
  float g = 0.8 + 0.4 * hash(float(gl_VertexID) * 0.618);
  vec3 cold = vec3(0.05, 0.28, 0.36);
  vec3 warm = vec3(1.00, 0.60, 0.24);
  vColor = mix(cold, warm, s * s) * (0.05 + 0.09 * s) * g;
}`;

  const FS_POINT = `#version 300 es
precision mediump float;
in vec3 vColor;
out vec4 outColor;
void main(){ outColor = vec4(vColor, 1.0); }`;

  function compile(type, src){
    const s = gl.createShader(type);
    gl.shaderSource(s, src); gl.compileShader(s);
    if(!gl.getShaderParameter(s, gl.COMPILE_STATUS)) fail('Shader compile failed:\n' + gl.getShaderInfoLog(s));
    return s;
  }
  function program(vsSrc, fsSrc, tfVaryings){
    const p = gl.createProgram();
    gl.attachShader(p, compile(gl.VERTEX_SHADER, vsSrc));
    gl.attachShader(p, compile(gl.FRAGMENT_SHADER, fsSrc));
    if(tfVaryings) gl.transformFeedbackVaryings(p, tfVaryings, gl.INTERLEAVED_ATTRIBS);
    gl.linkProgram(p);
    if(!gl.getProgramParameter(p, gl.LINK_STATUS)) fail('Program link failed:\n' + gl.getProgramInfoLog(p));
    return p;
  }

  const pUp   = program(VS_UPDATE, FS_NULL, ['vPosVel']);
  const pFade = program(VS_FADE, FS_FADE);
  const pPts  = program(VS_POINT, FS_POINT);

  const loc = {
    dt: gl.getUniformLocation(pUp, 'uDt'),       lerp: gl.getUniformLocation(pUp, 'uLerp'),
    seed: gl.getUniformLocation(pUp, 'uSeed'),   sizeU: gl.getUniformLocation(pUp, 'uSize'),
    dir: gl.getUniformLocation(pUp, 'uDir'),     freq: gl.getUniformLocation(pUp, 'uFreq'),
    phase: gl.getUniformLocation(pUp, 'uPhase'), amp: gl.getUniformLocation(pUp, 'uAmp'),
    wind: gl.getUniformLocation(pUp, 'uWind'),   mouse: gl.getUniformLocation(pUp, 'uMouse'),
    swirl: gl.getUniformLocation(pUp, 'uSwirl'),
    fade: gl.getUniformLocation(pFade, 'uFade'),
    sizeP: gl.getUniformLocation(pPts, 'uSize')
  };

  /* ---------------- GPU state: two ping-pong buffers ---------------- */
  const bufs = [gl.createBuffer(), gl.createBuffer()];
  const vaos = [gl.createVertexArray(), gl.createVertexArray()];
  for(let i = 0; i < 2; i++){
    gl.bindBuffer(gl.ARRAY_BUFFER, bufs[i]);
    gl.bufferData(gl.ARRAY_BUFFER, state, gl.DYNAMIC_COPY);
    gl.bindVertexArray(vaos[i]);
    gl.enableVertexAttribArray(0);
    gl.vertexAttribPointer(0, 4, gl.FLOAT, false, 16, 0);
  }
  gl.bindVertexArray(null);
  gl.bindBuffer(gl.ARRAY_BUFFER, null);

  const tf = gl.createTransformFeedback();
  const vaoEmpty = gl.createVertexArray();      // fullscreen triangle via gl_VertexID

  gl.useProgram(pPts);  gl.uniform2f(loc.sizeP, W, H);
  gl.useProgram(pUp);   gl.uniform2f(loc.sizeU, W, H);
  gl.useProgram(pFade); gl.uniform1f(loc.fade, 0.934);
  const FADE_DITHER = 1.6 / 255;                // kills 8-bit fade stiction
  gl.blendColor(FADE_DITHER, FADE_DITHER, FADE_DITHER, 1);
  gl.viewport(0, 0, W, H);
  gl.clearColor(0, 0, 0, 1);
  gl.clear(gl.COLOR_BUFFER_BIT);

  /* ---------------- the evolving field (CPU feeds uniforms only) ---------------- */
  const octaves = [
    {f:1.6, a:30, th:0.8, wr: 0.043, ph:0.0, wp: 0.16},
    {f:3.1, a:24, th:2.4, wr:-0.067, ph:1.7, wp:-0.23},
    {f:5.6, a:17, th:4.1, wr: 0.094, ph:3.3, wp: 0.31},
    {f:9.3, a:11, th:5.6, wr:-0.130, ph:5.0, wp:-0.47}
  ];
  const dirs = new Float32Array(8), freqs = new Float32Array(4),
        phases = new Float32Array(4), amps = new Float32Array(4);
  octaves.forEach((o, i) => { freqs[i] = o.f; amps[i] = o.a; });

  let mx = W * 0.5, my = H * 0.5, swirl = 0;
  function pointerPos(e){
    const r = canvas.getBoundingClientRect();
    mx = (e.clientX - r.left) * W / r.width;
    my = (e.clientY - r.top)  * H / r.height;
  }
  canvas.addEventListener('pointermove', e => { pointerPos(e); swirl = Math.max(swirl, 300); });
  canvas.addEventListener('pointerdown', e => { pointerPos(e); swirl = 560; });

  /* ---------------- frame loop ---------------- */
  let cur = 0, simT = 0, last = -1;
  let accMs = 0, accFrames = 0;

  function frame(now){
    requestAnimationFrame(frame);
    if(last < 0){ last = now; return; }
    let raw = now - last; last = now;
    if(raw > 250) raw = 16.7;                   // tab was hidden; don't poison the average
    const dt = Math.min(raw, 50) / 1000;
    simT += dt;

    // honest FPS: windowed average of real frame deltas
    accMs += raw; accFrames++;
    if(accMs >= 500){
      fpsEl.textContent = Math.round(accFrames * 1000 / accMs);
      msEl.textContent  = (accMs / accFrames).toFixed(2);
      ftEl.textContent  = simT.toFixed(1);
      accMs = 0; accFrames = 0;
    }

    // evolve the field: rotate wave directions, scroll phases, turn the wind
    for(let i = 0; i < 4; i++){
      const o = octaves[i], ang = o.th + o.wr * simT;
      dirs[i*2] = Math.cos(ang); dirs[i*2+1] = Math.sin(ang);
      phases[i] = o.ph + o.wp * simT;
    }
    const wa = 0.9 + simT * 0.013 + 0.6 * Math.sin(simT * 0.037);
    swirl *= Math.exp(-dt * 2.2);

    // pass 1: transform feedback — every particle updated individually on the GPU
    const src = cur, dst = 1 - cur;
    gl.useProgram(pUp);
    gl.uniform1f(loc.dt, dt);
    gl.uniform1f(loc.lerp, 1 - Math.exp(-4.2 * dt));
    gl.uniform1f(loc.seed, simT % 1000);
    gl.uniform2fv(loc.dir, dirs);
    gl.uniform1fv(loc.freq, freqs);
    gl.uniform1fv(loc.phase, phases);
    gl.uniform1fv(loc.amp, amps);
    gl.uniform2f(loc.wind, 8.5 * Math.cos(wa), 8.5 * Math.sin(wa));
    gl.uniform2f(loc.mouse, mx, my);
    gl.uniform1f(loc.swirl, swirl);

    gl.bindVertexArray(vaos[src]);
    gl.enable(gl.RASTERIZER_DISCARD);
    gl.bindTransformFeedback(gl.TRANSFORM_FEEDBACK, tf);
    gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, bufs[dst]);
    gl.beginTransformFeedback(gl.POINTS);
    gl.drawArrays(gl.POINTS, 0, COUNT);
    gl.endTransformFeedback();
    gl.bindBufferBase(gl.TRANSFORM_FEEDBACK_BUFFER, 0, null);
    gl.disable(gl.RASTERIZER_DISCARD);

    // pass 2: fade previous frame toward true black (dst*f - epsilon)
    gl.enable(gl.BLEND);
    gl.blendEquation(gl.FUNC_REVERSE_SUBTRACT);
    gl.blendFuncSeparate(gl.CONSTANT_COLOR, gl.SRC_COLOR, gl.ZERO, gl.ONE);
    gl.useProgram(pFade);
    gl.bindVertexArray(vaoEmpty);
    gl.drawArrays(gl.TRIANGLES, 0, 3);

    // pass 3: additive 1-px points from the freshly written buffer
    gl.blendEquation(gl.FUNC_ADD);
    gl.blendFunc(gl.ONE, gl.ONE);
    gl.useProgram(pPts);
    gl.bindVertexArray(vaos[dst]);
    gl.drawArrays(gl.POINTS, 0, COUNT);
    gl.disable(gl.BLEND);

    cur = dst;
  }
  requestAnimationFrame(frame);

  canvas.addEventListener('webglcontextlost', e => {
    e.preventDefault();
    fail('WebGL context lost — reload the page.');
  });
})();
</script>
</body>
</html>

The prediction

FPS I expect — 60, vsync-locked, on a 2023 laptop with integrated graphics (Iris Xe / M1 class) and hardware-accelerated Chrome. The actual GPU work is ~1 ms, so the display sets the number: on a 120 Hz panel the counter will honestly read ~120. If it reads much below 55, Chrome has fallen back to SwiftShader or the OS throttled the iGPU — not the particle code.
Where the time goes — of the ~1 ms of real work: the transform-feedback update is ~30–40% (100 k vertices, ~5 trig ops each, 1.6 MB read + 1.6 MB write), the fade quad is ~35–45% (540 k-pixel blend read-modify-write — the sneakily expensive part), and the additive point pass is ~20%. The CPU spends ~0.2 ms: three draw calls, a dozen uniforms, one FPS tally. The remaining ~15.3 ms of every frame is waiting on vsync. Update and draw are both GPU-resident, which is why JavaScript is nowhere in the budget.
The first thing that breaks at a million — not the sim: transform-feedback ping-pong at 1 M is 32 MB/frame, pocket change for an iGPU, and the CPU still issues the same three draw calls. What gives way first is the additive point pass — a million 1-px points funneling into filaments concentrates blend bandwidth and raster overhead exactly where the ink piles up. On Iris Xe-class hardware I'd still expect 60 fps at 1 M (maybe 2–4 ms of GPU work); the real wall is ~3–5 M, and it's fragment/blend bandwidth, not vertex work and definitely not JS.
What you'd need to go ten times faster — two named techniques: compute shaders (WebGPU, or Vulkan/Metal/D3D12) instead of transform feedback, so the update runs outside the vertex pipeline entirely; and half-float state packing (RGBA16F / rg16f) plus framebuffer fetch / subpass merging to fold the trail fade into the point pass, so the framebuffer is read-modify-written once per frame instead of twice. That combination buys well over 10× headroom — it's how you'd run a million particles at 60 on a phone.

If you fell short

Nothing dropped.

Attachments

qwen/qwen3.8-2.4t-a95b — page