Made an Image Renderer

I made an Image Renderer system using HTTPService and the PIL Python library. It takes every existing pixel from the image given and then gets the Color3 values from it, then being inserted into roblox for coloring the canvas.

Example:

I’ve actually released this to the public, if you wanna change some code or use it for something else.

If you ever use it, have fun!

16 Likes

Could you make it a model, I don’t use GitHub but this would be useful.

3 Likes

This is really cool! Good job! :+1:

Sorry, I can’t make it a model due to the GitHub page being extremely important for following how to make it work.
There’s an example place file in the GitHub page that you can check out, though.

Late response, apologies for the bump but is there any way to render videos with this? I’m trying to render game intros onto a billboard but I don’t really know how to make progress on it

This is old and unoptimized code, and it may lag a lot if you try to do this. I would suggest not using this, but instead using ImageLabels and ImageRectSize/Offset to render game intros.

1 Like

Alright, thanks for the tip!

30 limit

Actually, this brought up an idea

Instead of normal lua, you could use parallel lua which is waaay faster and that + imagelabels would massively increase performance

Hahaha just saw this. It was made in 2020?? I thought I was the first one to do this…

This is what I have so far, first I’m trying to use imagelabels to render images, later videos but it errors.

local ReplicatedStorage = game:GetService("ReplicatedStorage")
local HTTPService = game:GetService("HttpService")

local Remotes = ReplicatedStorage:WaitForChild("Remotes")
local Binds = ReplicatedStorage:WaitForChild("Binds")

local WaitModule = ReplicatedStorage:WaitForChild("WaitModule")

local Finished = Binds:WaitForChild("Finished")
local Request = Remotes:WaitForChild("Request")

local Site = "https://http-stuff.zzq.repl.co/GetSize"
local Screen = workspace:WaitForChild("Screen")

local SmoothPlastic = Enum.Material.SmoothPlastic

local C3RGB = Color3.fromRGB
local INew = Instance.new
local V3New = UDim.new
local V2New = UDim2.new

local format = string.format
local ceil = math.ceil

local up = unpack
local r = require

local Wait = r(WaitModule)

local function Load(Size, Offset, X, Y)
	local NewSize = V3New(1, 1) * Size
	local Pixels = {}
	
	local Div = Size / 2
	
	for PosX = 1, X do
		for PosY = 1, Y do
			local Subtract = V3New(X * Div, Y * Div)
			local VectorPos = V3New(PosX * Size, PosY * Size) - Subtract
			
			local Name = format("%s:%s", PosX, PosY)
			local NewX = PosX * Size
			local NewY = PosY * Size
			
			local ImageLabel = INew("ImageLabel")
			ImageLabel.Position = Offset + VectorPos
			ImageLabel.BackgroundColor = C3RGB(255,255,255)
			ImageLabel.Name = Name
			ImageLabel.ImageTransparency = 1
			ImageLabel.BorderSizePixel = 0
			
			ImageLabel.Size = NewSize
			ImageLabel.Parent = Screen.ScreenPart.SurfaceGui
			
			Pixels[Name] = ImageLabel
			
			--local Part = INew("Part")
			--Part.Position = Offset + VectorPos
			--Part.Color = C3RGB(255, 255, 255)
			--Part.Material = SmoothPlastic
			--Part.CanCollide = false
			--Part.Anchored = true
			--Part.Size = NewSize
			--Part.Name = Name
			
			--Part.Parent = Screen
			--Pixels[Name] = Part
			
			if PosX % 2 == 0 and PosY % Y == 400 then
				Wait:Wait()
			end
		end
	end
	
	return Pixels
end

local Data = Request:InvokeServer(
	Site,
	"GET",
	{
		["Content-Type"] = "application/json";
	}
)
local Body = Data.Body

if Body then
	local Decoded = HTTPService:JSONDecode(Body)
	
	print(Body)
	local Increment = Decoded.Increment
	local PosTable = Decoded.Offset
	local SizeTable = Decoded.Size
	
	local Division = Increment >= 1 and Increment or 1
	

	
	local Size = V2New(up(SizeTable)) / Division
	local Offset = V3New(up(PosTable))
	
	Size = V2New(ceil(Size.X), ceil(Size.Y))
	
	warn("Loaded HTTP variables")
	warn("Size:", Size, "\nIncrement:", Increment)
	
	Wait:Wait(3)
	
	warn("Loading canvas")
	
	local Pixels = Load(Increment, Offset, Size.X, Size.Y)
	Finished:Fire(Pixels)
	
	warn("Event fired")
else
	warn("Couldn't load size")
end   

errors on “local Size = V2New(up(SizeTable)) / Division”

Error:
attempt to perform arithmetic (div) on table and number

I printed the table but that just prints “table: 0x8aa3f7abf5fb5cc2”

this is the localscript in starterplayerscripts called “ScreenBuilder” by the way

Using ImageLabels to render videos is a bad idea, unless you mean ImageRectSize/multiple images. You still should not use this code to create a canvas and render pixels.

1 Like

you could integrate this to turn the bitmap (since u said PIL so im assuming asarray()) into a lua multi array. I actually had made this for my renderer. Also @solvuntur I don’t know if you already realized this but most people just put the video into a textureatlas and scan through it. Some advanced methods have come about where you use the bit32.replace() method to put the 8 bit size color texel into 32 bits of the 64 bit number. Then you just convert that to there. He hasn’t released it but it is probably what this dude who made bad apple in roblox did. Of course, you could also just do what I did and just put it into a lua array. Fact is changing the pixel color is relatively fast, what makes most of these imaging programs in roblox slow is that people try and do ray tracing with it

3 Likes

This code’s really outdated and I haven’t really done much with it, but very useful knowledge

i want to put a different image on that but i idk which replit does it use.