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

SimonDev | I Made a 3D Engine in 1 Day (WebGL/JavaScript) @simondev758 | Uploaded August 2020 | Updated October 2024, 4 days ago.
Follow me on:
Twitter: twitter.com/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/WebGL_1Day_3DEngine

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
youtu.be/Nj8gt_92c-M

Dani - Making a Game in ONE Day (12 Hours)
youtu.be/mFNrOGPVls0

Fat Dino - I Made a Racing Game in 3 DAYS
youtu.be/tt46z0IbpP0

Code Monkey - I made an FPS in 5 days! (Unity Microgame)
youtu.be/kY1Q2GraWiw

Jabrils - Making A Game in 48 Hours!
youtu.be/SIzY8sR1Ql0

Tren Black - I Made Wii Tennis in 24 Hours
youtu.be/PgqOb1yFn7M

Brackeys - MAKING A GAME IN 10 MINUTES
youtu.be/p8MzsDBI5EI

BlackThornProd - I MADE A GAME IN 1 WEEK WITH UNITY
youtu.be/GTFYmzYjHzg

Writing a Particle System (using Three.js)

Wait, so comparisons in floating point only just KINDA work? What DOES work?

Create JavaScript 3D World in 5 Minutes (or less)

Hash Tables, Associative Arrays, and Dictionaries (Data Structures and Optimization)

I Tried Making a 3D RPG Game in JavaScript

Three.js Lighting Tutorial (JavaScript) | Light Types Explained!

$3D World Generation #2 (Perlin Noise) 3D World Generation (Perlin Noise) This is the second in a series of 3d world generation tutorials, covering topics in procedural terrain generation like 2d perlin noise and simplex noise, and computing fractional brownian motion (fbm). Whats covered: * What is Perlin Noise? Cover how gradient noise differs from value noise, what perlin and simplex noise are and how they differ. * Perlin/Simplex/OpenSimplex Noise Which should you use? * What is Fractional Brownian Motion? How this relates to noise and how its computed. * Perlin Noise Terrain Generation How to modify the previous tutorials mesh generation code to incorporate the noise generation. In the future: This is intended to be part 2 in a series of tutorials on the topic of 3d world generation. I intend to explore the topic more deeply, looking at how to extend our terrain generator to include LODs, and infinite terrain generation. Full source code for the project is available, so if youre interested in fiddling with the code, playing around with the parameters or extending the noise functions, feel free. Github: https://github.com/simondevyoutube/ProceduralTerrain_Part2 #proceduralterrain #gamedevelopment$

Simple Third Person Camera (using Three.js/JavaScript)

How Slow is JavaScript Really? JavaScript vs C++ (Data Structures & Optimization)