detect-gpu VS webgl-rock-pillars

It's not really what you're asking, but I made both https://www.tentacular.com/ and https://www.stickittothestickman.com/ with a non-three-js fallback using detect-gpu (through drei).

Maybe try detect-gpu to conditionally switch from three.js or a webm fallback? Shame there isn’t really a well supported way to do GPU detection until WebGPU rolls out.

Article explaining rendering+generation of scene: https://medium.com/@keaukraine/floating-islands-webgl-demo-3bba99a004ee Source code on GitHub: https://github.com/keaukraine/webgl-rock-pillars

To make an impression of an endless random scene there were 2 options: a true random scene and a looped generated path. The first option requires object placement on the fly in front of the camera which means these positions have to be transferred to GPU dynamically. So a better option is to generate a static looped path once and draw objects along it as the camera moves. You can find a function to generate a base spline in the positionOnSpline function in ObjectPlacement.ts file. It creates a circular looped path for the camera with oscillating radius. A couple of harmonics are applied to randomize the circle radius so it appears random but is still perfectly looped. Then, all objects are placed around this path - trees are under the camera, rocks above and to the sides.