How Do Computers Display 3D on a 2D Screen? (Perspective Projection)

Sdílet
Vložit
  • čas přidán 1. 06. 2024
  • How do computers display 3D objects on your 2D screen? In this video, I take you inside my notebook to show you.
    Code: github.com/carltheperson/3d-t...
    00:00 Intro
    00:41 Motivation
    01:15 Screen space vs world space
    06:33 Perspective projection intro and model
    10:30 Perspective projection math
    24:00 Code example
    Music: Ambient Piano [Prod by BalanceBay] from Pixabay

Komentáře • 52

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

    Your explanation is so clear and concise that I had an "ahah" moment where every piece just fell into place and dots started connecting

  • @lukaknight9589
    @lukaknight9589 Před rokem +23

    thank you so much, I'm so glad I found out this video. I've been seeking information about projections for a few days and couldn't find any information that wasn't irrelevant or too advanced, but, finally, I found your video and now I understand everything and was able to make my own 3d projection in js.

    • @whannabi
      @whannabi Před rokem +5

      Right, I've finally found something that's properly explained.

  • @STBrian159
    @STBrian159 Před 7 dny

    I really loved the video. I come from another video that began to explain somewhat more advanced things and I didn't understand anything. Maybe this is a little simpler but it is really useful when you are new in this area. Keep making content like this, intuitive and easy to understand!!

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

    Thanks for this wonderful introduction. I failed maths at school and wasn't shown the value of trig when I was a kid. You've blown my mind!

  • @MusicTee
    @MusicTee Před 13 hodinami

    very informative video, i just made my first 3d renderer using this

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

    Ur not carl the person ur carl the legend

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

    Thanks for taking the time to explain it in such a good way

  • @lesablier6744
    @lesablier6744 Před rokem +2

    Thank you very much for your explainations !

  • @imfaded3105
    @imfaded3105 Před rokem +3

    Great explanation

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

    That was so well done, Kudos.
    Wish i could see more of these concepts explained.
    Warm regards

  • @Sleir_
    @Sleir_ Před rokem +1

    this video was well made, thank you

  • @user-tr7xm6nj8t
    @user-tr7xm6nj8t Před 3 měsíci

    Such a good explanation....thanks

  • @frycomfort4002
    @frycomfort4002 Před rokem +1

    Clear and Amazing

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

    This is the best I've seen about this topic. Thank you so so much to explained this. ❤❤❤

  • @eliseoduque3261
    @eliseoduque3261 Před rokem +1

    amazing video , actually learned well

  • @mrshodz
    @mrshodz Před rokem

    Nice explanation.

  • @iwaduarte
    @iwaduarte Před rokem +3

    Exactly like @LukaB Knight posted. Your content is straightforward and goes in-depth about the perspective subject. Most content are math-heavy based or lazy representations. Especially content from universities and professors. They assume you know their derived thoughts in powerpoint presentations or even worse, they start with a really good explanation in the introduction just to come up with crazy things once things get real.
    Keep up the excellent work. Keep it simple (KISS) should be a rule that everyone that produces content should strictly follow. Congrats

  • @giveaway4002
    @giveaway4002 Před rokem +1

    this is awesome!

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

    THIS WAS SO USEFUL! I was trying to fix a bug and I just could't find it. When I watched this video I realized my core projection was wrong! And it works now. tysm!

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

    This is Amazing! Thanks a lot!

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

    Finally, btw love ur drawing ❤

  • @bestcodepractice7898
    @bestcodepractice7898 Před 6 měsíci

    Bro you are freaking amazing ❤❤❤

  • @sidtronics
    @sidtronics Před rokem

    That is so awesome!

  • @laurin__
    @laurin__ Před 6 měsíci +1

    Really cool video, thx!!
    This was soo helpful and first video on this subject i didnt find overwhelming as a medium iq guy, thanks for the simple and concise explanation

  • @theengineer9910
    @theengineer9910 Před rokem

    Thank you !

  • @orangomango
    @orangomango Před rokem

    AMAZING

  • @AnvarRaxmonov23
    @AnvarRaxmonov23 Před rokem

    Thanks

  • @MostafaAshraf-iu4yq
    @MostafaAshraf-iu4yq Před rokem

    Your a legend

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

    At some points of the video, I thought that you were dumbing down the concept hardly, and that made me a bit impatient.. but overall - really great stuff!

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

    great explenation, but wouldnt this only work if the camera never rotated? For example what if you rotate 10 degrees right (or up, depending on your perspective), then the triangles that are formed wont be right triangles so the formula wont stand and also the whole plane shifts

  • @siirkire
    @siirkire Před rokem +1

    Cool cup

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

    just a question? what is the dot symbol in the calculations at 23:15?

    • @kn-ki4637
      @kn-ki4637 Před měsícem

      you mean the multiplication symbol? it means z times tan(a/2).

  • @yapianomaster
    @yapianomaster Před rokem +1

    Amazing😱 It would be nice to show that there is a Zp coordinate too, however its value is always n, and because of that, we see the 3d object on the "2d plane" which its actually 3d, but flat hh, and because of that, the Zp can be ignored, for 2d porpuses.

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

      Actually when doing proper 3d rendering with OpenGL or DirectX we use a matrix to do all those transformations at once. We actually have a z value, but that's not just "n" but specifically claculated so it can be used to sort things in depth. Your GPU actually has a depth buffer besides the actual frame buffer which holds the color information of the pixels. The depth value is actually written into the depth buffer. That way things that were drawn first can occlude things drawn later.
      Anyways. This video ia a good introduction in the very fundamentals of 3d projection. In actual gameengines or 3d applications we use 4d homogeneous coordinates and 4x4 matrices to define any position or transformation.

  • @andrewdunbar828
    @andrewdunbar828 Před rokem

    You don't need trigonometry for perspective projection. You only need it for rotation. For perspective projection you just divide your X and Y each by your Z. In practice you'll want to use scaling factor and a Z offset in 3D space and X and Y offsets in screen space to normalize to the centre of the screen like you covered.
    I figured this out with a friend in the early '80s when I was 13 or 14. I didn't know most of the terminology and never learned matrices let alone all the amazing fancy stuff used these days.
    I don't understand the stuff with tan and your a variable.

    • @FlanPoirot
      @FlanPoirot Před rokem

      he used basic trigonometry. basically if you know 2 sides of a triangle you can know the other side by using sin, cos and tan.
      so since u want to scale down distant objects, its ratio should be the same, aka the triangle between the camera and the projection and the camera and the real distance of the object would have the same ratio. so you can know the w / h will be the same on both instances.
      so hp / wp = h / w (p standing for projection). solving for the projected height you have hp = h / w / wp which becomes hp = h / (w * wp)
      since wp is tan(2/a) (this means that the angle of the point you're projecting is half the total angle of the frustum if you look at the drawing he made you can see that this is the case) so we can just substitute wp for tan(2/a) in our equation
      hp = h / (w * tan(2/a))
      and the same can be said for width so
      wp = w / (h * tan(2/a))
      choosing an angle and using the points in the plain for your object and solving the equation, it will give you the projected coordinates for the object

    • @ellis447
      @ellis447 Před rokem

      This guys a genius!

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

      Matrices are used for the calculation of the coordinates in space rather than projection.

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

      @@pixellino5009 Matrices are used for both rotation and projection. But they don't need to be used for either. I believe the big win with matrices is that you can combine several rotations and projection all into one operation and by doing so ultimately use fewer discrete calculations. But I'm not sure. Also I believe these days quaternions are often used instead.
      Caveat: I'm bad at matrices and barely have a clue wrt quaternions, but when I was a kid in the '80s I did 3D rotation and projection on the 8-bit computers we had back then regardless.

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

      Trigonometric functions aren't needed if you start out with the distance of the near plane. The tan function is only used here to derive the distance of the near plane from the viewing angle. After you have the near plane, everything else is just similar triangles.

  • @Karmush21
    @Karmush21 Před rokem +1

    Is it really true to say that the near plane and screen is the same thing?

  • @AntoineVanGeyseghem
    @AntoineVanGeyseghem Před rokem

    :O

  • @snailcat69
    @snailcat69 Před rokem

    why. why i wasn't found this vid like three weeks ago, i fucked with it for 18 hours to make my 3d engine work

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

    Because math

  • @dheerparekh1305
    @dheerparekh1305 Před 18 dny

    Good video but improve on your presentation and speech delivery

  • @monkeyrobotsinc.9875
    @monkeyrobotsinc.9875 Před 4 měsíci +4

    uhh cool but why did you make a whole video about perspective and then at the very end show a cube that looks 100% orthographic? LOL u serious? wow. cool. also turn up the volume on your next video.

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

    WHY DO YOU USE SO MANY LIBRARYS ITS SO CONFUSING PLZ PUT RAW HTML AND CSS AND JS 😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭😭