Proof Of Concept - Using Pixels To Display Images

DISCLAIMER: Do NOT use this in your games! This is intended for learning purposes only

Yes, this is what you think it is. Don’t bash me in the comments, it’s a concept and won’t work out of the box as it requires some setup.

I planned out this idea a week ago and finally decided I might as well go through with it.

Simply put, you upload an image to the locally-hosted webserver, get a UUID, put the UUID into the plugin and choose the SurfaceGUI, and press create. The image will display as pixels on the SurfaceGui.

The purpose of the webserver is to get the color pixels as you literally can’t do this in Roblox (raycasts don’t return color-at-spot-of-contact, etc).

Explained ^
  1. Upload an image
    Screenshot 2022-02-26 234943
    Screenshot 2022-02-27 123801

  2. Get the UUID
    Screenshot 2022-02-27 123753

  3. Put it into the plugin and adjust some settings (the number box means scale, the middle button will set the GUI to the currently selected object in the workspace, and the bottom button makes the image)

  4. Your image is made.
    Screenshot 2022-02-27 123731

Source of this concept:

What inspired me to go through with this idea and actually make & release it:

14 Likes

This is someone who has done a very good job at this, check it out:

(Btw, this is with video)

3 Likes

Here’s the difference between mine and theirs:

You still have to upload the images through moderation to display them. With mine, you don’t. This is why I marked this for “should not be used in games”.

1 Like

Neat! I was actually thinking about this concept just a couple days ago, what a coincidence!

1 Like

Number one:

And also, there is another person who did this for images:

I was able to do this with it:
image

3 Likes

The lag would be pretty bad though! Since you need so many frames… Brr, me making a raytracer be like 100 gigs ram usage

1 Like

Yeah, it tested it on a 37x34 image, HD and 4K images would be near-impossible due to memory limits.

2 Likes

Not the first time that something like this has been made, just never publicised.
https://www.roblox.com/games/3917247723/
https://www.roblox.com/games/6047892253/

1 Like

I’ve seen something like this earlier. I see this type of thing becoming more popular, nice job!

I only imagine if someone managed to store individual image files within a file in a form of a UUID to make a video. Problem is that youll have to request the server for a new frame. Or stream the video from a hosted server to roblox by requesting it every frame. But it all depends on how its done, i would do it in a similar manner but with a reduced resolution of 400-200 pixels for each frame. But idk really, seems like a good way to make a video streaming system for your own game.

1 Like

I’ve been working on that :wink:

Its possible, it could most likely be done with the same way the op has done this, but it would probably be super low resoluion and would be like 10fps

If i am correct, if i use replit to save an image with an UUID and save it to a folder which is meant to be an anchor for a video.

Too bad my brain hasnt completely learned python, so making this possible is a stab in the eye.

However i would say splitting each image frame into pixel packets would be a viable option.

Using the power of my pc and patience. I have managed to render a 1080p image and a 1440p image. (Scripts won’t be open source since it can be abused - can show videos.)
Most of this was done through c++.
1440p


1080p

Tried to make this one with depth. (As you can see, it’s can be abused)
https://gyazo.com/c67aad42457833aa0a4c9da58cb97a9e
Ram Usage:
image

7 Likes

Are you not worried about getting your account banned for creating TOS breaking functionality?

Will you feel bad at all when little kids are exposed to inappropriate content due to your shared code?

You can’t control what people do with your code but you are helping enable workarounds to image moderation. (which seems like an incredibly bad idea)

Don’t do this (but here’s the git repository for how to do it).

Can I know how many instance count you have when the image has finished rendering?
And do you use GuiObject or do you use BasePart?

I did make something similar except that I made a python script to parse images and turn them to Lua tables and I would need to embed those inside the game on a modulescript, then a normal script parses the modulescript and renders the image

Unfortunately this used GuiObjects and I keep getting hit with Roblox’s limitation

If you read my post, you’d see this is a proof of concept, not a ready, working-out-of-the-box resource. It also isn’t technically TOS breaking since it is theoretically possible to manually make frames yourself with nothing but Studio to mimic an image.

I’m not trying to control it, naturally, I can’t. I added a disclaimer multiple disclaimers because you obviously shouldn’t use it in your games unless you do want to get banned. In addition, as others have already pointed out, this exists already. Don’t know why you’d pick on the fourth or fifth post of something like this.

Also, if anyone competent spent around thirty minutes trying to do this, they could easily achieve the same result or better.

1 Like

I like your effort, but using GUIs is a no-go for image renders in roblox. They’re not efficient at all and there’s a limit to how many gui instances can exist on your screen at any given time.

Now as for how to go about it better? BaseParts and color-blending your run-length data into EDIT: less* parts that are longer with averaged color values. Here’s an old screenshot of my renderer (not even hosted locally, it’s just that efficient. It uses JS as a backend.)


That image was Full HD, 1920x1080 but was optimized to cut that pixel count down to just 29% of the original.

3 Likes

What do you mean by color-blending?