OpenGL 几何知识

一、引言

为什么要学习几何相关知识？因为在OpenGL中所有可视对象都是2D/3D几何图形，对几何图形的移动/缩放/旋转；拉伸/扭曲等；图形从一个场景转换到另一个场景中，都需要借助向量和矩阵的运算。

二、坐标系以及变换

事实上，我们所谓的3D在显示屏上并非真正的3D,因为我们的显示屏都是2D的，所以，在计算机内部创建的3D图形都会投影到2D屏幕中，在此期间，就会涉及到坐标系变换。应用程序设置的顶点坐标，经过一系列场景变换后（一般在顶点坐标系完成），得到标准的设备坐标【-1.0，1.0】，然后送入光栅化器，最终得到屏幕的2D坐标点（像素点）。光栅化OpenGL无法控制，故这里我们只讨论场景变换。

#mermaid-svg-jqQuJRbIcBxAaGVS .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-jqQuJRbIcBxAaGVS .label text{fill:#333}#mermaid-svg-jqQuJRbIcBxAaGVS .node rect,#mermaid-svg-jqQuJRbIcBxAaGVS .node circle,#mermaid-svg-jqQuJRbIcBxAaGVS .node ellipse,#mermaid-svg-jqQuJRbIcBxAaGVS .node polygon,#mermaid-svg-jqQuJRbIcBxAaGVS .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-jqQuJRbIcBxAaGVS .node .label{text-align:center;fill:#333}#mermaid-svg-jqQuJRbIcBxAaGVS .node.clickable{cursor:pointer}#mermaid-svg-jqQuJRbIcBxAaGVS .arrowheadPath{fill:#333}#mermaid-svg-jqQuJRbIcBxAaGVS .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-jqQuJRbIcBxAaGVS .flowchart-link{stroke:#333;fill:none}#mermaid-svg-jqQuJRbIcBxAaGVS .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-jqQuJRbIcBxAaGVS .edgeLabel rect{opacity:0.9}#mermaid-svg-jqQuJRbIcBxAaGVS .edgeLabel span{color:#333}#mermaid-svg-jqQuJRbIcBxAaGVS .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-jqQuJRbIcBxAaGVS .cluster text{fill:#333}#mermaid-svg-jqQuJRbIcBxAaGVS div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-jqQuJRbIcBxAaGVS .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-jqQuJRbIcBxAaGVS text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-jqQuJRbIcBxAaGVS .actor-line{stroke:grey}#mermaid-svg-jqQuJRbIcBxAaGVS .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-jqQuJRbIcBxAaGVS .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-jqQuJRbIcBxAaGVS #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-jqQuJRbIcBxAaGVS .sequenceNumber{fill:#fff}#mermaid-svg-jqQuJRbIcBxAaGVS #sequencenumber{fill:#333}#mermaid-svg-jqQuJRbIcBxAaGVS #crosshead path{fill:#333;stroke:#333}#mermaid-svg-jqQuJRbIcBxAaGVS .messageText{fill:#333;stroke:#333}#mermaid-svg-jqQuJRbIcBxAaGVS .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-jqQuJRbIcBxAaGVS .labelText,#mermaid-svg-jqQuJRbIcBxAaGVS .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-jqQuJRbIcBxAaGVS .loopText,#mermaid-svg-jqQuJRbIcBxAaGVS .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-jqQuJRbIcBxAaGVS .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-jqQuJRbIcBxAaGVS .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-jqQuJRbIcBxAaGVS .noteText,#mermaid-svg-jqQuJRbIcBxAaGVS .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-jqQuJRbIcBxAaGVS .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-jqQuJRbIcBxAaGVS .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-jqQuJRbIcBxAaGVS .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-jqQuJRbIcBxAaGVS .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-jqQuJRbIcBxAaGVS .section{stroke:none;opacity:0.2}#mermaid-svg-jqQuJRbIcBxAaGVS .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-jqQuJRbIcBxAaGVS .section2{fill:#fff400}#mermaid-svg-jqQuJRbIcBxAaGVS .section1,#mermaid-svg-jqQuJRbIcBxAaGVS .section3{fill:#fff;opacity:0.2}#mermaid-svg-jqQuJRbIcBxAaGVS .sectionTitle0{fill:#333}#mermaid-svg-jqQuJRbIcBxAaGVS .sectionTitle1{fill:#333}#mermaid-svg-jqQuJRbIcBxAaGVS .sectionTitle2{fill:#333}#mermaid-svg-jqQuJRbIcBxAaGVS .sectionTitle3{fill:#333}#mermaid-svg-jqQuJRbIcBxAaGVS .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-jqQuJRbIcBxAaGVS .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-jqQuJRbIcBxAaGVS .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-jqQuJRbIcBxAaGVS .grid path{stroke-width:0}#mermaid-svg-jqQuJRbIcBxAaGVS .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-jqQuJRbIcBxAaGVS .task{stroke-width:2}#mermaid-svg-jqQuJRbIcBxAaGVS .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-jqQuJRbIcBxAaGVS .taskText:not([font-size]){font-size:11px}#mermaid-svg-jqQuJRbIcBxAaGVS .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-jqQuJRbIcBxAaGVS .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-jqQuJRbIcBxAaGVS .task.clickable{cursor:pointer}#mermaid-svg-jqQuJRbIcBxAaGVS .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-jqQuJRbIcBxAaGVS .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-jqQuJRbIcBxAaGVS .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-jqQuJRbIcBxAaGVS .taskText0,#mermaid-svg-jqQuJRbIcBxAaGVS .taskText1,#mermaid-svg-jqQuJRbIcBxAaGVS .taskText2,#mermaid-svg-jqQuJRbIcBxAaGVS .taskText3{fill:#fff}#mermaid-svg-jqQuJRbIcBxAaGVS .task0,#mermaid-svg-jqQuJRbIcBxAaGVS .task1,#mermaid-svg-jqQuJRbIcBxAaGVS .task2,#mermaid-svg-jqQuJRbIcBxAaGVS .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-jqQuJRbIcBxAaGVS .taskTextOutside0,#mermaid-svg-jqQuJRbIcBxAaGVS .taskTextOutside2{fill:#000}#mermaid-svg-jqQuJRbIcBxAaGVS .taskTextOutside1,#mermaid-svg-jqQuJRbIcBxAaGVS .taskTextOutside3{fill:#000}#mermaid-svg-jqQuJRbIcBxAaGVS .active0,#mermaid-svg-jqQuJRbIcBxAaGVS .active1,#mermaid-svg-jqQuJRbIcBxAaGVS .active2,#mermaid-svg-jqQuJRbIcBxAaGVS .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-jqQuJRbIcBxAaGVS .activeText0,#mermaid-svg-jqQuJRbIcBxAaGVS .activeText1,#mermaid-svg-jqQuJRbIcBxAaGVS .activeText2,#mermaid-svg-jqQuJRbIcBxAaGVS .activeText3{fill:#000 !important}#mermaid-svg-jqQuJRbIcBxAaGVS .done0,#mermaid-svg-jqQuJRbIcBxAaGVS .done1,#mermaid-svg-jqQuJRbIcBxAaGVS .done2,#mermaid-svg-jqQuJRbIcBxAaGVS .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-jqQuJRbIcBxAaGVS .doneText0,#mermaid-svg-jqQuJRbIcBxAaGVS .doneText1,#mermaid-svg-jqQuJRbIcBxAaGVS .doneText2,#mermaid-svg-jqQuJRbIcBxAaGVS .doneText3{fill:#000 !important}#mermaid-svg-jqQuJRbIcBxAaGVS .crit0,#mermaid-svg-jqQuJRbIcBxAaGVS .crit1,#mermaid-svg-jqQuJRbIcBxAaGVS .crit2,#mermaid-svg-jqQuJRbIcBxAaGVS .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-jqQuJRbIcBxAaGVS .activeCrit0,#mermaid-svg-jqQuJRbIcBxAaGVS .activeCrit1,#mermaid-svg-jqQuJRbIcBxAaGVS .activeCrit2,#mermaid-svg-jqQuJRbIcBxAaGVS .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-jqQuJRbIcBxAaGVS .doneCrit0,#mermaid-svg-jqQuJRbIcBxAaGVS .doneCrit1,#mermaid-svg-jqQuJRbIcBxAaGVS .doneCrit2,#mermaid-svg-jqQuJRbIcBxAaGVS .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-jqQuJRbIcBxAaGVS .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-jqQuJRbIcBxAaGVS .milestoneText{font-style:italic}#mermaid-svg-jqQuJRbIcBxAaGVS .doneCritText0,#mermaid-svg-jqQuJRbIcBxAaGVS .doneCritText1,#mermaid-svg-jqQuJRbIcBxAaGVS .doneCritText2,#mermaid-svg-jqQuJRbIcBxAaGVS .doneCritText3{fill:#000 !important}#mermaid-svg-jqQuJRbIcBxAaGVS .activeCritText0,#mermaid-svg-jqQuJRbIcBxAaGVS .activeCritText1,#mermaid-svg-jqQuJRbIcBxAaGVS .activeCritText2,#mermaid-svg-jqQuJRbIcBxAaGVS .activeCritText3{fill:#000 !important}#mermaid-svg-jqQuJRbIcBxAaGVS .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-jqQuJRbIcBxAaGVS g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-jqQuJRbIcBxAaGVS g.classGroup text .title{font-weight:bolder}#mermaid-svg-jqQuJRbIcBxAaGVS g.clickable{cursor:pointer}#mermaid-svg-jqQuJRbIcBxAaGVS g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-jqQuJRbIcBxAaGVS g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-jqQuJRbIcBxAaGVS .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-jqQuJRbIcBxAaGVS .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-jqQuJRbIcBxAaGVS .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-jqQuJRbIcBxAaGVS .dashed-line{stroke-dasharray:3}#mermaid-svg-jqQuJRbIcBxAaGVS #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-jqQuJRbIcBxAaGVS #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-jqQuJRbIcBxAaGVS #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-jqQuJRbIcBxAaGVS #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-jqQuJRbIcBxAaGVS #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-jqQuJRbIcBxAaGVS #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-jqQuJRbIcBxAaGVS #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-jqQuJRbIcBxAaGVS #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-jqQuJRbIcBxAaGVS .commit-id,#mermaid-svg-jqQuJRbIcBxAaGVS .commit-msg,#mermaid-svg-jqQuJRbIcBxAaGVS .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-jqQuJRbIcBxAaGVS .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-jqQuJRbIcBxAaGVS .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-jqQuJRbIcBxAaGVS g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-jqQuJRbIcBxAaGVS g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-jqQuJRbIcBxAaGVS g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-jqQuJRbIcBxAaGVS g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-jqQuJRbIcBxAaGVS g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-jqQuJRbIcBxAaGVS g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-jqQuJRbIcBxAaGVS .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-jqQuJRbIcBxAaGVS .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-jqQuJRbIcBxAaGVS .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-jqQuJRbIcBxAaGVS .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-jqQuJRbIcBxAaGVS .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-jqQuJRbIcBxAaGVS .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-jqQuJRbIcBxAaGVS .edgeLabel text{fill:#333}#mermaid-svg-jqQuJRbIcBxAaGVS .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-jqQuJRbIcBxAaGVS .node circle.state-start{fill:black;stroke:black}#mermaid-svg-jqQuJRbIcBxAaGVS .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-jqQuJRbIcBxAaGVS #statediagram-barbEnd{fill:#9370db}#mermaid-svg-jqQuJRbIcBxAaGVS .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-jqQuJRbIcBxAaGVS .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-jqQuJRbIcBxAaGVS .statediagram-state .divider{stroke:#9370db}#mermaid-svg-jqQuJRbIcBxAaGVS .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-jqQuJRbIcBxAaGVS .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-jqQuJRbIcBxAaGVS .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-jqQuJRbIcBxAaGVS .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-jqQuJRbIcBxAaGVS .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-jqQuJRbIcBxAaGVS .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-jqQuJRbIcBxAaGVS .note-edge{stroke-dasharray:5}#mermaid-svg-jqQuJRbIcBxAaGVS .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-jqQuJRbIcBxAaGVS .error-icon{fill:#522}#mermaid-svg-jqQuJRbIcBxAaGVS .error-text{fill:#522;stroke:#522}#mermaid-svg-jqQuJRbIcBxAaGVS .edge-thickness-normal{stroke-width:2px}#mermaid-svg-jqQuJRbIcBxAaGVS .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-jqQuJRbIcBxAaGVS .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-jqQuJRbIcBxAaGVS .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-jqQuJRbIcBxAaGVS .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-jqQuJRbIcBxAaGVS .marker{fill:#333}#mermaid-svg-jqQuJRbIcBxAaGVS .marker.cross{stroke:#333}:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}#mermaid-svg-jqQuJRbIcBxAaGVS {color: rgba(0, 0, 0, 0.75);font: ;}

用户顶点坐标

场景变换

标准设备坐标

光栅化

屏幕坐标

从用户顶点坐标到屏幕坐标一般会设计以下五个坐标空间。

局部空间(Local Space，或者称为物体空间(Object Space))
世界空间(World Space)
观察空间(View Space，或者称为视觉空间(Eye Space))
裁剪空间(Clip Space)
屏幕空间(Screen Space)
借用LearnOpenGL中的图说明一下：

1.局部空间中的物体的位置都是局部原点，大小针对物体本身。
2.局部坐标通过模型变换矩阵，转到世界坐标空间。世界空间中，所有物体的坐标原点都相同，都是世界坐标系原点。
3.世界坐标通过视图变换矩阵转移到观察空间。世界空间中包含所有物体，观察者的远近和方向共同决定视口中的画面。
4.观察空间中的点通过投影变换矩阵转移到裁剪空间，投影变换会创建一个平截头体（观察箱），观察箱内的坐标会被映射到标准化设备坐标系中。在裁剪空间中，坐标点都位于[-1.0,1.0]之间，超出范围的点将会被裁剪掉。之所以做投影变换，因为在欧式空间中，成像的结果和人眼成像不一致，比如，两条平行直线在传统的欧式空间中永远不相交（有种说法是相较于无穷远处）。但是，在投影空间中，两条平行直线会相交。在投影空间中，成像的结果和人眼成像基本一致。当然，投影变换除了透视投影，还有正投影（平行投影）。
5.裁剪空间中的坐标通过视口变换和光栅化，转换到屏幕坐标系中。
总结：
五个空间坐标系和三个变换矩阵（Model Matrix;View Matrix;Projection Matrix）。
坐标的表示和转换需要向量和矩阵相关知识，下面我们看看向量和矩阵的基本概念和基本运算。

三、向量

什么是向量
既有大小又有方向的量，四维向量形式如：υ=(x,y,z,w)\upsilon=(x,y,z,w)υ=(x,y,z,w)
向量的运算示例α=(1,2,2)，β=(2,0,1)\alpha=(1,2,2)，\beta=(2,0,1)α=(1,2,2)，β=(2,0,1)
加法：α+β=(3,2,3)\alpha + \beta=(3,2,3)α+β=(3,2,3)
减法：α−β=(−1,2,1)\alpha - \beta=(-1,2,1)α−β=(−1,2,1)
数乘：2∗α=(2,4,4)2*\alpha =(2,4,4)2∗α=(2,4,4)
点乘（内积）：α⋅β=∣α∣∣β∣cos⁡θ=(1∗2+2∗0+2∗1)=4\alpha\cdot \beta = \mid\alpha\mid\mid\beta\mid\cos\theta=(1*2+2*0+2*1) = 4α⋅β=∣α∣∣β∣cosθ=(1∗2+2∗0+2∗1)=4 提示：θ\thetaθ为两个向量的夹角
叉乘（外积）：α×β=(2,3,−4)\alpha\times \beta =(2,3,-4)α×β=(2,3,−4) 大小为∣α∣∣β∣sin⁡θ\mid\alpha\mid\mid\beta\mid\sin\theta∣α∣∣β∣sinθ
运算的物理意义和几何意义
两个向量相加/相减，两个向量形成的平行四边形的对角向量。点的平移。
数乘,表示点的缩放或者向量的模的缩放。
内积，用于求两个向量的夹角；或者求一个向量在另外一个向量上的投影。（物理上求功）
叉乘：用于求三角形的面积，某个平面的法向量。

四、矩阵

矩阵是一个按照长方阵列排列的复数或实数集合。比如
A=[132201301]A = \left[ \begin{matrix} 1 & 3 & 2 \\ 2 & 0 & 1 \\ 3 & 0 & 1 \end{matrix} \right]A=⎣⎡123300211⎦⎤ B=[211001100]B = \left[ \begin{matrix} 2 & 1 &1 \\ 0 & 0 & 1 \\ 1 & 0 & 0 \end{matrix} \right]B=⎣⎡201100110⎦⎤

矩阵的加减法: A+B=[343202401]A+B = \left[ \begin{matrix} 3 & 4 & 3 \\ 2 & 0 & 2 \\ 4 & 0 & 1 \end{matrix} \right]A+B=⎣⎡324400321⎦⎤
矩阵乘法:A∗B=[414522733]A*B = \left[ \begin{matrix} 4 &1 &4 \\5 & 2 & 2 \\ 7 &3 & 3 \end{matrix} \right]A∗B=⎣⎡457123423⎦⎤

矩阵的提出是为了解决线性方程组求解问题
比如一个非齐次线性方程组可以表示为Ax=bAx=bAx=b,增广矩阵B=(A,b)B=(A,b)B=(A,b),线性方程组是否有解与A和B的秩和A的行数n有关。
矩阵满足结合路和分配律，不满足交换律

五、齐次坐标

1.齐次坐标是一种用在投影空间中的坐标系统，用n+1维的向量表示n维空间中的一个点。
2.齐次坐标的作用：1.解决欧式空间中两条直线不能相交的问题。 2.刚性变换就可以用一个4x4的矩阵统一表示。3.齐次坐标中的w分量可以表示观察者到投影平面的距离。
设定一个2D的笛卡尔坐标(1,2),它的齐次坐标可以表示为(1,2,1),(2,4,2),(3,6,3).(1a,2a,a),所以，在一个投影空间中，会有多个齐次坐标对应欧式空间中的一个点。

问题？求解两条平行线的交点

六、平移旋转缩放

旋转和缩放可以使用3x3的矩阵完成，为了统一平移变换，故将三维笛卡尔坐标用齐次坐标表示(x,y,z,w)(x,y,z,w)(x,y,z,w)

旋转：沿着z轴旋转
[cos(θ)−sin(θ)00sin(θ)cos(θ)0000100001][xyzw]=[xcos(θ)−ysin(θ)xsin(θ)+ycos(θ)zw]\left[ \begin{matrix} cos(\theta) & -sin(\theta) & 0 & 0 \\ sin(\theta) & cos(\theta) & 0 & 0 \\ 0 & 0 & 1& 0 \\ 0 & 0 & 0 & 1 \end{matrix} \right]\left[ \begin{matrix} x \\ y \\ z \\ w \end{matrix} \right]=\left[ \begin{matrix} xcos(\theta)-ysin(\theta)\\ xsin(\theta)+ycos(\theta)\\ z \\ w \end{matrix} \right]⎣⎢⎢⎡cos(θ)sin(θ)00−sin(θ)cos(θ)0000100001⎦⎥⎥⎤⎣⎢⎢⎡xyzw⎦⎥⎥⎤=⎣⎢⎢⎡xcos(θ)−ysin(θ)xsin(θ)+ycos(θ)zw⎦⎥⎥⎤

缩放：
[sx0000sy0000sz00001][xyzw]=[sx∗xsy∗ysz∗zw]\left[ \begin{matrix} s_{x} & 0 & 0 & 0 \\ 0 & s_{y}& 0 & 0 \\ 0 & 0 & s_{z}& 0 \\ 0 & 0 & 0 & 1 \end{matrix} \right]\left[ \begin{matrix} x \\ y \\ z \\ w \end{matrix} \right]=\left[ \begin{matrix} s_{x}*x\\ s_{y}*y\\ s_{z}*z \\ w \end{matrix} \right]⎣⎢⎢⎡sx0000sy0000sz00001⎦⎥⎥⎤⎣⎢⎢⎡xyzw⎦⎥⎥⎤=⎣⎢⎢⎡sx∗xsy∗ysz∗zw⎦⎥⎥⎤

平移：
[100tx010ty001tz0001][xyzw]=[wtx+xwty+ywtz+zw]\left[ \begin{matrix} 1 & 0 & 0 & t_{x}\\ 0 & 1 & 0 & t_{y} \\ 0 & 0 & 1& t_{z} \\ 0 & 0 & 0 & 1 \end{matrix} \right]\left[ \begin{matrix} x \\ y \\ z \\ w \end{matrix} \right]=\left[ \begin{matrix} wt_{x}+x\\ wt_{y}+y\\ wt_{z}+z \\ w \end{matrix} \right]⎣⎢⎢⎡100001000010txtytz1⎦⎥⎥⎤⎣⎢⎢⎡xyzw⎦⎥⎥⎤=⎣⎢⎢⎡wtx+xwty+ywtz+zw⎦⎥⎥⎤

七、变换

线性变换

线性空间V上的一个变换A称为线性变换，对于V中任意的元素α，β和数域P中任意k，都有
A(α+β)=A（α）+A（β）
A (kα)=kA(α)
仿射变换，平移旋转和缩放都属于线性变换

[cos(θ)−sin(θ)00sin(θ)cos(θ)0000100001][x+ty+pz+qw+s]=[(x+t)cos(θ)−(y+p)sin(θ)(x+t)sin(θ)+(y+p)sin(θ)z+qw+s]\left[ \begin{matrix} cos(\theta) & -sin(\theta) & 0 & 0 \\ sin(\theta) & cos(\theta) & 0 & 0 \\ 0 & 0 & 1& 0 \\ 0 & 0 & 0 & 1 \end{matrix} \right]\left[ \begin{matrix} x+t \\ y +p\\ z +q\\ w+s \end{matrix} \right]=\left[ \begin{matrix} (x+t)cos(\theta)-(y+p)sin(\theta)\\ (x+t)sin(\theta)+(y+p)sin(\theta)\\ z +q\\ w +s\end{matrix} \right]⎣⎢⎢⎡cos(θ)sin(θ)00−sin(θ)cos(θ)0000100001⎦⎥⎥⎤⎣⎢⎢⎡x+ty+pz+qw+s⎦⎥⎥⎤=⎣⎢⎢⎡(x+t)cos(θ)−(y+p)sin(θ)(x+t)sin(θ)+(y+p)sin(θ)z+qw+s⎦⎥⎥⎤

=[xcos(θ)−ysin(θ)xsin(θ)+ysin(θ)zw]+[tcos(θ)−psin(θ)tsin(θ)+psin(θ)st]=\left[ \begin{matrix} xcos(\theta)-ysin(\theta)\\ xsin(\theta)+ysin(\theta)\\ z \\ w \end{matrix} \right]+\left[ \begin{matrix} tcos(\theta)-psin(\theta)\\ tsin(\theta)+psin(\theta)\\ s \\ t \end{matrix} \right]=⎣⎢⎢⎡xcos(θ)−ysin(θ)xsin(θ)+ysin(θ)zw⎦⎥⎥⎤+⎣⎢⎢⎡tcos(θ)−psin(θ)tsin(θ)+psin(θ)st⎦⎥⎥⎤
投影变换
平行投影

 ortho(float left, float right, float bottom, float top, float nearPlane, float farPlane)

透视投影

void frustum(float left, float right, float bottom, float top, float nearPlane, float farPlane)
void perspective(float verticalAngle, float aspectRatio, float nearPlane, float farPlane)

七、三维旋转

1.欧拉角
2.四元数