Share your repls and programming experiences

← Back to all posts
Real 3D — 3D But it's actually not fake
fuzzyastrocat (1297)

Inspired by @EpicRaisin's recent post, I decided to make a 3D renderer. Right now it just draws a box, but it can draw anything if you configure it.

The things that make it good

  • It has Z coordinates
  • You can render whatever you want with it
  • It has filling

Controls

  • Move mouse to move the box
  • Click to cycle filling options

Hope you enjoy!

EDIT: Some of you might be confused why I'm posting this after I've made a huge 3D game. The answer is that the game (Askew) uses THREE.js, a 3D renderer where all the "behind the scenes" work is done for you. This project is building my own 3D renderer in 2D — doing it from scratch.

Commentshotnewtop
Bookie0 (4607)

wow nice but I don't see 3D:

3 quadrilaterals:

blank space!:

square in square:

weird thingy lol:

and finally: red square:

So maybe i is stupid bc i no finding 3D!!!

lmfao all jokes apart, pretty cool but add colors!!! xDDD

fuzzyastrocat (1297)

@Bookie0 Lol! All these joke comments are making the project look trash from the talk view :D

Did you click?

Bookie0 (4607)

@fuzzyastrocat lol dw is not trash! :)))

fuzzyastrocat (1297)

@Bookie0 Well, you changed your post... and for "pretty cool but add colors!!!" I did add colors :)

And yes, I know it's not trash. twas attempt at the funi

Bookie0 (4607)

@fuzzyastrocat yea lol and for "I did add colors :)" ya but what about a nice cyannn or yelloww with the black :)

you r very funi! more than me hehe

fuzzyastrocat (1297)

@Bookie0 Oh, you mean add more colors. Will do.

hehe

Bookie0 (4607)

@fuzzyastrocat wooh nice cyan yellow red!! :D

fuzzyastrocat (1297)

ANNOUNCEMENT: I've been accused of copying this from a coding train video. Does this video exist? If so I'd like to see it.

programmeruser (148)

@fuzzyastrocat as far as I know the only coding train videos with 3D and p5.js use WebGL.

fuzzyastrocat (1297)

@programmeruser That's what I thought. The accuser deleted their comment, so maybe they realized this too?

AlexanderTarn (270)

This is amazing!
One suggestion I have is that when you use colors, to make the edges visible with a different color.
This is amazing!
Did I say this was amazing?

fuzzyastrocat (1297)

@AlexanderTarn Thank you! Having the edges and filling would require adding things which this demo doesn't have.

firefish (794)

This is not a cube, this is a rectangular prism:

fuzzyastrocat (1297)

@firefish You are looking at it the opposite way. (That's an optical illusion when there's only lines, most people see it the other way but you are one of the few who sees it this way.) The smaller square is actually farther away than the larger square — in the picture, the cube is "pointing" to the upper-left. So when you move the cube, it should always be "pointing" towards the center of the screen.

Hope that helps!

firefish (794)

@fuzzyastrocat it's a joke a rectangular prism is a fancy name for a cuboid, and guess what a cube is

fuzzyastrocat (1297)

@firefish Oh ok, I thought you meant that you were seeing it the other way since that would be a rectangular prism but not a cube. (And yes, I know what a rectangular prism is.)

fuzzyastrocat (1297)

Just to clarify: This is a 3D renderer build in regular 2D js! It's built from the ground up; I'm not using a library like THREE.js.

fuzzyastrocat (1297)

@inyourface3445 I'm using p5.js as a nice wrapper for the JS Canvas API. I'm not using any of p5's features really, just using as an interface.

BobTheTomatoPie (1448)

ha you did not need to prove you can make stuff in 3d, i think 90% of us are aware of the fact that you can lol

fuzzyastrocat (1297)

@BobTheTomatoPie No I wasn't trying to prove anything, I actually haven't done this before.

In Askew I used THREE.js, a 3D renderer, while this was building a 3D renderer in 2D — basically, from the ground up.

BobTheTomatoPie (1448)

oh lol i thought this was three.js but i hadnt checked the code @fuzzyastrocat

dwomg380 (0)

uhhh so basically this isnt a square ._. just zoom out

fuzzyastrocat (1297)

@dwomg380 Zooming out could probably break the logic, reload and see if its fixed... also do you mean cube instead of square?

dwomg380 (0)

@fuzzyastrocat yeah i meant cube, sorry!

NoahJospeh (16)

I really like it. I think it would be even better if you added different shades of colors to the different sides of the cube so that there would be a shadow or a cool lighting effect, and maybe you can create something where the person can interact with multiple shapes. Idk, it's just an idea...

fuzzyastrocat (1297)

@NoahJospeh Thank you! This was just a demo, so I didn't implement shading.

NoahJospeh (16)

@fuzzyastrocat Well, I was just giving some ideas for any project for the future.

JaydenLiu1 (9)

Great. Now add WASD or arrow key controls

fuzzyastrocat (1297)

@JaydenLiu1 Thanks! This isn't intended to be a game or anything, it's just a demo of a 3D renderer.

bowmand117 (3)

btw with your askew update i keep spawning in the middle of nowhere

fuzzyastrocat (1297)

@bowmand117 Open it in a new tab, as it says in bold on the post.

bowmand117 (3)

@fuzzyastrocat i did that about a week ago it does not work, but yeah big fan of the original askew.
;)

fuzzyastrocat (1297)

@bowmand117 What is your reasoning behind being a fan of the original askew but not the update? The update only adds things, it doesn't remove anything. (Asking this so that I can improve it)

And are you sure it doesn't work? It works fine for me...

bowmand117 (3)

@fuzzyastrocat the update keeps spawning me in the middle of nowhere... idk if thats a glitch or a mess-up in the programming, or its just players being jerks and taking everything then leaving...

fuzzyastrocat (1297)

@bowmand117 I think it's neither (the second option isn't a possibility, and the first one doesn't make sense since it works fine for me). So it must be something with your system, since it always has worked for me (and I just went to it now and it worked).

bowmand117 (3)

@fuzzyastrocat really? ive been using a school-issued chromebook, if there were something wrong with this one, there would be something wrong with many of the thousand chromebooks in the district

fuzzyastrocat (1297)

@bowmand117 I'm not sure what to tell you. I've just re-confirmed that it works perfectly fine for me, so I can't really help debug the issue since it doesn't happen for me.

bowmand117 (3)

@fuzzyastrocat um ok, maybe its the school admins fault, who knows? but yeah, thx

fuzzyastrocat (1297)

@bowmand117 Yeah, I can't replicate. I see trees, rocks, etc.

That issue isn't you getting spawned into the middle of nowhere, it's you being unable to connect to the server. So I'm not sure what to say.

bowmand117 (3)

@fuzzyastrocat ah... ok... thank you for clarifying. im still sble to play the beta version at least....

fuzzyastrocat (1297)

@bowmand117 Wait, what do you mean by "the beta version"? There is only one version of Askew, the oldest version no longer exists (the link in the original post now points to the newest version). Only the updated version exists, at askew.fuzzyastrocat.repl.co.

bowmand117 (3)

@fuzzyastrocat i forked the beta privatley

fuzzyastrocat (1297)

@bowmand117 Oh ok. (And by the way, it's still beta.)

CraftrDoinBettr (0)

The ones that get filled with a colour need some black/same colour slightly but darker shade strokes on the edges, it does look 3d but it just needs a little bit more depth. Other than that, it looks amazing and you did a great job!

CraftrDoinBettr (0)

I look forward to seeing more projects made by you!

fuzzyastrocat (1297)

@CraftrDoinBettr Yes, this was basically a demo so I didn't implement shading. Thanks!

(And thanks! Hopefully there will be more projects coming soon!)

CraftrDoinBettr (0)

@fuzzyastrocat oh, I'm not talking about shading, all you need is a stroke() function

CraftrDoinBettr (0)

Look up stroke(r, g, b)

fuzzyastrocat (1297)

@CraftrDoinBettr No, that would require building other things into it since you don't want to be able to see the lines behind faces. (I.e., you don't want to stroke the lines in the back of the cube since you couldn't see that.)

(I understand how the stroke() function works, if I didn't I wouldn't be able to make something complex like this :D)

CraftrDoinBettr (0)

@fuzzyastrocat oops I accidentally reported your reply instead of replying to it the first time, I'm so sorry! Why are reply and report right next to each other?!

fuzzyastrocat (1297)

@CraftrDoinBettr Lol I don't know why they're so close, I'm sure the mods will understand :)

[deleted]

by the way just run the repl if the 3d is not showing up

[deleted]

so cool.....

DynamicSquid (4398)

:( I didn't code for the past 5 days straight cause school kept me busy... almost felt like I was having withdrawals. but weekends are here so I should be able to heal up a little

anyway, I saw you had a new repl, eros-nxt? is that a new version of eros?

oh, and I just got loops working!

fuzzyastrocat (1297)

@DynamicSquid Lol... you know what I said about lang dev being addictive :)

Uh yes, that's the next iteration (not version, it doesn't have versions yet since it's never been stable in the slightest). You won't find much there as of now.

Awesome!

DynamicSquid (4398)

@fuzzyastrocat Oh, I'm thinking of making a browser soon. Like an actual web browser, with a GUI (front end), Web Engine (HTML/CSS parser and a JS engine), and Networking (so you can actually browse the web).

Does that seem like a good idea?

fuzzyastrocat (1297)

@DynamicSquid Yes, that's a great idea! I almost did it once, but then got really busy and my interest shifted. Go for it!

DynamicSquid (4398)

@fuzzyastrocat I should call my web browser Cephalopod

Oh, quick question about lang dev

Interpreted                         Bytecode Interpreted
compile and run - fast              compile and run - slow

Is that true?

So compiling and running an interpreted lang would be faster than compiling and running a bytecode lang.

But... for bytecode interpreted langs, once you've already compiled them, then it's super fast to run them?

fuzzyastrocat (1297)

@DynamicSquid You've got it totally backwards. Interpreted languages using AST walking are super super super super super super super super super super super super super slow. Meanwhile, bytecode interpreted languages are moderately fast. This is why I keep saying you should try using a bytecode interpreted language — the compile speed is roughly the same as a "true" interpreted lang (tree-walk interpreted), but it's magnitudes faster at runtime. This is why all modern interpreted languages use a bytecode VM (python, java, javascript, ruby, php, ...).

That's because traversing an AST is really inefficient — in a tree-walk interpreted language, you're doing it all the time while you're running the code, while in a bytecode language you do it only once (when you generate the bytecode).

xxpertHacker (555)

@fuzzyastrocat Randomly happened across this comment by chance, I was thinking about creating a language, parser, lexer, and a bytecode interpreter.

I would then later advance to creating a JiT language of my own.

Where do you recommend that I start?
Other than craftinginterpreters, since I'll check there anyways.

fuzzyastrocat (1297)

@xxpertHacker Craftinginterpreters is a great resource for bytecode interpreters and the language pipeline in general. Unfortunately there's really not a whole lot of good material out there, so I think craftinginterpreters is really your best bet.

xxpertHacker (555)

@fuzzyastrocat Dang, well then, guess after I have that allocator finished I'll be on my way to their website.

GradeFStudent (0)

Maybe you could add lines with the cubes with colors so you can actually tell where the lines are.

fuzzyastrocat (1297)

@GradeFStudent That would require implementing some things that this "demo" doesn't really have.

PXY (32)

Next up: aerospace dynamics simulator in an ASCII terminal

fuzzyastrocat (1297)

@PXY Lol, that would be cool

DavidHilsee (0)

100% epic, would look even more convincing with shading

DavidHilsee (0)

btw om pretty sure that the boxes have no bottoms so u can see the seams

fuzzyastrocat (1297)

@DavidHilsee It definitely would look more convincing, though I didn't have the time to implement shading.

dabombdgdzjr (120)

Aaaand, my new homepage is set! Maybe make some interactive stuff idk tho e

Baconman321 (217)

I'm assuming this has a lot of math in it?

fuzzyastrocat (1297)

@Baconman321 There's a decent amount, yes. It's not so much that there's a bunch of math used in the program, it's more that there's math needed to derive what's used in the program.

Baconman321 (217)

@fuzzyastrocat I'm wondering if there's complex math used in this? Because all it seems to do is make a few lines relative to the center of the canvas and mouse position.

fuzzyastrocat (1297)

@Baconman321 Well yes, it would appear that the program is very simple, thus my above comment. The end result is surprisingly simple, but the way you get to that result is through some linear algebra. So it depends on what you consider "complex".

Baconman321 (217)

@fuzzyastrocat Of algebra and geometry (and higher). Because I'm only in the 9th grade :(

fuzzyastrocat (1297)

@Baconman321 Okay, this would be borderline complex then.

Baconman321 (217)

@fuzzyastrocat Ah. I'm assuming you're getting the center than drawing a line from the mouse to the center at a certain width, then adding other lines in between?

fuzzyastrocat (1297)

@Baconman321 I'm actually not drawing a line from the center at all. I "draw" (this is just math though so it's not actually on the screen) a line from the camera's focal point to each of the vertices of the cube. Then I find the intersect of that line with the camera's view plane to find the point of each vertex on screen. I connect the vertices as required to form the cube (or fill the polygons, depending on what mode is selected).

The cube's vertices are offset by the mouse's position, which causes the movement.

fuzzyastrocat (1297)

@AJDevelopment Not sure what this comment is supposed to mean

DarkswordsmanJG (15)

But, anything on a screen is 2D

fuzzyastrocat (1297)

@DarkswordsmanJG Well yes. By "not fake" I mean "it's an actual 3D renderer" not "I'm magically creating 3D objects from your 2D screen" :D

[deleted]

Pretty cool!