P5 in WEBGL crashes Chrome

Hello,

let me first give you a minimal example that will crash Chrome on my PC (Windows 10, RTX 3080Ti, Ryzen 9 5950x).

function setup(){
    createCanvas(windowWidth, windowHeight, WEBGL);
}

function draw(){
    background(0);
    
    noStroke();
    fill(255);
    for(var k = 0; k < 1000; k++){
        ellipse(random(-width/2, width/2), random(-height/2, height/2), 13, 13);
    }
}

If I run this in Opera, it works fine.
If I run this in Firefox, it works fine.
If I run this in Chrome, it starts fine, but after a few seconds the entire browser gets more and more unresponsive, and if I leave it running for a few more secs, I have to kill it using the task manager.

IMPORTANT detail, if I set the number of circles in the for-loop to e.g. 100, instead of 1000, it works fine, so I guess somewhere between 100 and 1000 there’s some kind of a “barrier” that exhausts some resource (I haven’t noticed anything unusual when looking at RAM/CPU/GPU though).
And it’s weird because it only happens in Chrome, in WEBGL mode, on my PC. If run this in Chrome on a Mac, it works fine, and if I use any other browser on PC, it also works fine.

Has anyone noticed something like this?

1 Like

It runs fine in Chrome version 104.0.5112.79 (Official Build) (arm64) on my MacBook Air (M1, 2020) with Monterey version 12.4, producing a nice dazzling display of ellipses, so I decided to see how far the loop can be pushed.

With this loop header, it still works:

    for (var k = 0; k < 10000; k++) {

But this fails, producing only a white canvas:

    for (var k = 0; k < 100000; k++) {

The same results occur with Safari.

EDIT:

But, funny, if I reduce the size of the ellipses, this works:

    for(let k = 0; k < 100000; k++){
        ellipse(random(-width/2, width/2), random(-height/2, height/2), 4, 4);
    }

That is with Chrome, as described above. So it appears that it might be roughly related to the number of pixels drawn during a frame.

What happens on your Windows system if you reduce the size of the ellipses and run it in Chrome?

Are you sure it fails? It might be that circles fill the entire screen, rendering it white. :smiley:

Anyway, thanks for the feedback, I think this particular setup (chrome/windows/rtx/…) is the issue, but am not sure why.

1 Like

Good point! In fact, this works, albeit slowly:

    for(let k = 0; k < 1000000; k++){
        fill(random() * 256);
        ellipse(random(-width/2, width/2), random(-height/2, height/2), 10, 10);
    }

EDITED:

255 → 256 in this line:

        fill(random() * 256);

If I set the number to something like 100, it works fine, but if I increase it to 1000 (the limit is somewhere between 100 and 1000 I guess) it starts to get slower and slower and Chrome chrases. The other browsers work fine.

1 Like

So, evidently, your hypothesis is correct …