[{"data":1,"prerenderedAt":3801},["ShallowReactive",2],{"page-\u002Fgraphy\u002Fopengel\u002F三角形绘制":3},{"id":4,"title":5,"body":6,"description":12,"extension":3795,"meta":3796,"navigation":955,"path":3797,"seo":3798,"stem":3799,"__hash__":3800},"content\u002Fgraphy\u002Fopengel\u002F三角形绘制.md","三角形绘制",{"type":7,"value":8,"toc":3778},"minimark",[9,13,26,29,45,56,68,79,93,96,101,106,109,128,135,139,153,162,165,199,204,220,224,231,261,280,286,305,338,356,375,386,401,413,420,431,438,449,452,463,475,586,601,616,622,625,651,662,676,712,719,732,742,761,782,785,796,806,815,906,909,916,919,999,1002,1032,1068,1105,1131,1134,1137,1144,1225,1228,1235,1262,1273,1280,1315,1323,1452,1455,1462,1471,1545,1562,1572,1625,1628,1631,1641,1648,1651,1678,1685,1713,1716,1727,1780,1787,1799,1802,1805,1823,1830,1833,1843,1846,1851,1865,1872,1930,1963,1973,1980,1988,2000,2014,2017,2102,2117,2132,2234,2237,2240,2254,2267,2270,2281,2286,2289,2319,2338,2483,2497,2500,2510,2543,2555,2558,2563,3774],[10,11,12],"p",{},"在学习此节之前，建议将这三个单词先记下来：",[14,15,16,20,23],"ul",{},[17,18,19],"li",{},"顶点数组对象：Vertex Array Object，VAO",[17,21,22],{},"顶点缓冲对象：Vertex Buffer Object，VBO",[17,24,25],{},"元素缓冲对象：Element Buffer Object，EBO 或 索引缓冲对象 Index Buffer Object，IBO",[10,27,28],{},"当指代这三个东西的时候，可能使用的是全称，也可能用的是英文缩写，翻译的时候和原文保持的一致。由于没有英文那样的分词间隔，中文全称的部分可能不太容易注意。但请记住，缩写和中文全称指代的是一个东西。",[10,30,31,32,36,37,40,41,44],{},"​\t在OpenGL中，",[33,34,35],"strong",{},"任何事物都在3D空间中","，而",[33,38,39],{},"屏幕和窗口却是2D像素数组，这导致OpenGL的大部分工作都是关于把3D坐标转变为适应你屏幕的2D像素","。3D坐标转为2D坐标的处理过程是由OpenGL的图形渲染管线（Graphics Pipeline，大多译为",[33,42,43],{},"管线","，实际上指的是一堆原始图形数据途经一个输送管道，期间经过各种变化处理最终出现在屏幕的过程）管理的。",[10,46,47,48,51,52,55],{},"​\t图形渲染管线可以被划分为两个主要部分：",[33,49,50],{},"第一部分把你的3D坐标转换为2D坐标","，",[33,53,54],{},"第二部分是把2D坐标转变为实际的有颜色的像素","。这个教程里，我们会简单地讨论一下图形渲染管线，以及如何利用它创建一些漂亮的像素。",[57,58,59,65],"blockquote",{},[10,60,61],{},[62,63,64],"span",{},"!NOTE",[10,66,67],{},"2D坐标和像素也是不同的，2D坐标精确表示一个点在2D空间中的位置，而2D像素是这个点的近似值，2D像素受到你的屏幕\u002F窗口分辨率的限制。",[10,69,70,71,74,75,78],{},"​\t图形渲染管线",[33,72,73],{},"接受一组3D坐标，然后把它们转变为你屏幕上的有色2D像素输出","。图形渲染管线可以被划分为几个阶段，每个阶段将会把前一个阶段的输出作为输入。所有这些阶段都是高度专门化的（它们都有一个特定的函数），并且很容易并行执行。正是由于它们具有并行执行的特性，当今大多数显卡都有成千上万的小处理核心，",[33,76,77],{},"它们在GPU上为每一个（渲染管线）阶段运行各自的小程序，从而在图形渲染管线中快速处理你的数据。这些小程序叫做着色器(Shader)","。",[10,80,81,82,85,86,78],{},"​\t",[33,83,84],{},"每一个 GPU 的流处理器（Streaming Multiprocessor, SM，或 Compute Unit, CU）都包含"," 专门用于执行",[33,87,88,89,92],{},"着色器（Shader）",[33,90,91],{},"程序的","硬件单元",[10,94,95],{},"不过，在现代 GPU 术语中，我们需要区分几个概念：",[97,98,100],"h2",{"id":99},"流处理器smcu和着色器核心","流处理器（SM\u002FCU）和着色器核心",[102,103,105],"h3",{"id":104},"_1-流处理器-streaming-multiprocessor-sm","1. 流处理器 (Streaming Multiprocessor, SM)",[10,107,108],{},"流处理器是现代 GPU 的基本计算单元。",[14,110,111,120],{},[17,112,113,116,117,78],{},[33,114,115],{},"NVIDIA"," 将其称为 ",[33,118,119],{},"SM（Streaming Multiprocessor，流式多处理器）",[17,121,122,116,125,78],{},[33,123,124],{},"AMD",[33,126,127],{},"CU（Compute Unit，计算单元）",[10,129,130,131,134],{},"一个现代 GPU 芯片（例如 NVIDIA RTX 4090 或 AMD Radeon RX 7900 XT）包含",[33,132,133],{},"数百个","这样的 SM 或 CU。它们是 GPU 执行所有并行计算任务的“引擎”。",[102,136,138],{"id":137},"_2-着色器核心-shader-cores","2. 着色器核心 (Shader Cores)",[10,140,141,142,145,146,149,150,78],{},"着色器核心，在 NVIDIA 架构中通常被称为 ",[33,143,144],{},"CUDA 核心","，在 AMD 架构中被称为 ",[33,147,148],{},"ALU（Arithmetic Logic Unit，算术逻辑单元）"," 或 ",[33,151,152],{},"流处理器核心",[10,154,155,158,159],{},[33,156,157],{},"关键点："," ",[33,160,161],{},"这些核心就位于每一个流处理器（SM\u002FCU）的内部。",[10,163,164],{},"一个 SM\u002FCU 是一个复杂的单元，它包含：",[14,166,167,173,179,185],{},[17,168,169,172],{},[33,170,171],{},"大量的着色器核心\u002FALU："," 负责执行着色器程序中的实际数学运算（加法、乘法、三角函数等）。",[17,174,175,178],{},[33,176,177],{},"缓存 (Cache)："," 存储数据，减少内存访问延迟。",[17,180,181,184],{},[33,182,183],{},"共享内存 (Shared Memory)："," 供该 SM\u002FCU 内的核心之间快速通信。",[17,186,187,190,191,194,195,198],{},[33,188,189],{},"特殊功能单元："," 例如用于光线追踪的 ",[33,192,193],{},"RT Cores"," 或用于 AI\u002F矩阵运算的 ",[33,196,197],{},"Tensor Cores","（在 NVIDIA 架构中）。",[10,200,201],{},[33,202,203],{},"因此，你可以理解为：",[57,205,206],{},[10,207,208,211,212,215,216,219],{},[33,209,210],{},"流处理器 (SM\u002FCU)"," 是一个管理和调度工作的容器，而它内部的 ",[33,213,214],{},"着色器核心\u002FALU"," 才是真正执行你所编写的",[33,217,218],{},"顶点着色器、片段着色器","等程序的硬件。",[97,221,223],{"id":222},"现代-gpu-中的着色器概念","现代 GPU 中的“着色器”概念",[10,225,226,227,230],{},"​\t在现代 GPU 中，“着色器”的概念已经超越了单纯的颜色计算，它指的是任何可以在 ",[33,228,229],{},"GPU 上并行执行的小程序","。当你听到 GPU 硬件具备“着色器”能力时，指的是它能够高效执行以下所有类型的程序：",[232,233,234,240,249,255],"ol",{},[17,235,236,239],{},[33,237,238],{},"顶点着色器 (Vertex Shader)："," 处理 3D 几何体的变换、位置和投影。",[17,241,242,245,246,78],{},[33,243,244],{},"片段着色器 (Fragment Shader)："," 计算",[33,247,248],{},"每个像素的最终颜色（包括光照和纹理）",[17,250,251,254],{},[33,252,253],{},"几何着色器 (Geometry Shader)："," 可选，用于在 GPU 上创建新的几何体。",[17,256,257,260],{},[33,258,259],{},"计算着色器 (Compute Shader)："," 用于通用目的的并行计算任务，与图形渲染无关。",[10,262,263,264,267,268,271,272,275,276,279],{},"​\t有些着色器",[33,265,266],{},"可以由开发者配置","，因为",[33,269,270],{},"允许用自己写的着色器来代替默认的","，所以",[33,273,274],{},"能够更细致地控制图形渲染管线中的特定部分了","。因为它们运行在GPU上，所以节省了宝贵的CPU时间。OpenGL着色器是用OpenGL",[33,277,278],{},"着色器语言","(OpenGL Shading Language, GLSL)写成的，在下一节中我们再花更多时间研究它。",[10,281,282],{},[283,284],"img",{"alt":283,"src":285},".\u002Fassets\u002Fpipeline.png",[10,287,288,289,292,293,296,297,300,301,304],{},"​\t首先，我们以数组的形式",[33,290,291],{},"传递3个3D坐标作为图形渲染管线的输入","，用来",[33,294,295],{},"表示一个三角形","，这个",[33,298,299],{},"数组叫做顶点数据(Vertex Data)","；顶点数据是一系列顶点的集合。",[33,302,303],{},"一个顶点(Vertex)是一个3D坐标的数据的集合","。而这样一个顶点的数据是用顶点属性(Vertex Attribute)表示的，它可以包含任何我们想用的数据，但是简单起见，我们还是假定每个顶点只由一个3D位置(译注1)和一些颜色值组成的吧。",[57,306,307,311],{},[10,308,309],{},[62,310,64],{},[10,312,313,314,317,318,321,322,325,326,329,330,333,334,337],{},"为了让OpenGL知道我们的",[33,315,316],{},"坐标和颜色值构成的到底是什么","，OpenGL需要你去",[33,319,320],{},"指定这些数据所表示的渲染类型","。我们是希望把这些",[33,323,324],{},"数据渲染成一系列的点","？一系列的",[33,327,328],{},"三角形","？还是仅仅是一个长长的线？做出的这些",[33,331,332],{},"提示叫做图元(Primitive)","，任何一个绘制指令的调用都将",[33,335,336],{},"把图元传递给OpenGL","。这是其中的几个：GL_POINTS、GL_TRIANGLES、GL_LINE_STRIP。",[10,339,340,341,344,345,348,349,352,353,78],{},"​\t图形渲染管线的第一个部分是",[33,342,343],{},"顶点着色器(Vertex Shader)","，它把一个",[33,346,347],{},"单独的顶点作为输入","。顶点着色器主要的目的是",[33,350,351],{},"把3D坐标转为另一种3D坐标","（后面会解释），同时顶点着色器允许我们",[33,354,355],{},"对顶点属性进行一些基本处理",[10,357,358,359,362,363,366,367,370,371,374],{},"​\t顶点着色器阶段的输出",[33,360,361],{},"可以选择性地传递给几何着色器(Geometry Shader)","。几何着色器将",[33,364,365],{},"一组顶点作为输入","，这些顶点",[33,368,369],{},"形成图元","，并且能够",[33,372,373],{},"通过发出新的顶点来形成新的","(或其他)图元来生成其他形状。在这个例子中，它从给定的形状中生成第二个三角形。",[10,376,377,378,381,382,385],{},"​\t图元装配(Primitive Assembly)阶段将顶点着色器（或几何着色器）",[33,379,380],{},"输出的所有顶点作为输入","（如果是GL_POINTS，那么就是一个顶点），并将",[33,383,384],{},"所有的点装配成指定图元的形状","；本节例子中是两个三角形。",[10,387,388,389,392,393,396,397,400],{},"​\t图元装配阶段的输出会被",[33,390,391],{},"传入光栅化阶段(Rasterization Stage)","，这里",[33,394,395],{},"它会把图元映射为最终屏幕上相应的像素","，生成供片段着色器(Fragment Shader)使用的片段(Fragment)。在",[33,398,399],{},"片段着色器运行之前会执行裁切(Clipping)","。裁切会丢弃超出你的视图以外的所有像素，用来提升执行效率。",[57,402,403,407],{},[10,404,405],{},[62,406,64],{},[10,408,409,410,78],{},"OpenGL中的一个片段是",[33,411,412],{},"OpenGL渲染一个像素所需的所有数据",[10,414,415,416,419],{},"​\t片段着色器的主要目的是",[33,417,418],{},"计算一个像素的最终颜色，这也是所有OpenGL高级效果产生的地方","。通常，片段着色器包含3D场景的数据（比如光照、阴影、光的颜色等等），这些数据可以被用来计算最终像素的颜色。",[10,421,422,423,426,427,430],{},"​\t在所有对应颜色值确定以后，",[33,424,425],{},"最终的对象将会被传到最后一个阶段，我们叫做Alpha测试和混合(Blending)阶段","。这个阶段检测片段的对应的深度（和模板(Stencil)）值（后面会讲），用它们来判断这个像素是其它物体的前面还是后面，决定是否应该丢弃。这个阶段也会检查alpha值（alpha值定义了一个物体的透明度）",[33,428,429],{},"并对物体进行混合(Blend)","。所以，即使在片段着色器中计算出来了一个像素输出的颜色，在渲染多个三角形的时候最后的像素颜色也可能完全不同。",[10,432,433,434,437],{},"​\t可以看到，图形渲染管线非常复杂，它包含很多可配置的部分。然而，对于大多数场合，我们只需要",[33,435,436],{},"配置顶点和片段着色器","就行了。几何着色器是可选的，通常使用它默认的着色器就行了。",[10,439,440,441,444,445,448],{},"​\t在现代OpenGL中，我们",[33,442,443],{},"必须","定义至少一个",[33,446,447],{},"顶点着色器和一个片段着色器","（因为GPU中没有默认的顶点\u002F片段着色器）。出于这个原因，刚开始学习现代OpenGL的时候可能会非常困难，因为在你能够渲染自己的第一个三角形之前已经需要了解一大堆知识了。在本节结束你最终渲染出你的三角形的时候，你也会了解到非常多的图形编程知识。",[97,450,451],{"id":451},"顶点输入",[10,453,454,455,458,459,462],{},"​\t开始绘制图形之前，我们需要先给OpenGL输入一些顶点数据。OpenGL是一个3D图形库，所以在OpenGL中我们指定的所有坐标都是3D坐标（x、y和z）。OpenGL不是简单地把",[33,456,457],{},"所有的","3D坐标变换为屏幕上的2D像素；",[33,460,461],{},"OpenGL仅当3D坐标在3个轴（x、y和z）上-1.0到1.0的范围内时才处理它。所有在这个范围内的坐标叫做标准化设备坐标(Normalized Device Coordinates)","，此范围内的坐标最终显示在屏幕上（在这个范围以外的坐标则不会显示）。",[10,464,465,466,469,470,474],{},"​\t由于我们希望渲染一个三角形，我们一共要指定三个顶点，每个顶点都有一个3D位置。",[33,467,468],{},"我们会将它们以标准化设备坐标的形式","（OpenGL的可见区域）定义为一个",[471,472,473],"code",{},"float","数组。",[476,477,482],"pre",{"className":478,"code":479,"language":480,"meta":481,"style":481},"language-c++ shiki shiki-themes github-light github-dark","float vertices[] = {\n    -0.5f, -0.5f, 0.0f,\n     0.5f, -0.5f, 0.0f,\n     0.0f,  0.5f, 0.0f\n};\n","c++","",[471,483,484,501,534,558,580],{"__ignoreMap":481},[62,485,488,491,495,498],{"class":486,"line":487},"line",1,[62,489,473],{"class":490},"szBVR",[62,492,494],{"class":493},"sVt8B"," vertices[] ",[62,496,497],{"class":490},"=",[62,499,500],{"class":493}," {\n",[62,502,504,507,511,514,517,520,522,524,526,529,531],{"class":486,"line":503},2,[62,505,506],{"class":490},"    -",[62,508,510],{"class":509},"sj4cs","0.5",[62,512,513],{"class":490},"f",[62,515,516],{"class":493},", ",[62,518,519],{"class":490},"-",[62,521,510],{"class":509},[62,523,513],{"class":490},[62,525,516],{"class":493},[62,527,528],{"class":509},"0.0",[62,530,513],{"class":490},[62,532,533],{"class":493},",\n",[62,535,537,540,542,544,546,548,550,552,554,556],{"class":486,"line":536},3,[62,538,539],{"class":509},"     0.5",[62,541,513],{"class":490},[62,543,516],{"class":493},[62,545,519],{"class":490},[62,547,510],{"class":509},[62,549,513],{"class":490},[62,551,516],{"class":493},[62,553,528],{"class":509},[62,555,513],{"class":490},[62,557,533],{"class":493},[62,559,561,564,566,569,571,573,575,577],{"class":486,"line":560},4,[62,562,563],{"class":509},"     0.0",[62,565,513],{"class":490},[62,567,568],{"class":493},",  ",[62,570,510],{"class":509},[62,572,513],{"class":490},[62,574,516],{"class":493},[62,576,528],{"class":509},[62,578,579],{"class":490},"f\n",[62,581,583],{"class":486,"line":582},5,[62,584,585],{"class":493},"};\n",[10,587,588,589,592,593,597,598,78],{},"​\t由于OpenGL是在3D空间中工作的，而我们渲染的是一个2D三角形，",[33,590,591],{},"我们将它顶点的z坐标设置为0.0","。这样子的话三角形每一点的",[594,595,596],"em",{},"深度","(Depth，译注2)都是一样的，",[33,599,600],{},"从而使它看上去像是2D的",[10,602,603,604,607,608,611,612,615],{},"​\t一旦你的",[33,605,606],{},"顶点坐标已经在顶点着色器中处理过","，它们就应该是",[33,609,610],{},"标准化设备坐标","了，标准化设备坐标是一个x、y和z值在-1.0到1.0的一小段空间。",[33,613,614],{},"任何落在范围外的坐标都会被丢弃\u002F裁剪，不会显示在你的屏幕上","。下面你会看到我们定义的在标准化设备坐标中的三角形(忽略z轴)：",[10,617,618],{},[283,619],{"alt":620,"src":621},"image-20251005141205095",".\u002Fassets\u002Fimage-20251005141205095.png",[10,623,624],{},"​\t与通常的屏幕坐标不同，y轴正方向为向上，(0, 0)坐标是这个图像的中心，而不是左上角。最终你希望所有(变换过的)坐标都在这个坐标空间中，否则它们就不可见了。",[10,626,627,628,631,632,635,636,639,640,643,644,647,648,78],{},"​\t通过使用由glViewport函数提供的数据，",[33,629,630],{},"进行视口变换(Viewport Transform)","，标准化设备坐标(Normalized Device Coordinates)会",[33,633,634],{},"变换为屏幕空间坐标(Screen-space Coordinates)","。所得的",[33,637,638],{},"屏幕空间坐标又会被变换为片段输入到片段着色器中","。 定义这样的顶点数据以后，我们会把它作为输入发送给图形渲染管线的第一个处理阶段：顶点着色器。",[33,641,642],{},"它会在GPU上创建内存用于储存我们的顶点数据","，还要",[33,645,646],{},"配置OpenGL如何解释这些内存","，并且指定其如何发送给显卡。",[33,649,650],{},"顶点着色器接着会处理我们在内存中指定数量的顶点",[10,652,653,654,657,658,661],{},"​\t我们通过",[33,655,656],{},"顶点缓冲对象(Vertex Buffer Objects, VBO)管理这个内存","，它会在GPU内存（通常被称为显存）中储存大量顶点。使用这些缓冲对象的好处是",[33,659,660],{},"我们可以一次性的发送一大批数据到显卡上","，而不是每个顶点发送一次。从CPU把数据发送到显卡相对较慢，所以只要可能我们都要尝试尽量一次性发送尽可能多的数据。当数据发送至显卡的内存中后，顶点着色器几乎能立即访问顶点，这是个非常快的过程。",[10,663,664,665,671,672,675],{},"​\t顶点缓冲对象是我们在[OpenGL](",[666,667,668],"a",{"href":668,"rel":669},"https:\u002F\u002Flearnopengl-cn.github.io\u002F01",[670],"nofollow"," Getting started\u002F01 OpenGL\u002F)教程中第一个出现的OpenGL对象。就像OpenGL中的其它对象一样，",[33,673,674],{},"这个缓冲有一个独一无二的ID，所以我们可以使用glGenBuffers函数生成一个带有缓冲ID的VBO对象","：",[476,677,679],{"className":478,"code":678,"language":480,"meta":481,"style":481},"unsigned int VBO;\nglGenBuffers(1, &VBO);\n",[471,680,681,692],{"__ignoreMap":481},[62,682,683,686,689],{"class":486,"line":487},[62,684,685],{"class":490},"unsigned",[62,687,688],{"class":490}," int",[62,690,691],{"class":493}," VBO;\n",[62,693,694,698,701,704,706,709],{"class":486,"line":503},[62,695,697],{"class":696},"sScJk","glGenBuffers",[62,699,700],{"class":493},"(",[62,702,703],{"class":509},"1",[62,705,516],{"class":493},[62,707,708],{"class":490},"&",[62,710,711],{"class":493},"VBO);\n",[10,713,714,715,718],{},"​\tOpenGL有很多缓冲对象类型，",[33,716,717],{},"顶点缓冲对象的缓冲类型是GL_ARRAY_BUFFER","。OpenGL允许我们同时绑定多个缓冲，只要它们是不同的缓冲类型。我们可以使用glBindBuffer函数把新创建的缓冲绑定到GL_ARRAY_BUFFER目标上：",[476,720,722],{"className":478,"code":721,"language":480,"meta":481,"style":481},"glBindBuffer(GL_ARRAY_BUFFER, VBO);  \n",[471,723,724],{"__ignoreMap":481},[62,725,726,729],{"class":486,"line":487},[62,727,728],{"class":696},"glBindBuffer",[62,730,731],{"class":493},"(GL_ARRAY_BUFFER, VBO);\n",[10,733,734,735,738,739,675],{},"​\t从这一刻起，我们使用的任何（在GL_ARRAY_BUFFER目标上的）",[33,736,737],{},"缓冲调用都会用来配置当前绑定的缓冲(VBO)","。然后我们可以调用glBufferData函数，",[33,740,741],{},"它会把之前定义的顶点数据复制到缓冲的内存中",[476,743,745],{"className":478,"code":744,"language":480,"meta":481,"style":481},"glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);\n",[471,746,747],{"__ignoreMap":481},[62,748,749,752,755,758],{"class":486,"line":487},[62,750,751],{"class":696},"glBufferData",[62,753,754],{"class":493},"(GL_ARRAY_BUFFER, ",[62,756,757],{"class":490},"sizeof",[62,759,760],{"class":493},"(vertices), vertices, GL_STATIC_DRAW);\n",[10,762,763,764,767,768,771,772,775,776,778,779,78],{},"​\tglBufferData是一个",[33,765,766],{},"专门用来把用户定义的数据复制到当前绑定缓冲的函数","。它的第一个参数是",[33,769,770],{},"目标缓冲的类型","：顶点缓冲对象当前绑定到GL_ARRAY_BUFFER目标上。",[33,773,774],{},"第二个参数指定传输数据的大小(以字节为单位)","；用一个简单的",[471,777,757],{},"计算出顶点数据大小就行。",[33,780,781],{},"第三个参数是我们希望发送的实际数据",[10,783,784],{},"第四个参数指定了我们希望显卡如何管理给定的数据。它有三种形式：",[14,786,787,790,793],{},[17,788,789],{},"GL_STATIC_DRAW ：数据不会或几乎不会改变。",[17,791,792],{},"GL_DYNAMIC_DRAW：数据会被改变很多。",[17,794,795],{},"GL_STREAM_DRAW ：数据每次绘制时都会改变。",[10,797,798,799,802,803],{},"​\t三角形的位置数据不会改变，",[33,800,801],{},"每次渲染调用时都保持原样，所以它的使用类型最好是GL_STATIC_DRAW","。如果，比如说一个缓冲中的数据将频繁被改变，那么使用的类型就是GL_DYNAMIC_DRAW或GL_STREAM_DRAW，这样就",[33,804,805],{},"能确保显卡把数据放在能够高速写入的内存部分。",[10,807,808,809,149,811,814],{},"​\t当你调用 ",[471,810,751],{},[471,812,813],{},"glBufferStorage"," 时，你需要传入这个提示：",[816,817,818,834],"table",{},[819,820,821],"thead",{},[822,823,824,828,831],"tr",{},[825,826,827],"th",{},"提示符",[825,829,830],{},"含义",[825,832,833],{},"驱动程序策略",[835,836,837,860,883],"tbody",{},[822,838,839,847,853],{},[840,841,842],"td",{},[33,843,844],{},[471,845,846],{},"GL_STATIC_DRAW",[840,848,849,850,78],{},"数据只设置一次，然后绘制",[33,851,852],{},"很多次",[840,854,855,856,859],{},"驱动程序会将数据放入 ",[33,857,858],{},"GPU 的只读\u002F专用显存（VRAM）"," 中。访问速度最快，但从 CPU 更新（写入）会非常慢。",[822,861,862,869,872],{},[840,863,864],{},[33,865,866],{},[471,867,868],{},"GL_DYNAMIC_DRAW",[840,870,871],{},"数据会频繁更改（例如每帧更新一次，但可能不会完全替换），然后绘制很多次。",[840,873,874,875,878,879,882],{},"驱动程序可能会将数据放入 ",[33,876,877],{},"GPU 内存池中易于更新"," 的部分，例如 ",[33,880,881],{},"系统内存（RAM）"," 中易于 DMA（直接内存访问）访问的区域，或者 VRAM 中可快速写入的区域。",[822,884,885,892,899],{},[840,886,887],{},[33,888,889],{},[471,890,891],{},"GL_STREAM_DRAW",[840,893,894,895,898],{},"数据只设置一次，绘制",[33,896,897],{},"一两次","，然后丢弃。",[840,900,901,902,905],{},"驱动程序可能会使用一种 ",[33,903,904],{},"“环形缓冲（Ring Buffer）”"," 策略。数据被写入一个临时、高速的区域，快速传输给 GPU，然后在下一帧中被新的数据覆盖。追求极致的单次传输速度。",[97,907,908],{"id":908},"顶点着色器",[10,910,911,912,915],{},"​\t顶点着色器(Vertex Shader)是几个可编程着色器中的一个。如果我们打算做渲染的话，",[33,913,914],{},"现代OpenGL需要我们至少设置一个顶点和一个片段着色器","。我们会简要介绍一下着色器以及配置两个非常简单的着色器来绘制我们第一个三角形。下一节中我们会更详细的讨论着色器。",[10,917,918],{},"​\t我们需要做的第一件事是用着色器语言GLSL(OpenGL Shading Language)编写顶点着色器，然后编译这个着色器，这样我们就可以在程序中使用它了。下面你会看到一个非常基础的GLSL顶点着色器的源代码：",[476,920,922],{"className":478,"code":921,"language":480,"meta":481,"style":481},"#version 330 core\nlayout (location = 0) in vec3 aPos;\n\nvoid main()\n{\n    gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);\n}\n",[471,923,924,935,951,957,968,973,993],{"__ignoreMap":481},[62,925,926,929,932],{"class":486,"line":487},[62,927,928],{"class":493},"#version ",[62,930,931],{"class":509},"330",[62,933,934],{"class":493}," core\n",[62,936,937,940,943,945,948],{"class":486,"line":503},[62,938,939],{"class":696},"layout",[62,941,942],{"class":493}," (location ",[62,944,497],{"class":490},[62,946,947],{"class":509}," 0",[62,949,950],{"class":493},") in vec3 aPos;\n",[62,952,953],{"class":486,"line":536},[62,954,956],{"emptyLinePlaceholder":955},true,"\n",[62,958,959,962,965],{"class":486,"line":560},[62,960,961],{"class":490},"void",[62,963,964],{"class":696}," main",[62,966,967],{"class":493},"()\n",[62,969,970],{"class":486,"line":582},[62,971,972],{"class":493},"{\n",[62,974,976,979,981,984,987,990],{"class":486,"line":975},6,[62,977,978],{"class":493},"    gl_Position ",[62,980,497],{"class":490},[62,982,983],{"class":696}," vec4",[62,985,986],{"class":493},"(aPos.x, aPos.y, aPos.z, ",[62,988,989],{"class":509},"1.0",[62,991,992],{"class":493},");\n",[62,994,996],{"class":486,"line":995},7,[62,997,998],{"class":493},"}\n",[10,1000,1001],{},"​\t可以看到，GLSL看起来很像C语言。每个着色器都起始于一个版本声明。OpenGL 3.3以及和更高版本中，GLSL版本号和OpenGL的版本是匹配的（比如说GLSL 420版本对应于OpenGL 4.2）。我们同样明确表示我们会使用核心模式。",[10,1003,1004,1005,1008,1009,1012,1013,1016,1017,1020,1021,1023,1024,1027,1028,1031],{},"​\t下一步，使用",[471,1006,1007],{},"in","关键字，在",[33,1010,1011],{},"顶点着色器中声明所有的输入顶点属性(Input Vertex Attribute)","。现在我们只关心位置(Position)数据，所以",[33,1014,1015],{},"我们只需要一个顶点属性","。GLSL有一个",[33,1018,1019],{},"向量数据类型","，它包含1到4个",[471,1022,473],{},"分量，包含的数量可以从它的后缀数字看出来。由于每个顶点都有一个3D坐标，我们就创建一个",[471,1025,1026],{},"vec3","输入变量aPos。我们同样也通过",[471,1029,1030],{},"layout (location = 0)","设定了输入变量的位置值(Location)你后面会看到为什么我们会需要这个位置值。",[57,1033,1034,1038,1043],{},[10,1035,1036],{},[62,1037,64],{},[10,1039,1040],{},[33,1041,1042],{},"向量(Vector)",[10,1044,1045,1046,1049,1050,1049,1053,1056,1057,1060,1061,1063,1064,1067],{},"在图形编程中我们经常会使用向量这个数学概念，因为它简明地表达了任意空间中的位置和方向，并且它有非常有用的数学属性。在GLSL中一个向量有最多4个分量，每个分量值都代表空间中的一个坐标，它们可以通过",[471,1047,1048],{},"vec.x","、",[471,1051,1052],{},"vec.y",[471,1054,1055],{},"vec.z","和",[471,1058,1059],{},"vec.w","来获取。注意",[471,1062,1059],{},"分量不是用作表达空间中的位置的（我们处理的是3D不是4D），",[33,1065,1066],{},"而是用在所谓透视除法(Perspective Division)上","。我们会在后面的教程中更详细地讨论向量。",[10,1069,1070,1071,1074,1075,1078,1079,1082,1083,1086,1087,1090,1091,1093,1094,1096,1097,1100,1101,1104],{},"​\t为了设置",[33,1072,1073],{},"顶点着色器的输出","，我们必须把",[33,1076,1077],{},"位置数据赋值给预定义的gl_Position变量","，它在幕后是",[471,1080,1081],{},"vec4","类型的。在main函数的最后，",[33,1084,1085],{},"我们将gl_Position设置的值会成为该顶点着色器的输出","。由于我们的",[33,1088,1089],{},"输入是一个3分量的向量，我们必须把它转换为4分量的","。我们可以把",[471,1092,1026],{},"的数据作为",[471,1095,1081],{},"构造器的参数，同时把",[471,1098,1099],{},"w","分量设置为",[471,1102,1103],{},"1.0f","（我们会在后面解释为什么）来完成这一任务。",[57,1106,1107,1112],{},[10,1108,1109],{},[62,1110,1111],{},"!IMPORTANT",[10,1113,1114,1115,1118,1119,1122,1123,1126,1127,1130],{},"在 OpenGL 的顶点着色器中，将 3 分量的位置向量转换为 4 分量的 vec4 向量，并将 w 分量设置为 1.0，正是使用了",[33,1116,1117],{},"齐次坐标（Homogeneous Coordinates）"," 的概念。齐次坐标是三维图形学和 OpenGL ",[33,1120,1121],{},"转换管线"," 的基石，它们的作用是让",[33,1124,1125],{},"平移（Translation）"," 这种特殊的变换能够用 ",[33,1128,1129],{},"矩阵乘法"," 来表示。",[10,1132,1133],{},"​\t当前这个顶点着色器可能是我们能想到的最简单的顶点着色器了，因为我们对输入数据什么都没有处理就把它传到着色器的输出了。在真实的程序里输入数据通常都不是标准化设备坐标，所以我们首先必须先把它们转换至OpenGL的可视区域内。",[97,1135,1136],{"id":1136},"编译着色器",[10,1138,1139,1140,1143],{},"​\t现在，我们暂时将",[33,1141,1142],{},"顶点着色器的源代码硬编码在代码文件顶部的C风格字符串","中：",[476,1145,1147],{"className":478,"code":1146,"language":480,"meta":481,"style":481},"const char *vertexShaderSource = \"#version 330 core\\n\"\n    \"layout (location = 0) in vec3 aPos;\\n\"\n    \"void main()\\n\"\n    \"{\\n\"\n    \"   gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);\\n\"\n    \"}\\0\";\n",[471,1148,1149,1175,1184,1193,1202,1211],{"__ignoreMap":481},[62,1150,1151,1154,1157,1160,1163,1165,1169,1172],{"class":486,"line":487},[62,1152,1153],{"class":490},"const",[62,1155,1156],{"class":490}," char",[62,1158,1159],{"class":490}," *",[62,1161,1162],{"class":493},"vertexShaderSource ",[62,1164,497],{"class":490},[62,1166,1168],{"class":1167},"sZZnC"," \"#version 330 core",[62,1170,1171],{"class":509},"\\n",[62,1173,1174],{"class":1167},"\"\n",[62,1176,1177,1180,1182],{"class":486,"line":503},[62,1178,1179],{"class":1167},"    \"layout (location = 0) in vec3 aPos;",[62,1181,1171],{"class":509},[62,1183,1174],{"class":1167},[62,1185,1186,1189,1191],{"class":486,"line":536},[62,1187,1188],{"class":1167},"    \"void main()",[62,1190,1171],{"class":509},[62,1192,1174],{"class":1167},[62,1194,1195,1198,1200],{"class":486,"line":560},[62,1196,1197],{"class":1167},"    \"{",[62,1199,1171],{"class":509},[62,1201,1174],{"class":1167},[62,1203,1204,1207,1209],{"class":486,"line":582},[62,1205,1206],{"class":1167},"    \"   gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);",[62,1208,1171],{"class":509},[62,1210,1174],{"class":1167},[62,1212,1213,1216,1219,1222],{"class":486,"line":975},[62,1214,1215],{"class":1167},"    \"}",[62,1217,1218],{"class":509},"\\0",[62,1220,1221],{"class":1167},"\"",[62,1223,1224],{"class":493},";\n",[10,1226,1227],{},"为了能够让OpenGL使用它，我们必须在运行时动态编译它的源代码。",[10,1229,1230,1231,1234],{},"​\t我们首先要做的是创建一个着色器对象，注意还是用ID来引用的。所以我们储存这个顶点着色器为",[471,1232,1233],{},"unsigned int","，然后用glCreateShader创建这个着色器：",[476,1236,1238],{"className":478,"code":1237,"language":480,"meta":481,"style":481},"unsigned int vertexShader;\nvertexShader = glCreateShader(GL_VERTEX_SHADER);\n",[471,1239,1240,1249],{"__ignoreMap":481},[62,1241,1242,1244,1246],{"class":486,"line":487},[62,1243,685],{"class":490},[62,1245,688],{"class":490},[62,1247,1248],{"class":493}," vertexShader;\n",[62,1250,1251,1254,1256,1259],{"class":486,"line":503},[62,1252,1253],{"class":493},"vertexShader ",[62,1255,497],{"class":490},[62,1257,1258],{"class":696}," glCreateShader",[62,1260,1261],{"class":493},"(GL_VERTEX_SHADER);\n",[10,1263,1264,1265,1268,1269,1272],{},"​\t我们把需要",[33,1266,1267],{},"创建的着色器类型以参数形式提供给glCreateShader","。由于我们正在",[33,1270,1271],{},"创建一个顶点着色器","，传递的参数是GL_VERTEX_SHADER。",[10,1274,1275,1276,1279],{},"​\t下一步我们把这个",[33,1277,1278],{},"着色器源码附加到着色器对象上","，然后编译它：",[476,1281,1283],{"className":478,"code":1282,"language":480,"meta":481,"style":481},"glShaderSource(vertexShader, 1, &vertexShaderSource, NULL);\nglCompileShader(vertexShader);\n",[471,1284,1285,1307],{"__ignoreMap":481},[62,1286,1287,1290,1293,1295,1297,1299,1302,1305],{"class":486,"line":487},[62,1288,1289],{"class":696},"glShaderSource",[62,1291,1292],{"class":493},"(vertexShader, ",[62,1294,703],{"class":509},[62,1296,516],{"class":493},[62,1298,708],{"class":490},[62,1300,1301],{"class":493},"vertexShaderSource, ",[62,1303,1304],{"class":509},"NULL",[62,1306,992],{"class":493},[62,1308,1309,1312],{"class":486,"line":503},[62,1310,1311],{"class":696},"glCompileShader",[62,1313,1314],{"class":493},"(vertexShader);\n",[10,1316,81,1317,1320,1321,78],{},[33,1318,1319],{},"glShaderSource函数把要编译的着色器对象作为第一个参数","。第二参数指定了传递的源码字符串数量，这里只有一个。第三个参数是顶点着色器真正的源码，第四个参数我们先设置为",[471,1322,1304],{},[57,1324,1325,1329,1332,1372,1375,1449],{},[10,1326,1327],{},[62,1328,64],{},[10,1330,1331],{},"你可能会希望检测在调用glCompileShader后编译是否成功了，如果没成功的话，你还会希望知道错误是什么，这样你才能修复它们。检测编译时错误可以通过以下代码来实现：",[476,1333,1335],{"className":478,"code":1334,"language":480,"meta":481,"style":481},"int  success;\nchar infoLog[512];\nglGetShaderiv(vertexShader, GL_COMPILE_STATUS, &success);\n",[471,1336,1337,1345,1359],{"__ignoreMap":481},[62,1338,1339,1342],{"class":486,"line":487},[62,1340,1341],{"class":490},"int",[62,1343,1344],{"class":493},"  success;\n",[62,1346,1347,1350,1353,1356],{"class":486,"line":503},[62,1348,1349],{"class":490},"char",[62,1351,1352],{"class":493}," infoLog[",[62,1354,1355],{"class":509},"512",[62,1357,1358],{"class":493},"];\n",[62,1360,1361,1364,1367,1369],{"class":486,"line":536},[62,1362,1363],{"class":696},"glGetShaderiv",[62,1365,1366],{"class":493},"(vertexShader, GL_COMPILE_STATUS, ",[62,1368,708],{"class":490},[62,1370,1371],{"class":493},"success);\n",[10,1373,1374],{},"首先我们定义一个整型变量来表示是否成功编译，还定义了一个储存错误消息（如果有的话）的容器。然后我们用glGetShaderiv检查是否编译成功。如果编译失败，我们会用glGetShaderInfoLog获取错误消息，然后打印它。",[476,1376,1378],{"className":478,"code":1377,"language":480,"meta":481,"style":481},"if(!success)\n{\n    glGetShaderInfoLog(vertexShader, 512, NULL, infoLog);\n    std::cout \u003C\u003C \"ERROR::SHADER::VERTEX::COMPILATION_FAILED\\n\" \u003C\u003C infoLog \u003C\u003C std::endl;\n}\n",[471,1379,1380,1393,1397,1413,1445],{"__ignoreMap":481},[62,1381,1382,1385,1387,1390],{"class":486,"line":487},[62,1383,1384],{"class":490},"if",[62,1386,700],{"class":493},[62,1388,1389],{"class":490},"!",[62,1391,1392],{"class":493},"success)\n",[62,1394,1395],{"class":486,"line":503},[62,1396,972],{"class":493},[62,1398,1399,1402,1404,1406,1408,1410],{"class":486,"line":536},[62,1400,1401],{"class":696},"    glGetShaderInfoLog",[62,1403,1292],{"class":493},[62,1405,1355],{"class":509},[62,1407,516],{"class":493},[62,1409,1304],{"class":509},[62,1411,1412],{"class":493},", infoLog);\n",[62,1414,1415,1418,1421,1424,1427,1429,1431,1434,1437,1439,1442],{"class":486,"line":560},[62,1416,1417],{"class":696},"    std",[62,1419,1420],{"class":493},"::cout ",[62,1422,1423],{"class":490},"\u003C\u003C",[62,1425,1426],{"class":1167}," \"ERROR::SHADER::VERTEX::COMPILATION_FAILED",[62,1428,1171],{"class":509},[62,1430,1221],{"class":1167},[62,1432,1433],{"class":490}," \u003C\u003C",[62,1435,1436],{"class":493}," infoLog ",[62,1438,1423],{"class":490},[62,1440,1441],{"class":696}," std",[62,1443,1444],{"class":493},"::endl;\n",[62,1446,1447],{"class":486,"line":582},[62,1448,998],{"class":493},[10,1450,1451],{},"如果编译的时候没有检测到任何错误，顶点着色器就被编译成功了。",[97,1453,1454],{"id":1454},"片段着色器",[10,1456,1457,1458,1461],{},"​\t片段着色器(Fragment Shader)是",[33,1459,1460],{},"第二个也是最后一个我们打算创建的用于渲染三角形的着色器","。片段着色器所做的是计算像素最后的颜色输出。为了让事情更简单，我们的片段着色器将会一直输出橘黄色。",[57,1463,1464,1468],{},[10,1465,1466],{},[62,1467,64],{},[10,1469,1470],{},"在计算机图形中颜色被表示为有4个元素的数组：红色、绿色、蓝色和alpha(透明度)分量，通常缩写为RGBA。当在OpenGL或GLSL中定义一个颜色的时候，我们把颜色每个分量的强度设置在0.0到1.0之间。比如说我们设置红为1.0f，绿为1.0f，我们会得到两个颜色的混合色，即黄色。这三种颜色分量的不同调配可以生成超过1600万种不同的颜色！",[476,1472,1474],{"className":478,"code":1473,"language":480,"meta":481,"style":481},"#version 330 core\nout vec4 FragColor;\n\nvoid main()\n{\n    FragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);\n} \n",[471,1475,1476,1484,1489,1493,1501,1505,1541],{"__ignoreMap":481},[62,1477,1478,1480,1482],{"class":486,"line":487},[62,1479,928],{"class":493},[62,1481,931],{"class":509},[62,1483,934],{"class":493},[62,1485,1486],{"class":486,"line":503},[62,1487,1488],{"class":493},"out vec4 FragColor;\n",[62,1490,1491],{"class":486,"line":536},[62,1492,956],{"emptyLinePlaceholder":955},[62,1494,1495,1497,1499],{"class":486,"line":560},[62,1496,961],{"class":490},[62,1498,964],{"class":696},[62,1500,967],{"class":493},[62,1502,1503],{"class":486,"line":582},[62,1504,972],{"class":493},[62,1506,1507,1510,1512,1514,1516,1518,1520,1522,1524,1526,1528,1531,1533,1535,1537,1539],{"class":486,"line":975},[62,1508,1509],{"class":493},"    FragColor ",[62,1511,497],{"class":490},[62,1513,983],{"class":696},[62,1515,700],{"class":493},[62,1517,989],{"class":509},[62,1519,513],{"class":490},[62,1521,516],{"class":493},[62,1523,510],{"class":509},[62,1525,513],{"class":490},[62,1527,516],{"class":493},[62,1529,1530],{"class":509},"0.2",[62,1532,513],{"class":490},[62,1534,516],{"class":493},[62,1536,989],{"class":509},[62,1538,513],{"class":490},[62,1540,992],{"class":493},[62,1542,1543],{"class":486,"line":995},[62,1544,998],{"class":493},[10,1546,1547,1548,296,1551,1554,1555,1558,1559,1561],{},"​\t片段着色器",[33,1549,1550],{},"只需要一个输出变量",[33,1552,1553],{},"变量是一个4分量向量，它表示的是最终的输出颜色","，我们应该自己将其计算出来。声明输出变量可以使用",[471,1556,1557],{},"out","关键字，这里我们命名为FragColor。下面，我们将一个Alpha值为1.0(1.0代表完全不透明)的橘黄色的",[471,1560,1081],{},"赋值给颜色输出。",[10,1563,1564,1565,1568,1569,675],{},"​\t编译",[33,1566,1567],{},"片段着色器的过程与顶点着色器类似","，只不过我们使用",[33,1570,1571],{},"GL_FRAGMENT_SHADER常量作为着色器类型",[476,1573,1575],{"className":478,"code":1574,"language":480,"meta":481,"style":481},"unsigned int fragmentShader;\nfragmentShader = glCreateShader(GL_FRAGMENT_SHADER);\nglShaderSource(fragmentShader, 1, &fragmentShaderSource, NULL);\nglCompileShader(fragmentShader);\n",[471,1576,1577,1586,1598,1618],{"__ignoreMap":481},[62,1578,1579,1581,1583],{"class":486,"line":487},[62,1580,685],{"class":490},[62,1582,688],{"class":490},[62,1584,1585],{"class":493}," fragmentShader;\n",[62,1587,1588,1591,1593,1595],{"class":486,"line":503},[62,1589,1590],{"class":493},"fragmentShader ",[62,1592,497],{"class":490},[62,1594,1258],{"class":696},[62,1596,1597],{"class":493},"(GL_FRAGMENT_SHADER);\n",[62,1599,1600,1602,1605,1607,1609,1611,1614,1616],{"class":486,"line":536},[62,1601,1289],{"class":696},[62,1603,1604],{"class":493},"(fragmentShader, ",[62,1606,703],{"class":509},[62,1608,516],{"class":493},[62,1610,708],{"class":490},[62,1612,1613],{"class":493},"fragmentShaderSource, ",[62,1615,1304],{"class":509},[62,1617,992],{"class":493},[62,1619,1620,1622],{"class":486,"line":560},[62,1621,1311],{"class":696},[62,1623,1624],{"class":493},"(fragmentShader);\n",[10,1626,1627],{},"​\t两个着色器现在都编译了，剩下的事情是把**两个着色器对象链接到一个用来渲染的着色器程序(Shader Program)**中。",[102,1629,1630],{"id":1630},"着色器程序",[10,1632,81,1633,1636,1637,1640],{},[33,1634,1635],{},"着色器程序对象(Shader Program Object)是多个着色器合并之后并最终链接完成的版本","。如果要使用刚才编译的着色器我们必须把它们",[33,1638,1639],{},"链接(Link)为一个着色器程序对象","，然后在渲染对象的时候激活这个着色器程序。已激活着色器程序的着色器将在我们发送渲染调用的时候被使用。",[10,1642,1643,1644,1647],{},"​\t当链接着色器至一个程序的时候，",[33,1645,1646],{},"它会把每个着色器的输出链接到下个着色器的输入","。当输出和输入不匹配的时候，你会得到一个连接错误。",[10,1649,1650],{},"创建一个程序对象很简单：",[476,1652,1654],{"className":478,"code":1653,"language":480,"meta":481,"style":481},"unsigned int shaderProgram;\nshaderProgram = glCreateProgram();\n",[471,1655,1656,1665],{"__ignoreMap":481},[62,1657,1658,1660,1662],{"class":486,"line":487},[62,1659,685],{"class":490},[62,1661,688],{"class":490},[62,1663,1664],{"class":493}," shaderProgram;\n",[62,1666,1667,1670,1672,1675],{"class":486,"line":503},[62,1668,1669],{"class":493},"shaderProgram ",[62,1671,497],{"class":490},[62,1673,1674],{"class":696}," glCreateProgram",[62,1676,1677],{"class":493},"();\n",[10,1679,1680,1681,1684],{},"​\tglCreateProgram函数创建一个程序，",[33,1682,1683],{},"并返回新创建程序对象的ID引用","。现在我们需要把之前编译的着色器附加到程序对象上，然后用glLinkProgram链接它们：",[476,1686,1688],{"className":478,"code":1687,"language":480,"meta":481,"style":481},"glAttachShader(shaderProgram, vertexShader);\nglAttachShader(shaderProgram, fragmentShader);\nglLinkProgram(shaderProgram);\n",[471,1689,1690,1698,1705],{"__ignoreMap":481},[62,1691,1692,1695],{"class":486,"line":487},[62,1693,1694],{"class":696},"glAttachShader",[62,1696,1697],{"class":493},"(shaderProgram, vertexShader);\n",[62,1699,1700,1702],{"class":486,"line":503},[62,1701,1694],{"class":696},[62,1703,1704],{"class":493},"(shaderProgram, fragmentShader);\n",[62,1706,1707,1710],{"class":486,"line":536},[62,1708,1709],{"class":696},"glLinkProgram",[62,1711,1712],{"class":493},"(shaderProgram);\n",[10,1714,1715],{},"代码应该很清楚，我们把着色器附加到了程序上，然后用glLinkProgram链接。",[10,1717,1718,1719,1722,1723,1726],{},"​\t就像着色器的编译一样，我们也可以",[33,1720,1721],{},"检测链接着色器程序是否失败","，并获取相应的日志。",[33,1724,1725],{},"与上面不同，我们不会调用glGetShaderiv和glGetShaderInfoLog","，现在我们使用：",[476,1728,1730],{"className":478,"code":1729,"language":480,"meta":481,"style":481},"glGetProgramiv(shaderProgram, GL_LINK_STATUS, &success);\nif(!success) {\n    glGetProgramInfoLog(shaderProgram, 512, NULL, infoLog);\n    ...\n}\n",[471,1731,1732,1744,1755,1771,1776],{"__ignoreMap":481},[62,1733,1734,1737,1740,1742],{"class":486,"line":487},[62,1735,1736],{"class":696},"glGetProgramiv",[62,1738,1739],{"class":493},"(shaderProgram, GL_LINK_STATUS, ",[62,1741,708],{"class":490},[62,1743,1371],{"class":493},[62,1745,1746,1748,1750,1752],{"class":486,"line":503},[62,1747,1384],{"class":490},[62,1749,700],{"class":493},[62,1751,1389],{"class":490},[62,1753,1754],{"class":493},"success) {\n",[62,1756,1757,1760,1763,1765,1767,1769],{"class":486,"line":536},[62,1758,1759],{"class":696},"    glGetProgramInfoLog",[62,1761,1762],{"class":493},"(shaderProgram, ",[62,1764,1355],{"class":509},[62,1766,516],{"class":493},[62,1768,1304],{"class":509},[62,1770,1412],{"class":493},[62,1772,1773],{"class":486,"line":560},[62,1774,1775],{"class":493},"    ...\n",[62,1777,1778],{"class":486,"line":582},[62,1779,998],{"class":493},[10,1781,1782,1783,1786],{},"​\t得到的结果就是一个程序对象，我们可以",[33,1784,1785],{},"调用glUseProgram函数，用刚创建的程序对象作为它的参数","，以激活这个程序对象：",[476,1788,1790],{"className":478,"code":1789,"language":480,"meta":481,"style":481},"glUseProgram(shaderProgram);\n",[471,1791,1792],{"__ignoreMap":481},[62,1793,1794,1797],{"class":486,"line":487},[62,1795,1796],{"class":696},"glUseProgram",[62,1798,1712],{"class":493},[10,1800,1801],{},"在glUseProgram函数调用之后，每个着色器调用和渲染调用都会使用这个程序对象（也就是之前写的着色器)了。",[10,1803,1804],{},"​\t对了，在把着色器对象链接到程序对象以后，记得删除着色器对象，我们不再需要它们了：",[476,1806,1808],{"className":478,"code":1807,"language":480,"meta":481,"style":481},"glDeleteShader(vertexShader);\nglDeleteShader(fragmentShader);\n",[471,1809,1810,1817],{"__ignoreMap":481},[62,1811,1812,1815],{"class":486,"line":487},[62,1813,1814],{"class":696},"glDeleteShader",[62,1816,1314],{"class":493},[62,1818,1819,1821],{"class":486,"line":503},[62,1820,1814],{"class":696},[62,1822,1624],{"class":493},[10,1824,1825,1826,1829],{},"​\t现在，我们已经",[33,1827,1828],{},"把输入顶点数据发送给了GPU，并指示了GPU如何在顶点和片段着色器中处理它","。就快要完成了，但还没结束，OpenGL还不知道它该如何解释内存中的顶点数据，以及它该如何将顶点数据链接到顶点着色器的属性上。我们需要告诉OpenGL怎么做。",[97,1831,1832],{"id":1832},"链接顶点属性",[10,1834,81,1835,1838,1839,1842],{},[33,1836,1837],{},"顶点着色器允许我们指定任何以顶点属性为形式的输入","。这使其具有很强的灵活性的同时，它还的确意味着",[33,1840,1841],{},"我们必须手动指定输入数据的哪一个部分对应顶点着色器的哪一个顶点属性","。所以，我们必须在渲染前指定OpenGL该如何解释顶点数据。",[10,1844,1845],{},"​\t我们的顶点缓冲数据会被解析为下面这样子：",[10,1847,1848],{},[283,1849],{"alt":283,"src":1850},".\u002Fassets\u002Fvertex_attribute_pointer.png",[14,1852,1853,1856,1859,1862],{},[17,1854,1855],{},"位置数据被储存为32位（4字节）浮点值。",[17,1857,1858],{},"每个位置包含3个这样的值。",[17,1860,1861],{},"在这3个值之间没有空隙（或其他值）。这几个值在数组中紧密排列(Tightly Packed)。",[17,1863,1864],{},"数据中第一个值在缓冲开始的位置。",[10,1866,1867,1868,1871],{},"​\t有了这些信息我们就可以",[33,1869,1870],{},"使用glVertexAttribPointer函数告诉OpenGL该如何解析顶点数据","（应用到逐个顶点属性上）了：",[476,1873,1875],{"className":478,"code":1874,"language":480,"meta":481,"style":481},"glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);\nglEnableVertexAttribArray(0);\n",[471,1876,1877,1919],{"__ignoreMap":481},[62,1878,1879,1882,1884,1887,1889,1892,1895,1897,1899,1902,1904,1906,1909,1912,1915,1917],{"class":486,"line":487},[62,1880,1881],{"class":696},"glVertexAttribPointer",[62,1883,700],{"class":493},[62,1885,1886],{"class":509},"0",[62,1888,516],{"class":493},[62,1890,1891],{"class":509},"3",[62,1893,1894],{"class":493},", GL_FLOAT, GL_FALSE, ",[62,1896,1891],{"class":509},[62,1898,1159],{"class":490},[62,1900,1901],{"class":490}," sizeof",[62,1903,700],{"class":493},[62,1905,473],{"class":490},[62,1907,1908],{"class":493},"), (",[62,1910,1911],{"class":490},"void*",[62,1913,1914],{"class":493},")",[62,1916,1886],{"class":509},[62,1918,992],{"class":493},[62,1920,1921,1924,1926,1928],{"class":486,"line":503},[62,1922,1923],{"class":696},"glEnableVertexAttribArray",[62,1925,700],{"class":493},[62,1927,1886],{"class":509},[62,1929,992],{"class":493},[10,1931,1932,1933,1936,1937,1940,1941,1943,1944,1947,1948,1951,1952,1956,1957,1959,1960,1962],{},"​\t这两行代码必须在 ",[33,1934,1935],{},"绑定 VAO"," 和 ",[33,1938,1939],{},"绑定 VBO"," 之后执行，它们的作用是建立 VBO 数据到",[33,1942,908],{},"输入变量之间的连接和解析规则。",[471,1945,1946],{},"glEnableVertexAttribArray(0)"," 解释:     这个函数的作用相对简单，它是",[33,1949,1950],{},"启用","刚才配置的顶点属性。",[33,1953,1954],{},[471,1955,1886],{},"：同样是指定要操作的顶点属性的索引，对应于 ",[471,1958,1030],{},"。在 OpenGL 中，顶点属性默认是禁用的，你必须明确",[33,1961,1950],{},"它，否则 GPU 在渲染时不会读取这个属性的数据。",[10,1964,1965,1969,1970,1972],{},[33,1966,1967],{},[471,1968,1886],{},": 告诉 GPU 这个配置对应于顶点着色器中的 ",[471,1971,1030],{}," 输入变量。",[10,1974,1975,1979],{},[33,1976,1977],{},[471,1978,1891],{},": 每个顶点属性由 3 个分量组成 (即 x,y,z)。",[10,1981,1982,1987],{},[33,1983,1984],{},[471,1985,1986],{},"GL_FLOAT",": 分量的数据类型是浮点数。",[10,1989,1990,1995,1996,1999],{},[33,1991,1992],{},[471,1993,1994],{},"3 \\* sizeof(float)",": ",[33,1997,1998],{},"步长 (Stride)","。从一个顶点的 x,y,z 开始，要跳过 3×4=12 字节才能找到下一个顶点的 x,y,z。",[10,2001,2002,1995,2007,2010,2011,2013],{},[33,2003,2004],{},[471,2005,2006],{},"(void\\*)0",[33,2008,2009],{},"偏移量 (Offset)","。数据从 VBO 的起始位置 (",[471,2012,1886],{}," 字节) 开始。",[10,2015,2016],{},"glVertexAttribPointer函数：",[14,2018,2019,2039,2049,2060,2071,2089],{},[17,2020,2021,2022,2025,2026,2029,2030,2032,2033,2036,2037,78],{},"第一个参数",[33,2023,2024],{},"指定我们要配置的顶点属性","。还记得我们在顶点着色器中使用",[471,2027,2028],{},"layout(location = 0)","定义了position顶点属性的位置值(Location)吗？它可以把顶点属性的位置值设置为",[471,2031,1886],{},"。因为",[33,2034,2035],{},"我们希望把数据传递到这一个顶点属性中","，所以这里我们传入",[471,2038,1886],{},[17,2040,2041,2042,2045,2046,2048],{},"第二个参数",[33,2043,2044],{},"指定顶点属性的大小","。顶点属性是一个",[471,2047,1026],{},"，它由3个值组成，所以大小是3。",[17,2050,2051,2052,2055,2056,2059],{},"第三个参数",[33,2053,2054],{},"指定数据的类型","，这里是GL_FLOAT(GLSL中",[471,2057,2058],{},"vec*","都是由浮点数值组成的)。",[17,2061,2062,2063,2066,2067,2070],{},"下个参数定义",[33,2064,2065],{},"我们是否希望数据被标准化(Normalize)","。如果我们设置为GL_TRUE，",[33,2068,2069],{},"所有数据都会被映射到0","（对于有符号型signed数据是-1）到1之间。我们把它设置为GL_FALSE。",[17,2072,2073,2074,2077,2078,2080,2081,2084,2085,2088],{},"第五个参数叫做步长(Stride)，",[33,2075,2076],{},"它告诉我们在连续的顶点属性组之间的间隔","。由于下个组位置数据在3个",[471,2079,473],{},"之后，我们把步长设置为",[471,2082,2083],{},"3 * sizeof(float)","。要注意的是由于我们知道这个数组是紧密排列的（在两个顶点属性之间没有空隙）我们也可以设置为0来让OpenGL决定具体步长是多少（只有当数值是紧密排列时才可用）",[33,2086,2087],{},"。一旦我们有更多的顶点属性，我们就必须更小心地定义每个顶点属性之间的间隔","，我们在后面会看到更多的例子（译注: 这个参数的意思简单说就是从这个属性第二次出现的地方到整个数组0位置之间有多少字节）。",[17,2090,2091,2092,2094,2095,78,2098,2101],{},"最后一个参数的类型是",[471,2093,1911],{},"，所以需要我们进行这个奇怪的强制类型转换。它",[33,2096,2097],{},"表示位置数据在缓冲中起始位置的偏移量(Offset)",[33,2099,2100],{},"由于位置数据在数组的开头，所以这里是0","。我们会在后面详细解释这个参数。",[57,2103,2104,2108],{},[10,2105,2106],{},[62,2107,64],{},[10,2109,2110,2113,2114,2116],{},[33,2111,2112],{},"每个顶点属性从一个VBO管理的内存中获得它的数据","，而具体是从哪个VBO（程序中可以有多个VBO）获取则是通过在调用glVertexAttribPointer时绑定到GL_ARRAY_BUFFER的VBO决定的。由于在调用glVertexAttribPointer之前绑定的是先前定义的VBO对象，顶点属性",[471,2115,1886],{},"现在会链接到它的顶点数据。",[10,2118,2119,2120,2123,2124,2127,2128,2131],{},"​\t现在我们已经定义了OpenGL该如何解释顶点数据，",[33,2121,2122],{},"我们现在应该使用glEnableVertexAttribArray","，以顶点属性位置值作为参数，启用顶点属性；顶点属性默认是禁用的。自此，所有东西都已经设置好了：我们使用一个顶点缓冲对象将顶点数据初始化至缓冲中，",[33,2125,2126],{},"建立了一个顶点和一个片段着色器","，并告诉了OpenGL如何",[33,2129,2130],{},"把顶点数据链接到顶点着色器的顶点属性上","。在OpenGL中绘制一个物体，代码会像是这样：",[476,2133,2135],{"className":478,"code":2134,"language":480,"meta":481,"style":481},"\u002F\u002F 0. 复制顶点数组到缓冲中供OpenGL使用\nglBindBuffer(GL_ARRAY_BUFFER, VBO);\nglBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);\n\u002F\u002F 1. 设置顶点属性指针\nglVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);\nglEnableVertexAttribArray(0);\n\u002F\u002F 2. 当我们渲染一个物体时要使用着色器程序\nglUseProgram(shaderProgram);\n\u002F\u002F 3. 绘制物体\nsomeOpenGLFunctionThatDrawsOurTriangle();\n",[471,2136,2137,2143,2149,2159,2164,2198,2208,2213,2220,2226],{"__ignoreMap":481},[62,2138,2139],{"class":486,"line":487},[62,2140,2142],{"class":2141},"sJ8bj","\u002F\u002F 0. 复制顶点数组到缓冲中供OpenGL使用\n",[62,2144,2145,2147],{"class":486,"line":503},[62,2146,728],{"class":696},[62,2148,731],{"class":493},[62,2150,2151,2153,2155,2157],{"class":486,"line":536},[62,2152,751],{"class":696},[62,2154,754],{"class":493},[62,2156,757],{"class":490},[62,2158,760],{"class":493},[62,2160,2161],{"class":486,"line":560},[62,2162,2163],{"class":2141},"\u002F\u002F 1. 设置顶点属性指针\n",[62,2165,2166,2168,2170,2172,2174,2176,2178,2180,2182,2184,2186,2188,2190,2192,2194,2196],{"class":486,"line":582},[62,2167,1881],{"class":696},[62,2169,700],{"class":493},[62,2171,1886],{"class":509},[62,2173,516],{"class":493},[62,2175,1891],{"class":509},[62,2177,1894],{"class":493},[62,2179,1891],{"class":509},[62,2181,1159],{"class":490},[62,2183,1901],{"class":490},[62,2185,700],{"class":493},[62,2187,473],{"class":490},[62,2189,1908],{"class":493},[62,2191,1911],{"class":490},[62,2193,1914],{"class":493},[62,2195,1886],{"class":509},[62,2197,992],{"class":493},[62,2199,2200,2202,2204,2206],{"class":486,"line":975},[62,2201,1923],{"class":696},[62,2203,700],{"class":493},[62,2205,1886],{"class":509},[62,2207,992],{"class":493},[62,2209,2210],{"class":486,"line":995},[62,2211,2212],{"class":2141},"\u002F\u002F 2. 当我们渲染一个物体时要使用着色器程序\n",[62,2214,2216,2218],{"class":486,"line":2215},8,[62,2217,1796],{"class":696},[62,2219,1712],{"class":493},[62,2221,2223],{"class":486,"line":2222},9,[62,2224,2225],{"class":2141},"\u002F\u002F 3. 绘制物体\n",[62,2227,2229,2232],{"class":486,"line":2228},10,[62,2230,2231],{"class":696},"someOpenGLFunctionThatDrawsOurTriangle",[62,2233,1677],{"class":493},[10,2235,2236],{},"​\t每当我们绘制一个物体的时候都必须重复这一过程。这看起来可能不多，但是如果有超过5个顶点属性，上百个不同物体呢（这其实并不罕见）。绑定正确的缓冲对象，为每个物体配置所有顶点属性很快就变成一件麻烦事。有没有一些方法可以使我们把所有这些状态配置储存在一个对象中，并且可以通过绑定这个对象来恢复状态呢？",[102,2238,2239],{"id":2239},"顶点数组对象",[10,2241,81,2242,2245,2246,2249,2250,2253],{},[33,2243,2244],{},"顶点数组对象(Vertex Array Object, VAO)可以像顶点缓冲对象那样被绑定","，任何随后的顶点属性调用都会",[33,2247,2248],{},"储存在这个VAO中","。这样的好处就是，当配置顶点属性指针时，你只需要将那些调用执行一次，",[33,2251,2252],{},"之后再绘制物体的时候只需要绑定相应的VAO就行了","。这使在不同顶点数据和属性配置之间切换变得非常简单，只需要绑定不同的VAO就行了。刚刚设置的所有状态都将存储在VAO中",[57,2255,2256,2260],{},[10,2257,2258],{},[62,2259,64],{},[10,2261,2262,2263,2266],{},"OpenGL的核心模式",[33,2264,2265],{},"要求","我们使用VAO，所以它知道该如何处理我们的顶点输入。如果我们绑定VAO失败，OpenGL会拒绝绘制任何东西。",[10,2268,2269],{},"一个顶点数组对象会储存以下这些内容：",[14,2271,2272,2275,2278],{},[17,2273,2274],{},"glEnableVertexAttribArray和glDisableVertexAttribArray的调用。",[17,2276,2277],{},"通过glVertexAttribPointer设置的顶点属性配置。",[17,2279,2280],{},"通过glVertexAttribPointer调用与顶点属性关联的顶点缓冲对象。",[10,2282,2283],{},[283,2284],{"alt":283,"src":2285},".\u002Fassets\u002Fvertex_array_objects.png",[10,2287,2288],{},"创建一个VAO和创建一个VBO很类似：",[476,2290,2292],{"className":478,"code":2291,"language":480,"meta":481,"style":481},"unsigned int VAO;\nglGenVertexArrays(1, &VAO);\n",[471,2293,2294,2303],{"__ignoreMap":481},[62,2295,2296,2298,2300],{"class":486,"line":487},[62,2297,685],{"class":490},[62,2299,688],{"class":490},[62,2301,2302],{"class":493}," VAO;\n",[62,2304,2305,2308,2310,2312,2314,2316],{"class":486,"line":503},[62,2306,2307],{"class":696},"glGenVertexArrays",[62,2309,700],{"class":493},[62,2311,703],{"class":509},[62,2313,516],{"class":493},[62,2315,708],{"class":490},[62,2317,2318],{"class":493},"VAO);\n",[10,2320,2321,2322,2325,2326,2329,2330,2333,2334,2337],{},"​\t要想使用VAO，要做的只是",[33,2323,2324],{},"使用glBindVertexArray绑定VAO","。从绑定之后起，",[33,2327,2328],{},"我们应该绑定和配置对应的VBO和属性指针","，之后",[33,2331,2332],{},"解绑VAO供之后使用","。当我们打算绘制一个物体的时候，我们只要",[33,2335,2336],{},"在绘制物体前简单地把VAO绑定到希望使用的设定上就行了","。这段代码应该看起来像这样：",[476,2339,2341],{"className":478,"code":2340,"language":480,"meta":481,"style":481},"\u002F\u002F ..:: 初始化代码（只运行一次 (除非你的物体频繁改变)） :: ..\n\u002F\u002F 1. 绑定VAO\nglBindVertexArray(VAO);\n\u002F\u002F 2. 把顶点数组复制到缓冲中供OpenGL使用\nglBindBuffer(GL_ARRAY_BUFFER, VBO);\nglBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);\n\u002F\u002F 3. 设置顶点属性指针\nglVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);\nglEnableVertexAttribArray(0);\n\n[...]\n\n\u002F\u002F ..:: 绘制代码（渲染循环中） :: ..\n\u002F\u002F 4. 绘制物体\nglUseProgram(shaderProgram);\nglBindVertexArray(VAO);\nsomeOpenGLFunctionThatDrawsOurTriangle();\n",[471,2342,2343,2348,2353,2361,2366,2372,2382,2387,2421,2431,2435,2441,2446,2452,2458,2469,2476],{"__ignoreMap":481},[62,2344,2345],{"class":486,"line":487},[62,2346,2347],{"class":2141},"\u002F\u002F ..:: 初始化代码（只运行一次 (除非你的物体频繁改变)） :: ..\n",[62,2349,2350],{"class":486,"line":503},[62,2351,2352],{"class":2141},"\u002F\u002F 1. 绑定VAO\n",[62,2354,2355,2358],{"class":486,"line":536},[62,2356,2357],{"class":696},"glBindVertexArray",[62,2359,2360],{"class":493},"(VAO);\n",[62,2362,2363],{"class":486,"line":560},[62,2364,2365],{"class":2141},"\u002F\u002F 2. 把顶点数组复制到缓冲中供OpenGL使用\n",[62,2367,2368,2370],{"class":486,"line":582},[62,2369,728],{"class":696},[62,2371,731],{"class":493},[62,2373,2374,2376,2378,2380],{"class":486,"line":975},[62,2375,751],{"class":696},[62,2377,754],{"class":493},[62,2379,757],{"class":490},[62,2381,760],{"class":493},[62,2383,2384],{"class":486,"line":995},[62,2385,2386],{"class":2141},"\u002F\u002F 3. 设置顶点属性指针\n",[62,2388,2389,2391,2393,2395,2397,2399,2401,2403,2405,2407,2409,2411,2413,2415,2417,2419],{"class":486,"line":2215},[62,2390,1881],{"class":696},[62,2392,700],{"class":493},[62,2394,1886],{"class":509},[62,2396,516],{"class":493},[62,2398,1891],{"class":509},[62,2400,1894],{"class":493},[62,2402,1891],{"class":509},[62,2404,1159],{"class":490},[62,2406,1901],{"class":490},[62,2408,700],{"class":493},[62,2410,473],{"class":490},[62,2412,1908],{"class":493},[62,2414,1911],{"class":490},[62,2416,1914],{"class":493},[62,2418,1886],{"class":509},[62,2420,992],{"class":493},[62,2422,2423,2425,2427,2429],{"class":486,"line":2222},[62,2424,1923],{"class":696},[62,2426,700],{"class":493},[62,2428,1886],{"class":509},[62,2430,992],{"class":493},[62,2432,2433],{"class":486,"line":2228},[62,2434,956],{"emptyLinePlaceholder":955},[62,2436,2438],{"class":486,"line":2437},11,[62,2439,2440],{"class":493},"[...]\n",[62,2442,2444],{"class":486,"line":2443},12,[62,2445,956],{"emptyLinePlaceholder":955},[62,2447,2449],{"class":486,"line":2448},13,[62,2450,2451],{"class":493},"\u002F\u002F ..:: 绘制代码（渲染循环中） :: ..\n",[62,2453,2455],{"class":486,"line":2454},14,[62,2456,2457],{"class":493},"\u002F\u002F 4. 绘制物体\n",[62,2459,2461,2464,2467],{"class":486,"line":2460},15,[62,2462,2463],{"class":493},"glUseProgram(",[62,2465,2466],{"class":696},"shaderProgram",[62,2468,992],{"class":493},[62,2470,2472,2474],{"class":486,"line":2471},16,[62,2473,2357],{"class":696},[62,2475,2360],{"class":493},[62,2477,2479,2481],{"class":486,"line":2478},17,[62,2480,2231],{"class":696},[62,2482,1677],{"class":493},[10,2484,2485,2486,2489,2490,2493,2494,78],{},"​\t就这么多了！前面做的一切都是等待这一刻，",[33,2487,2488],{},"一个储存了我们顶点属性配置和应使用的VBO的顶点数组对象","。一般",[33,2491,2492],{},"当你打算绘制多个物体时，你首先要生成\u002F配置所有的VAO（和必须的VBO及属性指针)","，然后储存它们供后面使用。当我们打算绘制物体的时候就拿出相应的VAO，",[33,2495,2496],{},"绑定它，绘制完物体后，再解绑VAO",[102,2498,2499],{"id":2499},"我们一直期待的三角形",[10,2501,2502,2503,51,2506,2509],{},"​\t要想绘制我们想要的物体，",[33,2504,2505],{},"OpenGL给我们提供了glDrawArrays函数，它使用当前激活的着色器",[33,2507,2508],{},"之前定义的顶点属性配置","，和**VBO的顶点数据（通过VAO间接绑定）**来绘制图元。",[476,2511,2513],{"className":478,"code":2512,"language":480,"meta":481,"style":481},"glUseProgram(shaderProgram);\nglBindVertexArray(VAO);\nglDrawArrays(GL_TRIANGLES, 0, 3);\n",[471,2514,2515,2521,2527],{"__ignoreMap":481},[62,2516,2517,2519],{"class":486,"line":487},[62,2518,1796],{"class":696},[62,2520,1712],{"class":493},[62,2522,2523,2525],{"class":486,"line":503},[62,2524,2357],{"class":696},[62,2526,2360],{"class":493},[62,2528,2529,2532,2535,2537,2539,2541],{"class":486,"line":536},[62,2530,2531],{"class":696},"glDrawArrays",[62,2533,2534],{"class":493},"(GL_TRIANGLES, ",[62,2536,1886],{"class":509},[62,2538,516],{"class":493},[62,2540,1891],{"class":509},[62,2542,992],{"class":493},[10,2544,81,2545,2548,2549,2551,2552,2554],{},[33,2546,2547],{},"glDrawArrays函数第一个参数是我们打算绘制的OpenGL图元的类型","。由于我们在一开始时说过，我们希望绘制的是一个三角形，这里传递GL_TRIANGLES给它。第二个参数指定了顶点数组的起始索引，我们这里填",[471,2550,1886],{},"。最后一个参数指定我们打算绘制多少个顶点，这里是",[471,2553,1891],{},"（我们只从我们的数据中渲染一个三角形，它只有3个顶点长）。",[10,2556,2557],{},"现在尝试编译代码，如果弹出了任何错误，回头检查你的代码。如果你编译通过了，你应该看到下面的结果：",[10,2559,2560],{},[283,2561],{"alt":283,"src":2562},".\u002Fassets\u002Fhellotriangle.png",[476,2564,2566],{"className":478,"code":2565,"language":480,"meta":481,"style":481},"#include \u003Cglad\u002Fglad.h>\n#include \u003CGLFW\u002Fglfw3.h>\n#include \u003Ciostream>\n\n\u002F\u002F 窗口大小改变时的回调函数\nvoid framebuffer_size_callback(GLFWwindow* window, int width, int height) {\n    glViewport(0, 0, width, height);\n}\n\nint main() {\n    \u002F\u002F 初始化GLFW\n    glfwInit();\n    glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);\n    glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);\n    glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);\n\n    \u002F\u002F 创建窗口\n    GLFWwindow* window = glfwCreateWindow(800, 600, \"OpenGL Window\", NULL, NULL);\n    if (window == NULL) {\n        std::cout \u003C\u003C \"Failed to create GLFW window\" \u003C\u003C std::endl;\n        glfwTerminate();\n        return -1;\n    }\n    \n    glfwMakeContextCurrent(window);\n    glfwSetFramebufferSizeCallback(window, framebuffer_size_callback);\n\n    \u002F\u002F 初始化GLAD\n    if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress)) {\n        std::cout \u003C\u003C \"Failed to initialize GLAD\" \u003C\u003C std::endl;\n        return -1;\n    }\n\n    \u002F\u002F 顶点数据\n    float vertices[] = {\n        -0.5f, -0.5f, 0.0f,\n         0.5f, -0.5f, 0.0f,\n         0.0f,  0.5f, 0.0f\n    };\n\n    \u002F\u002F 创建VAO\n    unsigned int VAO;\n    glGenVertexArrays(1, &VAO);\n    glBindVertexArray(VAO);\n\n    \u002F\u002F 创建VBO\n    unsigned int VBO;\n    glGenBuffers(1, &VBO);\n    glBindBuffer(GL_ARRAY_BUFFER, VBO);\n    glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);\n\n    \u002F\u002F 设置顶点属性\n    glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);\n    glEnableVertexAttribArray(0);\n\n    \u002F\u002F 顶点着色器\n    const char* vertexShaderSource = \n        \"#version 330 core\\n\"\n        \"layout (location = 0) in vec3 aPos;\\n\"\n        \"void main()\\n\"\n        \"{\\n\"\n        \"   gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);\\n\"\n        \"}\\0\";\n\n    unsigned int vertexShader;\n    vertexShader = glCreateShader(GL_VERTEX_SHADER);\n    glShaderSource(vertexShader, 1, &vertexShaderSource, NULL);\n    glCompileShader(vertexShader);\n\n    \u002F\u002F 片段着色器\n    const char* fragmentShaderSource = \n        \"#version 330 core\\n\"\n        \"out vec4 FragColor;\\n\"\n        \"void main()\\n\"\n        \"{\\n\"\n        \"   FragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);\\n\"\n        \"}\\0\";\n    \n    unsigned int fragmentShader;\n    fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);\n    glShaderSource(fragmentShader, 1, &fragmentShaderSource, NULL);\n    glCompileShader(fragmentShader);\n\n    \u002F\u002F 创建着色器程序\n    unsigned int shaderProgram;\n    shaderProgram = glCreateProgram();\n    glAttachShader(shaderProgram, vertexShader);\n    glAttachShader(shaderProgram, fragmentShader);\n    glLinkProgram(shaderProgram);\n\n    \u002F\u002F 删除着色器对象\n    glDeleteShader(vertexShader);\n    glDeleteShader(fragmentShader);\n\n    \u002F\u002F 渲染循环\n    while (!glfwWindowShouldClose(window)) {\n        \u002F\u002F 处理输入\n        glfwPollEvents();\n        \n        \u002F\u002F 渲染指令\n        glClearColor(0.2f, 0.3f, 0.3f, 1.0f);\n        glClear(GL_COLOR_BUFFER_BIT);\n        \n        \u002F\u002F 使用着色器程序\n        glUseProgram(shaderProgram);\n        glBindVertexArray(VAO);\n        \n        \u002F\u002F 绘制三角形\n        glDrawArrays(GL_TRIANGLES, 0, 3);\n        \n        \u002F\u002F 交换缓冲区和检查IO事件\n        glfwSwapBuffers(window);\n    }\n\n    \u002F\u002F 清理资源\n    glDeleteVertexArrays(1, &VAO);\n    glDeleteBuffers(1, &VBO);\n    glDeleteProgram(shaderProgram);\n    glfwTerminate();\n    return 0;\n}\n",[471,2567,2568,2576,2583,2590,2594,2599,2635,2651,2655,2659,2668,2673,2680,2692,2703,2710,2714,2719,2760,2777,2796,2804,2817,2823,2829,2838,2847,2852,2858,2874,2892,2903,2908,2913,2919,2931,2957,2981,3001,3007,3012,3018,3028,3044,3052,3057,3063,3072,3088,3096,3108,3113,3119,3155,3167,3172,3178,3195,3205,3215,3225,3235,3245,3257,3262,3271,3283,3303,3311,3316,3322,3336,3345,3355,3364,3373,3383,3394,3399,3408,3420,3439,3446,3451,3457,3466,3478,3486,3493,3501,3506,3512,3520,3527,3532,3538,3554,3560,3568,3574,3580,3613,3622,3627,3633,3641,3649,3654,3660,3676,3681,3687,3695,3700,3705,3711,3727,3743,3751,3759,3769],{"__ignoreMap":481},[62,2569,2570,2573],{"class":486,"line":487},[62,2571,2572],{"class":490},"#include",[62,2574,2575],{"class":1167}," \u003Cglad\u002Fglad.h>\n",[62,2577,2578,2580],{"class":486,"line":503},[62,2579,2572],{"class":490},[62,2581,2582],{"class":1167}," \u003CGLFW\u002Fglfw3.h>\n",[62,2584,2585,2587],{"class":486,"line":536},[62,2586,2572],{"class":490},[62,2588,2589],{"class":1167}," \u003Ciostream>\n",[62,2591,2592],{"class":486,"line":560},[62,2593,956],{"emptyLinePlaceholder":955},[62,2595,2596],{"class":486,"line":582},[62,2597,2598],{"class":2141},"\u002F\u002F 窗口大小改变时的回调函数\n",[62,2600,2601,2603,2606,2608,2611,2614,2618,2620,2622,2625,2627,2629,2632],{"class":486,"line":975},[62,2602,961],{"class":490},[62,2604,2605],{"class":696}," framebuffer_size_callback",[62,2607,700],{"class":493},[62,2609,2610],{"class":696},"GLFWwindow",[62,2612,2613],{"class":490},"*",[62,2615,2617],{"class":2616},"s4XuR"," window",[62,2619,516],{"class":493},[62,2621,1341],{"class":490},[62,2623,2624],{"class":2616}," width",[62,2626,516],{"class":493},[62,2628,1341],{"class":490},[62,2630,2631],{"class":2616}," height",[62,2633,2634],{"class":493},") {\n",[62,2636,2637,2640,2642,2644,2646,2648],{"class":486,"line":995},[62,2638,2639],{"class":696},"    glViewport",[62,2641,700],{"class":493},[62,2643,1886],{"class":509},[62,2645,516],{"class":493},[62,2647,1886],{"class":509},[62,2649,2650],{"class":493},", width, height);\n",[62,2652,2653],{"class":486,"line":2215},[62,2654,998],{"class":493},[62,2656,2657],{"class":486,"line":2222},[62,2658,956],{"emptyLinePlaceholder":955},[62,2660,2661,2663,2665],{"class":486,"line":2228},[62,2662,1341],{"class":490},[62,2664,964],{"class":696},[62,2666,2667],{"class":493},"() {\n",[62,2669,2670],{"class":486,"line":2437},[62,2671,2672],{"class":2141},"    \u002F\u002F 初始化GLFW\n",[62,2674,2675,2678],{"class":486,"line":2443},[62,2676,2677],{"class":696},"    glfwInit",[62,2679,1677],{"class":493},[62,2681,2682,2685,2688,2690],{"class":486,"line":2448},[62,2683,2684],{"class":696},"    glfwWindowHint",[62,2686,2687],{"class":493},"(GLFW_CONTEXT_VERSION_MAJOR, ",[62,2689,1891],{"class":509},[62,2691,992],{"class":493},[62,2693,2694,2696,2699,2701],{"class":486,"line":2454},[62,2695,2684],{"class":696},[62,2697,2698],{"class":493},"(GLFW_CONTEXT_VERSION_MINOR, ",[62,2700,1891],{"class":509},[62,2702,992],{"class":493},[62,2704,2705,2707],{"class":486,"line":2460},[62,2706,2684],{"class":696},[62,2708,2709],{"class":493},"(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);\n",[62,2711,2712],{"class":486,"line":2471},[62,2713,956],{"emptyLinePlaceholder":955},[62,2715,2716],{"class":486,"line":2478},[62,2717,2718],{"class":2141},"    \u002F\u002F 创建窗口\n",[62,2720,2722,2725,2727,2730,2732,2735,2737,2740,2742,2745,2747,2750,2752,2754,2756,2758],{"class":486,"line":2721},18,[62,2723,2724],{"class":696},"    GLFWwindow",[62,2726,2613],{"class":490},[62,2728,2729],{"class":493}," window ",[62,2731,497],{"class":490},[62,2733,2734],{"class":696}," glfwCreateWindow",[62,2736,700],{"class":493},[62,2738,2739],{"class":509},"800",[62,2741,516],{"class":493},[62,2743,2744],{"class":509},"600",[62,2746,516],{"class":493},[62,2748,2749],{"class":1167},"\"OpenGL Window\"",[62,2751,516],{"class":493},[62,2753,1304],{"class":509},[62,2755,516],{"class":493},[62,2757,1304],{"class":509},[62,2759,992],{"class":493},[62,2761,2763,2766,2769,2772,2775],{"class":486,"line":2762},19,[62,2764,2765],{"class":490},"    if",[62,2767,2768],{"class":493}," (window ",[62,2770,2771],{"class":490},"==",[62,2773,2774],{"class":509}," NULL",[62,2776,2634],{"class":493},[62,2778,2780,2783,2785,2787,2790,2792,2794],{"class":486,"line":2779},20,[62,2781,2782],{"class":696},"        std",[62,2784,1420],{"class":493},[62,2786,1423],{"class":490},[62,2788,2789],{"class":1167}," \"Failed to create GLFW window\"",[62,2791,1433],{"class":490},[62,2793,1441],{"class":696},[62,2795,1444],{"class":493},[62,2797,2799,2802],{"class":486,"line":2798},21,[62,2800,2801],{"class":696},"        glfwTerminate",[62,2803,1677],{"class":493},[62,2805,2807,2810,2813,2815],{"class":486,"line":2806},22,[62,2808,2809],{"class":490},"        return",[62,2811,2812],{"class":490}," -",[62,2814,703],{"class":509},[62,2816,1224],{"class":493},[62,2818,2820],{"class":486,"line":2819},23,[62,2821,2822],{"class":493},"    }\n",[62,2824,2826],{"class":486,"line":2825},24,[62,2827,2828],{"class":493},"    \n",[62,2830,2832,2835],{"class":486,"line":2831},25,[62,2833,2834],{"class":696},"    glfwMakeContextCurrent",[62,2836,2837],{"class":493},"(window);\n",[62,2839,2841,2844],{"class":486,"line":2840},26,[62,2842,2843],{"class":696},"    glfwSetFramebufferSizeCallback",[62,2845,2846],{"class":493},"(window, framebuffer_size_callback);\n",[62,2848,2850],{"class":486,"line":2849},27,[62,2851,956],{"emptyLinePlaceholder":955},[62,2853,2855],{"class":486,"line":2854},28,[62,2856,2857],{"class":2141},"    \u002F\u002F 初始化GLAD\n",[62,2859,2861,2863,2866,2868,2871],{"class":486,"line":2860},29,[62,2862,2765],{"class":490},[62,2864,2865],{"class":493}," (",[62,2867,1389],{"class":490},[62,2869,2870],{"class":696},"gladLoadGLLoader",[62,2872,2873],{"class":493},"((GLADloadproc)glfwGetProcAddress)) {\n",[62,2875,2877,2879,2881,2883,2886,2888,2890],{"class":486,"line":2876},30,[62,2878,2782],{"class":696},[62,2880,1420],{"class":493},[62,2882,1423],{"class":490},[62,2884,2885],{"class":1167}," \"Failed to initialize GLAD\"",[62,2887,1433],{"class":490},[62,2889,1441],{"class":696},[62,2891,1444],{"class":493},[62,2893,2895,2897,2899,2901],{"class":486,"line":2894},31,[62,2896,2809],{"class":490},[62,2898,2812],{"class":490},[62,2900,703],{"class":509},[62,2902,1224],{"class":493},[62,2904,2906],{"class":486,"line":2905},32,[62,2907,2822],{"class":493},[62,2909,2911],{"class":486,"line":2910},33,[62,2912,956],{"emptyLinePlaceholder":955},[62,2914,2916],{"class":486,"line":2915},34,[62,2917,2918],{"class":2141},"    \u002F\u002F 顶点数据\n",[62,2920,2922,2925,2927,2929],{"class":486,"line":2921},35,[62,2923,2924],{"class":490},"    float",[62,2926,494],{"class":493},[62,2928,497],{"class":490},[62,2930,500],{"class":493},[62,2932,2934,2937,2939,2941,2943,2945,2947,2949,2951,2953,2955],{"class":486,"line":2933},36,[62,2935,2936],{"class":490},"        -",[62,2938,510],{"class":509},[62,2940,513],{"class":490},[62,2942,516],{"class":493},[62,2944,519],{"class":490},[62,2946,510],{"class":509},[62,2948,513],{"class":490},[62,2950,516],{"class":493},[62,2952,528],{"class":509},[62,2954,513],{"class":490},[62,2956,533],{"class":493},[62,2958,2960,2963,2965,2967,2969,2971,2973,2975,2977,2979],{"class":486,"line":2959},37,[62,2961,2962],{"class":509},"         0.5",[62,2964,513],{"class":490},[62,2966,516],{"class":493},[62,2968,519],{"class":490},[62,2970,510],{"class":509},[62,2972,513],{"class":490},[62,2974,516],{"class":493},[62,2976,528],{"class":509},[62,2978,513],{"class":490},[62,2980,533],{"class":493},[62,2982,2984,2987,2989,2991,2993,2995,2997,2999],{"class":486,"line":2983},38,[62,2985,2986],{"class":509},"         0.0",[62,2988,513],{"class":490},[62,2990,568],{"class":493},[62,2992,510],{"class":509},[62,2994,513],{"class":490},[62,2996,516],{"class":493},[62,2998,528],{"class":509},[62,3000,579],{"class":490},[62,3002,3004],{"class":486,"line":3003},39,[62,3005,3006],{"class":493},"    };\n",[62,3008,3010],{"class":486,"line":3009},40,[62,3011,956],{"emptyLinePlaceholder":955},[62,3013,3015],{"class":486,"line":3014},41,[62,3016,3017],{"class":2141},"    \u002F\u002F 创建VAO\n",[62,3019,3021,3024,3026],{"class":486,"line":3020},42,[62,3022,3023],{"class":490},"    unsigned",[62,3025,688],{"class":490},[62,3027,2302],{"class":493},[62,3029,3031,3034,3036,3038,3040,3042],{"class":486,"line":3030},43,[62,3032,3033],{"class":696},"    glGenVertexArrays",[62,3035,700],{"class":493},[62,3037,703],{"class":509},[62,3039,516],{"class":493},[62,3041,708],{"class":490},[62,3043,2318],{"class":493},[62,3045,3047,3050],{"class":486,"line":3046},44,[62,3048,3049],{"class":696},"    glBindVertexArray",[62,3051,2360],{"class":493},[62,3053,3055],{"class":486,"line":3054},45,[62,3056,956],{"emptyLinePlaceholder":955},[62,3058,3060],{"class":486,"line":3059},46,[62,3061,3062],{"class":2141},"    \u002F\u002F 创建VBO\n",[62,3064,3066,3068,3070],{"class":486,"line":3065},47,[62,3067,3023],{"class":490},[62,3069,688],{"class":490},[62,3071,691],{"class":493},[62,3073,3075,3078,3080,3082,3084,3086],{"class":486,"line":3074},48,[62,3076,3077],{"class":696},"    glGenBuffers",[62,3079,700],{"class":493},[62,3081,703],{"class":509},[62,3083,516],{"class":493},[62,3085,708],{"class":490},[62,3087,711],{"class":493},[62,3089,3091,3094],{"class":486,"line":3090},49,[62,3092,3093],{"class":696},"    glBindBuffer",[62,3095,731],{"class":493},[62,3097,3099,3102,3104,3106],{"class":486,"line":3098},50,[62,3100,3101],{"class":696},"    glBufferData",[62,3103,754],{"class":493},[62,3105,757],{"class":490},[62,3107,760],{"class":493},[62,3109,3111],{"class":486,"line":3110},51,[62,3112,956],{"emptyLinePlaceholder":955},[62,3114,3116],{"class":486,"line":3115},52,[62,3117,3118],{"class":2141},"    \u002F\u002F 设置顶点属性\n",[62,3120,3122,3125,3127,3129,3131,3133,3135,3137,3139,3141,3143,3145,3147,3149,3151,3153],{"class":486,"line":3121},53,[62,3123,3124],{"class":696},"    glVertexAttribPointer",[62,3126,700],{"class":493},[62,3128,1886],{"class":509},[62,3130,516],{"class":493},[62,3132,1891],{"class":509},[62,3134,1894],{"class":493},[62,3136,1891],{"class":509},[62,3138,1159],{"class":490},[62,3140,1901],{"class":490},[62,3142,700],{"class":493},[62,3144,473],{"class":490},[62,3146,1908],{"class":493},[62,3148,1911],{"class":490},[62,3150,1914],{"class":493},[62,3152,1886],{"class":509},[62,3154,992],{"class":493},[62,3156,3158,3161,3163,3165],{"class":486,"line":3157},54,[62,3159,3160],{"class":696},"    glEnableVertexAttribArray",[62,3162,700],{"class":493},[62,3164,1886],{"class":509},[62,3166,992],{"class":493},[62,3168,3170],{"class":486,"line":3169},55,[62,3171,956],{"emptyLinePlaceholder":955},[62,3173,3175],{"class":486,"line":3174},56,[62,3176,3177],{"class":2141},"    \u002F\u002F 顶点着色器\n",[62,3179,3181,3184,3187,3190,3192],{"class":486,"line":3180},57,[62,3182,3183],{"class":490},"    const",[62,3185,3186],{"class":490}," char*",[62,3188,3189],{"class":493}," vertexShaderSource ",[62,3191,497],{"class":490},[62,3193,3194],{"class":493}," \n",[62,3196,3198,3201,3203],{"class":486,"line":3197},58,[62,3199,3200],{"class":1167},"        \"#version 330 core",[62,3202,1171],{"class":509},[62,3204,1174],{"class":1167},[62,3206,3208,3211,3213],{"class":486,"line":3207},59,[62,3209,3210],{"class":1167},"        \"layout (location = 0) in vec3 aPos;",[62,3212,1171],{"class":509},[62,3214,1174],{"class":1167},[62,3216,3218,3221,3223],{"class":486,"line":3217},60,[62,3219,3220],{"class":1167},"        \"void main()",[62,3222,1171],{"class":509},[62,3224,1174],{"class":1167},[62,3226,3228,3231,3233],{"class":486,"line":3227},61,[62,3229,3230],{"class":1167},"        \"{",[62,3232,1171],{"class":509},[62,3234,1174],{"class":1167},[62,3236,3238,3241,3243],{"class":486,"line":3237},62,[62,3239,3240],{"class":1167},"        \"   gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);",[62,3242,1171],{"class":509},[62,3244,1174],{"class":1167},[62,3246,3248,3251,3253,3255],{"class":486,"line":3247},63,[62,3249,3250],{"class":1167},"        \"}",[62,3252,1218],{"class":509},[62,3254,1221],{"class":1167},[62,3256,1224],{"class":493},[62,3258,3260],{"class":486,"line":3259},64,[62,3261,956],{"emptyLinePlaceholder":955},[62,3263,3265,3267,3269],{"class":486,"line":3264},65,[62,3266,3023],{"class":490},[62,3268,688],{"class":490},[62,3270,1248],{"class":493},[62,3272,3274,3277,3279,3281],{"class":486,"line":3273},66,[62,3275,3276],{"class":493},"    vertexShader ",[62,3278,497],{"class":490},[62,3280,1258],{"class":696},[62,3282,1261],{"class":493},[62,3284,3286,3289,3291,3293,3295,3297,3299,3301],{"class":486,"line":3285},67,[62,3287,3288],{"class":696},"    glShaderSource",[62,3290,1292],{"class":493},[62,3292,703],{"class":509},[62,3294,516],{"class":493},[62,3296,708],{"class":490},[62,3298,1301],{"class":493},[62,3300,1304],{"class":509},[62,3302,992],{"class":493},[62,3304,3306,3309],{"class":486,"line":3305},68,[62,3307,3308],{"class":696},"    glCompileShader",[62,3310,1314],{"class":493},[62,3312,3314],{"class":486,"line":3313},69,[62,3315,956],{"emptyLinePlaceholder":955},[62,3317,3319],{"class":486,"line":3318},70,[62,3320,3321],{"class":2141},"    \u002F\u002F 片段着色器\n",[62,3323,3325,3327,3329,3332,3334],{"class":486,"line":3324},71,[62,3326,3183],{"class":490},[62,3328,3186],{"class":490},[62,3330,3331],{"class":493}," fragmentShaderSource ",[62,3333,497],{"class":490},[62,3335,3194],{"class":493},[62,3337,3339,3341,3343],{"class":486,"line":3338},72,[62,3340,3200],{"class":1167},[62,3342,1171],{"class":509},[62,3344,1174],{"class":1167},[62,3346,3348,3351,3353],{"class":486,"line":3347},73,[62,3349,3350],{"class":1167},"        \"out vec4 FragColor;",[62,3352,1171],{"class":509},[62,3354,1174],{"class":1167},[62,3356,3358,3360,3362],{"class":486,"line":3357},74,[62,3359,3220],{"class":1167},[62,3361,1171],{"class":509},[62,3363,1174],{"class":1167},[62,3365,3367,3369,3371],{"class":486,"line":3366},75,[62,3368,3230],{"class":1167},[62,3370,1171],{"class":509},[62,3372,1174],{"class":1167},[62,3374,3376,3379,3381],{"class":486,"line":3375},76,[62,3377,3378],{"class":1167},"        \"   FragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);",[62,3380,1171],{"class":509},[62,3382,1174],{"class":1167},[62,3384,3386,3388,3390,3392],{"class":486,"line":3385},77,[62,3387,3250],{"class":1167},[62,3389,1218],{"class":509},[62,3391,1221],{"class":1167},[62,3393,1224],{"class":493},[62,3395,3397],{"class":486,"line":3396},78,[62,3398,2828],{"class":493},[62,3400,3402,3404,3406],{"class":486,"line":3401},79,[62,3403,3023],{"class":490},[62,3405,688],{"class":490},[62,3407,1585],{"class":493},[62,3409,3411,3414,3416,3418],{"class":486,"line":3410},80,[62,3412,3413],{"class":493},"    fragmentShader ",[62,3415,497],{"class":490},[62,3417,1258],{"class":696},[62,3419,1597],{"class":493},[62,3421,3423,3425,3427,3429,3431,3433,3435,3437],{"class":486,"line":3422},81,[62,3424,3288],{"class":696},[62,3426,1604],{"class":493},[62,3428,703],{"class":509},[62,3430,516],{"class":493},[62,3432,708],{"class":490},[62,3434,1613],{"class":493},[62,3436,1304],{"class":509},[62,3438,992],{"class":493},[62,3440,3442,3444],{"class":486,"line":3441},82,[62,3443,3308],{"class":696},[62,3445,1624],{"class":493},[62,3447,3449],{"class":486,"line":3448},83,[62,3450,956],{"emptyLinePlaceholder":955},[62,3452,3454],{"class":486,"line":3453},84,[62,3455,3456],{"class":2141},"    \u002F\u002F 创建着色器程序\n",[62,3458,3460,3462,3464],{"class":486,"line":3459},85,[62,3461,3023],{"class":490},[62,3463,688],{"class":490},[62,3465,1664],{"class":493},[62,3467,3469,3472,3474,3476],{"class":486,"line":3468},86,[62,3470,3471],{"class":493},"    shaderProgram ",[62,3473,497],{"class":490},[62,3475,1674],{"class":696},[62,3477,1677],{"class":493},[62,3479,3481,3484],{"class":486,"line":3480},87,[62,3482,3483],{"class":696},"    glAttachShader",[62,3485,1697],{"class":493},[62,3487,3489,3491],{"class":486,"line":3488},88,[62,3490,3483],{"class":696},[62,3492,1704],{"class":493},[62,3494,3496,3499],{"class":486,"line":3495},89,[62,3497,3498],{"class":696},"    glLinkProgram",[62,3500,1712],{"class":493},[62,3502,3504],{"class":486,"line":3503},90,[62,3505,956],{"emptyLinePlaceholder":955},[62,3507,3509],{"class":486,"line":3508},91,[62,3510,3511],{"class":2141},"    \u002F\u002F 删除着色器对象\n",[62,3513,3515,3518],{"class":486,"line":3514},92,[62,3516,3517],{"class":696},"    glDeleteShader",[62,3519,1314],{"class":493},[62,3521,3523,3525],{"class":486,"line":3522},93,[62,3524,3517],{"class":696},[62,3526,1624],{"class":493},[62,3528,3530],{"class":486,"line":3529},94,[62,3531,956],{"emptyLinePlaceholder":955},[62,3533,3535],{"class":486,"line":3534},95,[62,3536,3537],{"class":2141},"    \u002F\u002F 渲染循环\n",[62,3539,3541,3544,3546,3548,3551],{"class":486,"line":3540},96,[62,3542,3543],{"class":490},"    while",[62,3545,2865],{"class":493},[62,3547,1389],{"class":490},[62,3549,3550],{"class":696},"glfwWindowShouldClose",[62,3552,3553],{"class":493},"(window)) {\n",[62,3555,3557],{"class":486,"line":3556},97,[62,3558,3559],{"class":2141},"        \u002F\u002F 处理输入\n",[62,3561,3563,3566],{"class":486,"line":3562},98,[62,3564,3565],{"class":696},"        glfwPollEvents",[62,3567,1677],{"class":493},[62,3569,3571],{"class":486,"line":3570},99,[62,3572,3573],{"class":493},"        \n",[62,3575,3577],{"class":486,"line":3576},100,[62,3578,3579],{"class":2141},"        \u002F\u002F 渲染指令\n",[62,3581,3583,3586,3588,3590,3592,3594,3597,3599,3601,3603,3605,3607,3609,3611],{"class":486,"line":3582},101,[62,3584,3585],{"class":696},"        glClearColor",[62,3587,700],{"class":493},[62,3589,1530],{"class":509},[62,3591,513],{"class":490},[62,3593,516],{"class":493},[62,3595,3596],{"class":509},"0.3",[62,3598,513],{"class":490},[62,3600,516],{"class":493},[62,3602,3596],{"class":509},[62,3604,513],{"class":490},[62,3606,516],{"class":493},[62,3608,989],{"class":509},[62,3610,513],{"class":490},[62,3612,992],{"class":493},[62,3614,3616,3619],{"class":486,"line":3615},102,[62,3617,3618],{"class":696},"        glClear",[62,3620,3621],{"class":493},"(GL_COLOR_BUFFER_BIT);\n",[62,3623,3625],{"class":486,"line":3624},103,[62,3626,3573],{"class":493},[62,3628,3630],{"class":486,"line":3629},104,[62,3631,3632],{"class":2141},"        \u002F\u002F 使用着色器程序\n",[62,3634,3636,3639],{"class":486,"line":3635},105,[62,3637,3638],{"class":696},"        glUseProgram",[62,3640,1712],{"class":493},[62,3642,3644,3647],{"class":486,"line":3643},106,[62,3645,3646],{"class":696},"        glBindVertexArray",[62,3648,2360],{"class":493},[62,3650,3652],{"class":486,"line":3651},107,[62,3653,3573],{"class":493},[62,3655,3657],{"class":486,"line":3656},108,[62,3658,3659],{"class":2141},"        \u002F\u002F 绘制三角形\n",[62,3661,3663,3666,3668,3670,3672,3674],{"class":486,"line":3662},109,[62,3664,3665],{"class":696},"        glDrawArrays",[62,3667,2534],{"class":493},[62,3669,1886],{"class":509},[62,3671,516],{"class":493},[62,3673,1891],{"class":509},[62,3675,992],{"class":493},[62,3677,3679],{"class":486,"line":3678},110,[62,3680,3573],{"class":493},[62,3682,3684],{"class":486,"line":3683},111,[62,3685,3686],{"class":2141},"        \u002F\u002F 交换缓冲区和检查IO事件\n",[62,3688,3690,3693],{"class":486,"line":3689},112,[62,3691,3692],{"class":696},"        glfwSwapBuffers",[62,3694,2837],{"class":493},[62,3696,3698],{"class":486,"line":3697},113,[62,3699,2822],{"class":493},[62,3701,3703],{"class":486,"line":3702},114,[62,3704,956],{"emptyLinePlaceholder":955},[62,3706,3708],{"class":486,"line":3707},115,[62,3709,3710],{"class":2141},"    \u002F\u002F 清理资源\n",[62,3712,3714,3717,3719,3721,3723,3725],{"class":486,"line":3713},116,[62,3715,3716],{"class":696},"    glDeleteVertexArrays",[62,3718,700],{"class":493},[62,3720,703],{"class":509},[62,3722,516],{"class":493},[62,3724,708],{"class":490},[62,3726,2318],{"class":493},[62,3728,3730,3733,3735,3737,3739,3741],{"class":486,"line":3729},117,[62,3731,3732],{"class":696},"    glDeleteBuffers",[62,3734,700],{"class":493},[62,3736,703],{"class":509},[62,3738,516],{"class":493},[62,3740,708],{"class":490},[62,3742,711],{"class":493},[62,3744,3746,3749],{"class":486,"line":3745},118,[62,3747,3748],{"class":696},"    glDeleteProgram",[62,3750,1712],{"class":493},[62,3752,3754,3757],{"class":486,"line":3753},119,[62,3755,3756],{"class":696},"    glfwTerminate",[62,3758,1677],{"class":493},[62,3760,3762,3765,3767],{"class":486,"line":3761},120,[62,3763,3764],{"class":490},"    return",[62,3766,947],{"class":509},[62,3768,1224],{"class":493},[62,3770,3772],{"class":486,"line":3771},121,[62,3773,998],{"class":493},[3775,3776,3777],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":481,"searchDepth":503,"depth":503,"links":3779},[3780,3784,3785,3786,3787,3788,3791],{"id":99,"depth":503,"text":100,"children":3781},[3782,3783],{"id":104,"depth":536,"text":105},{"id":137,"depth":536,"text":138},{"id":222,"depth":503,"text":223},{"id":451,"depth":503,"text":451},{"id":908,"depth":503,"text":908},{"id":1136,"depth":503,"text":1136},{"id":1454,"depth":503,"text":1454,"children":3789},[3790],{"id":1630,"depth":536,"text":1630},{"id":1832,"depth":503,"text":1832,"children":3792},[3793,3794],{"id":2239,"depth":536,"text":2239},{"id":2499,"depth":536,"text":2499},"md",{},"\u002Fgraphy\u002Fopengel\u002F三角形绘制",{"description":12},"graphy\u002Fopengel\u002F三角形绘制","w2prqIcP-hcj-9wMVQghVO97FXPeKexz3O3B_UqcvkA",1792338202380]