3D Objects in JavaScript - No Libraries [Understanding AI - Lesson 11 / 15]

PLAYLIST: • Self-driving Car :: Ph...
In Lesson 11 of the "Understanding AI" course, I'm thrilled to unveil the magic of 3D extrusions in JavaScript. Today, I'll guide you through the process of making elements pop up in the third dimension, a technique commonly known as extrusion. And when I say everything, I mean it - from buildings and cars to road borders.
But here's where it gets really exciting! I'll demonstrate how to move the camera behind our car, allowing us to see it in action, and share a trick often used in racing games to enhance the feeling of speed. Get ready for an eye-opening experience as I expose you to some really cool techniques that will elevate your game development skills.
Join me in this lesson where we explore 3D extrusions and dynamic camera movement in JavaScript, unlocking a new dimension in your self-driving car project. Like, share, and subscribe for more lessons on AI, game development, and cutting-edge programming concepts!
💻CODE 💻
github.com/gniziemazity/under...
Follow Along: 6. Camera Part 1
Code After This Lesson: 7. Camera Part 2
💬DISCORD💬
discord.gg/gJFcF5XVn9
⭐LINKS⭐
Self-driving Car Course: • Self-driving Car :: Ph...
Video about Speed: • Why Racing Games Feel ...
#RacingGame #RacingGameJavaScript #3D #Pseudo3D #3DNoLibraries #3DJavaScript #JavaScript Lesson #Extrusion #Speed
⭐TIMESTAMPS⭐
00:00 Introduction
01:05 Extruding Buildings
07:49 Extruding Cars
10:07 Extruding Trees
10:56 Extruding Road Borders
15:17 View from Behind
16:59 The feeling of Speed
19:30 Removing the Other Cars
23:40 Full-Screen

[@anwerjivani1547]

great work. he should have a million subscribers

[@Radu]

Thanks :-)

[@2difficult2do]

Thank you, Radu, for the detailed explanation and useful video instructions. When I follow your code, many things become clearer to me.

[@Radu]

Great to hear! :-)

[@firefox_tn1815]

Thank you Radu really. I want to be a channel member but i can't pay online in my country (I will when I'm abroad). Nonetheless you are a true professor and thank you for your hard work.

[@Radu]

Don't worry about it... I don't really care about getting subscribers or members. I set it up because some people say they want to thank me somehow and I decided to offer a way to do it.

[@javifontalva7752]

Another terrific video!

[@Radu]

Thank you :-)

[@henriqueritter]

that is awesome!! well done Radu!!!👏👏👏

[@Radu]

Thank you :-)

[@alvarobyrne]

joy to the world!

[@Radu]

Haha, glad you like it :-)

[@pragyanchakravarty765]

Thank You Sir. Big Fan

[@Radu]

Thanks for watching :-)

[@javifontalva7752]

I've just noticed that when we are drawing the projections the buildings are not ordered. I wonder we could order it according to how further up these are drawn (I also separated the different stuff so I can draw each things in a different colour). I still need to think how to pull up the ordering.

[@Radu]

Wow, you're really taking on a challenge :-)
I didn't bother with the ordering and got away with this... see-through look (I think it looks cool). But if you want to do it, maybe you can try ordering them by the distance to the base segment (in the above view, it should be fine). There might be few glitches... and you probably need to eventually calculate the distance from the camera to each surface. But it should be a nice learning experience, you may even discover why we typically break surfaces in triangles, etc. Good luck!

[@javifontalva7752]

@@Radu I'll keep you posted if I don't die. I've been trying for a week and still haven't got a satisfied result.

[@firefox_tn1815]

​@@javifontalva7752 Keep us updated. Good luck

[@Radu]

Please don't die. You're my most active viewer :-D

[@dastan331]

Amazing!!!

[@Radu]

Thanks!! :-)

[@catakuri6678]

i think the smooth camera gives the speed effect because it looks like the camera is making effort to catch up to you

[@Radu]

You are probably right. It also makes an 'effort' to break so it doesn't 'hit' the car when it stops.

[@adilsonbuset738]

Très bien, Maître Radu !

[@Radu]

Merci beaucoup :-)

[@alexsouza22]

Amazing 😍

[@Radu]

Thanks :-)

[@cazpfitl]

Thank you again professor, this exposition was great! 👌👌👌

[@Radu]

Glad you liked it! :-)

[@ifeoluwatemidayo3959]

Radu I really like your skill.
How did you learn all this stuff
Have work in a game industry before

[@Radu]

I made (flash) games a very long time ago (20 years ago).
But been coding many other things since... and got a PhD.

[@ChandrashekarCN]

💖💖💖💖

[@Radu]

:-)

[@DanielJoseAutodesk]

🤣🤣🤣🤣🤣🤣Started excited about the extrusion, and looks at the trees and... Ok ...We'll take care of the trees later... 🤣🤣🤣🤣😂👍

[@Radu]

Spoiler alert. I forgot about the trees so I never fix them :-)
But extruding them as pyramids, with one point at the top should be easy after you see how we make the car look nicer in the last lesson!

[@mayansstudios]

sir, what about 3d like webgL, three.js, Babylon.js. pleace make a video about 3d in future

[@Radu]

I like teaching how things work... not how to use libraries that do the job. I have few webgl / three.js related videos (older ones) somewhere on the channel, but I don't plan to make new ones like that anytime soon. Some people did port the self-driving car code from phase 1 in 3d environments (like three js). I link to their code somewhere in phase 2 (when we generate the buildings and the trees, I think).

[@mayansstudios]

@@Radu thank you sir and i am a big fan of your teaching

[@Radu]

Thank you :-)

[@pizdaxyu]

lerp util proven to be very useful

[@Radu]

Indeed it has :-)