Problem with properly rendering geometry objects on Chrome

Questions
1

Hi,

I have created sphereGeometry object and I render it dynamically on screen with the data from my data file. The problem is first 4 from 20 do not render, actually, they render but only the white square with the sad emoji. The rest of them (16) render as they should. Sometimes, very rarely, after refresh happens that some other 4 objects(spheres) do not render properly and the first 4 do render as they should. This only happens in Chrome, on Firefox works as it should. I have found some topics about this but haven’t been able to fix it. What am I doing wrong? Has anyone had a similar issue? Here is the link to codesandbox EXAMPLE

Thanks,
SinisaM.

2

I’m not a R3F-er, so I cannot say how to fix it, but the console log says:

image

Your program creates too many canvases (with individual WebGL context for each of them) and this hits the browser limit. I’m not sure whether your program needs separate canvases, but would it be possible to have only one canvas with the spheres as objects inside this canvas?