{"id":1803,"date":"2022-10-27T20:03:49","date_gmt":"2022-10-27T11:03:49","guid":{"rendered":"http:\/\/batmask.dothome.co.kr\/?p=1803"},"modified":"2025-09-11T18:52:18","modified_gmt":"2025-09-11T09:52:18","slug":"godot-3d-rendering-4-geometry-transforms","status":"publish","type":"post","link":"http:\/\/batmask.net\/index.php\/2022\/10\/27\/1803\/","title":{"rendered":"Godot 3D rendering #4 : Geometry\u00a0Transforms"},"content":{"rendered":"\n<p> \uc55e\uc5d0\uc11c \ub808\uc774 \ud2b8\ub808\uc774\uc2f1\uc5d0 \ub300\ud574 \uac1c\ub150\uc801\uc73c\ub85c\ub9cc \uac04\ub2e8\ud788 \uc54c\uc544\ubd24\ub2e4. \ub808\uc774 \ud2b8\ub808\uc774\uc2f1\uc774 \ud604\uc2e4\uc758 \ube5b\uc744 \uc2dc\ubbac\ub808\uc774\uc158 \ud558\ub294 \ubc29\ubc95\uc774\uae30 \ub54c\ubb38\uc5d0, \uc774\ub860\uc801\uc73c\ub85c\ub294 \uac00\uc7a5 \uba85\ud655\ud558\uace0 \ub2e8\uc21c\ud558\uaca0\uc9c0\ub9cc, \uc5c4\uccad\ub09c \uacc4\uc0b0\ub7c9\uc73c\ub85c \uc778\ud574 \ub9ac\uc5bc\ud0c0\uc784 \ub80c\ub354\ub9c1\uc5d0\uc11c \uc0ac\uc6a9\ud558\uae30\uc5d4 \uc81c\ud55c\uc801\uc774\ub2e4. <\/p>\n\n\n\n<p>\uc77c\ubc18\uc801\uc778 \ub9ac\uc5bc\ud0c0\uc784 \ub80c\ub354\ub9c1\uc740 \ub450\ub2e8\uacc4\ub85c \ub098\ub260 \uc218 \uc788\ub294\ub370, \uccab\ubc88\uc9f8\ub85c Geometry Transform\ub4e4\uc744 \ud1b5\ud574\uc11c 3D \uacf5\uac04\uc758 \uc624\ube0c\uc81d\ud2b8\ub97c \uc2a4\ud06c\ub9b0 \uc2a4\ud398\uc774\uc2a4\ub85c \uc62e\uaca8\uc624\uba74\uc11c \uc5b4\ub5a4 \ubd80\ubd84\ub4e4\uc774 \ubcf4\uc5ec\uc9c0\ub294\uc9c0 \ud310\ub2e8\ud558\ub294 \uacfc\uc815\uc774 \ud544\uc694\ud558\uace0, \ub450\ubc88\uc9f8\ub85c \uc774\ub807\uac8c \uc62e\uaca8\uc628 \uc624\ube0c\uc81d\ud2b8\ub97c \uc2a4\ud06c\ub9b0\uc758 \uac01 \ud53d\uc140\uc744 \ubb34\uc2a8\uc0c9\uc73c\ub85c \ud45c\uc2dc\ud560\uc9c0 Shader\ub97c \ud1b5\ud574 \uc815\ud558\ub294 \ub2e8\uacc4\uac00 \ud544\uc694\ud558\ub2e4. \uc5ec\uae30\uc5d0\uc11c \ub2e4\ub8f0 \ubd80\ubd84\uc740 \uccab\ubc88\uc9f8 \ubd80\ubd84\uc778 geometry\ub97c \ub2e4\ub8f0 \uac83\uc774\ub2e4.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Modeling\uc758 \uc694\uc18c<\/h3>\n\n\n\n<p> 3D \ubaa8\ub378\ub9c1\uc740 \ubcf4\ud1b5 3D Max, Maya, Z-brush, Blender\uc640 \uac19\uc740 3D \ubaa8\ub378\ub9c1 \ud234\ub85c \ub9cc\ub4e4\uc5b4\uc9c4\ub2e4. \ud604\uc2e4\uc758 \uc624\ube0c\uc81d\ud2b8\ub294 \ubd84\uc790, \uc6d0\uc790\ub2e8\uc704\ub85c \uad6c\uc131\ub418\uc5b4 \uc788\uae30 \ub54c\ubb38\uc5d0 \uac70\uc2dc\uc801\uc778 \ubaa8\uc591\uc744 \ube44\uc2b7\ud558\uac8c 3D\uacf5\uac04\uc5d0 \uadf8\ub824\ub0b8\ub2e4. \uc5ec\uae30\uc5d0\uc11c \uac00\uc7a5 \uae30\ubcf8\uc801\uc778 \ub2e8\uc704\ub85c \uc0ac\uc6a9\ub418\ub294 \uac83\uc740 vertex\ub77c\uace0 \ubd80\ub974\ub294 \uc810\ub4e4\uacfc \uc774\uac83\ub4e4\ub85c \uad6c\uc131\ub41c \uc120 \uadf8\ub9ac\uace0 \uc0bc\uac01\ud615\uc774\ub2e4. \uc0bc\uac01\ud615\uc744 \uc0ac\uc6a9\ud558\ub294 \uac83\uc740 \uc5ec\ub7ec \uc7a5\uc810\uc774 \uc788\ub294\ub370, \uc5b4\ub5a4 \ubcf5\uc7a1\ud55c \uba74\uc774\ub4e0 \uc0bc\uac01\ud615\uc744 \uc774\uc5b4\ubd99\uc5ec \ub9cc\ub4e4 \uc218 \uc788\uc73c\uba74\uc11c, \ud718\uc5b4\uc9d0\uc774 \uc5c6\ub294 \uba74\uc758 \uac00\uc7a5 \uc791\uc740 \ub2e8\uc704\ub85c \uc5ec\ub7ec \uc218\ud559\uc801\uc778 \uacc4\uc0b0\uc774 \ub2e8\uc21c\ud558\ub2e4.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"250\" height=\"154\" src=\"http:\/\/batmask.dothome.co.kr\/wordpress\/wp-content\/uploads\/2022\/10\/250px-Dolphin_triangle_mesh.png\" alt=\"\" class=\"wp-image-1807\"\/><figcaption class=\"wp-element-caption\">\uc608) \uc0bc\uac01\ud615\uc73c\ub85c \ubaa8\ub378\ub9c1\ud55c \ub3cc\uace0\ub798 <a href=\"https:\/\/en.wikipedia.org\/wiki\/Polygon_mesh\">https:\/\/en.wikipedia.org\/wiki\/Polygon_mesh<\/a><\/figcaption><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">OpenGL Transforms<\/h3>\n\n\n\n<p> 3D\uacf5\uac04\uc5d0 \uc874\uc7ac\ud558\ub294 \ubaa8\ub378\ub9c1 \uc624\ube0c\uc81d\ud2b8\ub4e4\uc740 \ubcc0\ud658(Transform)\uc744 \uac70\uccd0 2D\uc778 \ubaa8\ub2c8\ud130 \uc2a4\ud06c\ub9b0\uc5d0 \uadf8\ub824\uc838\uc57c \ud55c\ub2e4. \ub300\ud45c\uc801\uc778 \ub9ac\uc5bc\ud0c0\uc784 \ub80c\ub354\ub9c1 API\uc774\uba70 Godot\uc5d0\uc11c\ub3c4 \uc0ac\uc6a9\uc911\uc778 OpenGL\uc758 \uacbd\uc6b0 \ub2e4\uc74c\uc758 \uacfc\uc815\uc744 \uac70\uce5c\ub2e4.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"394\" src=\"http:\/\/batmask.dothome.co.kr\/wordpress\/wp-content\/uploads\/2022\/10\/coordinate_systems.png\" alt=\"\" class=\"wp-image-1838\" srcset=\"http:\/\/batmask.net\/wordpress\/wp-content\/uploads\/2022\/10\/coordinate_systems.png 800w, http:\/\/batmask.net\/wordpress\/wp-content\/uploads\/2022\/10\/coordinate_systems-300x148.png 300w, http:\/\/batmask.net\/wordpress\/wp-content\/uploads\/2022\/10\/coordinate_systems-768x378.png 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><figcaption class=\"wp-element-caption\">OpenGL Transforms<br><a href=\"https:\/\/learnopengl.com\/Getting-started\/Coordinate-Systems\">https:\/\/learnopengl.com\/Getting-started\/Coordinate-Systems<\/a><\/figcaption><\/figure>\n<\/div>\n\n\n<p>Local space\ub294 \ud558\ub098\uc758 \uc624\ube0c\uc81d\ud2b8\uc5d0 \ub300\ud574 \uc790\uccb4\uc801\uc73c\ub85c \uac00\uc9c0\ub294 \uc88c\ud45c\uacf5\uac04\uc774\ub2e4. \uc774\ub807\uac8c \uc790\uccb4\uc801\uc778 \uc88c\ud45c\uacf5\uac04\uc744 \uac16\ub294 \uc624\ube0c\uc81d\ud2b8\ub4e4\uc744 World space\ub77c\ub294 \uacf5\uac04\uc5d0 \uc704\uce58\uc2dc\ucf1c \uac00\uc0c1\uc138\uacc4\ub97c \ub9cc\ub4e4\uc5b4\ub0b8\ub2e4. \uc5ec\uae30\uc5d0\uc11c \uc0ac\uc6a9\ub418\ub294 \ubcc0\ud658\uc774 Model Matrix\ub97c \ud1b5\ud55c \ubcc0\ud658(Transform)\uc774\uba70, \uc2a4\ucf00\uc77c, \ud68c\uc804, \uc774\ub3d9\ub4f1\uc744 \ub2e4\ub8ec\ub2e4. <\/p>\n\n\n\n<p>World Space\uc5d0\ub294 \uce74\uba54\ub77c\ub3c4 \uc704\uce58\ud558\uace0 \uc788\ub2e4. \uc6b0\ub9ac\uac00 \ub9c8\uce58 \ud604\uc2e4\uc5d0\uc11c \uce74\uba54\ub77c\ub97c \ud1b5\ud574 \uc138\uc0c1\uc744 \uc601\uc0c1\uc5d0 \ub2f4\ub4ef, \uc774 \uac00\uc0c1\uacf5\uac04\uc744 \uac00\uc0c1\uc758 \uce74\uba54\ub77c\uc5d0 \ub2f4\ub3c4\ub85d \ud558\ub294 \uac83\uc774\ub2e4. View Matrix\ub97c \uc774\uc6a9\ud558\uc5ec \uce74\uba54\ub77c\uac00 \ubc14\ub77c\ubcf4\ub294 \ubc29\ud5a5\uc73c\ub85c \uc88c\ud45c\uacc4\ub97c \ubcc0\ud658\ud55c \uacf5\uac04\uc774 View Space\uc774\ub2e4. <\/p>\n\n\n\n<p> \uce74\uba54\ub77c\ub294 \ud654\uac01\uc774 \uc874\uc7ac\ud558\uace0 \uce74\uba54\ub77c\ub97c \ud1b5\ud574 \ubc14\ub77c\ubcf4\ub294 \uc138\uc0c1\uc740 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"340\" src=\"http:\/\/batmask.dothome.co.kr\/wordpress\/wp-content\/uploads\/2022\/10\/perspective_frustum.png\" alt=\"\" class=\"wp-image-1839\" srcset=\"http:\/\/batmask.net\/wordpress\/wp-content\/uploads\/2022\/10\/perspective_frustum.png 400w, http:\/\/batmask.net\/wordpress\/wp-content\/uploads\/2022\/10\/perspective_frustum-300x255.png 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><figcaption class=\"wp-element-caption\">Camera View<br><a href=\"https:\/\/learnopengl.com\/Getting-started\/Coordinate-Systems\">https:\/\/learnopengl.com\/Getting-started\/Coordinate-Systems<\/a><\/figcaption><\/figure>\n<\/div>\n\n\n<p>\ud604\uc2e4\uc758 \uce74\uba54\ub77c\ub77c\uba74 \ub80c\uc988 \ubc14\ub85c \uc55e\uc5d0\uc11c\ubd80\ud130 \ubb34\ud55c\ub300\uae4c\uc9c0 \ub2f4\uc544\ub0b4\uaca0\uc9c0\ub9cc, \ucef4\ud4e8\ud130 \uadf8\ub798\ud53d\uc2a4\uc5d0\uc11c\ub294 \uc81c\ud55c\ub41c \ub9ac\uc18c\uc2a4\ub85c \uc778\ud574 \ud654\uac01\uc758 \ubaa8\ub4e0 \uc624\ube0c\uc81d\ud2b8\ub4e4\uc744 \ub2f4\uc9c0 \uc54a\uace0 \uc81c\ud55c\ub41c \uc601\uc5ed\uc758 \uc624\ube0c\uc81d\ud2b8\ub4e4\ub9cc \ub2e4\ub8e8\uae30 \ub54c\ubb38\uc5d0 near plane\/far plane\uc744 \uc9c0\uc815\ud558\uace0 \uc788\ub2e4. \uc774 \ud654\uba74\uc5d0 \ubcf4\uc5ec\uc9c8 \ubcfc\ub968 \uc601\uc5ed\uc774 \uc808\ub450\uccb4(Frustum)\ucc98\ub7fc \uc0dd\uacbc\uae30 \ub54c\ubb38\uc5d0 view Frustum\uc774\ub77c \ubd88\ub9b0\ub2e4. <\/p>\n\n\n\n<p> \uc774 view frustum\uc744 \ub2e4\uc74c \uadf8\ub9bc\ucc98\ub7fc \uc815\uc721\uba74\uccb4 \ud050\ube0c\ub85c \uc555\ucd95\uc2dc\ud0a8\ub2e4. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"450\" height=\"335\" src=\"http:\/\/batmask.dothome.co.kr\/wordpress\/wp-content\/uploads\/2022\/10\/canonical1.png\" alt=\"\" class=\"wp-image-1840\" srcset=\"http:\/\/batmask.net\/wordpress\/wp-content\/uploads\/2022\/10\/canonical1.png 450w, http:\/\/batmask.net\/wordpress\/wp-content\/uploads\/2022\/10\/canonical1-300x223.png 300w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><figcaption class=\"wp-element-caption\">Projection remapping<br><a href=\"https:\/\/www.scratchapixel.com\/lessons\/3d-basic-rendering\/perspective-and-orthographic-projection-matrix\/projection-matrices-what-you-need-to-know-first\">https:\/\/www.scratchapixel.com\/lessons\/3d-basic-rendering\/perspective-and-orthographic-projection-matrix\/projection-matrices-what-you-need-to-know-first<\/a><\/figcaption><\/figure>\n<\/div>\n\n\n<p> \uc774\ub807\uac8c \ub9cc\ub4e4\uc5b4\uc8fc\ub294 \ubcc0\ud658\uc774 Projection Matrix\ub97c \ud1b5\ud574 \uc774\ub8e8\uc5b4\uc9c4\ub2e4. \uc774\ub807\uac8c \ud050\ube0c\ub85c \ub9cc\ub4e4\uc5b4\uc9c0\uba74, \ud050\ube0c\ub97c \ubc97\uc5b4\ub09c \ubd80\ubd84\ub4e4\uc744 \uc798\ub77c\ub0b4\ub294 Clipping\uc774 \uc774\ub904\uc9c4\ub2e4.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"533\" src=\"http:\/\/batmask.dothome.co.kr\/wordpress\/wp-content\/uploads\/2022\/10\/clipping2.png\" alt=\"\" class=\"wp-image-1841\" srcset=\"http:\/\/batmask.net\/wordpress\/wp-content\/uploads\/2022\/10\/clipping2.png 300w, http:\/\/batmask.net\/wordpress\/wp-content\/uploads\/2022\/10\/clipping2-169x300.png 169w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><figcaption class=\"wp-element-caption\">Clipping<br><a href=\"https:\/\/www.scratchapixel.com\/lessons\/3d-basic-rendering\/perspective-and-orthographic-projection-matrix\/projection-matrix-GPU-rendering-pipeline-clipping\">https:\/\/www.scratchapixel.com\/lessons\/3d-basic-rendering\/perspective-and-orthographic-projection-matrix\/projection-matrix-GPU-rendering-pipeline-clipping<\/a><\/figcaption><\/figure>\n<\/div>\n\n\n<p>\uc704 \uadf8\ub9bc\uc5d0\uc11c \ubcf4\uc774\ub4ef, \ud074\ub9ac\ud551\uc744 \ud558\uba74 \uc0bc\uac01\ud615\uc774 \uc544\ub2c8\uac8c \ub418\uae30 \ub54c\ubb38\uc5d0 \uc774\ub97c \uc0bc\uac01\ud615\uc73c\ub85c \ucabc\uac1c\uc8fc\ub294 \uc791\uc5c5\uc774 \uc0dd\uae34\ub2e4. \uc774\ub807\uac8c \ud074\ub9ac\ud551\uae4c\uc9c0 \uc644\ub8cc\ub418\uba74, \uc774\uc81c \uc774 \ud050\ube0c\ub97c x -&gt; [-1, 1], y -&gt; [-1, 1], z -&gt; [-1, 1] \ub610\ub294 [0, 1]\ub85c \uc815\uaddc\ud654(normalize)\uc2dc\ud0a8\ub2e4. \uc774\ub807\uac8c \uc815\uaddc\ud654\uae4c\uc9c0 \uc644\ub8cc\ub41c\uac78 NDC(Normalized Device Coordinates) space\ub77c\uace0 \ubd80\ub978\ub2e4. OpenGL\uc5d0\uc120 \uc774\uac8c Clip space\uc774\ub2e4. <\/p>\n\n\n\n<p> \uc54c\uc544\ub458 \uc810\uc740 \uc5ec\uae30\uae4c\uc9c0 \uc544\uc9c1 Z\uac12\uc774 \uc0b4\uc544\uc788\ub2e4\ub294 \uac83\uc774\ub2e4. \uc774\uc81c Clip space\uc5d0\uc11c viewport transform\uc744 \ud1b5\ud574 2D \uc2a4\ud06c\ub9b0 \uc88c\ud45c\uacc4, screen space\ub85c \uc62e\uaca8\uc628\ub2e4. screen space\uc758 \ud2b9\uc9d5\uc740 \uc81c\ud55c\ub41c \ud574\uc0c1\ub3c4\ub85c \uc778\ud574 rasterize\uac00 \ud544\uc694\ud558\ub2e4\ub294 \uc810\uc774\ub2e4. \uc77c\ubc18\uc801\uc73c\ub85c \uc88c \uc0c1\ub2e8\uc774 \uc6d0\uc810\uc774\ub418\uace0 \uc624\ub978\ucabd\uc774 +X\ucd95, \uc544\ub798\ucabd\uc774 +Y\ucd95\uc73c\ub85c \uc4f0\uc778\ub2e4\ub294 \uac83\ub3c4 \uc8fc\uc758\ud558\uc790. \ub610\ud55c, \uac01 \ud53d\uc140\uc744 \uadf8\ub9b4\ub54c, \uac00\uc7a5 \uac00\uae4c\uc6b4 \uc9c0\uc624\uba54\ud2b8\ub9ac\ub9cc \ubcf4\uc5ec\uc8fc\uace0 \uc774\uac83\ubcf4\ub2e4 \uba40\ub9ac\uc788\ub294 \uac83\uc740 \uac00\ub824\uc838\uc57c \ud55c\ub2e4. <\/p>\n\n\n\n<p> \ud574\ub2f9 \ud53d\uc140\uc744 \uadf8\ub824\uc57c\ud560\uc9c0 \uac00\ub824\uc838\uc11c \uadf8\ub9ac\uc9c0 \ub9d0\uc9c0 \uacb0\uc815\ud558\ub294 \ubc29\ubc95\uc740 \ub2e4\uc74c\uacfc \uac19\ub2e4. NDC\uac00 \uc9c1\uc0ac\uac01\ud615 \ud050\ube0c\ud615\ud0dc\uc774\uace0 \uc774\uac78 2D\ub85c  \uc62e\uae30\ub294 \uac83\uc740 Orthogonal transform\uc774\uae30 \ub54c\ubb38\uc5d0 z\uac12\uc73c\ub85c \uac70\ub9ac\ub97c \ud310\ub2e8\ud560 \uc218 \uc788\ub2e4. rasterize\ub97c \ud558\uba70 \uadf8\ub9ac\ub294 \uacfc\uc815\uc740 NDC\ub0b4\uc758 \ubaa8\ub4e0 \uc0bc\uac01\ud615\uc5d0 \ub300\ud574 \uc9c4\ud589\ub41c\ub2e4. \uc2a4\ud06c\ub9b0 \ud574\uc0c1\ub3c4\uc640 \ub3d9\uc77c\ud55c \ubc84\ud37c\ub97c \ud558\ub098 \ub9cc\ub4e4\uc5b4 \ub450\uace0 \ucd5c\ub300\uac12\uc73c\ub85c \ucd08\uae30\ud654\ud55c\ub2e4. \uc774 \ubc84\ud37c\ub294 z\uac12\uc744 \uc800\uc7a5\ud558\ub294 depth buffer\uc774\ub2e4. \uc0bc\uac01\ud615\uc744 rasterize\ud558\uba70 \uadf8\ub9b4 \ub54c, \ud574\ub2f9 \ud53d\uc140\uc758 z\uac12\uc744 \uc774 \ubc84\ud37c\uc758 \uac12\uacfc \ube44\uad50\ud55c\ub2e4. \ub9cc\uc57d, \ubc84\ud37c\uc758 \uac12\ubcf4\ub2e4 \ud06c\uba74 \uc800\uc7a5\ud558\uc9c0 \uc54a\uace0, \uc791\uc73c\uba74 \uc800\uc7a5\ud55c\ub2e4. \ucd5c\ub300\uac12\uc73c\ub85c \ucd08\uae30\ud654 \ub418\uc5b4 \uc788\uc73c\ubbc0\ub85c, \ucc98\uc74c \uadf8\ub9b4 \ub54c\ub294 \ubb34\uc870\uac74 \uc800\uc7a5\uc774\ub418\uba70, \ubaa8\ub4e0 \uc0bc\uac01\ud615\uc5d0 \ub300\ud574 \ucc98\ub9ac\ub41c \ud6c4\uc5d0\ub294 \uadf8\uc911\uc5d0 \ucd5c\uc18c\uac12\ub9cc \uc800\uc7a5\ub418\uc5b4 \uac00\uc7a5 \uac00\uae4c\uc6b4 \uc810\ub4e4\ub9cc \ub0a8\uac8c\ub41c\ub2e4. \uc774\ub7ec\ud55c \ubc29\ubc95\uc744 z-buffering\uc774\ub77c\uace0 \ud55c\ub2e4.<\/p>\n\n\n\n<p>\uc774\uc81c, \uad6c\uccb4\uc801\uc778 \ubcc0\ud658 \ub9e4\ud2b8\ub9ad\uc2a4\ub4e4\uc5d0 \ub300\ud574 \uc54c\uc544\ubcf4\uc790. \uc774\ub97c \uc704\ud574\uc120 Homogeneous Coordinate\ubd80\ud130 \uc54c\uc544\uc544\ud55c\ub2e4.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Homogeneous Coordinate<\/h3>\n\n\n\n<p> Cartesian \uc88c\ud45c\uacc4\uc5d0\uc11c \ub9cc\ub4e4\uc5b4\uc9c4 3D \ubaa8\ub378\uc740 \uac00\uc0c1\uc758 \uce74\uba54\ub77c\uc5d0 \uc758\ud574 \ucd5c\uc885\uc801\uc73c\ub85c \uc2a4\ud06c\ub9b0\uc5d0 \uadf8\ub824\uc838\uc57c \ud55c\ub2e4. \uc6b0\ub9ac\uac00 \uac00\uc9c4 raw \ub370\uc774\ud0c0\ub294 3D Cartesian \uc88c\ud45c\uacc4\uc758 \uc810\ub4e4(Vertices)\uacfc \uc774\ub4e4\ub85c \uad6c\uc131\ub418\ub294 \uc0bc\uac01\ud615 \uba74\ub4e4\uc778\ub370, \uc5b4\ub5a4 \ubcc0\ud658\uacfc\uc815\uc744 \uac70\uccd0 \uc2a4\ud06c\ub9b0\uc73c\ub85c \uc62e\uaca8\uc624\ub294 \uac83\uc774\ub2e4. \uc5ec\uae30\uc5d0 \uc0ac\uc6a9\ub418\ub294 \uc218\ud559\uc801 \ub3c4\uad6c\uac00 \uc120\ud615\ub300\uc218(Linear Algebra)\uc774\ub2e4. <\/p>\n\n\n\n<p> \uc77c\ubc18\uc801\uc73c\ub85c \uc0dd\uac01\ud574\ubcf4\uba74, 3\ucc28\uc6d0 \uacf5\uac04\uc774\uae30 \ub54c\ubb38\uc5d0, (x, y, z) 3\uac1c \uc694\uc18c\ub97c \uac16\ub294 \ubca1\ud130\uc640 3X3 \ub9e4\ud2b8\ub9ad\uc2a4\ub97c \uc774\uc6a9\ud558\uba74 \ub420\uac70 \uac19\ub2e4. \uadf8\ub7f0\ub370, 3X3 \ub9e4\ud2b8\ub9ad\uc2a4\ub294 \ud68c\uc804, \uc2a4\ucf00\uc77c\ubcc0\ud658\uc740 \uac00\ub2a5\ud558\uc9c0\ub9cc, \ub2e8\uc21c\ud55c \uc774\ub3d9\ubcc0\ud658\ub9cc\ud574\ub3c4 \ucd94\uac00\uc801\uc778\uac8c \ud544\uc694\ud558\ub2e4. \ub2e4\ub974\uac8c \ub9d0\ud558\uba74, \uc774\ub3d9\ubcc0\ud658(Translation transform)\uc740 \uc120\ud615\uc801\uc778 \ubcc0\ud658\uc774 \uc544\ub2c8\ub2e4. \uc774\ub97c \ud574\uacb0\ud558\uae30 \uc704\ud574\uc11c \uc2e0\uae30\ud558\uac8c\ub3c4 3\ucc28\uc6d0 \ubca1\ud130\uc5d0 \ud558\ub098\ub9cc \ub354 \ucd94\uac00\ud574\uc11c 4\ucc28\uc6d0 \ubca1\ud130\ub97c \ub9cc\ub4e4\uba74 \uc774\ub3d9\ubcc0\ud658 \ubfd0 \uc544\ub2c8\ub77c, \uce74\uba54\ub77c \ud504\ub85c\uc81d\uc158 \ubcc0\ud658\uae4c\uc9c0 \ubaa8\ub4e0\uac8c \uac00\ub2a5\ud574\uc838 \uc218\ud559\uc801\uc73c\ub85c \ub2e4\ub8e8\uae30\uac00 \ub9e4\uc6b0 \ud3b8\ud574\uc9c4\ub2e4. \uc774\ub807\uac8c \ucc28\uc6a9\ub418\ub294 \uc218\ud559\uc801 \uac1c\ub150\uc774 Homogeneous Coordinate\uc774\ub2e4. \uc774\uc5d0 \ub300\ud55c \uc218\ud559\uc801 \uc124\uba85\uc740 <a href=\"https:\/\/www.youtube.com\/watch?v=MQdm0Z_gNcw\">\uc720\ud29c\ube0c \uc601\uc0c1 \uac15\uc758<\/a>(<a href=\"https:\/\/www.youtube.com\/watch?v=MQdm0Z_gNcw\">https:\/\/www.youtube.com\/watch?v=MQdm0Z_gNcw<\/a>) \ub97c \ucc38\uace0\ud558\uc790. \ucc3e\uc544\ubcf8 \uac83\uc911\uc5d0 \uc124\uba85\uc774 \uac00\uc7a5 \uae54\ub054\ud558\uace0 \uc88b\uc558\ub2e4.<\/p>\n\n\n\n<p>3\ucc28\uc6d0\uc5d0 \ub300\ud55c Homogeneous Coordinate\ub294 \ud558\ub098\ub97c \ucd94\uac00\ud55c 4\ucc28\uc6d0\uc774\ub2e4. \uc5ec\uae30\uc11c \ubca1\ud130\ub294 \ub2e4\uc74c\uacfc \uac19\uc774 \uc815\uc758 \ub41c\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-katex-display-block katex-eq\" data-katex-display=\"true\"><pre>\\begin{bmatrix} \n    x \\\\\n    y \\\\\n    z \\\\\n    w\n\\end{bmatrix}\n = \\lambda \n\\begin{bmatrix} \n    x \\\\\n    y \\\\\n    z  \\\\\n    w\n\\end{bmatrix}\n, \\lambda \\not = 0, \\vert \\bold x \\vert = x^2 + y^2 + z^2 + w^2 \\not = 0<\/pre><\/div>\n\n\n\n<p>\uc989, 0\uc744 \uc81c\uc678\ud55c \uc2a4\uce7c\ub77c \uac12\uc744 \uacf1\ud574\ub3c4 \ub2e4 \ub3d9\uc77c\ud55c \uac12\uc774\ub2e4. \uc774\uac78 \uc5b4\ub5bb\uac8c 3D \ubcc0\ud658\uc5d0 \uc0ac\uc6a9\ud560\uae4c? \uc774 homogeneous Coordinate\ub294 \uc6b0\ub9ac\uac00 \uc720\ud074\ub9ac\ub4dc \uae30\ud558\ud559\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub294 3\ucc28\uc6d0 Cartesian Coordinate\ub97c \ud3ec\ud568\ud558\uace0 \uc788\ub2e4. \ubc14\ub85c w = 1\uc778 \uacbd\uc6b0\uac00 \uc774\uc5d0 \ud574\ub2f9\ud55c\ub2e4. \uc2a4\uce7c\ub77c \uac12\uc744 \uacf1\ud574\ub3c4 \ubcc0\ud558\uc9c0 \uc54a\ub294 \uc131\uc9c8\uc744 \uc774\uc6a9\ud574\uc11c Cartesian Coordinate\uc640 Homogeneous Coordinate\uac04 \ubcc0\ud658\uc774 \uac00\ub2a5\ud558\ub2e4. \ubc14\ub85c w\ub85c \uac01 \uc5d8\ub9ac\uba3c\ud2b8\ub97c \ub098\ub220\uc8fc\uba74 \ub41c\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-katex-display-block katex-eq\" data-katex-display=\"true\"><pre>\\begin{bmatrix} \n    x \\\\\n    y \\\\\n    z \\\\\n    w\n\\end{bmatrix} = \n\\begin{bmatrix} \n    x\/w \\\\\n    y\/w \\\\\n    z\/w \\\\\n    1\n\\end{bmatrix}<\/pre><\/div>\n\n\n\n<p>\uadf8\ub7f0\ub370, \ud2b9\uc218\ud55c \uacbd\uc6b0\uac00 \uc0dd\uae34\ub2e4. w = 0\uc774\uba74 \ubd88\uac00\ub2a5\ud558\uc9c0 \uc54a\ub098? \uc774\uacbd\uc6b0 Homogeneous Coordinate\uc5d0\uc11c\ub294 \ubb34\ud55c\ub300\ub85c \uc815\uc758\ud55c\ub2e4. w\uac00 0\uc73c\ub85c \uc218\ub834\ud558\ub294 limit\uc758 \uac1c\ub150\uc73c\ub85c \uc0dd\uac01\ud574\ubcf4\uba74 \uc774\ud574\ub97c \ub3c4\uc6b8 \uc218 \uc788\uc744 \uac83\uc774\ub2e4. \ud765\ubbf8\ub85c\uc6b4 \ubd80\ubd84\uc778\ub370 infinity point\ub97c \uc720\ud55c\ud55c \uac12\uc73c\ub85c \ud45c\uc2dc\uac00 \uac00\ub2a5\ud574\uc9c4 \uac83\uc774\ub2e4. x, y, z\uac00 \ubb34\ud55c\ub300\ub85c \uac04\ub2e4\ub294 \uc598\uae30\ub294 \uae30\ud558\ud559\uc801\uc73c\ub85c\ub294 point\ub97c \ub9d0\ud55c\ub2e4\uae30\ubcf4\ub2e4 \ubc29\ud5a5(direction)\ub9cc \ud45c\ud604\ud558\uace0 \uc788\ub2e4\uace0 \ubcfc \uc218\ub3c4 \uc788\ub2e4. \uc2e4\uc81c\ub85c \uc774\ub7f0 \uac1c\ub150\uc73c\ub85c \uc0ac\uc6a9\ub41c\ub2e4.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>TMI\ud558\ub098. 2D\uc5d0\uc11c \ub2e4\ub8e8\uac8c\ub418\uba74, Homogeneous Coordinate\ub294 w\uac00 z\ucd95\uc5d0 \ud574\ub2f9\ud558\ub294 3\ucc28\uc6d0\uc5d0\uc11c z = 1\uc778 2\ucc28\uc6d0\uc73c\ub85c Perspective Projection \ud558\ub294 \uac83\uc5d0 \ud574\ub2f9\ud55c\ub2e4. \ud504\ub85c\uc81d\uc158\uc744 \uacc4\uc0b0\ud574\ubcf4\uba74, \uac70\ub9ac\uc5d0 \ubc18\ube44\ub840\ud55c x\/z, y\/z \uac12\uc73c\ub85c \ub9e4\ud551\uc774 \ub418\uae30 \ub54c\ubb38\uc774\ub2e4. \uc774\uac74 3D\uacf5\uac04\uc5d0\uc11c \uce74\uba54\ub77c\ub97c \uc774\uc6a9\ud574 \uc0ac\uc9c4\ucd2c\uc601\uc744 \ud588\uc744 \ub54c \ubcf4\uc774\ub294 \ubaa8\uc2b5\uacfc \uac19\ub2e4. \uc7bc\uc788\ub294\uac78 \ud558\ub098 \ub354 \ub9d0\ud558\uc790\uba74, \uc5f4\ucc28 \ucca0\ub85c\ub97c \uc0ac\uc9c4\uc73c\ub85c \ucc0d\ub294\ub2e4\uba74 3D\uc5d0\uc11c \ud3c9\ud589\ud55c \uc5f4\ucc28\ucca0\ub85c\uac00 \uc0ac\uc9c4\uc18d\uc5d0\uc11c\ub294 \ud55c \uc810\uc5d0\uc11c \ub9cc\ub098\uac8c\ub41c\ub2e4. \ub450 \ub77c\uc778\uc758 \uad50\ucc28\uc810\uc744 \uacc4\uc0b0\ud574\ubcf4\uba74, \uc774 \ub9cc\ub098\ub294 \uc810\uc774 Homogeneous Coordinate\uc5d0\uc11c\ub294 w = z = 0\uc778 \ubb34\ud55c\ub300 \uac12\uc774 \ub41c\ub2e4. \uacc4\uc0b0 \ubc29\ubc95\uc740 \ud638\uae30\uc2ec\uc774 \uc788\ub2e4\uba74 \ucc3e\uc544\ubcf4\uae38 \ud83d\ude42<\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\">Basic Transforms<\/h3>\n\n\n\n<p> Homogeneous Coordinate\ub97c \uc0ac\uc6a9\ud558\uba74, \uac04\ub2e8\ud558\uac8c 4X4 \ub9e4\ud2b8\ub9ad\uc2a4\ub97c \uc774\uc6a9\ud574 \uac01\uc885 \uae30\ud558\ubcc0\ud658\ub4e4\uc744 \uc218\ud589\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Scale <\/h4>\n\n\n\n<div class=\"wp-block-katex-display-block katex-eq\" data-katex-display=\"true\"><pre>\\begin{bmatrix} \n    x' \\\\\n    y' \\\\\n    z' \\\\\n    1\n\\end{bmatrix} = \n\\begin{bmatrix}\n    S\\scriptstyle{x} &amp; 0 &amp; 0 &amp; 0 \\\\\n    0 &amp; S\\scriptstyle{y} &amp; 0 &amp; 0 \\\\\n    0 &amp; 0 &amp; S\\scriptstyle{z} &amp; 0 \\\\\n    0 &amp; 0 &amp; 0 &amp; 1 \\\\\n\\end{bmatrix}\n\\begin{bmatrix} \n    x \\\\\n    y \\\\\n    z \\\\\n    1\n\\end{bmatrix}<\/pre><\/div>\n\n\n\n<p>\uc2a4\ucf00\uc77c \ub9e4\ud2b8\ub9ad\uc2a4\ub294 \uc9c1\uad00\uc801\uc774\ub2e4. x&#8217; = S_x * x \uc640 \uac19\uc740 \uc5f0\uc0b0\uc73c\ub85c \uac01 \uc88c\ud45c\ucd95\uc5d0 \ub300\ud574 \ud06c\uae30\ub9cc \ubcc0\uacbd\uc2dc\ud0a8\ub2e4.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Translation<\/h4>\n\n\n\n<p> \uc774\ub3d9\ubcc0\ud658\uc740 \uac04\ub2e8\ud558\uc9c0\ub9cc 3X3 \ub9e4\ud2b8\ub9ad\uc2a4\ub85c \ud45c\ud604\uc774 \uc548\ub418\ubbc0\ub85c, Homogeneous Coordinate\ub97c \uc4f0\ub294 \uc774\uc720\uc911\uc5d0 \ud558\ub098\uac00 \ub41c\ub2e4. \ub9e4\ud2b8\ub9ad\uc2a4\ub294 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-katex-display-block katex-eq\" data-katex-display=\"true\"><pre>\\begin{bmatrix} \n    x' \\\\\n    y' \\\\\n    z' \\\\\n    1\n\\end{bmatrix} = \n\\begin{bmatrix}\n    0 &amp; 0 &amp; 0 &amp; T_x \\\\\n    0 &amp; 0 &amp; 0 &amp; T_y \\\\\n    0 &amp; 0 &amp; 0 &amp; T_z \\\\\n    0 &amp; 0 &amp; 0 &amp; 1 \\\\\n\\end{bmatrix}\n\\begin{bmatrix} \n    x \\\\\n    y \\\\\n    z \\\\\n    1\n\\end{bmatrix}<\/pre><\/div>\n\n\n\n<p>\uacc4\uc0b0\uc744 \ud574\ubcf4\uba74, x&#8217; = x + Tx \uc640 \uac19\uc740 \ud615\ud0dc\ub85c translation\uc774 \ub418\ub294\uac78 \ud655\uc778\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Rotation<\/h4>\n\n\n\n<p> \ub85c\ud14c\uc774\uc158\uc758 \uac00\uc7a5 \uac04\ub2e8\ud55c \ud615\ud0dc\ub294 X, Y, Z \uac01 \ucd95\uc5d0 \ub300\ud55c \ud68c\uc804\uc774\ub2e4. \uc608\ub97c \ub4e4\uba74, Z\ucd95\uc5d0 \ub300\ud55c \ud68c\uc804\uc774\ub77c\uba74 2D \ud68c\uc804\uacfc \ub3d9\uc77c\ud558\ub2e4. \uac01 \ucd95\uc5d0\ub300\ud55c \ud68c\uc804\uc744 Homogeneous Coordinate \ud3fc\uc744 \uc774\uc6a9\ud574\uc11c \uc368\ubcf4\uba74 \ub2e4\uc74c\uacfc \uac19\ub2e4. ( <a href=\"https:\/\/learnopengl.com\/Getting-started\/Transformations\">LearnOpenGL \uc0ac\uc774\ud2b8 \ucc38\uc870<\/a> )<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">X-axis rotation<\/h4>\n\n\n\n<div class=\"wp-block-katex-display-block katex-eq\" data-katex-display=\"true\"><pre>\\begin{bmatrix}\n    1 &amp; 0 &amp; 0 &amp; 0 \\\\\n    0 &amp; cos\\theta &amp; -sin\\theta &amp; 0 \\\\\n    0 &amp; sin\\theta &amp; cos\\theta &amp; 0 \\\\\n    0 &amp; 0 &amp; 0 &amp; 1 \\\\\n\\end{bmatrix}<\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Y-axis rotation<\/h4>\n\n\n\n<div class=\"wp-block-katex-display-block katex-eq\" data-katex-display=\"true\"><pre>\\begin{bmatrix}\n    cos\\theta &amp; 0 &amp; sin\\theta  &amp; 0 \\\\\n    0 &amp; 1 &amp; 0 &amp; 0 \\\\\n    -sin\\theta &amp; 0 &amp; cos\\theta &amp; 0 \\\\\n    0 &amp; 0 &amp; 0 &amp; 1 \\\\\n\\end{bmatrix}<\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Z-axis rotation<\/h4>\n\n\n\n<div class=\"wp-block-katex-display-block katex-eq\" data-katex-display=\"true\"><pre>\\begin{bmatrix}\n    cos\\theta &amp; -sin\\theta &amp; 0 &amp; 0 \\\\\n    sin\\theta &amp; cos\\theta &amp; 0 &amp; 0 \\\\\n    0 &amp; 0 &amp; 1 &amp; 0 \\\\\n    0 &amp; 0 &amp; 0 &amp; 1 \\\\\n\\end{bmatrix}<\/pre><\/div>\n\n\n\n<p>2D\uc5d0\uc11c \ud68c\uc804\uc2dd\uc740 \uc911\uace0\ub4f1\ud559\uc0dd \ub54c \ubc30\uc6e0\ub358 \ub0b4\uc6a9\uc77c\ud150\ub370, \uc798 \uae30\uc5b5\uc774 \uc548\ub09c\ub2e4\uba74 <a href=\"https:\/\/matthew-brett.github.io\/teaching\/rotation_2d.html\">https:\/\/matthew-brett.github.io\/teaching\/rotation_2d.html<\/a> \ub97c \ucc38\uace0\ud558\uba74 \ub41c\ub2e4.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">\uc784\uc758\uc758 \ud68c\uc804(Arbitrary rotation)<\/h4>\n\n\n\n<p>\uc88c\ud45c\uacc4\uc758 \uc784\uc758\uc758 \ud68c\uc804\uc0c1\ud0dc\ub97c \uc774 \uace0\uc815\ub41c x, y, z\ucd95\uc758 \ud68c\uc804\uc73c\ub85c \ub098\ud0c0\ub0b4\ub294\uac78 \uc624\uc77c\ub7ec\uac01(Euler angle)\uc774\ub77c\uace0 \ud55c\ub2e4. \uc774\uac83\uc740 \uc55e\uc5d0\uc11c \uac01 x, y, z\ucd95\uc5d0 \ub300\ud55c \ud68c\uc804 \ub9e4\ud2b8\ub9ad\uc2a4\uc758 \uacf1\uc73c\ub85c \ud45c\ud604\ud560 \uc218 \uc788\ub2e4. \ubb38\uc81c\ub294 \ud558\ub098\uc758 \ucd95\uc5d0 \ub300\ud574 \ud68c\uc804\uc744 \uc2dc\ud0a4\uba74, \ub2e4\ub978 \ucd95\uc774 \uac19\uc774 \ub3cc\uc544\uac04\ub2e4\ub294 \uc810\uc774\ub2e4. \uc544\ub798 \uc560\ub2c8\uba54\uc774\uc158\uc73c\ub85c \ud655\uc778\ud574\ubcf4\uc790.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"170\" height=\"161\" src=\"http:\/\/batmask.dothome.co.kr\/wordpress\/wp-content\/uploads\/2022\/10\/170px-Euler2a.gif\" alt=\"\" class=\"wp-image-1816\"\/><figcaption class=\"wp-element-caption\">Euler angle\uc758 \uc2dc\uac01\uc801 \ud45c\ud604<a href=\"https:\/\/en.wikipedia.org\/wiki\/Euler_angles\">https:\/\/en.wikipedia.org\/wiki\/Euler_angles<\/a><\/figcaption><\/figure>\n<\/div>\n\n\n<p>\uc560\ub2c8\uba54\uc774\uc158\uc744 \uc798 \ubcf4\uba74, z\ucd95\uc5d0 \ub300\ud574 \ud68c\uc804 -&gt; \ubcc0\uacbd\ub41c x\ucd95\uc5d0 \ub300\ud574 \ud68c\uc804 -&gt; \ubcc0\uacbd\ub41c z\ucd95\uc5d0 \ub300\ud574 \ud68c\uc804 \uc21c\uc11c\ub85c \ub3cc\uc544\uac04\ub2e4. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"338\" src=\"http:\/\/batmask.dothome.co.kr\/wordpress\/wp-content\/uploads\/2022\/10\/Eulerangles.svg_.png\" alt=\"\" class=\"wp-image-1817\" srcset=\"http:\/\/batmask.net\/wordpress\/wp-content\/uploads\/2022\/10\/Eulerangles.svg_.png 300w, http:\/\/batmask.net\/wordpress\/wp-content\/uploads\/2022\/10\/Eulerangles.svg_-266x300.png 266w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><figcaption class=\"wp-element-caption\">z-x-z Euler angle<\/figcaption><\/figure>\n<\/div>\n\n\n<p>\uc774 \ud68c\uc804 \ub9e4\ud2b8\ub9ad\uc2a4\ub97c \ud45c\ud604\ud558\uba74 \ub2e4\uc74c\uacfc \uac19\uc774 \ub41c\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-katex-display-block katex-eq\" data-katex-display=\"true\"><pre>\\bold{R} = \\bold{R}_z(\\alpha) \\bold{R}_{x'}(\\beta)\\bold{R}_{z''}(\\gamma)<\/pre><\/div>\n\n\n\n<p>\uc5ec\uae30\uc11c\ub294 z-x&#8217;-z&#8221; \uc21c\uc73c\ub85c \ud68c\uc804\uc2dc\ucf30\uc9c0\ub9cc, \ud68c\uc804 \uc21c\uc11c\uc5d0 \ub530\ub77c \uc5ec\ub7ec \uc870\ud569\uc774 \uac00\ub2a5\ud558\ub2e4. \uac01(angle) \ud30c\ub77c\ubbf8\ud130\uac00 \ub2ec\ub77c \uc9c0\uaca0\uc9c0\ub9cc, \uc880 \ub354 \uc775\uc219\ud558\uac8c x-y&#8217;-z&#8221; \uac19\uc740 \uc870\ud569\ub3c4 \ub41c\ub2e4. <\/p>\n\n\n\n<p> \ubb38\uc81c\ub294 \uc784\uc758 \ucd95\uc744 \uc911\uc2ec\uc73c\ub85c\ud55c \ud68c\uc804\uc744 \ub2e4\ub8e8\uae30\uac00 \uc5b4\ub835\uace0, \uc5d4\uc9c0\ub2c8\uc5b4\ub9c1 \uce21\uba74\uc5d0\uc11c gimball lock\uc774\ub77c\ub294 \ud604\uc0c1\uc774 \uc0dd\uae34\ub2e4\ub294 \uc810\uc774\ub2e4. \uc774\ub294 <a href=\"https:\/\/en.wikipedia.org\/wiki\/Quaternion\">\ucffc\ud130\ub2c8\uc5b8(Quaternian)<\/a>\uc744 \uc0ac\uc6a9\ud558\uba74 \ubaa8\ub4e0\uac8c \ud574\uacb0\ub41c\ub2e4. \ucffc\ud130\ub2c8\uc5b8\uc740 \ud5c8\uc218\ub97c \ud3ec\ud568\ud55c 4\ucc28\uc6d0 \uacf5\uac04\uc774\ub2e4. <\/p>\n\n\n\n<div class=\"wp-block-katex-display-block katex-eq\" data-katex-display=\"true\"><pre>q = a + b\\bold{i} + c\\bold{j} + d\\bold{k}, \\\\ \n\\space \\\\\n\\bold{i}, \\bold{j}, \\bold{k} \\text{ are unit vector in imagenary space,} \\\\\n\\space \\\\\n\\bold{i}^2 = \\bold{j}^2 = \\bold{k}^2 = -1 \\\\\n\\bold{i}\\bold{j} = \\bold{k},\\space  \\bold{j}\\bold{i} = -\\bold{k} \\\\\n\\bold{j}\\bold{k} = \\bold{i},\\space  \\bold{k}\\bold{j} = -\\bold{i} \\\\\n\\bold{k}\\bold{i} = \\bold{j},\\space  \\bold{i}\\bold{k} = -\\bold{j}\n<\/pre><\/div>\n\n\n\n<p>3\ucc28\uc6d0 \uacf5\uac04\uc0c1\uc758 \ubca1\ud130\ub97c \ucffc\ud130\ub2c8\uc5b8 \uacf5\uac04\uc73c\ub85c \ubcc0\ud658\ud558\uba74 \uc2e4\uc218\ubd80\ubd84\uc774 0\uc778 \uac12\uc73c\ub85c \ud45c\ud604\ud55c\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-katex-display-block katex-eq\" data-katex-display=\"true\"><pre>\\bold{v} = (x, y, z) \\rightarrow \\bold{q} = (x, y, z, 0) = x\\bold{i} + y\\bold{j} + z\\bold{k}<\/pre><\/div>\n\n\n\n<p>\ud765\ubbf8\ub85c\uc6b4 \ubd80\ubd84\uc740 \uc784\uc758 \ubc29\ud5a5\uc744 \uc911\uc2ec\uc73c\ub85c\ud558\ub294 \ud68c\uc804\uc744 \ucffc\ud130\ub2c8\uc5b8\uc774 \ud45c\ud604\ud560 \uc218 \uc788\ub2e4\ub294 \uc810\uc774\ub2e4. \ud2b9\uc815 \ubc29\ud5a5\uc744 \uac00\ub9ac\ud0a4\ub294 \ub2e8\uc704\ubca1\ud130\ub97c u\ub77c\uace0 \ud55c\ub2e4\uba74, \ub2e4\uc74c\uacfc \uac19\uc774 \uc4f8 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-katex-display-block katex-eq\" data-katex-display=\"true\"><pre>\\bold{u} = u_x \\bold{i} + u_y \\bold{j} + u_z \\bold{k} \\\\\n\\bold{q} = cos{{\\theta}\\over{2}} + sin{{\\theta}\\over{2}}(u_x \\bold{i} + u_y \\bold{j} + u_z \\bold{k}) = cos{{\\theta}\\over{2}} + sin{{\\theta}\\over{2}}\\bold{u}<\/pre><\/div>\n\n\n\n<p>\ucffc\ud130\ub2c8\uc5b8\uc744 \uc774\uc6a9\ud55c \ud68c\uc804\uc5d0 \ub300\ud574 \uc218\ud559\uc801\uc73c\ub85c \uc815\ub9ac\ud558\uc790\uba74 \uc5b4\ub835\uace0 \ub0b4\uc6a9\uc774 \ub9ce\ub2e4. \uc544\ub9c8\ub3c4 \uc0c8\ub85c\uc6b4 \ud3ec\uc2a4\ud305 \ud558\ub098\uac00 \ud544\uc694\ud560 \uac83\uc774\ub2e4. <a href=\"https:\/\/en.wikipedia.org\/wiki\/Quaternions_and_spatial_rotation\">\uc704\ud0a4\ud53c\ub514\uc544 \ucffc\ud130\ub2c8\uc5b8 \ud68c\uc804<\/a>\uc5d0 \ub300\ud574 \uc815\ub9ac\ub41c\uac8c \uc788\uace0 \uadf8\uc678\uc5d0\ub3c4 \uad6c\uae00\ub9c1\uc744 \ud574\ubcf4\uba74 \ub9ce\uc740 \uc790\ub8cc\ub97c \ucc3e\uc744 \uc218 \uc788\uc73c\ub2c8 \uc5ec\uae30\uc11c\ub294 \uc0dd\ub7b5\ud558\uace0 \uac04\ub2e8\ud558\uac8c \uacb0\uacfc\ub9cc \uc774\uc6a9\ud558\uaca0\ub2e4.<\/p>\n\n\n\n<p>\uc704\uc5d0\uc11c \ubcf4\uc5ec\uc900 \ud68c\uc804\uc5d0 \ub300\ud55c \ucffc\ud130\ub2c8\uc5b8 q\ub97c \uc0ac\uc6a9\ud558\uba74, \ubca1\ud130 p\uc758 \ud68c\uc804\uc740 \ub2e4\uc74c\uacfc \uac19\uc774 \uacc4\uc0b0\ub41c\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-katex-display-block katex-eq\" data-katex-display=\"true\"><pre>\\bold{p'} = \\bold{q(\\theta)}\\bold{p}\\bold{q'(\\bold{\\theta})}<\/pre><\/div>\n\n\n\n<p> \uc790\uc138\ud55c \uc124\uba85\uc740 \uc0dd\ub7b5\ud588\uc73c\ub098, <a href=\"https:\/\/www.euclideanspace.com\/maths\/algebra\/realNormedAlgebra\/quaternions\/transforms\/derivations\/vectors\/index.htm\">\uc124\uba85\ub41c euclidianspace \uc0ac\uc774\ud2b8<\/a>\ub97c \ucc38\uc870\ud558\uba74 \ub2e4\uc74c \uadf8\ub9bc\ucc98\ub7fc \ub3c4\uc2dd\ud654 \ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"483\" height=\"296\" src=\"http:\/\/batmask.dothome.co.kr\/wordpress\/wp-content\/uploads\/2022\/10\/quaternionRotation.png\" alt=\"\" class=\"wp-image-1824\" srcset=\"http:\/\/batmask.net\/wordpress\/wp-content\/uploads\/2022\/10\/quaternionRotation.png 483w, http:\/\/batmask.net\/wordpress\/wp-content\/uploads\/2022\/10\/quaternionRotation-300x184.png 300w\" sizes=\"auto, (max-width: 483px) 100vw, 483px\" \/><\/figure>\n<\/div>\n\n\n<p>\uacc4\uc0b0 \uacb0\uacfc\ub9cc \uc774\uc6a9\ud558\uba74, \ucffc\ud130\ub2c8\uc5b8\uc744 \uc774\uc6a9\ud588\uc744 \ub54c, \ub2e4\uc74c\uacfc \uac19\uc774 \ub9e4\ud2b8\ub9ad\uc2a4 \ud3fc\uc73c\ub85c \ud45c\ud604\uc774 \ub41c\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-katex-display-block katex-eq\" data-katex-display=\"true\"><pre>\\bold{R} = \\begin{bmatrix}\n1-2({q_j}^2+{q_k}^2) &amp; 2({q_i}{q_j} - {q_k}{q_r}) &amp; 2({q_i}{q_k} + {q_j}{q_r}) \\\\\n2({q_i}{q_j} + {q_k}{q_r}) &amp; 1-2({q_i}^2+{q_k}^2) &amp; 2({q_j}{q_k} - {q_i}{q_r}) \\\\\n2({q_i}{q_k} - {q_j}{q_r}) &amp; 2({q_j}{q_k} + {q_i}{q_r}) &amp;  1-2({q_i}^2+{q_j}^2) \\\\\n\\end{bmatrix} ,\\\\\n\\space \\\\\n\\bold{q} = {q_r} + {q_i}\\bold{i} + {q_j}\\bold{j} + {q_k}\\bold{k}, \\\\<\/pre><\/div>\n\n\n\n<p>\uc55e\uc5d0\uc11c \ubd24\ub4ef\uc774, qi, qj, qk, qr\ub4e4\uc740 \ud68c\uc804\uac01\uacfc \ubc29\ud5a5\ubca1\ud130\uc758 \uc131\ubd84\uac12\uc5d0 \uc758\uc874\ud55c\ub2e4. \uc774 \ub450\uac1c\ub97c \uacb0\ud569\ud558\uba74, \ud68c\uc804 \ub9e4\ud2b8\ub9ad\uc2a4\ub97c \ubc29\ud5a5\ubca1\ud130\uc640 \ud68c\uc804\uac01\uc73c\ub85c \ud45c\ud604\uc774 \ub41c\ub2e4. \uacb0\uacfc \ub9e4\ud2b8\ub9ad\uc2a4\uac00 3X3\uc774\ubbc0\ub85c \uc774\uac78 homogeneous coordinate\uc778 4X4\ub85c \ud45c\uc2dc\ud558\uba74 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-katex-display-block katex-eq\" data-katex-display=\"true\"><pre>\\bold{R} = \\\\\n\\begin{bmatrix}\ncos\\theta + {u_x}^2(1\u2212cos\\theta)  &amp; {u_x}{u_y}(1 - cos\\theta) - {u_z}sin\\theta &amp; {u_x}{u_z}(1 - cos\\theta) + {u_y}sin\\theta &amp; 0  \\\\\n{u_y}{u_x}(1 - cos\\theta) + {u_z}sin\\theta &amp; cos\\theta + {u_y}^2(1\u2212cos\\theta) &amp; {u_y}{u_z}(1 - cos\\theta) - {u_x}sin\\theta &amp; 0\\\\\n {u_z}{u_x}(1 - cos\\theta) - {u_y}sin\\theta &amp; {u_z}{u_y}(1 - cos\\theta) + {u_x}sin\\theta &amp; cos\\theta + {u_z}^2(1\u2212cos\\theta)  &amp; 0 \\\\\n0 &amp; 0 &amp; 0 &amp; 1\n\\end{bmatrix}<\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Rotation Interpolation : SLERP(Spherical Linear Interpolation)<\/h4>\n\n\n\n<p> \ucffc\ud130\ub2c8\uc5b8\uc744 \uc4f0\ub294 \ub610\ud558\ub098\uc758 \uc774\uc720\ub294 \ubc14\ub85c \uc560\ub2c8\uba54\uc774\uc158\uc5d0 \uc0ac\uc6a9\ub418\ub294 \ud68c\uc804 \ubcf4\uac04\ubc95 \ub54c\ubb38\uc774\ub2e4. \uc9c0\uc624\uba54\ud2b8\ub9ac \ub610\ub294 \uc624\ube0c\uc81d\ud2b8\uac00 \uc784\uc758\uc758 \ud68c\uc804\uc744 \ud560 \ub54c, \uc624\uc77c\ub7ec \uc575\uae00\uc744 \ub530\ub77c \ud68c\uc804\uc744 \ud558\uba74 \uc55e\uc5d0\uc11c \ubd24\ub358 \uc624\uc77c\ub7ec \uc575\uae00 \uc560\ub2c8\uba54\uc774\uc158\ucc98\ub7fc \uc774\uc0c1\ud558\uac8c \ubcf4\uc77c \uac83\uc774\ub2e4. \uc77c\ub2e8, \ubcf4\uac04\uc5d0 \uc0ac\uc6a9\ub418\ub294 \ud30c\ub77c\ubbf8\ud130\uac00 3\uac1c\uc758 \uac01\ub3c4\uac00 \ud544\uc694\ud558\uae30 \ub54c\ubb38\uc5d0 \uace4\ub780\ud558\ub2e4. \ucffc\ud130\ub2c8\uc5b8\uc744 \uc4f0\uba74 \uac01\ub3c4\uc5d0 \ub300\ud55c \ud30c\ub77c\ubbf8\ud130\uac00 \ud558\ub098\uc774\ubbc0\ub85c \uc774\uac8c \uac00\ub2a5\ud574\uc9c4\ub2e4. \uc5ec\uae30\uc5d0 \uc0ac\uc6a9\ub418\ub294 \uac83\uc774 <a href=\"https:\/\/en.wikipedia.org\/wiki\/Slerp\">SLERP<\/a> \uc774\ub2e4.<\/p>\n\n\n\n<p>\uba3c\uc800 \ub354 \ub2e8\uc21c\ud55c \uc120\ud615 \ubcf4\uac04\ubc95\uc778 <a href=\"https:\/\/en.wikipedia.org\/wiki\/Linear_interpolation\">LERP<\/a>\ub97c \uc54c\uc544\ubcf4\uc790. qa \ucffc\ud130\ub2c8\uc5b8\uc5d0\uc11c qb\ub85c\uc758 \ud68c\uc804\uc744 \uc0dd\uac01\ud558\uba74 \ub2e4\uc74c\uacfc \uac19\uc774 \ub450 \ucffc\ud130\ub2c8\uc5b8\uac04 \uc120\ud615 \ubcf4\uac04\uc774 \uac00\ub2a5\ud558\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-katex-display-block katex-eq\" data-katex-display=\"true\"><pre>\\bold{q_{int}} = t\\bold{q_a} + (1-t)\\bold{q_b}, \\space 0 \\le t \\le 1<\/pre><\/div>\n\n\n\n<p>\uc704\uc758 \uc120\ud615 \ubcf4\uac04\uc744 \ub3c4\uc2dd\ud654 \ud574\ubcf4\uba74, \ub450 \ucffc\ud130\ub2c8\uc5b8\uc744 \uc5f0\uacb0\ud558\ub294 \uc9c1\uc120\uc774 \ub418\uace0, \uc544\ub798 \uadf8\ub9bc\uc5d0\uc11c \uc67c\ucabd\uc5d0 \ud574\ub2f9\ud55c\ub2e4.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"535\" src=\"http:\/\/batmask.dothome.co.kr\/wordpress\/wp-content\/uploads\/2022\/10\/sensors-15-19302-g004-1024.png\" alt=\"\" class=\"wp-image-1834\" srcset=\"http:\/\/batmask.net\/wordpress\/wp-content\/uploads\/2022\/10\/sensors-15-19302-g004-1024.png 1024w, http:\/\/batmask.net\/wordpress\/wp-content\/uploads\/2022\/10\/sensors-15-19302-g004-1024-300x157.png 300w, http:\/\/batmask.net\/wordpress\/wp-content\/uploads\/2022\/10\/sensors-15-19302-g004-1024-768x401.png 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p> \uc6b0\ub9ac\uac00 \uc6d0\ud558\ub294\uac74, \uc704 \uadf8\ub9bc\uc5d0\uc11c \uc624\ub978\ucabd\ucc98\ub7fc \uad6c\uba74\uc744 \ub530\ub77c \uc6c0\uc9c1\uc774\ub294 \ubcf4\uac04\ubc95\uc774\ub2e4. \uc774\uac8c \uc55e\uc5d0\uc11c \ub9d0\ud55c SLERP\uc774\ub2e4.<\/p>\n\n\n\n<p>SLERP\ub97c \uc720\ub3c4\ud558\uae30 \uc704\ud574, \ub2e4\uc74c \uadf8\ub9bc\uc744 \ubcf4\uc790.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"640\" height=\"361\" src=\"http:\/\/batmask.dothome.co.kr\/wordpress\/wp-content\/uploads\/2022\/10\/tmpc2f9264_thumb222_thumb_thumb.png\" alt=\"\" class=\"wp-image-1833\" srcset=\"http:\/\/batmask.net\/wordpress\/wp-content\/uploads\/2022\/10\/tmpc2f9264_thumb222_thumb_thumb.png 640w, http:\/\/batmask.net\/wordpress\/wp-content\/uploads\/2022\/10\/tmpc2f9264_thumb222_thumb_thumb-300x169.png 300w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><figcaption class=\"wp-element-caption\">Quaternion interpolation <br><a href=\"http:\/\/what-when-how.com\/advanced-methods-in-computer-graphics\/quaternions-advanced-methods-in-computer-graphics-part-5\/\">http:\/\/what-when-how.com\/advanced-methods-in-computer-graphics\/quaternions-advanced-methods-in-computer-graphics-part-5\/<\/a><\/figcaption><\/figure>\n<\/div>\n\n\n<p>P\ub294 Q1\uacfc \uc9c1\uad50\ud558\ub294 \ucffc\ud130\ub2c8\uc5b8\uc774\uace0, Q1, Q, Q2, P \ubaa8\ub450 \uc720\ub2db \ucffc\ud130\ub2c8\uc5b8\uc774\ub2e4. P\ub294 \ucffc\ud130\ub2c8\uc5b8 R\uc758 \ud06c\uae30\uac00 1\uc774 \ub420 \ub54c \uac19\uc544\uc9c4\ub2e4. R\ubc29\ud5a5 \ucffc\ud130\ub2c8\uc5b8\uc740 Q2 &#8211; Q2&#8217;\uc73c\ub85c \uc4f8\uc218 \uc788\uace0, Q2&#8242; = Q1cos\u03a9 \uc774\ubbc0\ub85c \ub2e4\uc74c\uacfc \uac19\uc774 \uc4f8 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-katex-display-block katex-eq\" data-katex-display=\"true\"><pre>\\bold{P} = {Q_2 - Q_1 cos\\Omega \\over sin{\\Omega}}<\/pre><\/div>\n\n\n\n<p> sin\u03a9 \ub85c \ub098\ub220\uc900 \uac83\uc740 Q2 &#8211; Q2&#8217;\uc758 \ud06c\uae30\uac00 sin\u03a9\uc774\ubbc0\ub85c \ud06c\uae30\ub97c 1\ub85c \ub9cc\ub4e4\uc5b4 \uc8fc\uae30 \uc704\ud568\uc774\ub2e4.<\/p>\n\n\n\n<p>\uc704 \uadf8\ub9bc\uc758 \uc624\ub978\ucabd b\uadf8\ub9bc\uc744 \ubcf4\uba74, \ud30c\ub77c\ubbf8\ud130 t\ub97c \uc0ac\uc6a9\ud55c \ubcf4\uac04\uac12 \ucffc\ud130\ub2c8\uc5b8 Q\ub97c \ub2e4\uc74c\uacfc \uac19\uc774 \uc4f8 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-katex-display-block katex-eq\" data-katex-display=\"true\"><pre>\\bold{Q} = cos(t\\Omega)\\bold{Q_1} + sin(t\\Omega)\\bold{P},\\space  0 \\le t \\le 1<\/pre><\/div>\n\n\n\n<p>Q1, P\ub97c \uc9c1\uad50\ud558\ub294 \uc88c\ud45c\ucc98\ub7fc \uc0ac\uc6a9\ud55c \ud45c\ud604\uc774\ub2e4. (\ucffc\ud130\ub2c8\uc5b8\uc774\uc9c0\ub9cc \ubca1\ud130\ub77c\uace0 \uc0dd\uac01\ud558\uba74 \uc9c1\uad00\uc801\uc73c\ub85c \uc774\ud574\ud560 \uc218 \uc788\ub2e4.) Q\uc758 \ud06c\uae30\uac00 1\uc774\ubbc0\ub85c, Q1\uc5d0 \uc0ac\uc601\ud55c \uac12\uc740 cos(t\u03a9)\uc774\uace0, P\uc5d0 \uc0ac\uc601\ud55c \uac12\uc740 sin(t\u03a9)\uc774\ub2e4. <\/p>\n\n\n\n<p>\uc774\uc81c \uc774 \ub450 \uc2dd\uc5d0\uc11c P\ub97c \uc81c\uac70\ud574\ubcf4\uba74, Q\ub294 \ub2e4\uc74c\uacfc \uac19\uc774 \uc4f0\uc778\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-katex-display-block katex-eq\" data-katex-display=\"true\"><pre>\\bold{Q}(t) = {sin((1-t)\\Omega)\\bold{Q_1} + sin(t\\Omega)\\bold{Q_2} \\over sin(\\Omega)}\\\\\n\\space \\\\\n 0 \\le t \\le 1<\/pre><\/div>\n\n\n\n<p>\uc774 \uc2dd\uc744 \uc774\uc6a9\ud558\uba74 Q1\uc5d0\uc11c Q2\ub85c \uac00\ub294 \ud68c\uc804\uc5d0\uc11c \ub9e4\uac1c\ubcc0\uc218 t\ub97c \uc774\uc6a9\ud558\uc5ec \ubcf4\uac04 \ucffc\ud130\ub2c8\uc5b8 Q(t)\ub97c \uc5bb\uc744 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Perspective Projection<\/h3>\n\n\n\n<p> perspective projection\uc740 view frustum\uc744 near plane \ud06c\uae30\uc758 \uc815\uc721\uba74\uccb4\ub85c \ubc14\uafb8\ub294 \ubcc0\ud658\uc774\ub2e4. \uc774\ud6c4\uc5d0 \uc815\uaddc\ud654\uae4c\uc9c0 \ud558\uac8c\ub418\uba74 NDC\uac00\ub418\uc5b4 \ub2e4\uc74c \uadf8\ub9bc\uc758 \uc67c\ucabd\uc5d0\uc11c \uc624\ub978\ucabd\uc774 \ub41c\ub2e4.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"460\" src=\"http:\/\/batmask.dothome.co.kr\/wordpress\/wp-content\/uploads\/2022\/10\/gl_projectionmatrix01.png\" alt=\"\" class=\"wp-image-1845\" srcset=\"http:\/\/batmask.net\/wordpress\/wp-content\/uploads\/2022\/10\/gl_projectionmatrix01.png 960w, http:\/\/batmask.net\/wordpress\/wp-content\/uploads\/2022\/10\/gl_projectionmatrix01-300x144.png 300w, http:\/\/batmask.net\/wordpress\/wp-content\/uploads\/2022\/10\/gl_projectionmatrix01-768x368.png 768w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><figcaption class=\"wp-element-caption\">view frustum to NDC<br><a href=\"http:\/\/www.songho.ca\/opengl\/gl_projectionmatrix.html\">http:\/\/www.songho.ca\/opengl\/gl_projectionmatrix.html<\/a><\/figcaption><\/figure>\n<\/div>\n\n\n<p>\uc704 \uadf8\ub9bc\uc5d0\uc11c \uc67c\ucabd \uadf8\ub9bc\uc744 \ubcf4\uba74, \uc88c\ud45c\uacc4\ub294 \uac00\uc7a5 \ubcf4\ud3b8\uc801\uc778 \uc624\ub978\uc190 \uc88c\ud45c\uacc4\uac00 \uc0ac\uc6a9\ub418\uace0, \uc774 \uacbd\uc6b0 XY plane\uc744 \ubc14\ub77c\ubcf4\ub294 \uce74\uba54\ub77c \ub610\ub294 \ub208\uc740 -Z \ubc29\ud5a5\uc744 \ubc14\ub77c\ubcf4\uace0 \uc788\uac8c \ub41c\ub2e4. \ubc18\uba74, \ubcc0\ud658 \uacb0\uacfc\ubb3c\uc778 \uc624\ub978\ucabd\uc744 \ubcf4\uba74, Z\ubc29\ud5a5\uc774 \ud50c\ub9bd\ub418\uc5b4 \uc67c\uc190 \uc88c\ud45c\uacc4\uac00 \uc0ac\uc6a9\ub41c\ub2e4. \uc774\ub807\uac8c \uc4f0\ub294 \uc774\uc720\ub294, \uc67c\ucabd frustum\uc548\uc758 \ubaa8\ub4e0 Z\uac12\uc740 \ub9c8\uc774\ub108\uc2a4\uac00 \ub418\ub294\ub370, \uacc4\uc0b0\uacfc\uc815\uc5d0\uc11c \ud544\uc694\ud55c\uac74 Z\ubc29\ud5a5\uc758 \uac70\ub9ac\uc774\ubbc0\ub85c \ud56d\uc0c1 \ud50c\ub7ec\uc2a4\uc778\uac8c \uac04\ud3b8\ud574\uc9c0\uae30 \ub54c\ubb38\uc774\ub2e4. \uc989, \ubcc0\ud658\uc758 \uc2dc\uc791\uc740 Z\ucd95\uc744 \ub4a4\uc9d1\ub294 \uac83\uc5d0\uc11c \uc2dc\uc791\ud55c\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-katex-display-block katex-eq\" data-katex-display=\"true\"><pre>z' = -z<\/pre><\/div>\n\n\n\n<p>\ud558\ub098\uc758 \uc810\uc5d0 \ub300\ud574 Y\ucd95 perspective projection\uc744 \uc0dd\uac01\ud574\ubcf4\uc790.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"385\" height=\"211\" src=\"http:\/\/batmask.dothome.co.kr\/wordpress\/wp-content\/uploads\/2022\/10\/r12-perspective2.png\" alt=\"\" class=\"wp-image-1846\" srcset=\"http:\/\/batmask.net\/wordpress\/wp-content\/uploads\/2022\/10\/r12-perspective2.png 385w, http:\/\/batmask.net\/wordpress\/wp-content\/uploads\/2022\/10\/r12-perspective2-300x164.png 300w\" sizes=\"auto, (max-width: 385px) 100vw, 385px\" \/><figcaption class=\"wp-element-caption\">perspective projection<\/figcaption><\/figure>\n<\/div>\n\n\n<p> view frustum\uc548\uc758 \uc810 P\ub97c Z=d \uc778 \uc704\uce58\uc5d0 \uc788\ub294 near plane\uc0c1\uc5d0 \ub9e4\ud551\ud574 \uc0c8\ub85c\uc6b4 \uc810 P&#8217;\uc744 \uad6c\ud558\ub294 \uac83\uc774\ub2e4. \uc0bc\uac01\ud615\uc758 \ube44\uc728\uc744 \uc774\uc6a9\ud558\uba74, <\/p>\n\n\n\n<div class=\"wp-block-katex-display-block katex-eq\" data-katex-display=\"true\"><pre>\\overline{BP}:\\overline{AP'} = \\overline{OB}:\\overline{OA} \\\\\n\\overline{AP'}\\space \\overline{OB} = \\overline{BP} \\space \\overline{OA} \\\\\n\\overline{AP'} = {\\overline{BP} \\space \\overline{OA} \\over \\overline{OB}} \\\\\n<\/pre><\/div>\n\n\n\n<p>\uc88c\ud45c\ub97c \uc774\uc6a9\ud574 \ud45c\ud604\ud558\uba74 \ub2e4\uc74c\uacfc \uac19\uc774 \ub41c\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-katex-display-block katex-eq\" data-katex-display=\"true\"><pre>\\overline{OA} = d = n(\\text{near plane}), \\overline{AP'} = y', \\overline{BP} = y\\\\\n\\space \\\\\ny' = {ny \\over -z} <\/pre><\/div>\n\n\n\n<p> x\ub3c4 \ub9c8\ucc2c\uac00\uc9c0 \uc774\ubbc0\ub85c, x&#8217;, y&#8217;, z&#8217;\uc744 \ub2e4 \uc815\ub9ac\ud558\uba74,<\/p>\n\n\n\n<div class=\"wp-block-katex-display-block katex-eq\" data-katex-display=\"true\"><pre>x' = {nx \\over -z} , \\space y' = {ny \\over -z}, \\space z' = n<\/pre><\/div>\n\n\n\n<p>x&#8217; ,y&#8217; \uc774 z \uc758\uc874\uc131\uc744 \uac16\uace0 \uc788\ub2e4\ub294 \uc810\uc744 \uc8fc\uc758\uae4a\uac8c \ubd10\uc57c\ud55c\ub2e4. \uc5ec\uae30\uc11c homogeneous coordinate\uc758 \ud2b9\uc9d5\uc744 \uc0ac\uc6a9\ud574 w&#8217;\uac12\uc744 \uc774\uc6a9\ud574\ubcf4\uc790. \uc55e\uc5d0\uc11c \ub2e4\ub918\ub4ef, homogeneous coordinate \ubca1\ud130\ub294 \uc5b4\ub5a4 \uac12\uc744 \uacf1\ud574\ub3c4 \uac19\uc740 \uac12\uc774\uace0, w&#8217;\uc774 1\uc774 \uc544\ub2d0 \ub54c cartesian coordinate\ub85c \ubcc0\ud658\ud558\ub824\uba74 w&#8217;\uc73c\ub85c \ub098\ub220\uc918\uc11c 1\ub85c \ub9cc\ub4e4\uc5b4 \uc92c\uc5c8\ub2e4. \uadf8\ub807\ub2e4\uba74, x&#8217; = dx \uac00\ub418\uace0, w&#8217; = -z \uac00\ub418\uba74, \ub2e4\uc74c\uacfc \uac19\uc774 \uc6d0\ud558\ub294 \uacb0\uacfc\uc640 \uc77c\uce58\ud55c\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-katex-display-block katex-eq\" data-katex-display=\"true\"><pre>\\begin{bmatrix}\nx' \\\\\ny' \\\\\nz' \\\\\nw'\n\\end{bmatrix} = \n\\begin{bmatrix}\nnx \\\\\nny \\\\\n-nz \\\\\n-z\n\\end{bmatrix} = \n\\begin{bmatrix}\n-nx\/z \\\\\n-ny\/z \\\\\nn \\\\\n1\n\\end{bmatrix}\n<\/pre><\/div>\n\n\n\n<p>\uc774\uac78 \ub9cc\uc871\uc2dc\ud0a4\ub3c4\ub85d \ub9e4\ud2b8\ub9ad\uc2a4\ub97c \uc801\uc5b4\ubcf4\uba74 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-katex-display-block katex-eq\" data-katex-display=\"true\"><pre>\\begin{bmatrix}\nx' \\\\\ny' \\\\\nz' \\\\\nw'\n\\end{bmatrix} = \n\\begin{bmatrix}\nn &amp; 0 &amp; 0 &amp; 0\\\\\n0 &amp; n &amp; 0 &amp; 0 \\\\\n0 &amp; 0 &amp; -n &amp; 0 \\\\\n0 &amp; 0 &amp; -1 &amp; 0\n\\end{bmatrix}\n\\begin{bmatrix}\nx \\\\\ny \\\\\nz \\\\\n1\n\\end{bmatrix}<\/pre><\/div>\n\n\n\n<p>w&#8217; = -z\ub97c \ub9cc\ub4e4\uc5b4 \uc8fc\ub294\uac8c x&#8217;, y&#8217;\uc774 z\uc5d0 \ub300\ud55c \uc758\uc874\uc131\uc744 \uac16\ub294 \ube44\uc120\ud615 \ubcc0\ud658\uc5d0 \ub300\ud55c \ud0a4\uac00 \ub418\ub294 \uac83\uc774\ub2e4. <\/p>\n\n\n\n<p> \ud504\ub85c\uc81d\uc158 \ub9e4\ud2b8\ub9ad\uc2a4\ub97c \uad6c\ud558\uae34 \ud588\ub294\ub370, \uc774\ub294 \uc0ac\uc2e4, near plane\uc0c1\uc758 \uac12\ub4e4\uc774\ub2e4. \uc5b4\uca0c\ub4e0, z\uc5d0 \ub300\ud55c \ub370\uc774\ud130\ub97c \uc0c1\uc2e4\ud574\ubc84\ub9ac\ub294\uac74 \ubb38\uc81c\ub2e4. z&#8217;\uac12\uc744 \uc0c1\uc218\uac00 \uc544\ub2cc \uc6d0\ub798 z\uc758 \ud06c\uae30\uac12\uc744 \uac16\ub3c4\ub85d \ud574\uc57c\ud558\ub294\ub370, \ud558\ub294\uae40\uc5d0 normalize \uc2dc\ud0a8 NDC\ub85c \ubcc0\ud658\uc744 \uc2dc\ud0a4\ub3c4\ub85d \ud558\uc790. \uc774\ub807\uac8c \ud558\ub294 \uc774\uc720\ub294 OpenGL\uc758 clipping space\uac00 NDC\uc774\uae30 \ub54c\ubb38\uc5d0, OpenGL\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub294 Projection matrix\uac00 \uc704\uc5d0\uc11c \uc124\uba85\ud55c projection\uacfc \ub3d9\uc2dc\uc5d0 NDC\uc5d0 \ub9de\uac8c \ubcc0\ud658 \uc2dc\ud0a4\ub294 \ub9e4\ud2b8\ub9ad\uc2a4\uc774\uae30 \ub54c\ubb38\uc774\ub2e4. <\/p>\n\n\n\n<p> \uba3c\uc800 z&#8217;\uc5d0 \ub300\ud574\uc11c\ub9cc \ub2e4\ub8ec\ub2e4\uba74 \ub2e4\uc74c\uacfc \uac19\uc774 \uc4f8 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-katex-display-block katex-eq\" data-katex-display=\"true\"><pre>\\begin{bmatrix}\nx' \\\\\ny' \\\\\nz' \\\\\nw'\n\\end{bmatrix} = \n\\begin{bmatrix}\nn &amp; 0 &amp; 0 &amp; 0\\\\\n0 &amp; n &amp; 0 &amp; 0 \\\\\n0 &amp; 0 &amp; m_{22} &amp; m_{23} \\\\\n0 &amp; 0 &amp; -1 &amp; 0\n\\end{bmatrix}\n\\begin{bmatrix}\nx \\\\\ny \\\\\nz \\\\\n1\n\\end{bmatrix}<\/pre><\/div>\n\n\n\n<p>z&#8217;\uc774 x, y \uc758\uc874\ub3c4\ub294 \uc5c6\uae30 \ub54c\ubb38\uc5d0, m00 = m11 = 0\uc73c\ub85c \uc4f8 \uc218 \uc788\uace0, m22, m23 \ub450 \uc5d8\ub9ac\uba3c\ud2b8\uc5d0 \uc758\ud574 \uacb0\uc815\uc774 \ub41c\ub2e4. <\/p>\n\n\n\n<p> NDC\ub294 z\ubc94\uc704\uac00 [-1, 1]\uc774\uae30 \ub54c\ubb38\uc5d0, z = -n(near plane) \uc77c \ub54c, z&#8217;\/w&#8217; = -1\uc774 \ub41c\ub2e4. z = -f(far plane)\uc77c \ub54c, z&#8217;\/w&#8217; = 1\uc774 \ub41c\ub2e4. \uc774\uac78 \uc774\uc6a9\ud574 \uc5f0\ub9bd\ubc29\uc815\uc2dd\uc744 \ud480 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-katex-display-block katex-eq\" data-katex-display=\"true\"><pre>z' = m_{22}z + m_{23} \\\\\n{z' \\over w'} = {z' \\over -z} ,\\space w' = -z \\\\\n<\/pre><\/div>\n\n\n\n<div class=\"wp-block-katex-display-block katex-eq\" data-katex-display=\"true\"><pre>{-m_{22}n + m_{23} \\over n} = -1, z = -n \\\\\n\\space \\\\\n{-m_{22}f + m_{23} \\over f} = 1, z = -f\n\\space \\\\\n\\therefore m_{22} = -{f+n \\over f - n}, \\\\\n\\space \\\\\n\\space\\space\\space m_{23} = -{2fn \\over f-n}\n<\/pre><\/div>\n\n\n\n<p>\ub9e4\ud2b8\ub9ad\uc2a4\ub294 \ub2e4\uc74c\uacfc \uac19\uc774 \uc4f8 \uc218 \uc788\ub2e4. <\/p>\n\n\n\n<div class=\"wp-block-katex-display-block katex-eq\" data-katex-display=\"true\"><pre>\\begin{bmatrix}\nx' \\\\\ny' \\\\\nz' \\\\\nw'\n\\end{bmatrix} = \n\\begin{bmatrix}\nn &amp; 0 &amp; 0 &amp; 0\\\\\n0 &amp;n &amp; 0 &amp; 0 \\\\\n0 &amp; 0 &amp; -{f+n \\over f - n} &amp; -{2fn \\over f-n} \\\\\n0 &amp; 0 &amp; -1 &amp; 0\n\\end{bmatrix}\n\\begin{bmatrix}\nx \\\\\ny \\\\\nz \\\\\n1\n\\end{bmatrix}<\/pre><\/div>\n\n\n\n<p>x, y\uc5d0 \ub300\ud574\uc11c\ub3c4 NDC\ub97c \uc801\uc6a9\ud574 \uacc4\uc0b0\ud574\ubcf4\uc790. x<sub>p<\/sub> \uac00 [l, r]\uc758 \ubc94\uc704\ub77c\uace0 \ud560 \ub54c, normaize\ub41c x<sub>n<\/sub> \uc740 [-1, 1] \ubc94\uc704\ub97c \uac16\ub294\ub2e4. \uc774\ub7ec\ud55c \ub9e4\ud551\uc744 \uadf8\ub798\ud504\ub85c \uadf8\ub824\ubcf4\uba74 \ub2e4\uc74c\uacfc \uac19\ub2e4. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"420\" height=\"340\" src=\"http:\/\/batmask.dothome.co.kr\/wordpress\/wp-content\/uploads\/2022\/10\/gl_projectionmatrix05.png\" alt=\"\" class=\"wp-image-1858\" srcset=\"http:\/\/batmask.net\/wordpress\/wp-content\/uploads\/2022\/10\/gl_projectionmatrix05.png 420w, http:\/\/batmask.net\/wordpress\/wp-content\/uploads\/2022\/10\/gl_projectionmatrix05-300x243.png 300w\" sizes=\"auto, (max-width: 420px) 100vw, 420px\" \/><figcaption class=\"wp-element-caption\">mapping to NDC<br><a href=\"http:\/\/www.songho.ca\/opengl\/gl_projectionmatrix.html\">http:\/\/www.songho.ca\/opengl\/gl_projectionmatrix.html<\/a><\/figcaption><\/figure>\n<\/div>\n\n\n<p>\uc9c1\uc120\uc758 \ubc29\uc815\uc2dd\uc744 \uc774\uc6a9\ud574\uc11c \ud45c\ud604\ud574\ubcf4\uba74,<\/p>\n\n\n\n<div class=\"wp-block-katex-display-block katex-eq\" data-katex-display=\"true\"><pre>x_n = {1-(-1) \\over r - l}x_p + c_x<\/pre><\/div>\n\n\n\n<p> c<sub>x <\/sub>\ub294 \uc0c1\uc218\uc774\ub2e4. \uc774 \uc9c1\uc120\uc740 (r, 1)\uc744 \uc9c0\ub098\uac00\ubbc0\ub85c \uac12\uc744 \uc785\ub825\ud574\ubcf4\uba74 \uc0c1\uc218\ub97c \uad6c\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-katex-display-block katex-eq\" data-katex-display=\"true\"><pre>1 = {2 \\over r-l}r + c_x,\\\\\nc_x = 1- {2r \\over r-l} \\\\\n\\space \\\\\n=-{r + l \\over r-l}<\/pre><\/div>\n\n\n\n<p>\uc774\ub97c \ub2e4\uc2dc \uc9c1\uc120\uc758 \ubc29\uc815\uc2dd\uc5d0 \ub300\uc785\ud558\uba74,<\/p>\n\n\n\n<div class=\"wp-block-katex-display-block katex-eq\" data-katex-display=\"true\"><pre>x_n = {2 \\over r - l}x_p - {r+l \\over r-l}<\/pre><\/div>\n\n\n\n<p>y\uc5d0 \ub300\ud574\uc11c\ub3c4 \ub3d9\uc77c\ud55c\ub370, left\/right \ub300\uc2e0 top\/bottom\uc73c\ub85c t, b\ub97c \uc368\uc11c \ud45c\ud604\ud558\uba74,<\/p>\n\n\n\n<div class=\"wp-block-katex-display-block katex-eq\" data-katex-display=\"true\"><pre>y_n = {2 \\over t - b}y_p - {t+b \\over t-b}<\/pre><\/div>\n\n\n\n<p>\uc774 \uc2dd\ub4e4\uc740 \ub2e8\uc21c\ud788 [-1, 1]\ub85c \ub9e4\ud551\ud558\ub294 \uacf5\uc2dd\uc774\ub2e4. x<sub>p<\/sub> , y<sub>p<\/sub>  \uc5d0 x&#8217;, y&#8217;\uc744 \ub300\uc785\ud558\uba74 \ub2e4\uc74c\uacfc \uac19\uc774 \uc815\ub9ac\ub41c\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-katex-display-block katex-eq\" data-katex-display=\"true\"><pre>x_n = {2 \\over r-l}({nx \\over -z}) - {r+l \\over r-l}\\\\\n\\space \\\\\n= ({2n \\over r-l}x + {r+l \\over r-l}z){1 \\over -z}\n\\space \\\\\n\\space \\\\\ny_n = ({2n \\over t-b}y + {t+b \\over t-b}z){1 \\over -z}<\/pre><\/div>\n\n\n\n<p>w&#8217;\uc774 -z\uc774\uace0 \uc774 \uac12\uc73c\ub85c \ub098\ub220\uc9c0\ub294\uac78 \uc0dd\uac01\ud574\ubcf4\uba74, \uc704 \uc2dd\uc5d0\uc11c 1\/(-z) \ubd80\ubd84\uc740 \uc774\uc5d0 \ub300\ud55c \ud45c\ud604\uc73c\ub85c \uc0dd\uac01\ud560 \uc218 \uc788\ub2e4. \uadf8\ub807\ub2e4\uba74, \ub9e4\ud2b8\ub9ad\uc2a4\uc5d0\uc11c\ub294 \uadf8 \uc55e\uc758 \uc2dd\ub9cc \uace0\ub824\ud558\uba74 \ub41c\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-katex-display-block katex-eq\" data-katex-display=\"true\"><pre>\\begin{bmatrix}\nx' \\\\\ny' \\\\\nz' \\\\\nw'\n\\end{bmatrix} = \n\\begin{bmatrix}\n{2n \\over r - l} &amp; 0 &amp; {r+l \\over r-l} &amp; 0\\\\\n0 &amp; {2n \\over t - b} &amp; {t+b \\over t-b} &amp; 0 \\\\\n0 &amp; 0 &amp; -{f+n \\over f - n} &amp; -{2fn \\over f-n} \\\\\n0 &amp; 0 &amp; -1 &amp; 0\n\\end{bmatrix}\n\\begin{bmatrix}\nx \\\\\ny \\\\\nz \\\\\n1\n\\end{bmatrix}<\/pre><\/div>\n\n\n\n<p>\ub9e4\ud2b8\ub9ad\uc2a4\ub97c \ud480\uc5b4\uc4f0\uba74, \uc55e\uc5d0\uc11c \uc720\ub3c4\ud55c \uc2dd\uc774 \ub098\uc634\uc744 \uac80\uc0b0\ud574\ubcfc \uc218 \uc788\uc744 \uac83\uc774\ub2e4. <\/p>\n\n\n\n<p>NDC\ub85c normalize \uc2dc\ud0a4\uba74\uc11c x&#8217;, y&#8217;\uc5d0 z\uac12\uc5d0 \ub300\ud55c \uc758\uc874\ub3c4\uac00 \ucd94\uac00\ub418\uc5c8\ub2e4. \uc774\ub294 l(left), r(right), t(top), b(bottom) \ubc14\uc6b4\ub354\ub9ac\ub97c \ub450\uba74\uc11c \uace0\uc815\ub41c n(near plane) \uc704\uce58\uc5d0 \uc774 \ubc14\uc6b4\ub354\ub9ac\uc5d0 \ub530\ub77c projection\uc774 \ub2ec\ub77c\uc9c4\ub2e4\ub294 \uc598\uae30\uc774\ub2e4. \uc774\ub294 \uc2dc\uc57c\uac01\uc5d0 \ub300\ud55c \ub0b4\uc6a9\uc774\uba70, \ubc14\uc6b4\ub354\ub9ac l, r, t, b\uacfc n\uac12\uc744 \uc774\uc6a9\ud574 \ud3ed(width)\uc640 \ub113\uc774(height)\uc5d0 \ub300\ud55c \uac01\uac01\uc758 \uc2dc\uc57c\uac01(Field of view)\uc744 \uac01\ub3c4\ub85c \uacc4\uc0b0\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<p>OpenGL\uc5d0\uc11c \ud074\ub9ac\ud551\uc740 \uc774 \ud504\ub85c\uc81d\uc158 \ub9e4\ud2b8\ub9ad\uc2a4\ub97c \uacf1\ud55c \uacb0\uacfc\uac12\uc5d0\uc11c \uacc4\uc0b0\ub41c\ub2e4. w&#8217;\uc73c\ub85c \ub098\ub220\uc9c0\uae30 \uc804\uc5d0\ub294 \uc544\uc9c1 normalized \ub418\uc9c0 \uc54a\uc740 homogeneous coordinate\uc0c1\uc758 \ud3ec\uc778\ud2b8\uc774\ub2e4. w&#8217;\uc73c\ub85c \ub098\ub220\uc84c\uc744 \ub54c, NDC space\uac00 \ub418\uc5b4 [-1, 1]\uc758 \ubc94\uc704\ub97c \uac16\uac8c\ub418\ubbc0\ub85c, \ub098\ub204\uae30 \uc804\uc5d0\ub294 x&#8217;, y&#8217;, z&#8217; \ubaa8\ub450 [-w&#8217;, w&#8217;]\uc758 \ub3d9\uc77c\ud55c \ubc94\uc704\ub97c \uac16\uac8c \ub41c\ub2e4. \uadf8\ub7ec\ubbc0\ub85c \ud074\ub9ac\ud551 \uacc4\uc0b0\uc774 \uac04\ub2e8\ud558\ub2e4. \uc774\ub294 OpenGL \ud30c\uc774\ud504\ub77c\uc778\uc744 \uc124\uba85\ud558\ub294 \ub2e4\uc74c \uadf8\ub9bc\uc5d0\uc11c \ubcf4\ub2e4 \uc9c1\uad00\uc801\uc73c\ub85c \uc774\ud574 \uac00\ub2a5\ud558\ub2e4.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"587\" height=\"1024\" src=\"http:\/\/batmask.dothome.co.kr\/wordpress\/wp-content\/uploads\/2022\/10\/vertex-transform-pipeline-1-587x1024.png\" alt=\"\" class=\"wp-image-1859\" srcset=\"http:\/\/batmask.net\/wordpress\/wp-content\/uploads\/2022\/10\/vertex-transform-pipeline-1-587x1024.png 587w, http:\/\/batmask.net\/wordpress\/wp-content\/uploads\/2022\/10\/vertex-transform-pipeline-1-172x300.png 172w, http:\/\/batmask.net\/wordpress\/wp-content\/uploads\/2022\/10\/vertex-transform-pipeline-1.png 670w\" sizes=\"auto, (max-width: 587px) 100vw, 587px\" \/><figcaption class=\"wp-element-caption\">OpenGL pipeline<br><a href=\"https:\/\/www.scratchapixel.com\/lessons\/3d-basic-rendering\/perspective-and-orthographic-projection-matrix\/projection-matrix-GPU-rendering-pipeline-clipping\">https:\/\/www.scratchapixel.com\/lessons\/3d-basic-rendering\/perspective-and-orthographic-projection-matrix\/projection-matrix-GPU-rendering-pipeline-clipping<\/a><\/figcaption><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Viewport Transform<\/h3>\n\n\n\n<p> \uc774\uc81c NDC space\uc758 \uc810\ub4e4\uc744 \uc2a4\ud06c\ub9b0\uc758 \ubdf0\ud3ec\ud2b8\ub85c \uc62e\uaca8\uc57c \ud55c\ub2e4.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"368\" src=\"http:\/\/batmask.dothome.co.kr\/wordpress\/wp-content\/uploads\/2022\/10\/viewport01-1.png\" alt=\"\" class=\"wp-image-1863\" srcset=\"http:\/\/batmask.net\/wordpress\/wp-content\/uploads\/2022\/10\/viewport01-1.png 600w, http:\/\/batmask.net\/wordpress\/wp-content\/uploads\/2022\/10\/viewport01-1-300x184.png 300w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><figcaption class=\"wp-element-caption\">viewport<\/figcaption><\/figure>\n<\/div>\n\n\n<p>\uc2a4\ud06c\ub9b0\uc740 \uc88c\uc0c1\ub2e8\uc744 (0,0)\uc73c\ub85c \uac16\uace0 \uc788\uc73c\uba70, \uc6b0\uce21\uc73c\ub85c X\ucd95, \uc544\ub798\ub85c Y\ucd95\uc774 \uc99d\uac00\ud55c\ub2e4. \uc2a4\ud06c\ub9b0\uc0c1 \uc708\ub3c4\uc6b0\uac00 \ubdf0\ud3ec\ud2b8(viewport)\uc774\uba70, \uadf8 \uc704\uce58\ub97c (x<sub>0<\/sub>,y<sub>0<\/sub>)\ub77c\uace0 \ud558\uc790. x<sub>0<\/sub>\ub294 NDC\uc758 -1\uc5d0 \ud574\ub2f9\ud558\uace0 (x<sub>0<\/sub> +w)\uc740 NDC\uc758 1\uc5d0 \ud574\ub2f9\ud55c\ub2e4. \ub9c8\ucc2c\uac00\uc9c0\ub85c y<sub>0<\/sub>\ub294 -1, (y<sub>0<\/sub>+h) \ub294 1\uc5d0 \ud574\ub2f9\ud55c\ub2e4. NDC\uc0c1\uc758 \uc810 (x<sub>n<\/sub>, y<sub>n<\/sub>)\uc774\ub77c\uace0 \ud55c\ub2e4\uba74, \ubdf0\ud3ec\ud2b8\uc0c1\uc758 \uc810 (x, y)\ub294 \ub2e4\uc74c\uacfc \uac19\uc774 \uad6c\ud574\uc9c4\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-katex-display-block katex-eq\" data-katex-display=\"true\"><pre>x_n - (-1) : x - x_0 = 1 - (-1) : w \\\\\n2(x - x_0) = w(x_n + 1) \\\\\n\\space \\\\\nx = {w \\over 2}x_n + (x_0 + {w \\over 2})\n<\/pre><\/div>\n\n\n\n<p>\ub9c8\ucc2c\uac00\uc9c0\ub85c y\uc5d0 \uc801\uc6a9\ud558\uba74, <\/p>\n\n\n\n<div class=\"wp-block-katex-display-block katex-eq\" data-katex-display=\"true\"><pre>y = {h \\over 2}y_n + (y_0 + {h \\over 2})<\/pre><\/div>\n\n\n\n<p>\ud765\ubbf8\ub85c\uc6b4 \uc810\uc740 \ubdf0\ud3ec\ud2b8\uc5d0\uc11c\ub3c4 z\uac12\uc744 \ubc84\ub9ac\uc9c0 \uc54a\uace0 \uc0ac\uc6a9\ud55c\ub2e4. z\ucd95\uc73c\ub85c \uac00\uae4c\uc6b4 \uc704\uce58\ub97c n(near), \uba3c \uc704\uce58\ub97c f(far)\ub85c \ud45c\uc2dc\ud55c\ub2e4\uba74, \uac01\uac01 -1, 1\uc5d0 \ud574\ub2f9\ud55c\ub2e4. x, y\uc758 \uacc4\uc0b0\ubc95\uacfc \ub3d9\uc77c\ud558\uac8c \ud574\ubcf4\uba74,<\/p>\n\n\n\n<div class=\"wp-block-katex-display-block katex-eq\" data-katex-display=\"true\"><pre>z = {(f-n) \\over 2}z_n + (n + {f-n \\over 2}) \\\\\n\\space \\\\\n = {(f-n) \\over 2}z_n + {(f + n) \\over 2}<\/pre><\/div>\n\n\n\n<p>\ub2e4 \ud569\uccd0\ubcf4\uba74, \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n<div class=\"wp-block-katex-display-block katex-eq\" data-katex-display=\"true\"><pre>x = {w \\over 2}x_n + (x_0 + {w \\over 2}) \\\\\n\\space \\\\\ny = {h \\over 2}y_n + (y_0 + {h \\over 2}) \\\\\n\\space \\\\\nz= {(f-n) \\over 2}z_n + {(f + n) \\over 2}<\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">\ub9c8\ubb34\ub9ac<\/h3>\n\n\n\n<p> \uacf5\ubd80\ud558\uba74\uc11c \uc624\ub79c\uae30\uac04\uc5d0 \uac78\uccd0 \uc791\uc131\ud55c \ud3ec\uc2a4\ud305\uc774\ub77c\uc11c \uc880 \uc77c\uad00\uc131\uc774 \uc5c6\uc5b4 \ubcf4\uc774\uae30\ub3c4 \ud55c\ub2e4. \uc774 \ud3ec\uc2a4\ud305\ub9cc\uc73c\ub85c \ud559\uc2b5\ud558\uae30\uc5d4 \uad6c\uba4d\uc774 \uc22d\uc22d \ub6ab\ub9b0\uac8c \ubcf4\uc774\uc9c0\ub9cc, \ud544\uc694\ud55c \uac1c\ub150\ub4e4\uc740 \uc9da\uace0 \ub118\uc5b4\uac14\uae30 \ub54c\ubb38\uc5d0 \uc801\uc5b4\ub3c4 \ub098\uc5d0\uac8c\ub294 \uae30\uc5b5\uc744 \ub418\uc0b4\ub9ac\uace0 \uad00\ub828\ub41c \ud559\uc2b5\uacfc\uc815\uc5d0 \ub3c4\uc6c0\uc774 \ub418\uae34 \ud560\uac70 \uac19\ub2e4. \uc544\ubb4f\ud2bc&#8230; \uc798 \ubab0\ub77c\uc11c \ud798\ub4e4\uc5c8\ub2e4 \u314b\u314b\u314b\u314b \uc774\ub807\uac8c \uc5b4\ub835\uac8c \uc801\uc5c8\ub294\ub370\ub3c4, \ucffc\ud130\ub2c8\uc5b8 \uad00\ub828\ud574\uc11c\ub294 \uc5b8\uc820\uac00 \ucd94\uac00\uc801\uc778 \uc815\ub9ac\uac00 \ud544\uc694\ud558\uaca0\uc9c0. \ucc98\uc74c \uacf5\ubd80\ub77c \uac00\ub2a5\ud558\uba74 \uc218\ud559\uc801\uc73c\ub85c \uc815\ub9ac\ud588\ub294\ub370, \ubb50 \uc0ac\uc2e4&#8230; \ucef4\ud130\uc640 API\uac00 \ub2e4 \ud574\uc900\ub2e4. \uc0ac\uc6a9\ud558\ub294\uac8c \uc5b4\ub835\uc9c0\ub294 \uc54a\uc744\uac70\ub780 \uc598\uae30. <\/p>\n\n\n\n<p>Godot\uc73c\ub85c\ub294 \uce74\uba54\ub77c \ub178\ub4dc\uc5d0 \ub300\ud55c\uac74 \uc880 \ub2e4\ub904\uc57c \ud558\uae34 \ud558\ub294\ub370, \ub0b4 \ubaa8\ub4e0 \uc5d0\ub108\uc9c0\uac00 \ubc29\uc804\ub418\uc5b4 \ubc84\ub838\ub2e4. \uc704 \ub0b4\uc6a9\uc744 \uae30\ubc18\uc73c\ub85c <a href=\"https:\/\/docs.godotengine.org\/en\/stable\/classes\/class_camera.html\">\uce74\uba54\ub77c \ub178\ub4dc \ubb38\uc11c<\/a>\ub97c \ucc38\uace0\ud558\uc2dc\ub77c. \uc774\ub807\uac8c \ub9d0\ud588\uc9c0\ub9cc, \uc5b8\uc820\uac04 \ucd94\uac00\ud574\uc57c\ud560 \ub0b4\uc6a9&#8230;<\/p>\n\n\n\n<p> \uc774\uc81c \ubcf8\uaca9\uc801\uc73c\ub85c \uc250\uc774\ub354 \ubd80\ubd84\uc744 \uba3c\uc800 \ud30c\ubcf4\ub3c4\ub85d \ud558\uaca0\ub2e4. \uad00\ub828\ud574\uc11c\ub294 Godot\uc5d0\uc11c\ub3c4 \ub9cc\uc9c8\uac8c \ub9ce\uc744 \uac70 \uac19\ub124.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\uc55e\uc5d0\uc11c \ub808\uc774 \ud2b8\ub808\uc774\uc2f1\uc5d0 \ub300\ud574 \uac1c\ub150\uc801\uc73c\ub85c\ub9cc \uac04\ub2e8\ud788 \uc54c\uc544\ubd24\ub2e4. \ub808\uc774 \ud2b8\ub808\uc774\uc2f1\uc774 \ud604\uc2e4\uc758 \ube5b\uc744 \uc2dc\ubbac\ub808\uc774\uc158 \ud558\ub294 \ubc29\ubc95\uc774\uae30 \ub54c\ubb38\uc5d0, \uc774\ub860\uc801\uc73c\ub85c\ub294 \uac00\uc7a5 \uba85\ud655\ud558\uace0 \ub2e8\uc21c\ud558\uaca0\uc9c0\ub9cc, \uc5c4\uccad\ub09c \uacc4\uc0b0\ub7c9\uc73c\ub85c \uc778\ud574 \ub9ac\uc5bc\ud0c0\uc784 \ub80c\ub354\ub9c1\uc5d0\uc11c \uc0ac\uc6a9\ud558\uae30\uc5d4 \uc81c\ud55c\uc801\uc774\ub2e4. \uc77c\ubc18\uc801\uc778 \ub9ac\uc5bc\ud0c0\uc784 \ub80c\ub354\ub9c1\uc740 \ub450\ub2e8\uacc4\ub85c \ub098\ub260 \uc218 \uc788\ub294\ub370, \uccab\ubc88\uc9f8\ub85c Geometry Transform\ub4e4\uc744 \ud1b5\ud574\uc11c 3D \uacf5\uac04\uc758 \uc624\ube0c\uc81d\ud2b8\ub97c \uc2a4\ud06c\ub9b0 \uc2a4\ud398\uc774\uc2a4\ub85c \uc62e\uaca8\uc624\uba74\uc11c \uc5b4\ub5a4 \ubd80\ubd84\ub4e4\uc774 \ubcf4\uc5ec\uc9c0\ub294\uc9c0 \ud310\ub2e8\ud558\ub294 \uacfc\uc815\uc774 \ud544\uc694\ud558\uace0, \ub450\ubc88\uc9f8\ub85c \uc774\ub807\uac8c \uc62e\uaca8\uc628 \uc624\ube0c\uc81d\ud2b8\ub97c \uc2a4\ud06c\ub9b0\uc758 \uac01 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[270,3,24],"tags":[284,309,271,308,304,295,305,291,264,307,303,306],"class_list":["post-1803","post","type-post","status-publish","format-standard","hentry","category-godot","category-etc","category-note4reference","tag-3d","tag-coordinate","tag-godot","tag-homogeneouse","tag-opengl","tag-perspective","tag-projection","tag-rendering","tag-rotation","tag-slerp","tag-transform","tag-viewport"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/batmask.net\/index.php\/wp-json\/wp\/v2\/posts\/1803","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/batmask.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/batmask.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/batmask.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/batmask.net\/index.php\/wp-json\/wp\/v2\/comments?post=1803"}],"version-history":[{"count":45,"href":"http:\/\/batmask.net\/index.php\/wp-json\/wp\/v2\/posts\/1803\/revisions"}],"predecessor-version":[{"id":3463,"href":"http:\/\/batmask.net\/index.php\/wp-json\/wp\/v2\/posts\/1803\/revisions\/3463"}],"wp:attachment":[{"href":"http:\/\/batmask.net\/index.php\/wp-json\/wp\/v2\/media?parent=1803"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/batmask.net\/index.php\/wp-json\/wp\/v2\/categories?post=1803"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/batmask.net\/index.php\/wp-json\/wp\/v2\/tags?post=1803"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}