How to make a 3D Renderer [Explained Simply]

Поділитися
Вставка
  • Опубліковано 5 жов 2024
  • Hey guys, in this video I'm gonna explain simply how to make a 3D renderer/engine in C++ but this can also be applied to Java, Python, JavaScript, Rust or C. After this video you will be able to create a simple 3D projection of a cube and map it into a 2D screen.
    This is my first video about computer science in the style of javidx9, The Cherno, Nemean and jdh. I wanted to make an engine, not like Unreal Engine or Unity but a lot simpler. This video uses some cool programming, math, algorithms and data structures
    The videos by 3Blue1Brown about linear algebra:
    • 3Blue1Brown: Linear Alg
    [I'm trying to fit as many keywords as possible in this description, that's why it's so weird]

КОМЕНТАРІ • 127

  • @sceKernelDestroy
    @sceKernelDestroy 10 місяців тому +91

    What you call vertices are usually called edges. They specify the connections between different points, - which are usually called vertices btw :D And a face (in 3D) would be a list of at least 3 vertices. If you want to draw (filled-in) triangles you would list the 3 vertices. (You might already know that by now, so this is just to give some context for your viewers.)
    Some funny naming conventions aside I really liked your video though! Wish you the best with your future UA-cam content :)

    • @m7trffxx_xx166
      @m7trffxx_xx166 10 місяців тому +1

      The focal length is optional right?
      How can i get the suitable FOV for my frame?

    • @m7trffxx_xx166
      @m7trffxx_xx166 10 місяців тому

      Also i use java language Graphics 2D library

    • @graverdev
      @graverdev  9 місяців тому +16

      thanks for this comment. I created this channel a while back and kind of abandoned it, hopefully nobody was mislead by my mistakes. Working on next video btw

    • @LukesOffline
      @LukesOffline Місяць тому +1

      @@m7trffxx_xx166 DISHONORED PFP FOUND DISHONORED PFP FOUND, AWESOME GAME

    • @LukesOffline
      @LukesOffline Місяць тому +1

      @@graverdev Aw man sucks to hear you abandoned it :(

  • @kelvttech9913
    @kelvttech9913 4 місяці тому +86

    did he say he created a renderer in scratch

    • @sasswseas
      @sasswseas 3 місяці тому +5

      Yes you can create a 3d renderer in scratch

    • @CardboardRaider
      @CardboardRaider 3 місяці тому +1

      I mean, you can

    • @DR_Sam_YouTube
      @DR_Sam_YouTube 2 місяці тому +4

      It’s not hard

    • @DR_Sam_YouTube
      @DR_Sam_YouTube 2 місяці тому +5

      @@CardboardRaider Wdym without tutorials, I don’t have the math equations memorized my boy. If you mean video tutorials then, sure, I could do that.

    • @tsoden2
      @tsoden2 Місяць тому

      @@DR_Sam_UA-camok do it then

  • @beepboopitsjoop4678
    @beepboopitsjoop4678 9 місяців тому +11

    this is amazing
    ive always been fascinated by how 3d renderers work, and ive always wanted to be able to build one, but it all seemed so complex. i
    ive started studying trigonimetry which has always been my weakest subject, and i must say that noticing some concepts from trigonometry used in this video feels so satisfying. You have really given me a hope that i can attempt thi and possibly get a deeper understanding of renderers. thank you for the simple, intuitive explanation

    • @graverdev
      @graverdev  9 місяців тому +2

      holy shit it feels nice to see people enjoy this video, thanks!

  • @dudebros6122
    @dudebros6122 Рік тому +93

    Calling the focal length the FOV (field of view) is very strange, they are separate things.

    • @graverdev
      @graverdev  Рік тому +23

      true, there is a story behind this but whatever

    • @CoolJosh3k
      @CoolJosh3k Рік тому +10

      I also noticed this. Really does need correcting as it was quite wrong.

    • @memealade2421
      @memealade2421 9 місяців тому +4

      🤓

    • @abdou.the.heretic
      @abdou.the.heretic 7 місяців тому +3

      ​@@CoolJosh3kVERY, that's fov/2 and to actually get the wanted effect of fov, you'd need the inverse of tan(fov/2) in the projection matrix.

    • @DNautSun
      @DNautSun 5 місяців тому

      ​@@CoolJosh3kwell we know who the autist are😅

  • @goobertnelius
    @goobertnelius Рік тому +33

    Very helpful. I was gonna try and make a 3D render in javascript for fun but wasn't sure what concepts I needed to understand. Thanks

    • @graverdev
      @graverdev  Рік тому +5

      Thanks for the kind words! Good luck and I hope you stick around for the future content

    • @joaovitormeyer7817
      @joaovitormeyer7817 10 місяців тому

      did you do it?

  • @Rowlesisgay
    @Rowlesisgay Рік тому +3

    Im a sucker for this stuff, I worked it out in my own in visual basic in highschool for fun and this really reminds me of it, so now im gonna try rewritting it in c++ and adding other features like being usable and not wireframe

  • @sistemafuturo
    @sistemafuturo 8 місяців тому +7

    Nice topic to start! Awaiting for the next one, too!

  • @Arillaxe
    @Arillaxe 11 місяців тому +7

    Very simple and straight forward. Good job explaining it! Very clear! Thanks for the vid!

  • @thecalculatedcreativecoder1428
    @thecalculatedcreativecoder1428 8 місяців тому +3

    Bro when are you coming back? I just found this channel for something I am working on, but your quality is so nice! Please come back soon!

    • @graverdev
      @graverdev  4 місяці тому

      I have one video partially written, though it is more of an video essay and with an unusual topic. I'll try to incorporate some of my interests to make a channel mostly about technology... without really making a usual tech channel.

  • @MarkoHava
    @MarkoHava Рік тому +3

    i think i've never subbed to a person this quick. im literaly less than 1 min in 🤣🤣

    • @graverdev
      @graverdev  Рік тому +1

      wow thanks! Will try not to dissapoint you with my future content

  • @antoinelegall6402
    @antoinelegall6402 2 місяці тому +1

    "Not very technical* bruh.
    But this is very interesting.

  • @נרשםלערוץ
    @נרשםלערוץ 5 місяців тому

    the formula explanation is epic

  • @ecomensstudios7169
    @ecomensstudios7169 9 місяців тому +2

    Thanks so much for this tutorial it was simple and straight forward!it helped me make it work on my arduino display :D

  • @grigoriy_hacker
    @grigoriy_hacker Рік тому +3

    Thanks you this video is very helpful.

    • @graverdev
      @graverdev  Рік тому +1

      glad you enjoyed it! Good luck with your project

  • @yolamontalvan9502
    @yolamontalvan9502 10 місяців тому +1

    Great video. I’m waiting for the next one.

  • @random_company
    @random_company 9 місяців тому +1

    Thank you very much, bro!

  • @Cy0ze
    @Cy0ze Рік тому +8

    Thanks for the eplanation. Is there a repository where anyone can check the code you wrote?

    • @graverdev
      @graverdev  Рік тому +3

      No there isn't and I probably shoul've made one but unfortunetly I lost my hard drive. Next videos will have repos tho

  • @OneMeanDragon
    @OneMeanDragon Рік тому +12

    you need to make more stuff, i dont think i was expecting sdl to pull off 3d drawing for some reason lol at least smooth anyways.

    • @graverdev
      @graverdev  Рік тому

      Thanks! I will, I'm working on some interesting projects and will be happy to share them. I'm also open to ideas if you have any

  • @ahmdmoadi
    @ahmdmoadi 3 місяці тому

    You explain gud in ms paint = i like video. simple.

  • @Galcio2115
    @Galcio2115 11 місяців тому +1

    THANK YOU BROOOOOOOO

  • @gower1973
    @gower1973 Рік тому +4

    I think when you said vertexes, I think you you meant indices which describe the draw order, because some sides share the same points and you would end up drawing the same point more than once

  • @blue_birb
    @blue_birb 3 місяці тому

    I think you kinda did the perspective matrix weird it's smaller in front and bigger in the back

  • @memesalldayjack3267
    @memesalldayjack3267 Рік тому

    i was hoping to see an explanation on how to not draw whats far in the same spot as what's near after drawing what's near

    • @jekhstah
      @jekhstah 11 місяців тому

      You're gonna need a depth sorting algorithm for that

  • @CarverBane
    @CarverBane 6 місяців тому

    This video is great! It explained the 3d concept in a way that i can understand. I've coded this using javascript and the formulas you provided, but i'm encountering a problem. When points goes behind the camera, the 3d points will still be shown on the screen instead of dissapearing behind the camera. The points appear to be mirrored too. Can you help me?

  • @gregmackinnon8098
    @gregmackinnon8098 6 місяців тому

    Amazing🎉

  • @the-guy-beyond-the-socket
    @the-guy-beyond-the-socket 4 місяці тому +1

    what is the actual difference between weak projection and regular one? i cant find any vid or article with comparison or any explanation which is which

    • @graverdev
      @graverdev  4 місяці тому

      wikipedia for 3D projection has some information about that. "Weak projection" is just a part of a broader term "projection". Also I don't know why it's "weak"

    • @the-guy-beyond-the-socket
      @the-guy-beyond-the-socket 4 місяці тому

      @@graverdev i've read Wikipedia article but it doesn't really expain whats the difference. I mean, every 3d projection application uses weak projection, right? So what could regular even do? Is it the one with projection matrices?

  • @z3db0y
    @z3db0y 5 місяців тому +1

    :3

  • @tornadoreaper
    @tornadoreaper 5 місяців тому

    nice

  • @DevDotLK
    @DevDotLK Рік тому

    Wow 😍

  • @ElijahS-y2k
    @ElijahS-y2k 6 місяців тому +1

    "explained simply"

  • @DaGaybs
    @DaGaybs 11 місяців тому +1

    Hi
    Mine just shows a black screen and idk what i did wrong since i copied everytinh exaclty as you showed :(

    • @graverdev
      @graverdev  11 місяців тому

      Hi! Hit me up on discord (@graverman), will try my best to help

  • @ThatRandomError
    @ThatRandomError 5 місяців тому

    i get werid clipping when a block is behind the camera

  • @emirbrkic6649
    @emirbrkic6649 Рік тому +1

    thx

  • @I_pvn
    @I_pvn 11 годин тому

    code or github?

  • @adamuss
    @adamuss 4 місяці тому +1

    what's the name of the second background song? the one after doom's

    • @graverdev
      @graverdev  4 місяці тому

      "Lena Raine - Otherside (Lofi Remix)" by Speck

  • @ski_MC
    @ski_MC 7 місяців тому

    i wonder why you didn't do any next videos

  • @Ноунеймбезгалочки-м7ч
    @Ноунеймбезгалочки-м7ч 11 місяців тому

    it starts glitching when objects go behind camera, what do I do?

  • @CJ_Link
    @CJ_Link 8 місяців тому

    Actually a really awesome video and it helped me a lot, however the window was rendering solid black and yeah idk what's really going on. I tried printing the errors to console and it just says "Out of Memory". Any idea why?

    • @jingseng2129
      @jingseng2129 8 місяців тому

      perhaps u had a memory leak somewhere

  • @tytanium4701
    @tytanium4701 Місяць тому

    3:22 ah yes, z sim θ

  • @lucpena
    @lucpena Рік тому

    great content!

    • @graverdev
      @graverdev  Рік тому

      Thanks!

    • @TacitMarmot27121yt
      @TacitMarmot27121yt Рік тому

      you deserve more subs@@graverdev

    • @graverdev
      @graverdev  Рік тому

      @@TacitMarmot27121yt thank you! I have to finally make another video, I have a bunch of cool ideas so I hope everyone will enjoy them

    • @TacitMarmot27121yt
      @TacitMarmot27121yt Рік тому

      i bet i will because this video was interesting and very helpful@@graverdev

  • @goofygoober748
    @goofygoober748 2 місяці тому

    can you design the graphics card for this too

  • @phir9255
    @phir9255 9 місяців тому

    Let me clarify, is a renderer just a program projecting 3D object to the 2D screen?

    • @graverdev
      @graverdev  9 місяців тому

      Rendering in general refers to generating an image of a 2D or 3D object. This particular technique I used is called projection and it projects, but there are other ways to do that.

  • @morph_systems
    @morph_systems 9 місяців тому +1

    nice video, you had a cold ?

    • @graverdev
      @graverdev  9 місяців тому +1

      I think it was bad mic, combined with bas boosting and childish voice

    • @morph_systems
      @morph_systems 9 місяців тому +1

      Excellent video nonetheless, do you have any content coming up soon ? :)

    • @graverdev
      @graverdev  4 місяці тому

      ​@@morph_systems thank you! I am working on one video, though it won't be about coding. I plan to mix things up to fit my current interests, which are difficult to explain lmao. Coding videos will come too, if I continue working on what I planned

  • @test336zz
    @test336zz 5 місяців тому

    can you give us the link to your scratch project.

  • @palerider2143
    @palerider2143 8 місяців тому

    But why and how is PX being divided by FOV when we get projected X?

    • @shailmurtaza9082
      @shailmurtaza9082 Місяць тому

      By using concept of similar triangles. Both triangles make same angle.

  • @chrischoir3594
    @chrischoir3594 5 місяців тому

    how exactly is this 'rendering" ? it's more like a bunch of lines

    • @ziggyzoggin
      @ziggyzoggin 4 місяці тому +4

      do you know what rendering means

  • @crazymania7618
    @crazymania7618 2 місяці тому

    Can you please provide the source code

  • @richard_seifert
    @richard_seifert Рік тому +1

    Is there anywhere the source code for this project?

    • @graverdev
      @graverdev  Рік тому

      unfortunately I lost access to the machine I had this saved on :(

  • @Mihapp9
    @Mihapp9 11 місяців тому

    How to check if points is invisible ( covered by faces)?

    • @graverdev
      @graverdev  11 місяців тому

      this is a very primitive method mainly for learning, I don’t think anyone uses it in real world. I will try to look for something like this, but if you plan to do something big, consider using OpenGL or Vulcan if you feel ambitious

  • @weaponisedbattletoaster805
    @weaponisedbattletoaster805 Рік тому +2

    Is there a way to add textures?

    • @graverdev
      @graverdev  Рік тому

      not that I am aware of, if you want to make a 3D engine - like a real one - I suggest learning OpenGL

    • @weaponisedbattletoaster805
      @weaponisedbattletoaster805 Рік тому +1

      @@graverdev k thx mate ill look into that :)

    • @CoolJosh3k
      @CoolJosh3k Рік тому

      You can do a lot with SDL and there are plenty of tutorials. However, you’ll eventually want to get the real work happening on the GPU.

  • @188sanju
    @188sanju 3 місяці тому

    If the image is behind cam it is weirrd

  • @peace7784
    @peace7784 Рік тому +1

    Can you share the music

    • @ControlledBoom
      @ControlledBoom Рік тому +1

      Its just a remix of Otherside by Lena Raine.

  • @cayman_islands
    @cayman_islands 9 місяців тому +1

    where code?

  • @DeathAtYourDoorStep
    @DeathAtYourDoorStep 10 місяців тому

    add textures in the next video

  • @ArthurSchoppenweghauer
    @ArthurSchoppenweghauer 3 місяці тому

    it's sin(theta), not sim(theta).

  • @bekbekovv111
    @bekbekovv111 День тому

    i tried to make a 3d renderer. i failed horrendously. i only have a cube that u can move around as if its the Sun lmao thats it

  • @Helloland-p7w
    @Helloland-p7w Рік тому

    Wow very impressive but i code it with ascii

    • @graverdev
      @graverdev  Рік тому

      that actually sounds fun, wanna share the code?

  • @DalpakaNBA
    @DalpakaNBA 5 місяців тому

    shake my grimace😢 1:46 1:46 1:46

  • @laurin__
    @laurin__ 9 місяців тому

    F*ck you for saying FOV is focal length and calling lines vertecies but the prespective projection explanation was really nice on point and easy to follow

    • @graverdev
      @graverdev  9 місяців тому

      haha yeah there were some embarrassing mistakes made here, gl;ad you found the video easy to follow though

  • @issam76
    @issam76 11 місяців тому

    Can't blame anyone this tutorial is for free.

  • @Banaannaa
    @Banaannaa Рік тому

    simple🤣🤣

    • @graverdev
      @graverdev  Рік тому

      yeah that’s primary school level math and c++ basics

    • @ziphy_6471
      @ziphy_6471 Рік тому

      @@graverdev yes

  • @Krullfath
    @Krullfath 3 місяці тому

    Where can I copy your c++ code?? Literally useless video imo, learnt nothing

    • @graverdev
      @graverdev  3 місяці тому

      thanks!

    • @Jxhsxn
      @Jxhsxn 2 місяці тому

      you learnt nothing because it isnt possible for you to learn if dont know the math research into the equations he pointed out in the video and you will start to understand everything better

    • @Krullfath
      @Krullfath 2 місяці тому

      @@Jxhsxn You need to learn how to properly write coherent sentences

    • @Jxhsxn
      @Jxhsxn 2 місяці тому

      @@Krullfath theres nothing wrong with my comment you just need to learn how to learn copying code wont teach you anything.