How to make a 3D Renderer [Explained Simply]

Поділитися
Вставка
  • Опубліковано 6 лис 2024

КОМЕНТАРІ • 131

  • @sceKernelDestroy
    @sceKernelDestroy Рік тому +109

    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 11 місяців тому +1

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

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

      Also i use java language Graphics 2D library

    • @graverdev
      @graverdev  10 місяців тому +21

      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 2 місяці тому +1

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

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

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

  • @beepboopitsjoop4678
    @beepboopitsjoop4678 10 місяців тому +16

    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  10 місяців тому +3

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

  • @kelvttech9913
    @kelvttech9913 5 місяців тому +125

    did he say he created a renderer in scratch

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

      Yes you can create a 3d renderer in scratch

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

      I mean, you can

    • @DR_Sam_YouTube
      @DR_Sam_YouTube 3 місяці тому +6

      It’s not hard

    • @DR_Sam_YouTube
      @DR_Sam_YouTube 3 місяці тому +7

      @@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 2 місяці тому

      @@DR_Sam_UA-camok do it then

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

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

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

      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 10 місяців тому +5

      🤓

    • @abdou.the.heretic
      @abdou.the.heretic 8 місяців тому +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 6 місяців тому

      ​@@CoolJosh3kwell we know who the autist are😅

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

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

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

    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 11 місяців тому

      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

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

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

  • @ecomensstudios7169
    @ecomensstudios7169 10 місяців тому +3

    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 10 місяців тому +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  5 місяців тому

      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 Рік тому +4

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

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

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

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

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

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

    the formula explanation is epic

  • @random_company
    @random_company 10 місяців тому +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

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

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

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

    Thanks you this video is very helpful.

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

      glad you enjoyed it! Good luck with your project

  • @AstorasDovlias
    @AstorasDovlias 25 днів тому +1

    fov is field of view

    • @graverdev
      @graverdev  24 дні тому

      yep, that is corrected by the pinned comment

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

    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  Рік тому +1

      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 5 місяців тому

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

  • @pixelgoose98
    @pixelgoose98 24 дні тому

    video is really good! might want to get a better mic tho lol

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

    THANK YOU BROOOOOOOO

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

    Wow 😍

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

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

  • @the-guy-beyond-the-socket
    @the-guy-beyond-the-socket 5 місяців тому +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  5 місяців тому

      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 5 місяців тому

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

  • @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 Рік тому

      You're gonna need a depth sorting algorithm for that

  • @ElijahS-y2k
    @ElijahS-y2k 7 місяців тому +2

    "explained simply"

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

    Amazing🎉

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

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

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

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

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

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

    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?

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

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

    i wonder why you didn't do any next videos

  • @Ноунеймбезгалочки-м7ч

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

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

    i get werid clipping when a block is behind the camera

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

    can you design the graphics card for this too

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

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

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

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

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

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

    nice

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

    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 9 місяців тому

      perhaps u had a memory leak somewhere

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

    :3

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

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

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

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

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

    can you give us the link to your scratch project.

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

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

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

      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.

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

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

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

      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

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

    nice video, you had a cold ?

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

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

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

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

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

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

  • @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 :(

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

    thx

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

    3:22 ah yes, z sim θ

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

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

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

      do you know what rendering means

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

    Can you share the music

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

      Its just a remix of Otherside by Lena Raine.

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

    where code?

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

    add textures in the next video

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

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

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

    code or github?

    • @graverdev
      @graverdev  24 дні тому

      unfortunately when I made this video I didn’t expect it to gain any traction and then I lost my hard drive. sorry for that

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

    If the image is behind cam it is weirrd

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

    Wow very impressive but i code it with ascii

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

      that actually sounds fun, wanna share the code?

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

    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  10 місяців тому

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

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

    Can you please provide the source code

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

    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

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

    Can't blame anyone this tutorial is for free.

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

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

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

      thanks!

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

      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 3 місяці тому

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

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

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

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

    simple🤣🤣

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

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

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

      @@graverdev yes