How to make a 3D Renderer [Explained Simply]

Sdílet
Vložit
  • čas přidán 11. 09. 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]

Komentáře • 125

  • @sceKernelDestroy
    @sceKernelDestroy Před 10 měsíci +85

    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 CZcams content :)

    • @m7trffxx_xx166
      @m7trffxx_xx166 Před 9 měsíci +1

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

    • @m7trffxx_xx166
      @m7trffxx_xx166 Před 9 měsíci

      Also i use java language Graphics 2D library

    • @graverdev
      @graverdev  Před 8 měsíci +14

      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 Před 13 dny +1

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

    • @LukesOffline
      @LukesOffline Před 13 dny +1

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

  • @kelvttech9913
    @kelvttech9913 Před 3 měsíci +76

    did he say he created a renderer in scratch

    • @sasswseas
      @sasswseas Před 2 měsíci +4

      Yes you can create a 3d renderer in scratch

    • @CardboardRaider
      @CardboardRaider Před 2 měsíci +1

      I mean, you can

    • @DR_Sam_YouTube
      @DR_Sam_YouTube Před měsícem +2

      It’s not hard

    • @CardboardRaider
      @CardboardRaider Před měsícem +6

      @@DR_Sam_CZcams do it in a few hours then without tutorials, record it, then post it

    • @DR_Sam_YouTube
      @DR_Sam_YouTube Před měsícem +3

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

  • @beepboopitsjoop4678
    @beepboopitsjoop4678 Před 8 měsíci +10

    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  Před 8 měsíci +2

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

  • @dudebros6122
    @dudebros6122 Před rokem +87

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

    • @graverdev
      @graverdev  Před rokem +22

      true, there is a story behind this but whatever

    • @CoolJosh3k
      @CoolJosh3k Před 11 měsíci +9

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

    • @memealade2421
      @memealade2421 Před 8 měsíci +4

      🤓

    • @abdou.the.heretic
      @abdou.the.heretic Před 6 měsíci +2

      ​@@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 Před 4 měsíci

      ​@@CoolJosh3kwell we know who the autist are😅

  • @sistemafuturo
    @sistemafuturo Před 7 měsíci +7

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

  • @Arillaxe
    @Arillaxe Před 10 měsíci +7

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

  • @goobertnelius
    @goobertnelius Před rokem +32

    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  Před rokem +5

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

    • @joaovitormeyer7817
      @joaovitormeyer7817 Před 9 měsíci

      did you do it?

  • @Rowlesisgay
    @Rowlesisgay Před rokem +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

  • @ecomensstudios7169
    @ecomensstudios7169 Před 8 měsíci +2

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

  • @thecalculatedcreativecoder1428
    @thecalculatedcreativecoder1428 Před 8 měsíci +2

    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  Před 3 měsíci

      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.

  • @yolamontalvan9502
    @yolamontalvan9502 Před 9 měsíci +1

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

  • @MarkoHava
    @MarkoHava Před rokem +3

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

    • @graverdev
      @graverdev  Před rokem +1

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

  • @antoinelegall6402
    @antoinelegall6402 Před 2 měsíci +1

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

  • @Cy0ze
    @Cy0ze Před rokem +8

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

    • @graverdev
      @graverdev  Před rokem +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

  • @user-hy9nk5sg8d
    @user-hy9nk5sg8d Před 4 měsíci

    the formula explanation is epic

  • @grigoriy_hacker
    @grigoriy_hacker Před rokem +3

    Thanks you this video is very helpful.

    • @graverdev
      @graverdev  Před rokem +1

      glad you enjoyed it! Good luck with your project

  • @OneMeanDragon
    @OneMeanDragon Před rokem +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  Před rokem

      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

  • @random_company
    @random_company Před 8 měsíci +1

    Thank you very much, bro!

  • @gower1973
    @gower1973 Před rokem +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

  • @ahmdmoadi
    @ahmdmoadi Před 3 měsíci

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

  • @Galcio2115
    @Galcio2115 Před 10 měsíci +1

    THANK YOU BROOOOOOOO

  • @blue_birb
    @blue_birb Před 2 měsíci

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

  • @CarverBane
    @CarverBane Před 5 měsíci

    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?

  • @the-guy-beyond-the-socket
    @the-guy-beyond-the-socket Před 3 měsíci +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  Před 3 měsíci

      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 Před 3 měsíci

      @@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?

  • @gregmackinnon8098
    @gregmackinnon8098 Před 5 měsíci

    Amazing🎉

  • @adamuss
    @adamuss Před 4 měsíci +1

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

    • @graverdev
      @graverdev  Před 3 měsíci

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

  • @ThatRandomError
    @ThatRandomError Před 4 měsíci

    i get werid clipping when a block is behind the camera

  • @memesalldayjack3267
    @memesalldayjack3267 Před rokem

    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 Před 10 měsíci

      You're gonna need a depth sorting algorithm for that

  • @DevDotLK
    @DevDotLK Před rokem

    Wow 😍

  • @tornadoreaper
    @tornadoreaper Před 5 měsíci

    nice

  • @user-ro2tm3dp8x
    @user-ro2tm3dp8x Před 10 měsíci

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

  • @ski_MC
    @ski_MC Před 7 měsíci

    i wonder why you didn't do any next videos

  • @DaGaybs
    @DaGaybs Před 10 měsíci +1

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

    • @graverdev
      @graverdev  Před 10 měsíci

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

  • @goofygoober748
    @goofygoober748 Před 2 měsíci

    can you design the graphics card for this too

  • @CJ_Link
    @CJ_Link Před 8 měsíci

    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 Před 7 měsíci

      perhaps u had a memory leak somewhere

  • @lucpena
    @lucpena Před rokem

    great content!

    • @graverdev
      @graverdev  Před rokem

      Thanks!

    • @TacitMarmot27121yt
      @TacitMarmot27121yt Před 11 měsíci

      you deserve more subs@@graverdev

    • @graverdev
      @graverdev  Před 11 měsíci

      @@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 Před 11 měsíci

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

  • @z3db0y
    @z3db0y Před 5 měsíci +1

    :3

  • @test336zz
    @test336zz Před 4 měsíci

    can you give us the link to your scratch project.

  • @phir9255
    @phir9255 Před 8 měsíci

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

    • @graverdev
      @graverdev  Před 8 měsíci

      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.

  • @weaponisedbattletoaster805

    Is there a way to add textures?

    • @graverdev
      @graverdev  Před rokem

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

    • @weaponisedbattletoaster805
      @weaponisedbattletoaster805 Před rokem +1

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

    • @CoolJosh3k
      @CoolJosh3k Před 11 měsíci

      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.

  • @emirbrkic6649
    @emirbrkic6649 Před 11 měsíci +1

    thx

  • @richard_seifert
    @richard_seifert Před 11 měsíci +1

    Is there anywhere the source code for this project?

    • @graverdev
      @graverdev  Před 11 měsíci

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

  • @palerider2143
    @palerider2143 Před 8 měsíci

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

    • @shailmurtaza9082
      @shailmurtaza9082 Před 22 dny

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

  • @tytanium4701
    @tytanium4701 Před 22 dny

    3:22 ah yes, z sim θ

  • @chrischoir3594
    @chrischoir3594 Před 4 měsíci

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

    • @ziggyzoggin
      @ziggyzoggin Před 4 měsíci +4

      do you know what rendering means

  • @Mihapp9
    @Mihapp9 Před 10 měsíci

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

    • @graverdev
      @graverdev  Před 10 měsíci

      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

  • @crazymania7618
    @crazymania7618 Před měsícem

    Can you please provide the source code

  • @188sanju
    @188sanju Před 3 měsíci

    If the image is behind cam it is weirrd

  • @morph_systems
    @morph_systems Před 8 měsíci +1

    nice video, you had a cold ?

    • @graverdev
      @graverdev  Před 8 měsíci +1

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

    • @morph_systems
      @morph_systems Před 8 měsíci +1

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

    • @graverdev
      @graverdev  Před 3 měsíci

      ​@@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

  • @peace7784
    @peace7784 Před rokem +1

    Can you share the music

    • @ControlledBoom
      @ControlledBoom Před rokem +1

      Its just a remix of Otherside by Lena Raine.

  • @user-if3py5yh5b
    @user-if3py5yh5b Před 5 měsíci

    "explained simply"

  • @DeathAtYourDoorStep
    @DeathAtYourDoorStep Před 10 měsíci

    add textures in the next video

  • @cayman_islands
    @cayman_islands Před 8 měsíci +1

    where code?

  • @ArthurSchoppenweghauer
    @ArthurSchoppenweghauer Před 2 měsíci

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

  • @DalpakaNBA
    @DalpakaNBA Před 4 měsíci

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

  • @user-hp2in8fr1j
    @user-hp2in8fr1j Před rokem

    Wow very impressive but i code it with ascii

    • @graverdev
      @graverdev  Před rokem

      that actually sounds fun, wanna share the code?

  • @laurin__
    @laurin__ Před 8 měsíci

    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  Před 8 měsíci

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

  • @issam76
    @issam76 Před 11 měsíci

    Can't blame anyone this tutorial is for free.

  • @Krullfath
    @Krullfath Před 2 měsíci

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

    • @graverdev
      @graverdev  Před 2 měsíci

      thanks!

    • @Jxhsxn
      @Jxhsxn Před měsícem

      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 Před měsícem

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

    • @Jxhsxn
      @Jxhsxn Před měsícem

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

  • @Banaannaa
    @Banaannaa Před rokem

    simple🤣🤣

    • @graverdev
      @graverdev  Před rokem

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

    • @ziphy_6471
      @ziphy_6471 Před rokem

      @@graverdev yes