I Made a 3D Engine in 1 Day (WebGL/JavaScript)

Follow me on:

I just tried to code a 3d engine using webgl and JavaScript in one day (24 hours), completely from scratch. It's been a lonnngggg time since I did any serious graphics work as a programmer, and even longer since I touched opengl. This was a bit of a jump-into-the-deep-end project to see if I could crank out a deferred lighting demo in a short time using webgl. In the video I cover all parts of the project, starting with the initial plan, a super general overview on how 3d engines are often structured, and then stepping through the development of the code. By the end you should understand the basics of how a light prepass renderer works and how to implement one using pure webgl.

What was covered:
* 3D Engine Design Considerations
* Materials/Shaders/Drawables/Cameras
* Vertex/Fragment shader implementations
* Framebuffer Objects
* Floating point textures
* Other buzzwords

Full source code for the project is available, I mean it's crap but knock yourself out.

There's been a bunch of similar challenges, mostly around making a game in a short time so I thought I'd give it a try but with my own spin. Here are some other videos that helped inspire.

Sam Hogan - I Made Minecraft in 24 Hours

Dani - Making a Game in ONE Day (12 Hours)

Fat Dino - I Made a Racing Game in 3 DAYS

Code Monkey - I made an FPS in 5 days! (Unity Microgame)

Jabrils - Making A Game in 48 Hours!

Tren Black - I Made Wii Tennis in 24 Hours

Brackeys - MAKING A GAME IN 10 MINUTES

BlackThornProd - I MADE A GAME IN 1 WEEK WITH UNITY

[creaky]

There's programmers, and there's elite programmers. This guy is part of the elite club, without a doubt. Decades of practice is evident. Absolutely fantastic to see. I don't know whether to be inspired or hopeless. Lol

[monkemode]

I have no clue what you're saying or doing but it looks cool 👍

[yuvrajhere]

I am learning JavaScript, and things like these really inspires me. Thanks for making such good content..

[alvarolloret]

This channel is pure gold, willing to learn more about 3D on the web, three.js is great.

Keep going man! ✌️💜

[renjestoo]

This mans voice is so soothing for some reason... I don't get everything he says, but I could listen to him for

[BernhardHofmann]

In all my nearly 40 years of coding I've never gone down the graphics path. A lot of this went over my head but it looked *very* impressive!

[dico]

We made one of these in college, was pretty cool actually programming graphics... and by cool I mean horrifying.

[jorgealvarez]

This is amazing. Yesterday I started to watch your videos and I couldn't stop. You make everything much more easy to understand than books. Keep up the good work!

[nichegames]

Well I made one in 20 hours. So there! Jk, I can barely tie my shoes.

[chamonmath]

Really appreciate all the work you put into making your videos simondev. Also giggled when you wrote in the console around 3 min. But truely speaking, hope your channel rises because the info you present is straight valuable.

[gldev]

amazing content from an experienced graphics dev is rare

[minnedanhieux]

"...I was also drinking beer at this point...." <- midnight coding. :D

[nobo_dev]

I remember trying to make a 3D graphics layer in C++, and because I tried to make it waaay to abstract it turned out horribly. Almost every change broke everything and it went at a snail's pace.
What took me weeks to make, you summarized perfectly in 15 minutes, without skipping over anything noteworthy (at least if I compare it to my own OpenGL 'journey') and still kept it interesting. Great video!

[arturoivanartaza]

I want to thank you about your videos. You really inspire me to learn three js and go more deep into data structures. Greetings from Argentina!
Keep doing this!

[TurtleKwitty]

WOuld be really interesting to see you adding on to this more, making it more engine-esque: Camera, mesh files and animation?

[Chadderbox]

This is awesome. Again, I don't do anything in JavaScript, but for some reason, I find this fascinating.

[emteiks]

this is great little project right here. For me the most challenging in 3d webgl engine is to manage cache, i guess you didn't bother here but with more complex scenes it is a must have (and three.js does this too), but the knowledge behind all the caches is a black magic for me.

[ilinbb]

You can feel that this mean KNOWS alot of things and its SOOO cool to see him enjoying the new technology
as he stated in one of his videos - C is complicated AF and unneccesary much lines of codes

there he goes with JS and creates awesome stuff with nearly no effort

[r.pawlow]

The fact that you do everything in one file, makes me feel uncomfortable... But it works.
So I'm just trying to not bother - Three.js is killing it and now WebGL 😂

Love your videos!

[carlostelhada]

That was freaking incredible!! Thank you so much!