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

แชร์
ฝัง
  • เผยแพร่เมื่อ 9 พ.ค. 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

ความคิดเห็น • 50

  • @justplay2508
    @justplay2508 7 หลายเดือนก่อน +6

    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 ปีที่แล้ว +22

    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 ปีที่แล้ว +5

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

  • @lodgechant
    @lodgechant หลายเดือนก่อน

    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!

  • @fdanavarro
    @fdanavarro 4 หลายเดือนก่อน

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

  • @blaisofotso3439
    @blaisofotso3439 9 หลายเดือนก่อน

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

  • @lesablier6744
    @lesablier6744 ปีที่แล้ว +2

    Thank you very much for your explainations !

  • @imfaded3105
    @imfaded3105 ปีที่แล้ว +3

    Great explanation

  • @frycomfort4002
    @frycomfort4002 ปีที่แล้ว +1

    Clear and Amazing

  • @Sleir_
    @Sleir_ ปีที่แล้ว +1

    this video was well made, thank you

  • @plasthree
    @plasthree 4 หลายเดือนก่อน

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

  • @eliseoduque3261
    @eliseoduque3261 ปีที่แล้ว

    amazing video , actually learned well

  • @user-tr7xm6nj8t
    @user-tr7xm6nj8t 2 หลายเดือนก่อน

    Such a good explanation....thanks

  • @giveaway4002
    @giveaway4002 ปีที่แล้ว +1

    this is awesome!

  • @dennisrajan8020
    @dennisrajan8020 หลายเดือนก่อน

    This is Amazing! Thanks a lot!

  • @Extner4
    @Extner4 7 หลายเดือนก่อน

    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!

  • @mrshodz
    @mrshodz ปีที่แล้ว

    Nice explanation.

  • @iwaduarte
    @iwaduarte ปีที่แล้ว +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

  • @sidtronics
    @sidtronics ปีที่แล้ว

    That is so awesome!

  • @original16gstudio80
    @original16gstudio80 2 หลายเดือนก่อน

    Finally, btw love ur drawing ❤

  • @theengineer9910
    @theengineer9910 ปีที่แล้ว

    Thank you !

  • @orangomango
    @orangomango ปีที่แล้ว

    AMAZING

  • @laurin__
    @laurin__ 6 หลายเดือนก่อน +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

  • @bestcodepractice7898
    @bestcodepractice7898 5 หลายเดือนก่อน

    Bro you are freaking amazing ❤❤❤

  • @MostafaAshraf-iu4yq
    @MostafaAshraf-iu4yq ปีที่แล้ว

    Your a legend

  • @AnvarRaxmonov23
    @AnvarRaxmonov23 ปีที่แล้ว

    Thanks

  • @nikolastamenkovic7069
    @nikolastamenkovic7069 4 หลายเดือนก่อน

    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!

  • @dijik123
    @dijik123 4 หลายเดือนก่อน

    Ur not carl the person ur carl the legend

  • @turner7777
    @turner7777 3 หลายเดือนก่อน

    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 ปีที่แล้ว +1

    Cool cup

  • @yapianomaster
    @yapianomaster ปีที่แล้ว +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 4 หลายเดือนก่อน

      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 ปีที่แล้ว

    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 ปีที่แล้ว

      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 ปีที่แล้ว

      This guys a genius!

    • @pixellino5009
      @pixellino5009 10 หลายเดือนก่อน

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

    • @andrewdunbar828
      @andrewdunbar828 10 หลายเดือนก่อน +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 9 หลายเดือนก่อน +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.

  • @HyperDevv
    @HyperDevv หลายเดือนก่อน

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

    • @kn-ki4637
      @kn-ki4637 29 วันที่ผ่านมา

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

  • @Karmush21
    @Karmush21 ปีที่แล้ว +1

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

  • @AntoineVanGeyseghem
    @AntoineVanGeyseghem 11 หลายเดือนก่อน

    :O

  • @snailcat69
    @snailcat69 ปีที่แล้ว

    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

    • @ice-sugar.
      @ice-sugar. ปีที่แล้ว +3

      At least you did it man!

  • @jammin1336
    @jammin1336 2 หลายเดือนก่อน

    Because math

  • @monkeyrobotsinc.9875
    @monkeyrobotsinc.9875 3 หลายเดือนก่อน +3

    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.

    • @Chicken_Soy
      @Chicken_Soy หลายเดือนก่อน

      you sound like a redditor

    • @ckafrouni
      @ckafrouni 4 วันที่ผ่านมา

      You clearly haven’t watched the whole video.. 26:37

  • @HyperDevv
    @HyperDevv หลายเดือนก่อน

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