Fully Textured Real-Time 3D Raycaster Engine in roblox!

Help and Feedback Creations Feedback
#1

This real-time raycaster engine you see was made entirely within roblox with no third party tools.
The engine currently runs at 100x100 at about 40 FPS (50 FPS when not recording)

This video is also a tech demo of my latest CanvasDraw rendering module for roblox which allows you to create a canvas and draw pixels to the screen at a desired resolution!

As far as potential future plans go for this project, my first goal is to optimse the pixel calculations used in the canvas so we can get at least 60 FPS at 100x100. Another goal of mine is to implement sprites, which are billboard objects (such as enemies, or items)

Feedback and opinions will be greatly appreciated as always!

@CoderHusk you may find this one interesting

19 Likes
#2

Nice as usual, I’d really love to see a complete game utilizing this, even if it’s short story-wise. :+1:

1 Like
#3

That’s awesome. IDK how you reached 40+ FPS, bc when I tried make 2D game, it start lag when 64 imageLabels objects are moving (but you have 1000 frames, which are changing every time). Incredible.

1 Like
#4

the performance aint much doe. BUTT

you playing minecraft… i like ya cut g.

also how da hell u made it?

1 Like
#5

the trick hidden under the hood here is a neat little frame compression method that uses UIGradients to represent 10 or more pixels in one frame. Instead of 1 frame for a pixel…

To put it in perspective, if you had 1 frame for every pixel at 100x100. That would be 10,000 frame instances. (Which is alot of instances to load and render every frame)

But with the UIGradient method, you can easily reduce that frame count down to at least 1,000 frame instances (which is waaay faster), and with a compression/greedy meshing algorithms, you can reduce that further to a minimum frame count of just 100 frames!

So yeah, special thanks to @repgainer3 that sparked these compression methods

1 Like
#6

Well, it’s a long story, but to put it simply, I basically reinvented computer graphics, but for roblox.

I had to make my own 2D pixel-based game engine and find out how to project the world in a 3D-like matter.
To do this, I had to chose how I would project a 3D world. I could use traditional polygon rendering and texture mapping, but that would be way to expensive to do in real time. So instead, I made a Raycaster Engine which allowed me to create this textured real-time beauty!

#7

didnt understand anything but ok!

1 Like
#8

First and foremost, good to see you’re still very active since I last saw you in my script builder days, and secondly, looks great.

Your plans are pretty solid, optimization is optimization in this case and even micro optimizations add up when you’re dealing with a computational workload like this.

1 Like
#9

This is awesome! I can’t wait to see this in game!

1 Like
#10

IK this

but I have just 64 frames which are changing their position, size and rectOffset. And they are lagging - when they are moving, FPS falling down to 5-10 for 0.2-0.5 seconds. And I tried make a lot of things, even check how much times per frame they are moving - each frame moved only once.

1 Like
#11

Ahhh I can’t resist posting it…
I must… Nah I don’t need to resist it.

Here’s some images from my Part-based Image loader. It only has Greedy compression on either Rows/Columns, not both (I honestly couldn’t find a way to do so practically):

Random image someone sent me

Full Resolution image (No compression)

RobloxPlayerBeta_Kla0C3tVGr
RobloxPlayerBeta_Kla0C3tVGr1920×1017 83.7 KB

Full Resolution image (Compression)

RobloxPlayerBeta_p7nzCHBAS6
RobloxPlayerBeta_p7nzCHBAS61920×1017 83.4 KB

RTX 2080 Ti Reference Board Render (Rendered in Blender then uploaded to my server for this)

RobloxStudioBeta_44ysGCfY7e
RobloxStudioBeta_44ysGCfY7e1646×681 128 KB

Close up of the rendered parts

RobloxStudioBeta_EVG0183g82
RobloxStudioBeta_EVG0183g821646×681 440 KB

Blender Render of an iPhone 11 Pro Max

Full Resolution Image (No Compression)

RobloxStudioBeta_ICUzT4EBIP
RobloxStudioBeta_ICUzT4EBIP1646×681 428 KB

Full Resolution Image (Compression)

RobloxStudioBeta_SLMsSAJJsC
RobloxStudioBeta_SLMsSAJJsC1646×681 417 KB

Random Image from Google

RobloxStudioBeta_Du6nYh8rYh
RobloxStudioBeta_Du6nYh8rYh1646×681 122 KB

An image I used for showing images with Text, along with what the commands look like.

RobloxStudioBeta_mlNWoZdxVA
RobloxStudioBeta_mlNWoZdxVA1646×681 436 KB

PS: Feel free to tag me like CoderHusk whenever you post something related to the topic of image processing/rendering, I’m also intrigued. :smiley:

1 Like
#12

Extremely cool stuff! May I ask, how long it takes to render those images? Those are quite high quality images.

Noted c:

#13

Longest render time I ever experienced was a little over a minute? Typically though it’s well under a minute.

Most of those should have the chat on the side, which shows debug info, including the “Time to render”

Easiest to see is I believe the first image under “Random image someone sent me”
Just look at the chat in that one, and I’d like you to note the difference between its render time and the compressed one below it, as well as the finalized pixel count (Optimized pixel count) (Since the difference is very small, even though they differ greatly in pixel count)

1 Like
#14

wow that’s very impressive for something part-based compared to other ones that i’ve seen (that can take 2 minutes or more for something at 400 or 500p)

#15

All parts are put into an array, their properties are set (Size, CFrame, and Color) and then later they are parented to the Render container.

The parts are all Transparent on the server, and are made visible on the Client.

Parts do not Collide, and they have CanTouch/CanQuery/CastShadow disabled.

There is a stepped waiting system, and there’s 256 steps (regardless of how many pixels there are)

local Normal = floor(sizeof(Temp)/256)
...
if Index%Normal == 0 then
  Stepped:Wait()
end
1 Like
#16

I’ll be riding the high of inventing a new processing procedure that people actually use for the rest of my life.
<3

1 Like
#17

Incredible. I have a feeling some people in the comments don’t understand how impressive this is considering they may have never attempted this. We all know, me and Ethan and a few others, about the optimizations of occlusion culling, frustum clipping, and gradient meshing however remember everyone that we are working in a cpu environment! Try the benchmarks for yourself, the optimizations are actually slower in this serial environment! So the REAL question isnt askiung the fastest way to render, it took my rasterizer milliseconds to compute it but the real optimization comes and this goes with any rendering technique featured on roblox, the way to hack and exploit the roblox engine to output images performantly. I have tried using part caches but the problem is they use so much memory. It was impossible to add to my method as the image storing method I was using was taking up loads of memory aswell!

3 Likes