Custom 3D GUI Game Engine With Textures

I am trying this thing out as soon as I get on my computer in the morning!
Bet it would be possible to create a awesome Puppet Combo game remaster.

Great job! :+1:

1 Like

huh. Well I finally got your formula to work, but I get the exact outcome as using my other method. Which means curve on the outside.

local Distance = (ViewRayOrigin - ViewRay.Position).Magnitude

-- Remove that fisheye effect		
local RayAngleX, RayAngleY, RayAngleZ = RayAngle:ToEulerAnglesXYZ()	
local CameraAngleY = math.rad(-CameraPart.Orientation.Y)	
			
Distance = Distance * math.cos(RayAngleY - math.rad(CameraAngleY))

Is there a way to fix this without changing the viewport size?

Okay just had an idea.
Aside fomr keeping your FOV low, you could possibly simulate a wider viewport but only display the box.
That would remove the effect.

Although now that I’m thinking about it, that’s literally just the same as keeping your FOV low.

Even with low FOV there is still slight distortion on the edge of the screen.

I feel like we could use math.sin() to fix this issue somehow.

I honestly don’t see the issue.

With an FOV of 60 the distortion should be dismal and only in corners.

If you are using textures, the distortion is a lot more obvious. But since your walls are plain, its hard to tell unless I outline it.

even then, 60 FOV for me has greater distortion than yours.

weird…

Can I get a picture of your renderer with 360 fov?

Sure sure!
My renderer btw is just like 50 lines of unoptimized ray casting etc. Very very basic just wanted to put this together to help you.

Yeah haha mine doesn’t do 360 fov really. Update, apparently mine thinks that 180 is actually 360.

Here’s mine at 180 fov which is the max apparently for mine.

Are you doing this in a square room?

Because if so, then for some reason the math.cos thing makes my picture look like this:

So, in a square room mine looks the same as your just about, or at least it would if my math were right.

This may look strange but really it’s the same as yours, but for some reason my pixels are no longer sticking to the center of my screen, and also the pixels on the eldes of the screen won’t show but im certain if they did they would look like yours.

How are you positioning your columns?

I’m using a UIListLayout and setting their vertical allignment to center. It’s weird that it’s deviating from that when it’s a built in UI constraint.

huh. weird.

I position mine manually since I’ll be releasing multilevel maps soon.

I’m curious to see how that will work.
In the mean time though, I don’t have your source code but through the behavior I can assume a few things.

Number One:
I can assume that based on the still pixelated hard edges you aren’t performing a typical rasterizer texture display. No you still have each cell as individual.

Number Two:
Based on number one I can assume that because you still have pixels that each pixel is displaying a segment of a texture, and shifting it. Now based on that I can assume one of two things is true.

Either you’ve created a body for each pixel and an ImageLabel inside, something that has ClipDescendants, so most likely a Frame, or every pixel is it’s own ImageLabel and you’re doing fancy math to set their slice scale apropriately.

This is what I wanted to touch on, assuming you’re doing this the first way I described, I think your engine could get a huge memory and fps boost by removing the container and having each pixel be it’s own ImageLabel.

What do you think?

1 Like

I actually don’t use pixel-based rendering (since we have GUI objects such as Frames and ImageLabels). Instead, i use column based rendering (which is much more efficient than having over 10x the amount of frames you actaully need).

And yes, I do use ImageLabels inside Frames to show portions of the texture for each column

image

As far as I am aware, there’s no way to zoom in on a certain part of an image label and cropping it (without parenting it to a frame). If there is an effective way that isn’t too difficult to work with, please let me know!

By pixels, I am refering to the columns, so yes.

Also yeah you can totally zoom into a specific part of an ImageLabel.

  1. Set the ImageLabel.ScaleType to Crop.

  2. Set the ImageLabel.ImageRectSize to some decently high resolution, but make sure it keep the aspect ratio of your texture. (e.g. if your texture is 500x500 set this to 1000x1000) Or better yet you could get the exact height of the screen in pixels, and then set it like that, so let’s say the texture is 500x500, and the screen is 1080 pixels. Then set the ImageLabel.ImageRectSize to 1080x1080. Keep the Y the same, but make sure the X follows the aspect ratio. So if your texture is 400x500 and your screen is (for simplicity sake) 1000 pixels then set this value to 800x1000. A lot to get into about how to make this the most efficient, but for simplicity, just make it a large number while maintaining the aspect ratio of the texture.

  3. Now all you have to do it change the ImageLabel.ImageRectOffset, it is anchored to 0.5, 0 since we’re in crop mode and so if you set this to 100, 0 you will effectively displace your image by half the size of the original resolution plus 100 pixels. It will also occlude the edges, removing the need for a Frame.

1 Like

Wow. I never knew you could do that.

I’ll definitely try this out for sure this week!

Though if this is all resolution specific, i will have to reupload most of my textures to be the same resolution (which will be 2048 x 2048)

I chose this resolution because my newer textures are 128 x 128. But since roblox blurs images instead of pixelating them, I have to times that resolution by 16 which will make the image look much cleaner.

1 Like

I set up a demo, here’s it responding to the Camera’s Y orientation:

Here’s the script:

game:GetService("RunService").RenderStepped:Connect(function(Delta)
    local Height = game.Players.LocalPlayer:GetMouse().ViewSizeY
    local X, Y, Z = (workspace.CurrentCamera.CFrame - workspace.CurrentCamera.CFrame.Position):ToEulerAnglesYXZ()
    script.Parent.ImageRectSize = Vector2.new(Height, Height)
    script.Parent.ImageRectOffset = Vector2.new(math.deg(Y))
end)

The hirarchy:
image

5 Likes

Oh wow. I can’t believe I only discovered this method just now.

This method will definitely increase framerate and memory by twice as fast as before!

Thank you. You are truly a beast at optimization!

2 Likes

This update brings a bunch of new features to improve the graphics of the raycaster. Such as;

Most of these updates take place in the new map, ‘Castle’, which can be obtained through the settings menu:

Feedback will be greatly appreciated as always. And stay tuned for more updates!

1 Like

Its great! I’ve found a bug that when changing the render to anything lower than 50 it makes the game looks weird, putting it back to 50 still doesn’t work.

1 Like