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

Follow me on:
Twitter: / iced_coffee_dev
Github: github.com/simondevyoutube/
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.
Source: github.com/simondevyoutube/We...
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
• I Made Minecraft in 24...
Dani - Making a Game in ONE Day (12 Hours)
• Making a Game in ONE D...
Fat Dino - I Made a Racing Game in 3 DAYS
• I Made a Racing Game i...
Code Monkey - I made an FPS in 5 days! (Unity Microgame)
• I made an FPS in 5 day...
Jabrils - Making A Game in 48 Hours!
• Making A Game in 48 Ho...
Tren Black - I Made Wii Tennis in 24 Hours
• I Made Wii Tennis in 2...
Brackeys - MAKING A GAME IN 10 MINUTES
• MAKING A GAME IN 10 MI...
BlackThornProd - I MADE A GAME IN 1 WEEK WITH UNITY
• I MADE A GAME IN 1 WEE...

[@simondev758]

If you enjyoed this, check out my GLSL course: simondev.teachable.com/p/glsl-shaders-from-scratch Or support me on patreon!: www.patreon.com/simondevyt

[@oamioxmocliox8082]

;)

[@creaky2436]

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

[@oamioxmocliox8082]

;)

[@nizambao4653]

Definitely a legend.

[@monkemode8128]

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

[@simondev758]

lol

[@BlueProgamer212]

three js vs your engine

[@kochukrissten8533]

@@BlueProgamer212 Three.js wouldn't even stand a chance

[@yuvrajhere7426]

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

[@simondev758]

Awesome, I have a bunch of starter vids on JavaScript as well. Got anything you want to see covered?

[@bartattacler1515]

@@simondev758 maybe its a strange idea but have u ever taken a look at duktape (JS engine)? idk but maybe you can do 3d stuff in there

[@qwertykeyboard5901]

I wish you the best of luck because javascript can be one HELL of an irritant sometimes.

[@alvarolloret948]

This channel is pure gold, willing to learn more about 3D on the web, three.js is great. Keep going man! ✌️💜

[@simondev758]

Will do, got anything you want covered?

[@alvarolloret948]

@@simondev758 yes! Very useful, I'd love to see more thing related to three.js, it would be nice to see how to use it with WebXR 🥽

[@simondev758]

Hmm hadn't thought about webxr, will definitely check it out.

[@renjestoo877]

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

[@jorgealvarez3334]

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!

[@dico3557]

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

[@chamonmath7688]

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.

[@simondev758]

Awesome, happy that you're finding them useful! Don't hesitate to make suggestions on topics as well.

[@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!

[@simondev758]

It's kind of a different beast, graphics programming. Fun though, since your work is inherently the most visible.

[@carlostelhada8326]

That was freaking incredible!! Thank you so much!

[@arturoivanartaza3483]

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!

[@gldev8191]

amazing content from an experienced graphics dev is rare

[@Nexus-rt1bm]

Nice work, Really insightful stuff

[@simondev758]

Thx man

[@nichegames9590]

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

[@maxpaju]

Love these videos man.

[@ThankYouESM]

Awesome altogether! I plan on hopefully soon creating a Python-To-Javascript GUI far as it can get which can also read #js as extra lines of code, especially to assign variables.

[@nobo_dev9526]

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!

[@simondev758]

Heh yeah we've all been there, making the most awesome reusable general purpose 3d engine evar. Great learning experience.

[@Chadderbox]

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

[@simondev758]

I mean, the OpenGL calls map nearly 1:1 for other languages, doing this over in C++ or any other language with GL bindings would be trivial.

[@jordanlake9151]

@@simondev758 Interesting, good to know

[@minnedanhieux883]

"...I was also drinking beer at this point...."

[@TurtleKwitty]

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

[@simondev758]

Oooh that would be cool. I kinda wanna come back around at this from a WebGPU point of view too.

[@ilin76bb]

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

[@simondev758]

Oh, I love C and C++, but yeah if I just wanna pound out some ideas, something like JS or python is just fine.

[@yotiis2782]

Keep on posting JavaScript I love it 😃 btw keep the good vids up!

[@simondev758]

Thanks, will do!

[@timmy1877]

My hero. Instant sub.

[@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.

[@simondev758]

Which cache are you talking about? I've worked on a bunch of 3d engines in big games, I could add that as an idea to my list if you could be a bit more specific.

[@emteiks]

​@@simondev758 thanks for reply, i put a comment and i think YT has removed it because of github link to threejs ;) Anyway for me the biggest challenge is to understand a high-level setup for performant engine. Most of online sources or books are describing WebGL engines where renderer simply iterates over list of objects in the scene and call their update and render functions. But as far as i know the go-to engines do not work like this. For example Three.js uses different caches (can be seen inside gh repo for three.js src/renderers/webgl folder). There are quite obvious caches for objects, geometries, materials but also then uniforms, attributes, programs and finally bindingStates, renderStates, renderLists... It is hard to understand what goes with what, when and why. I understand that this is created to allow renderer to batch requests to the GPU so it is more performant. For me this would be very valuable to learn more in depth about it, particularly in context of WebGL2 features like Transform Feedback. Thank you for your materials I appreciate your tutorials!

[@marcusaureliusregulus2833]

I love your videos even though I have no idea what is going on except at a very high level

[@peterbassett2179]

Another good video. Maybe look into typescript to save you from typos? Among a million other nice features.

[@simondev758]

This is a good suggestion, if I was in an environment where I productivity was the goal I'd definitely push for it. Since my videos are largely about JavaScript right now though, I think I just need to suck it up.

[@coopercowley4883]

SimonDev you can actually write JavaScript in Typescript and there will be no problem as far as I know

[@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!

[@simondev758]

Yeah no worries, this video was just me screwing around, it's not a best practices example heh.

[@timw594]

I'm more of a business software/data programmer and every once in a while i get the itch to dabble in games for fun. What you did here is nothing short of amazing... I didn't understand most and I'm definitely missing some fundamentals but wow it seems like it comes so easy to you... Very well done. That said i read recently that Google V8 in chrome actually compiles javascript now. To me this and seeing some js game demos on youtube make me think you could pull off some serious gaming in java script? Thoughts?

[@simondev758]

JS is definitely becoming an interesting choice for dev work

[@carlostelhada8326]

Professor Simon, I've been studying your material with a few colleagues and we were wondering how heavy was your program's size. We all found the video fascinating!

[@simondev758]

Heavy as in, memory?

[@carlostelhada8326]

@@simondev758 yes, sorry for not making it clear. I'm studying browser's memory alocation in PCs in order to think new aplications to JS language and frameworks, and yours is amazing!

[@Exmantika]

Great video! Did you work on Prototype, by chance? There was a Prototype clip that played when you mentioned you used to do game dev, and now I'm curious as to what you worked on.

[@simondev758]

Yep, first game I ever worked on

[@ezequielgarrido51]

Float textures have only been around for like 15 years. So of course make them an extension. I lol'd.

[@Metruzanca]

That clip at the start was Prototype (1). Such a good game. Any particular reason you showed prototype? Did you work on prototype?

[@simondev758]

Yep, first game I worked on.

[@Metruzanca]

@@simondev758 that's awesome!

[@kafin3504]

I feel that I need coffee before finishing this video

[@shreddymetal]

awesome video. this is way more interesting than three.js. i would love to see how you expand this engine.

[@simondev758]

Thanks, not sure what I'll do with it. In the near term, probably clean it up a bit. Depends entirely on what people want to see. WebGPU port at some point as well.

[@shreddymetal]

@@simondev758 a cleanup where you add instanced rendering, or post effects like bloom would be nice. and maybe you could also simplify/speed things up a lot with vertex array objects and uniform buffer objects.

[@simondev758]

Good topics, I'll add those to my todo list.

[@allinfo3926]

@@simondev758 PBR )))))

[@equar628]

Why are you sending the individual components of the objects (colors, uvs, and positions) as seperate VBOs? Writing to the GPU is relatively slow, wouldn't it be logical to just use a single VBO, and use a VAO to specifically layout the vertex data? In C: glVertexAttribPointer() would suffice

[@DommageCollateral]

i remember playing a lot of games when i was young, but now its such a big pleasue to write my own games and 3d software, so i havnt even played a game besides my own (for testing purpose) since about 3 years. For that said, of course i got an quite good pc (70% percent on userbenchmark-desktop *planing to buy a good gpu for rendering though), but just need that thing for writing software and computing data xD xD xD all i need is frkn computer and internet!! its all that i need in life!

[@vast634]

I have written a similar simple WebGL Renderer, displaying a bunch of models loaded from a custom modelformat. This was the first and last time I write that low level on an engine. Just to have it done once. But I rather continue using a premade game engine, and leave that low level stuff to engine engineers.

[@Memeieli]

Have you thought about trying to write all the different major renderers used in games? forward, deferred + forward, forward +, deferred + and forward +? (aka clustered deferred/forward)

[@simondev758]

That sounds kinda fun

[@Memeieli]

@@simondev758 it's something I always wanted to do back when I used js. Always fascinated me how they all worked and why people chose different ones! Also seemed like fun. I think the furthest I ever got was to write my own 2d deferred renderer with pixijs. I wish you luck if you decide to give it a go!

[@MarshallThomas]

I think it looks pretty good for being made in one day.

[@simondev758]

thx!

[@narutonaruto4763]

Wow amazing, should I move to js 🥴

[@hino2]

Hey, what's the deal with underscores at the start of almost all variables names? Just curious.

[@simondev758]

I've jumped around languages the last few years, used C++ most of my career, last couple years I was leading a team doing Python, and now I'm screwing around with JS in these videos. Didn't spend any time early on trying to learn naming conventions from JS, should get better in later videos.

[@tonychen3174]

Thanks for your info sharing. What do you think about the future of webGL? is it still worth learning? Thanks.

[@simondev758]

WebGL is mostly a straight wrapper over OpenGL. If you learn WebGL and it were to suddenly disappear tomorrow, it would be a shallow learning curve to real OpenGL. Whether that's useful to you, can't answer that. Personally, I don't think WebGL is going anywhere, in fact WebGPU, which you might consider the successor, is on the way.

[@tonychen3174]

@@simondev758 thanks for your reply. What about threejs? It looks easier.

[@infiteri6030]

thoughts on batch rendering

[@beardedbrain2894]

Everyone can use this engine like an engine for students works!

[@simondev758]

Yep feel free to use it for whatever you want

[@PatrickNusbaum]

Simon, out of curiosity, what about transparent and translucent objects? Will your code work or is there something else needed?

[@simondev758]

Usually it's done with a forward pass.

[@PatrickNusbaum]

@@simondev758 Right, so basically the second geometry pass would need to be changed to first render opaque geometry, then transparent, right? What about the first pass where G-buffer is created? Do you need to render transparent geometry there as well?

[@simondev758]

@@PatrickNusbaum It's been a while since I wrote this project, so I'm not remembering it perfectly and I don't feel like re-reading the source. But typically rendering engines internally are structured so that you'll do say, a depth pass to populate buffers (like the gbuffer), an opaque pass where the more complex shaders are bound, since the pre-filled depth will reduce load on the gpu, and subsequent passes, like a transparent pass, ui, etc. So here you'd likely rebind the depth, and have some form of forward pass where you do lighting, or at least an approximation of it.

[@PatrickNusbaum]

@@simondev758 Yeah, that's what I was thinking about. Thanks, that helped.

[@TheSairenSA]

Hi Simon, can you recommend me books/resources on math for game development and engine programming?

[@simondev758]

Where do you want to start? Beginner? Intermediate? You'll get far learning about Linear Algebra.

[@TheSairenSA]

@@simondev758 From beginner to advanced would be great. I know the basics of geometry and algebra but that's basically it. Geometry being my favorite. :) I would like to learn it from scratch to fill the gaps.

[@helloworld9349]

do you can make 3d minecraft with your 3d engine?

[@AntonioNoack]

8:00 at line 230 could use a switch statement ;)

[@Summersault666]

Never use a switch statement, use a hash map.

[@razvanmargineanu]

You should try a better ide like Jetbrains Webstorm and also look at typescript. This way the "positionS" typo would never happen without a squigly red underline. Amazing content though.

[@mattmmilli8287]

VSCode is the only ide ever needed! You don’t really know how vast the extensions available are until you know

[@razvanmargineanu]

@@mattmmilli8287 Used VS code a lot but after I tried Webstorm there was no coming back.

[@simondev758]

I should take a look sometime. I'm pretty resistant to change though, I only switched from Sublime to VSCode because I liked the colour theme slightly more. I have no extensions installed, basically just a colourful text editor.

[@felleg4737]

I keep commenting under your videos on how freaking awesome your content is. As an experienced YT consumer I recommend you replacing 1 day with 24 hours. so then you can work on a project for 2 weeks, and still impress/fool people. or at least this is what other youtubers do :D

[@simondev758]

That... that is smart.

[@tathagatnegi5923]

Tam❤️

[@DommageCollateral]

14:16 hahha yea reminds me of myself! the good old sitting around- (drinking beer, while energy is already gone and things tend to get chaotic after 13h of hardcore programming) -THING what a terrible habbit :D

[@simondev758]

So many college memories

[@poetaanonimo8177]

Please, make a tutorial teaching how to make a 3D Game Engine in Javascript

[@Nexus-rt1bm]

Please do a physics simulation with the threejs and cannon.js. Maybe something like a wrecking ball hitting a stack of cubes.

[@simondev758]

It's definitely still on my TODO list. Is cannon.js the right library to use though? I was looking into this a bit a few weeks ago, and it seems like cannon.js has basically been abandoned.

[@Nexus-rt1bm]

@@simondev758 Yeah, you're right. Maybe Ammo.js will be more suitable, pretty sure Ammo is still being updated.

[@simondev758]

That's what I was thinking as well, looks like that's still under active development. I'll try fiddling around with it when I have some time.

[@Nexus-rt1bm]

@@simondev758 Thanks man, Looking forward to it

[@ananthakrishnan9186]

Can I make a model using your method and overlay it above another rendered scene in a webpage?

[@simondev758]

Not super clear what your question is, but it roughly sounds like you're asking about this overlaid over another scene in a webpage? If the other scene is also a webgl app, yeah you can have multiple webgl contexts, although you'll need to experiment with overlaying 2 webgl contexts. Otherwise if it's just the page you're trying to overlay, webgl supports being transparent. You'll have to do the legwork at looking deeper into either of those.

[@ananthakrishnan9186]

@@simondev758 thanks. i actually wanted to put a model as per your method and put it above a web with live rendering

[@UbblyMaster]

Why in some of your const you write C++ code?

[@AussieAmigan]

So this would replace Three.js?

[@simondev758]

In theory, yeah. In practice, three.js is a well tested and feature rich 3d engine and mine is some crap I wrote as quickly as possible :P

[@swoorp]

What games have you made??

[@simondev758]

Been a developer on a bunch on xbox/playstation/pc

[@mattmmilli8287]

I don’t know if you have much experience with it but debugging memory/webgl/performance with the chrome debug tools would be another interesting one Those tools are an art

[@simondev758]

I can probably do one at some point if I have a good idea on what to talk about. Giving you a quick tour of the tools and windows is trivial, pretty much anyone can do that, but I'm not convinced that's super helpful. In the past when mentoring people directly, I've worked through interesting problems there at their desk with them, probably have to do something similar. Debugging and profiling in general are a bit of an art. The chrome tools are nice, but not "super" different than what you'd find debugging and profiling say, through visual studio. Just less low level.

[@xposedbones]

Really late comment but I really think you'd like using typescript instead of javascript, it would automatically catch errors like the one at 10:49

[@simondev758]

I think so too, maybe it's worth coming back and trying this in typescript instead.

[@xposedbones]

@@simondev758 everything is better with typescript :) if you’re used to typed language you’ll feel right at home !

[@simondev758]

@@xposedbones I keep hearing that, but I've invested like, hours into learning JS. But more seriously, yeah C++ background, Typescript looks good, just haven't gotten to it.

[@mattmmilli8287]

@@xposedbones isn’t creating custom types a big slowdown sometimes ? Like having a strange redux/return signatures or doing some weird stuff with promises

[@xposedbones]

@@mattmmilli8287 From a dev standpoint it can be a tiny bit slower if you're new to typescript and still figuring out how to type properly. Once compiled there's no difference since it compiles into JS. It really makes the language more mature and more like the typed language like C, so a bit slower dev workflow is worth it. I stopped reacting with 'Omg JS is so stupid' once I started working with TS and now I only feel like that when working in legacy JS-only project

[@kjvelarde]

Very cool, I use 3js and it would be nice if there's a better/optimized option out there maybe something that's better than webgl

[@heteroerectus]

framebuffer incomplete means that the framebuffer is incomplete.

[@mateuszabramek7015]

Usually there is no point in making own engine and loose time you could spend already on coding something in existing engine.

[@simondev758]

If your goal is to understand how engines work, then there's a pretty good argument for making your own engine :)

[@infiteri6030]

Writtng a hole 2d engine right now

[@MoustacheSexy]

Amazing as always (. ❛ ᴗ ❛.) love from Belgium

[@Potus4547]

Man ... I had no idea JS is able to do this....

[@simondev758]

Yeah it's pretty neat what's been happening in JS recently.

[@mateusztocha9260]

Use Typescript :D is closer to C# then Javascript to Java xD

[@simondev758]

Yeah really need to try it out!

[@thatsalot3577]

I feel really uncomfortable looking at a 1200 line long javascript file.

[@MrAnandml]

Your voice is tad similar to Bisqwit's

[@MFrankovvski]

Your voice is perfect for this kind of content and I am not gay xD

[@simondev758]

Thx, knew my monotone voice would come in handy one day heh

[@coding-sp]

Code not working

[@vincentcleaver1925]

I still couldn't follow most of this... I understand what I don't understand, but back to 2d, I'll do three.js rather than torture myself with webgl! 8-)

[@simondev758]

Fair enough! This video is pretty advanced, mostly just me having a bit of fun and showing what can be done. But it's not beginner level in the slightest.

[@mikebely8663]

From Canada? Worked for Ubisoft? No British accent and the way you spell “colour”. ;)

[@mikebely8663]

How about three.js plus React for some business apps like interactive 3D website with some graphs? That would be good!

[@simondev758]

Canada oui, Ubisoft nope. Nice catch!

[@justfly1984]

Start using typescript, and you will hate js less

[@simondev758]

There's enough room in my heart that i could hate both of them.

[@unnanego]

Use Webstorm...

[@simondev758]

why?

[@oamioxmocliox8082]

;)

[@mikhailmcrae5924]

Only programmers with IT and math background will understand.

[@haroldmcbroom7807]

You sound as frustrated as me, at what "technology" has become. Almost 50 now, come March, having started out with DOS, on 386, 486 systems, my first taste of programming came from a Ti-99-4a "Ti-BASIC, later on followed by 2 years vocational BASIC, Pascal, C++, COBOL. Fast forward to where we are today, they've complicated the entire matter, with exhaustive libraries, endless versions, an extreme lack of documentation, plenty of contradictions, the end result is you spend more time trying to get your stuff to work, then you do getting your ideals out of your head.

[@simondev758]

Hah maybe. You're sound much more experienced than I am, started programming in the early 2000's. Mostly stuck to 3d stuff, so various iterations of OpenGL/DirectX. I remember driver issues, compatibility issues, general shitiness of api's that changed often. I'm not clear that things are better or worse today. Some things are a lot easier, like making a 3d app. Others are stupidly difficult, like making a simple site using whatever 'frameworks' are in right now. I feel like sometimes it's just me that's tired of relearning what the new hotness is. It's usually the same thing, with a new hat.

[@TheGrandWhiteFox]

I made a calculator in 1 Day (Javascript)

[@cyanuranus6456]

No Use of C++

[@simondev758]

Concepts are the same

[@vincentcleaver1925]

You sound really depressed! Hugz, man... And thanks! 8-)

[@simondev758]

Hah, maybe I need to take some speed or something before recording, give me some more energy

[@coopercowley4883]

Just cause he's not like other you tubers that are directed towards people with an attention span of a goldfish and talk to people like a Kindergarten teacher doesn't mean he's depressed... 😂

[@philliplam2704]

Jesus man 😂