Is there a way to render (potentially millions of) pixels without major performance issues?

I want to render vector graphics for crisp, clean interfaces in VR, since SurfaceGuis are limited to a maximum of 1024x1024 pixels. This does not hold up to close inspection. I also want to generate my own assets programmatically (for radial menus and etc) rather than having to upload image textures for every permutation (i.e. number of items in radial menu).

However, Roblox as an engine does not seem to give me the capability to push many pixels without serious performance issues. I haven’t yet reached the bottleneck of what is possible with Luau - because the bottleneck of “how do I even display these pixels on screen” is so severe.

So far I’ve tried two things:

  • Creating a Frame for each pixel. This works only for tiny icons (50x50 or so), but isn’t scalable, becuase calling so many times quickly becomes a huge bottleneck. Additionally, parenting a ScreenGui with that many instances just straight-up hangs the client while the engine processes it. Once everything is created and parented, performance is not that bad. But with a 500x500 canvas, it takes a few minutes to create all the instances, and then trying to parent the ScreenGui completely crashes the client.

  • Tricking a TextLabel into rendering each character as a “pixel” (using a monospaced font and a text size of 1). This is faster to create and parent but causes huge rendering issues because, well, you know… Roblox has to render hundreds of different TextLabels each containing thousands of characters, and rendering characters is many times more complex than rendering rectangles. This is incredibly wasteful when each character is basically a pixel. And also when you have enough TextLabels, they stop rendering, making this impossible to scale regardless.

So I can’t do either of those. Is that it then? Is there even anything left to try?

1 Like

I would say it’s impractical, who would look at an super duper high quality image while going to 5 fps? Also imagine how tedious it is to clone 1 million pixels. Imagine the lag. Well then even remove it

I recommend just deal with it

That’s what I’m requesting help with.

I wouldn’t be cloning this. I would only use 1 layer covering the screen.

Hm, the only thing I can possibly think of to counter this is if you hosted your own server, send HTTP requests to said server to make it create an image, and somehow automatically uploading said image to Roblox, get its asset ID somehow, and then put it into your ScreenGui.

However, the biggest hang up would be somehow figuring out how to automatically upload images to Roblox and then get their IDs.

okay but what if you want multiple images

I’m pretty sure there isn’t a way. Just think about it, how could you optimize 1millionpixels, maybe deduce it a little or use greedy canvas instead

I would render them one after the other?

1 Like

You don’t understand his system, he will use a server and send the pixels to the Roblox server, and the script will draw the 1 million pixels since Roblox only allows 1024x1024 images

The biggest hangup would be the ridiculous latency that like 3 or 4 roundtrips would cause, plus I think the images wouldn’t show up until they were moderated.

1 Like

That’s fair, but anyway you slice it, you are probably going to have to do some hacky, less-than-ideal method that sacrifices some form of performance/resources.

Would you be able to use several GUIs tiled together, each 1024x1024? Capturing from them might be a little odd.

1 Like

Alternatively, I am sure there are some pixel-compression module scripts on the Devforums that will sacrifice precision of your images, but will increase performance significantly.

Or, you could look up image compression techniques and try applying them to your own canvas. This is probably very difficult to do, however.

Or, another idea is to decrease the resolution of your canvas.

That could work. Since the resolution is independent of how big the part actually is.

1 Like

You could tackle capturing it by having another GUI over the top of the ones you’re using for graphics and having invisible TextButtons on-top of what looks like a button capturing input

1 Like

No there is not. Especially when it’s a large amount
Here I made a proof of concept for trying to have a second camera on screen.
Note, my recording was perfect, it really was that laggy

Roblox can’t handle anything more than about 65,000 gui object on screen. Any more than that you’ll actually crash core gui.

You could use a viewport frame, however, it’s still not very fast as you can see here