Share your repls and programming experiences

← Back to all posts
FOUR DIMENSIONAL rendering engine in WebGL!
fuzzyastrocat (1841)

Note: Open the repl in a new tab, it won't work if you don't

Wait, how does that even work?

If you're completely unfamiliar with this concept, this is a very hasty introduction so I'd suggest doing some outside research. (Check out this video for starters.)

First off, by "fourth dimension" I don't mean time — I mean an imaginary, fourth spatial dimension, another direction to move in. We don't have this in our universe (we can only move up/down, left/right, forward/back), but computers don't care about reality and can simulate a fourth dimension just fine. All it means is adding a fourth coordinate to a point: instead of x,y and z, we now have x, y, z, and w.

Of course, in practice things get a bit more complex. Since we don't actually have a fourth dimension in our universe, how do you display a 4 dimensional object? The simplest way (conceptually that is) is to use slices; this is the method that I've taken with this renderer.

To explain, let's imagine you're a 2D hand-drawn stick figure trying to view a 3d orange. Since you're 2D, all you can see is what's on your piece of paper (you can't look "out" of the paper into the 3D world). So how do you view the orange? Well, cut up the orange horizontally into a bunch of circular slices, and then you can place each slice on the paper, one at a time, to "construct" an image of the orange in your mind.

This is exactly what I've done here, except instead of cutting a 3d object up into 2d slices I've cut 4d objects up into 3d slices. Then, you can view each 3d slice of the 4d object just like a normal 3d rendering.

Stop babbling I want to see in 4D

Okay okay, here's how you can use the repl:

  • You can move around the little red cube with WASD and rotate the camera with Q/E
  • Use J/K to move through the 4th dimension; this is effectively moving where you are "slicing" the 4D scene

The loaded scene contains a bunch of randomly-generated 4D rocks in a garden. The garden is either sandy or grassy, depending on where you are in 4D space. (In our world, this would be like having a garden split in half with one side being grass and the other side being sand.) Notice how the rocks morph around (and even appear to "float" in the air sometimes)? These rocks are in fact completely still! This is actually just a product of seeing different "slices" of a static 4D object. Back to our stick figure with the orange: by moving the slicing position, you'd see the orange's circular slice appear to "grow" and "shrink". This is best represented in a picture:

Notice how when the sphere is sliced in different places, the dotted circular slices are different sizes. This is exactly what is happening in the 4D rendering, except it's 3D slices of 4D objects appearing to change size.

Why is it all pixelated though?

This brings me to my conclusion, and the reason that I'm posting this in the first place. The renderer uses raymarching, which is sort of like raycasting's big brother if you're familiar with such a system. Basically, the renderer determines what color to render at each pixel by sending out a "laser beam" which hits the object and finds the color. Unfortunately, as it turns out this system really can't perform well on any significant scale since it has to do too much checking for intersection. This led me to lower the pixel count, so it would not have to send out as many laser beams — but even still, anything over about 20 objects is basically unusable. There might be some kind of hidden optimization possible, but I've struggled to find anything as the system is fairly barebones as it is.

So, sadly, after finally getting the renderer to work I'm going to have to abandon it since it's just not performant enough to be usable.

Wait, usable for what?

You'll just have to wait until I make a tetrahedral renderer to show you :)

Hope you enjoy!

Comments
hotnewtop
DynamicSquid (4914)

This is so cool! Even just the description is really cool!

Bookie0 (6271)

@DynamicSquid mhm lengthy descriptions are pog pog pog

SilvermoonCat (435)

this looks fun but it's only ever 1 fps on my computer D:<

fuzzyastrocat (1841)

@SilvermoonCat Yeah, that's the performance issue I mentioned in the description. Some people with really good GPUs have gotten it at full 60fps, but for most it's about 20-30fps and for some it's really really low (0-6fps).

But don't be discouraged, the tetrahedral renderer won't suffer from the same issues!

SilvermoonCat (435)

@fuzzyastrocat on my iPad it’s 60 but the whole screen is yellow

sojs (341)

for me its 5!! Haha :) @SilvermoonCat

Soccer135246 (7)

@fuzzyastrocat mine was stuck at 0-3 FPS...

WYLDYR (0)

@fuzzyastrocat it runs 144 fps on my system
edit: right now i have a 1660 and a ryzen 5 2600

fuzzyastrocat (1841)

@WYLDYR Hm... if you're not joking then that's actually a bug with requestAnimationFrame, it should only run at 60fps max :)

WYLDYR (0)

@fuzzyastrocat yeah, for whatever reason, it’s running really well on my end

ZarmDev (47)

@SilvermoonCat It's wierd that my computer is 6 years old but it ran well with youtube picture in picture and I got 17-18 fps. I guess my computer is good? idk

TheTranscendent (6)

Higher dimensions are awesome. Do you mathematically convert a slice of a 4d object into a 3d object before rendering?

fuzzyastrocat (1841)

@TheTranscendent Thanks! No, I'm using raymarching. Basically, the "laser beams" (see talk post) are sent out in whichever way the camera is facing, and not moving at all in the fourth dimension. This ensures we see only the 3D slice of the fourth dimension at the position we are at (since the beams don't move "forward" or "backward" in the fourth dimension), and from that point the raymarching is pretty standard.

I think what you're thinking of is the technique that's going to be used in the tetrahedral renderer, rasterization.

pzrepl (0)

@fuzzyastrocat DANG my computer has mx230 nvidia gpu and it took up 100% gpu!

fuzzyastrocat (1841)

@pzrepl Yeah, it's definitely hungry :)

patelr (4)

petty cool, although there could be better graphics.

fuzzyastrocat (1841)

@patelr If you read the post, you'll understand why everything is so pixelated. (And why the newer renderer won't be.)

fuzzyastrocat (1841)

@JacobH460 Wow, that's incredible... you must have the same system as WYLDYR, they reported 144fps too!

JacobH460 (4)

@fuzzyastrocat I saw their comment, we have similar systems

FazeBugha (1)

all i see is a blank screen that has the fps and ms and all that stuff pls help

fuzzyastrocat (1841)

@FazeBugha This is a WEBGL incompatibility with your system. Not much I can do about that.

AndrewAung11 (21)

@fuzzyastrocat This is really cool. And I have a question. What is w for? like:

x is for left and right
y is for up and down
z is for forward and backward

fuzzyastrocat (1841)

@AndrewAung11 Well, it's "the fourth dimension". We don't have a name for it, since it doesn't exist in the real world, but in this simulation it does exist. It's an entirely different direction that you can now move in (with this simulation)... hard to imagine at first.

RishabhRanjit (20)

Claps:

You know something is good when it lags

pogs

Tho nice management of graphics... It looks cool...

ChopSueyMaster (50)

this is interesting, can you make responsive games with this?

fuzzyastrocat (1841)

@ChopSueyMaster Certainly, this is just a renderer but you could add whatever logic you like on the JS side. However doing so is fairly impractical because of the performance issues — but that problem will go away when I make the new renderer.

ChopSueyMaster (50)

I see, would you mind pinging me when you post that? @fuzzyastrocat

DSAEvan (21)

My FPS sucks and this is breaking my computer.

fuzzyastrocat (1841)

@DSAEvan Well sorry, as stated in the description this suffers from huge performance issues on systems that don't have incredible GPUs (I don't have one either), the new renderer will not suffer from such issues however

A_CringyCringy (2)

All of the comments are talking about performance issues but this is actually super cool. Nice job

iocoder (162)

@fuzzyastrocat Like a wise man once said

i still dont get it

oh, and (this is funny) the website lagged my browser so i had to close the tab lol, but yah, my intelligent mind cannot compile any more than 3d, but nice project anyway lol

P.S. my brain exploded after reading the description
fuzzyastrocat (1841)

@CodingRedpanda Thanks! Check out this reply to BaconMan, it might help clear things up.

RishiMohanty (11)

What are u supposed to do?

fuzzyastrocat (1841)

@RishiMohanty It's just a renderer. It's no more than that because of the performance issues, which will be remedied in the new renderer.

WILLIAMBAEWER (114)

REALITY IS A LIE, THERE IS NO UP, EARTH IS IN THE SHAPE OF A DINOSAUR AAAAAAAAAAAAAAAAAAAAAAAAAA.

cool program tho

beeYeeter (6)

mmmmm... 4fps
otherwise good tho

fuzzyastrocat (1841)

@RowanLong1 Heh yeah, that's why I'm making another one which shouldn't suffer from the same performance issues :)

fuzzyastrocat (1841)

@BananaJellyfish Hehe yeah, on some systems the performance is really really bad

BananaJellyfish (210)

@fuzzyastrocat now im sad i didnt get to see 4d :(

fuzzyastrocat (1841)

@BananaJellyfish Just wait till I make the tetrahedral renderer, it won't have these issues :D

darkdarcool (132)

lol my fps kept going from 1 to 9.

fuzzyastrocat (1841)

@darkdarcool Yeah, on some computers it's even worse than normal. But these problems won't exist in the tetrahedral renderer, so stay tuned! :)

Baconman321 (1097)

So, 4D is basically 3D as 2D.

I still don't get it tho.

Quaternions use 4D though, right?

fuzzyastrocat (1841)

@Baconman321 First off, throw quaternions out of your head. They operate in a 4-space, but it's a completely unrelated 4-space — they just use an abstract notion of a fourth component to accurately represent a rotation in 3D. (Technically, quaternions are just overcomplicated rotors, and rotors operate in 3-space.)

I'm not exactly sure what you mean by the first sentence, but (assuming you've watched the video at the start of the description) lemme try to elaborate.

If you were a 2D stick figure and could only move left/right and forward/backward, you couldn't see "up". It just wouldn't exist for you — after all, pencil marks on paper can't magically jump out of the paper. This is like us in our 3D universe: we can't move in a fourth dimension since it simply doesn't exist for us. We can move up/down, left/right, forward/backward, but that's it, there's no other way to move.

Let's go back to the 2D stick figure now. Imagine we gave this stick figure the ability to magically "jump out of the paper" to however high up it wants to go. Now remember: the stick figure can't actually see up or down, it still can only see left/right and forward/backward, but now it can move up and down. This is the part that is a little hard to grasp at first — being able to move in a direction without being able to see in that direction. Okay, so what exactly would the stick figure see? Well, let's say they're on a desk, and there's a book to the right of the stick figure. If they were aligned with the book (up and down, that is), then they'd see it since it's in their "plane of view" (left/right or forward/backward). But as soon as they decide to move above or below the book, it would vanish because now it's not in the same "plane of view" as them. The stick figure could only see out to the left, right, forward, or backward, but the book is now below them! Now, imagine there's an object that's a circle on the bottom and a square on the top sitting on the desk. (Like a weird cylinder where one end is a square). When the stick figure is in line with the bottom of the object, it would see a circle. But as it moves higher, it would see a square! (Remember: the stick figure can only see what is in line with its height.) So, as the stick figure moves up and down, objects would appear to appear, vanish, or even change shape!

Now, this is exactly what's happening here, except we are 3D and we are in a 4D space. We can only see what's in line with us in the fourth direction — we can't actually see into the fourth dimension. The fourth dimension is like height in our stick figure analogy — we will only see a "slice" of the actual space, and as we move through 4D the slice will change. So, when you see objects that are appearing to "morph" as you move through 4D, that's because they are just different shapes at different points in the fourth dimension.

I hope this helps any, if you have any more questions please ask!

Baconman321 (1097)

@fuzzyastrocat Watching the video plus ur explanation helps. The 4D plane is arranged in a way in which we can only see it if our plane of vision intersects with it.

Interesting!

But what would it be used for? What is the point of this? It would make gaming much more complex and would be quite confusing...

Yeah, quaternions just help with rotations in a way that won't come across the gimbal lock problem.

fuzzyastrocat (1841)

@Baconman321 What is the point of this? Fun! I mean, there's not a whole lot of applicability here, it's just a fun mechanic for games and such and can make mesmerizing graphics.

One application that I have heard of though is that some crystal structures can be described more cleanly in higher dimensional space. I.e. all crystals of type ____ can be described as the same shape just rotated through, say, the fourth dimension. I don't really know a whole lot more about this, but it's interesting to see that higher dimensionality can have some practical value.

realTronsi (926)

Hi, you seem to know a thing or two about ray casting, do you happen to know the algorithm for 3d intersections between a line segment and plane as well as the intersection location? I'm looking for the concepts behind the algorithm rather than just being fed code.

fuzzyastrocat (1841)

@realTronsi Are you familiar with vector representations of surfaces? If so, try substituting the vector parametric form of the line into the vector parametric form (the one that uses the plane's normal, specifically) of the plane. Then you can plug in the solution back into the line equation to get the intersection point.

If not, try checking out these two pages, I think they give a pretty good overview of how the vector representations work: https://tutorial.math.lamar.edu/classes/calciii/eqnsoflines.aspx, https://tutorial.math.lamar.edu/classes/calciii/eqnsofplanes.aspx
I don't know how much experience you've had with this kind of thing, so if you're confused I can try to give more background.

realTronsi (926)

@fuzzyastrocat I've never worked with any raycasting so I'm taking a pretty naive approach. The websites you provided does go over the derivation of the equations but I'm trying to learn how it works.

fuzzyastrocat (1841)

@realTronsi So... are you looking to understand how to do raycasting, or how to find the intersection? The resources I've given show how to find the intersection, but if you're looking for how to do the raycasting then I could explain that.

realTronsi (926)

@fuzzyastrocat I'm looking to understand the intersection, or in other words how you detect when the ray has collided with something. The resources you gave didn't really explain how/why it works which is what I'm looking for.

fuzzyastrocat (1841)

@realTronsi The resources I gave explained the vector equations for lines and planes. Then, try what I described in the first part — try plugging in the equation for the line into the the equation for the plane, and by solving you'll get the intersection. (If you're stuck, wikipedia can help.)

VenomousSteam81 (2)

holy crap this is cool, but lags out my Chromebook lol

fuzzyastrocat (1841)

@VenomousSteam81 Thanks! Yeah, it's certainly performance intensive, but that's why I'm going to make a better one :)

TimothyClark222 (24)

you need to put a warning to only use this on advanced computers or else, my computer froze for 10 minutes. DON'T USE THIS ON LOWER END COMPUTERS

Baconman321 (1097)

@TimothyClark222 That is because it uses WebGL, which uses the GPU. If the GPU is working a lot, the display freezes since the GPU is used to render the graphics on your computer. Your computer isn't frozen, but the display is.

fuzzyastrocat (1841)

@TimothyClark222 Froze to 10 minutes? That's certainly a long amount of time, I would've put a warning but I did not think that such a performance drag would happen at all. (And it's not on advanced computers only, I've tried it on low-end computers — as have some others here — and although the performance is really bad it hasn't actually lagged the computer for significant periods of time.)

notTussiez (4)

Super cool!
Have you looked at some faster examples to improve performance?

fuzzyastrocat (1841)

@notTussiez Thank you!

Guess what: I have! And actually, that example isn't much faster. For one, it has less objects in the scene, so it doesn't have to do as much computation. And secondly, try opening it in fullscreen, you'll see a significant performance drop. That's because raymarching is heavily dependent on the resolution of rendering, so it's fine rendering a really small picture but as soon as you try to make it render something larger it drags significantly. (The implementation of the raymarching algorithm is actually basically the same on both these projects, just that this one also has a system for determining position, color, rotation, etc depending on the object's metatdata.)

Really, the only way to improve performance is to not use raymarching, which is why I'm working on another renderer. :)

StringentDev (229)

You killed the browser on a I5 computer

sojs (341)

The way I see it, it is elevation....
Of course we see a 2d orange as 3d so..

fuzzyastrocat (1841)

@sojs As for elevation: Yes sort of, though you don't have to jump up in it.

As for the 2d orange: Yes, that's another way to display things, the perspective projection. It's how we usually view things, but for a 4D game it's actually not the greatest. Why? Well, for one thing, you don't see all of the object. If you had never seen an orange before, and had no knowledge of how the world works, how would you know what's on the other side of the orange when you're shown a picture of the orange? You'd have to take a picture from the other side as well, and that can be confusing for people who have never experienced something in 4D. Adding to this, because we know how lighting, texture, etc works, our minds can "guess" that a picture of an orange is actually spherical. But if you don't have any experience with 4D, you don't have any intuition for how to infer the 4th dimensional component just based on lights and other cues we normally use to infer 3D. So, that's why I chose slicing over perspective. (The popular image of a tesseract rotating is shown in perspective projection — unless you know it beforehand, it's pretty difficult to tell exactly what's going on and which cubes are where in 4-space.)