[{"data":1,"prerenderedAt":1466},["ShallowReactive",2],{"page-\u002Fcpp\u002Fopengel\u002F着色器":3},{"id":4,"title":5,"body":6,"description":1459,"extension":1460,"meta":1461,"navigation":71,"path":1462,"seo":1463,"stem":1464,"__hash__":1465},"content\u002Fcpp\u002Fopengel\u002F着色器.md","着色器",{"type":7,"value":8,"toc":1445},"minimark",[9,20,23,28,31,34,37,137,149,169,175,179,204,208,219,301,307,339,346,371,389,409,412,415,437,464,478,489,503,508,558,563,607,617,623,626,630,644,650,693,703,716,726,756,770,781,859,862,1007,1017,1036,1040,1049,1087,1104,1158,1165,1205,1212,1237,1247,1250,1253,1259,1263,1271,1277,1340,1343,1347,1353,1358,1414,1419,1434,1441],[10,11,12,13,19],"p",{},"​\t在[Hello Triangle](",[14,15,16],"a",{"href":16,"rel":17},"https:\u002F\u002Flearnopengl-cn.github.io\u002F01",[18],"nofollow"," Getting started\u002F04 Hello Triangle\u002F)教程中提到，着色器(Shader)是运行在GPU上的小程序。这些小程序为图形渲染管线的某个特定部分而运行。从基本意义上来说，着色器只是一种把输入转化为输出的程序。着色器也是一种非常独立的程序，因为它们之间不能相互通信；它们之间唯一的沟通只有通过输入和输出。",[10,21,22],{},"​\t前面的教程里我们简要地触及了一点着色器的皮毛，并了解了如何恰当地使用它们。现在我们会用一种更加广泛的形式详细解释着色器，特别是OpenGL着色器语言(GLSL)。",[24,25,27],"h1",{"id":26},"glsl","GLSL",[10,29,30],{},"​\t着色器是使用一种叫GLSL的类C语言写成的。GLSL是为图形计算量身定制的，它包含一些针对向量和矩阵操作的有用特性。",[10,32,33],{},"​\t着色器的开头总是要声明版本，接着是输入和输出变量、uniform和main函数。每个着色器的入口点都是main函数，在这个函数中我们处理所有的输入变量，并将结果输出到输出变量中。如果你不知道什么是uniform也不用担心，我们后面会进行讲解。",[10,35,36],{},"一个典型的着色器有下面的结构：",[38,39,44],"pre",{"className":40,"code":41,"language":42,"meta":43,"style":43},"language-c++ shiki shiki-themes github-light github-dark","#version version_number\nin type in_variable_name;\nin type in_variable_name;\n\nout type out_variable_name;\n\nuniform type uniform_name;\n\nvoid main()\n{\n  \u002F\u002F 处理输入并进行一些图形操作\n  ...\n  \u002F\u002F 输出处理过的结果到输出变量\n  out_variable_name = weird_stuff_we_processed;\n}\n","c++","",[45,46,47,55,61,66,73,79,84,90,95,101,107,113,119,125,131],"code",{"__ignoreMap":43},[48,49,52],"span",{"class":50,"line":51},"line",1,[48,53,54],{},"#version version_number\n",[48,56,58],{"class":50,"line":57},2,[48,59,60],{},"in type in_variable_name;\n",[48,62,64],{"class":50,"line":63},3,[48,65,60],{},[48,67,69],{"class":50,"line":68},4,[48,70,72],{"emptyLinePlaceholder":71},true,"\n",[48,74,76],{"class":50,"line":75},5,[48,77,78],{},"out type out_variable_name;\n",[48,80,82],{"class":50,"line":81},6,[48,83,72],{"emptyLinePlaceholder":71},[48,85,87],{"class":50,"line":86},7,[48,88,89],{},"uniform type uniform_name;\n",[48,91,93],{"class":50,"line":92},8,[48,94,72],{"emptyLinePlaceholder":71},[48,96,98],{"class":50,"line":97},9,[48,99,100],{},"void main()\n",[48,102,104],{"class":50,"line":103},10,[48,105,106],{},"{\n",[48,108,110],{"class":50,"line":109},11,[48,111,112],{},"  \u002F\u002F 处理输入并进行一些图形操作\n",[48,114,116],{"class":50,"line":115},12,[48,117,118],{},"  ...\n",[48,120,122],{"class":50,"line":121},13,[48,123,124],{},"  \u002F\u002F 输出处理过的结果到输出变量\n",[48,126,128],{"class":50,"line":127},14,[48,129,130],{},"  out_variable_name = weird_stuff_we_processed;\n",[48,132,134],{"class":50,"line":133},15,[48,135,136],{},"}\n",[10,138,139,140,144,145,148],{},"​\t当我们特别谈论到",[141,142,143],"strong",{},"顶点着色器的时候","，每个",[141,146,147],{},"输入变量也叫顶点属性(Vertex Attribute)","。我们能声明的顶点属性是有上限的，它一般由硬件来决定。OpenGL确保至少有16个包含4分量的顶点属性可用，但是有些硬件或许允许更多的顶点属性，你可以查询GL_MAX_VERTEX_ATTRIBS来获取具体的上限：",[38,150,152],{"className":40,"code":151,"language":42,"meta":43,"style":43},"int nrAttributes;\nglGetIntegerv(GL_MAX_VERTEX_ATTRIBS, &nrAttributes);\nstd::cout \u003C\u003C \"Maximum nr of vertex attributes supported: \" \u003C\u003C nrAttributes \u003C\u003C std::endl;\n",[45,153,154,159,164],{"__ignoreMap":43},[48,155,156],{"class":50,"line":51},[48,157,158],{},"int nrAttributes;\n",[48,160,161],{"class":50,"line":57},[48,162,163],{},"glGetIntegerv(GL_MAX_VERTEX_ATTRIBS, &nrAttributes);\n",[48,165,166],{"class":50,"line":63},[48,167,168],{},"std::cout \u003C\u003C \"Maximum nr of vertex attributes supported: \" \u003C\u003C nrAttributes \u003C\u003C std::endl;\n",[10,170,171,172],{},"​\t通常情况下它",[141,173,174],{},"至少会返回16个，大部分情况下是够用了。",[176,177,178],"h2",{"id":178},"数据类型",[10,180,181,182,185,186,189,190,189,193,189,196,199,200,203],{},"​\t和其他编程语言一样，",[141,183,184],{},"GLSL有数据类型可以来指定变量的种类","。GLSL中包含C等其它语言大部分的默认基础数据类型：",[45,187,188],{},"int","、",[45,191,192],{},"float",[45,194,195],{},"double",[45,197,198],{},"uint","和",[45,201,202],{},"bool","。GLSL也有两种容器类型，它们会在这个教程中使用很多，分别是向量(Vector)和矩阵(Matrix)，其中矩阵我们会在之后的教程里再讨论。",[205,206,207],"h3",{"id":207},"向量",[10,209,210,211,214,215,218],{},"​\tGLSL中的向量是一个",[141,212,213],{},"可以包含有2、3或者4个分量的容器","，分量的类型可以是前面默认基础类型的任意一个。它们可以是下面的形式（",[45,216,217],{},"n","代表分量的数量）：",[220,221,222,236],"table",{},[223,224,225],"thead",{},[226,227,228,233],"tr",{},[229,230,232],"th",{"align":231},"left","类型",[229,234,235],{"align":231},"含义",[237,238,239,253,265,277,289],"tbody",{},[226,240,241,247],{},[242,243,244],"td",{"align":231},[45,245,246],{},"vecn",[242,248,249,250,252],{"align":231},"包含",[45,251,217],{},"个float分量的默认向量",[226,254,255,260],{},[242,256,257],{"align":231},[45,258,259],{},"bvecn",[242,261,249,262,264],{"align":231},[45,263,217],{},"个bool分量的向量",[226,266,267,272],{},[242,268,269],{"align":231},[45,270,271],{},"ivecn",[242,273,249,274,276],{"align":231},[45,275,217],{},"个int分量的向量",[226,278,279,284],{},[242,280,281],{"align":231},[45,282,283],{},"uvecn",[242,285,249,286,288],{"align":231},[45,287,217],{},"个unsigned int分量的向量",[226,290,291,296],{},[242,292,293],{"align":231},[45,294,295],{},"dvecn",[242,297,249,298,300],{"align":231},[45,299,217],{},"个double分量的向量",[10,302,303,304,306],{},"​\t大多数时候我们使用",[45,305,246],{},"，因为float足够满足大多数要求了。",[10,308,309,310,313,314,317,318,189,321,189,324,199,327,330,331,334,335,338],{},"​\t一个向量的分量可以通过",[45,311,312],{},"vec.x","这种方式获取，这里",[45,315,316],{},"x","是指这个向量的第一个分量。你可以分别使用",[45,319,320],{},".x",[45,322,323],{},".y",[45,325,326],{},".z",[45,328,329],{},".w","来获取它们的第1、2、3、4个分量。GLSL也允许你对颜色使用",[45,332,333],{},"rgba","，或是对纹理坐标使用",[45,336,337],{},"stpq","访问相同的分量。",[10,340,341,342,345],{},"​\t向量这一数据类型也",[141,343,344],{},"允许一些有趣而灵活的分量选择方式","，叫做重组(Swizzling)。重组允许这样的语法：",[38,347,349],{"className":40,"code":348,"language":42,"meta":43,"style":43},"vec2 someVec;\nvec4 differentVec = someVec.xyxx;\nvec3 anotherVec = differentVec.zyw;\nvec4 otherVec = someVec.xxxx + anotherVec.yxzy;\n",[45,350,351,356,361,366],{"__ignoreMap":43},[48,352,353],{"class":50,"line":51},[48,354,355],{},"vec2 someVec;\n",[48,357,358],{"class":50,"line":57},[48,359,360],{},"vec4 differentVec = someVec.xyxx;\n",[48,362,363],{"class":50,"line":63},[48,364,365],{},"vec3 anotherVec = differentVec.zyw;\n",[48,367,368],{"class":50,"line":68},[48,369,370],{},"vec4 otherVec = someVec.xxxx + anotherVec.yxzy;\n",[10,372,373,374,377,378,381,382,384,385,388],{},"​\t你可以",[141,375,376],{},"使用上面4个字母任意组合来创建一个和原来向量一样长的（同类型）新向量","，只要原来向量有那些分量即可；然而，你不允许在一个",[45,379,380],{},"vec2","向量中去获取",[45,383,326],{},"元素。我们也可以",[141,386,387],{},"把一个向量作为一个参数传给不同的向量构造函数，以减少需求参数的数量","：",[38,390,392],{"className":40,"code":391,"language":42,"meta":43,"style":43},"vec2 vect = vec2(0.5, 0.7); \nvec4 result = vec4(vect, 0.0, 0.0);\nvec4 otherResult = vec4(result.xyz, 1.0);\n",[45,393,394,399,404],{"__ignoreMap":43},[48,395,396],{"class":50,"line":51},[48,397,398],{},"vec2 vect = vec2(0.5, 0.7); \n",[48,400,401],{"class":50,"line":57},[48,402,403],{},"vec4 result = vec4(vect, 0.0, 0.0);\n",[48,405,406],{"class":50,"line":63},[48,407,408],{},"vec4 otherResult = vec4(result.xyz, 1.0);\n",[10,410,411],{},"​\t向量是一种灵活的数据类型，我们可以把它用在各种输入和输出上。学完教程你会看到很多新颖的管理向量的例子。",[176,413,414],{"id":414},"输入与输出",[10,416,417,418,421,422,425,426,199,429,432,433,436],{},"​\t虽然着色器",[141,419,420],{},"是各自独立的小程序","，但是它们都是一个整体的一部分，出于这样的原因，我们希望",[141,423,424],{},"每个着色器都有输入和输出","，这样才能进行数据交流和传递。GLSL定义了",[45,427,428],{},"in",[45,430,431],{},"out","关键字专门来实现这个目的。每个着色器使用这两个关键字设定输入和输出，只要一个输出变量与下一个着色器阶段的输入匹配，它就会传递下去。",[141,434,435],{},"但在顶点和片段着色器中会有点不同","。",[10,438,439,440,443,444,447,448,451,452,455,456,459,460,463],{},"​\t",[141,441,442],{},"顶点着色器应该接收的是一种特殊形式的输入，否则就会效率低下","。顶点着色器的输入特殊在，",[141,445,446],{},"它从顶点数据中直接接收输入","。为了定义顶点数据该如何管理，我们使用",[45,449,450],{},"location","这一元数据指定输入变量，",[141,453,454],{},"这样我们才可以在CPU上配置顶点属性","。我们已经在前面的教程看过这个了，",[45,457,458],{},"layout (location = 0)","。顶点着色器需要为它的输入提供一个额外的",[45,461,462],{},"layout","标识，这样我们才能把它链接到顶点数据。",[465,466,467,472],"blockquote",{},[10,468,469],{},[48,470,471],{},"!NOTE",[10,473,474,475,477],{},"你也可以忽略",[45,476,458],{},"标识符，通过在OpenGL代码中使用glGetAttribLocation查询属性位置值(Location)，但是我更喜欢在着色器中设置它们，这样会更容易理解而且节省你（和OpenGL）的工作量。",[10,479,480,481,484,485,488],{},"​\t另一个例外是片段着色器，它需要一个",[45,482,483],{},"vec4","颜色输出变量，因为",[141,486,487],{},"片段着色器需要生成一个最终输出的颜色","。如果你在片段着色器没有定义输出颜色，OpenGL会把你的物体渲染为黑色（或白色）。",[10,490,491,492,495,496,499,500,436],{},"​\t所以，如果",[141,493,494],{},"我们打算从一个着色器向另一个着色器发送数据，我们必须在发送方着色器中声明一个输出","，在接收方着色器中声明一个类似的输入。当类型和名字都一样的时候，",[141,497,498],{},"OpenGL就会把两个变量链接到一起","，它们之间就能发送数据了（这是在链接程序对象时完成的）。为了展示这是如何工作的，我们会稍微改动一下之前教程里的那个着色器，让顶点着色器",[141,501,502],{},"为片段着色器决定颜色",[10,504,505],{},[141,506,507],{},"顶点着色器",[38,509,511],{"className":40,"code":510,"language":42,"meta":43,"style":43},"#version 330 core\nlayout (location = 0) in vec3 aPos; \u002F\u002F 位置变量的属性位置值为0\n\nout vec4 vertexColor; \u002F\u002F 为片段着色器指定一个颜色输出\n\nvoid main()\n{\n    gl_Position = vec4(aPos, 1.0); \u002F\u002F 注意我们如何把一个vec3作为vec4的构造器的参数\n    vertexColor = vec4(0.5, 0.0, 0.0, 1.0); \u002F\u002F 把输出变量设置为暗红色\n}\n",[45,512,513,518,523,527,532,536,540,544,549,554],{"__ignoreMap":43},[48,514,515],{"class":50,"line":51},[48,516,517],{},"#version 330 core\n",[48,519,520],{"class":50,"line":57},[48,521,522],{},"layout (location = 0) in vec3 aPos; \u002F\u002F 位置变量的属性位置值为0\n",[48,524,525],{"class":50,"line":63},[48,526,72],{"emptyLinePlaceholder":71},[48,528,529],{"class":50,"line":68},[48,530,531],{},"out vec4 vertexColor; \u002F\u002F 为片段着色器指定一个颜色输出\n",[48,533,534],{"class":50,"line":75},[48,535,72],{"emptyLinePlaceholder":71},[48,537,538],{"class":50,"line":81},[48,539,100],{},[48,541,542],{"class":50,"line":86},[48,543,106],{},[48,545,546],{"class":50,"line":92},[48,547,548],{},"    gl_Position = vec4(aPos, 1.0); \u002F\u002F 注意我们如何把一个vec3作为vec4的构造器的参数\n",[48,550,551],{"class":50,"line":97},[48,552,553],{},"    vertexColor = vec4(0.5, 0.0, 0.0, 1.0); \u002F\u002F 把输出变量设置为暗红色\n",[48,555,556],{"class":50,"line":103},[48,557,136],{},[10,559,560],{},[141,561,562],{},"片段着色器",[38,564,566],{"className":40,"code":565,"language":42,"meta":43,"style":43},"#version 330 core\nout vec4 FragColor;\n\nin vec4 vertexColor; \u002F\u002F 从顶点着色器传来的输入变量（名称相同、类型相同）\n\nvoid main()\n{\n    FragColor = vertexColor;\n}\n",[45,567,568,572,577,581,586,590,594,598,603],{"__ignoreMap":43},[48,569,570],{"class":50,"line":51},[48,571,517],{},[48,573,574],{"class":50,"line":57},[48,575,576],{},"out vec4 FragColor;\n",[48,578,579],{"class":50,"line":63},[48,580,72],{"emptyLinePlaceholder":71},[48,582,583],{"class":50,"line":68},[48,584,585],{},"in vec4 vertexColor; \u002F\u002F 从顶点着色器传来的输入变量（名称相同、类型相同）\n",[48,587,588],{"class":50,"line":75},[48,589,72],{"emptyLinePlaceholder":71},[48,591,592],{"class":50,"line":81},[48,593,100],{},[48,595,596],{"class":50,"line":86},[48,597,106],{},[48,599,600],{"class":50,"line":92},[48,601,602],{},"    FragColor = vertexColor;\n",[48,604,605],{"class":50,"line":97},[48,606,136],{},[10,608,609,610,612,613,616],{},"​\t你可以看到我们在顶点着色器中声明了一个vertexColor变量作为",[45,611,483],{},"输出，并在片段着色器中声明了一个类似的vertexColor。由于它们名字相同且类型相同，",[141,614,615],{},"片段着色器中的vertexColor就和顶点着色器中的vertexColor链接了","。由于我们在顶点着色器中将颜色设置为深红色，最终的片段也是深红色的。下面的图片展示了输出结果：",[10,618,619],{},[620,621],"img",{"alt":620,"src":622},".\u002Fassets\u002Fshaders.png",[10,624,625],{},"​\t完成了！我们成功地从顶点着色器向片段着色器发送数据。让我们更上一层楼，看看能否从应用程序中直接给片段着色器发送一个颜色！",[176,627,629],{"id":628},"uniform","Uniform",[10,631,632,633,636,637,640,641,436],{},"​\tUniform",[141,634,635],{},"是另一种从我们的应用程序在 CPU 上传递数据到 GPU 上的着色器的方式","，但uniform和顶点属性有些不同。首先，uniform是全局的(Global)。",[141,638,639],{},"全局意味着uniform变量必须在每个着色器程序对象中都是独一无二的","，而且",[141,642,643],{},"它可以被着色器程序的任意着色器在任意阶段访问。第二，无论你把uniform值设置成什么，uniform会一直保存它们的数据，直到它们被重置或更新",[10,645,646,647,649],{},"​\t要在 GLSL 中声明 uniform，我们只需在着色器中使用 ",[45,648,628],{}," 关键字，并带上类型和名称。从那时起，我们就可以在着色器中使用新声明的 uniform。我们来看看这次是否能通过uniform设置三角形的颜色：",[38,651,653],{"className":40,"code":652,"language":42,"meta":43,"style":43},"#version 330 core\nout vec4 FragColor;\n\nuniform vec4 ourColor; \u002F\u002F 在OpenGL程序代码中设定这个变量\n\nvoid main()\n{\n    FragColor = ourColor;\n}\n",[45,654,655,659,663,667,672,676,680,684,689],{"__ignoreMap":43},[48,656,657],{"class":50,"line":51},[48,658,517],{},[48,660,661],{"class":50,"line":57},[48,662,576],{},[48,664,665],{"class":50,"line":63},[48,666,72],{"emptyLinePlaceholder":71},[48,668,669],{"class":50,"line":68},[48,670,671],{},"uniform vec4 ourColor; \u002F\u002F 在OpenGL程序代码中设定这个变量\n",[48,673,674],{"class":50,"line":75},[48,675,72],{"emptyLinePlaceholder":71},[48,677,678],{"class":50,"line":81},[48,679,100],{},[48,681,682],{"class":50,"line":86},[48,683,106],{},[48,685,686],{"class":50,"line":92},[48,687,688],{},"    FragColor = ourColor;\n",[48,690,691],{"class":50,"line":97},[48,692,136],{},[10,694,695,696,698,699,702],{},"​\t我们在片段着色器中声明了一个uniform ",[45,697,483],{},"的ourColor，并把",[141,700,701],{},"片段着色器的输出颜色设置为uniform值的内容","。因为uniform是全局变量，我们可以在任何着色器中定义它们，而无需通过顶点着色器作为中介。顶点着色器中不需要这个uniform，所以我们不用在那里定义它。",[465,704,705,709],{},[10,706,707],{},[48,708,471],{},[10,710,711,712,715],{},"如果你声明了一个uniform却在GLSL代码中没用过，",[141,713,714],{},"编译器会静默移除这个变量","，导致最后编译出的版本中并不会包含它，这可能导致几个非常麻烦的错误，记住这点！",[10,717,718,719,722,723,388],{},"​\t这个uniform现在还是空的；我们还没有给它添加任何数据，所以下面我们就做这件事。",[141,720,721],{},"我们首先需要找到着色器中uniform属性的索引\u002F位置值","。当我们得到uniform的索引\u002F位置值后，我们就可以更新它的值了。这次我们不去给像素传递单独一个颜色，而是",[141,724,725],{},"让它随着时间改变颜色",[38,727,729],{"className":40,"code":728,"language":42,"meta":43,"style":43},"float timeValue = glfwGetTime();\nfloat greenValue = (sin(timeValue) \u002F 2.0f) + 0.5f;\nint vertexColorLocation = glGetUniformLocation(shaderProgram, \"ourColor\");\nglUseProgram(shaderProgram);\nglUniform4f(vertexColorLocation, 0.0f, greenValue, 0.0f, 1.0f);\n",[45,730,731,736,741,746,751],{"__ignoreMap":43},[48,732,733],{"class":50,"line":51},[48,734,735],{},"float timeValue = glfwGetTime();\n",[48,737,738],{"class":50,"line":57},[48,739,740],{},"float greenValue = (sin(timeValue) \u002F 2.0f) + 0.5f;\n",[48,742,743],{"class":50,"line":63},[48,744,745],{},"int vertexColorLocation = glGetUniformLocation(shaderProgram, \"ourColor\");\n",[48,747,748],{"class":50,"line":68},[48,749,750],{},"glUseProgram(shaderProgram);\n",[48,752,753],{"class":50,"line":75},[48,754,755],{},"glUniform4f(vertexColorLocation, 0.0f, greenValue, 0.0f, 1.0f);\n",[10,757,758,759,762,763,766,767,436],{},"​\t首先我们",[141,760,761],{},"通过glfwGetTime()获取运行的秒数","。然后我们",[141,764,765],{},"使用sin函数让颜色在0.0到1.0之间改变","，最后",[141,768,769],{},"将结果储存到greenValue里",[10,771,772,773,776,777,780],{},"​\t接着，我们用glGetUniformLocation查询uniform ourColor的位置值。我们为查询函数提供着色器程序和uniform的名字（这是我们希望获得的位置值的来源）。如果glGetUniformLocation返回",[45,774,775],{},"-1","就代表没有找到这个位置值。最后，我们可以通过glUniform4f函数设置uniform值。注意，查询uniform地址不要求你之前使用过着色器程序，但是更新一个uniform之前你",[141,778,779],{},"必须","先使用程序（调用glUseProgram)，因为它是在当前激活的着色器程序中设置uniform的。",[465,782,783,787,790,853],{},[10,784,785],{},[48,786,471],{},[10,788,789],{},"因为OpenGL在其核心是一个C库，所以它不支持类型重载，在函数参数不同的时候就要为其定义新的函数；glUniform是一个典型例子。这个函数有一个特定的后缀，标识设定的uniform的类型。可能的后缀有：",[220,791,792,801],{},[223,793,794],{},[226,795,796,799],{},[229,797,798],{"align":231},"后缀",[229,800,235],{"align":231},[237,802,803,813,823,833,843],{},[226,804,805,810],{},[242,806,807],{"align":231},[45,808,809],{},"f",[242,811,812],{"align":231},"函数需要一个float作为它的值",[226,814,815,820],{},[242,816,817],{"align":231},[45,818,819],{},"i",[242,821,822],{"align":231},"函数需要一个int作为它的值",[226,824,825,830],{},[242,826,827],{"align":231},[45,828,829],{},"ui",[242,831,832],{"align":231},"函数需要一个unsigned int作为它的值",[226,834,835,840],{},[242,836,837],{"align":231},[45,838,839],{},"3f",[242,841,842],{"align":231},"函数需要3个float作为它的值",[226,844,845,850],{},[242,846,847],{"align":231},[45,848,849],{},"fv",[242,851,852],{"align":231},"函数需要一个float向量\u002F数组作为它的值",[10,854,855,856,858],{},"每当你打算配置一个OpenGL的选项时就可以简单地根据这些规则选择适合你的数据类型的重载函数。在我们的例子里，我们希望分别设定uniform的4个float值，所以我们通过glUniform4f传递我们的数据(注意，我们也可以使用",[45,857,849],{},"版本)。",[10,860,861],{},"​\t现在你知道如何设置uniform变量的值了，我们可以使用它们来渲染了。如果我们打算让颜色慢慢变化，我们就要在游戏循环的每一次迭代中（所以他会逐帧改变）更新这个uniform，否则三角形就不会改变颜色。下面我们就计算greenValue然后每个渲染迭代都更新这个uniform：",[38,863,865],{"className":40,"code":864,"language":42,"meta":43,"style":43},"while(!glfwWindowShouldClose(window))\n{\n    \u002F\u002F 输入\n    processInput(window);\n\n    \u002F\u002F 渲染\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\n    \u002F\u002F 更新uniform颜色\n    float timeValue = glfwGetTime();\n    float greenValue = sin(timeValue) \u002F 2.0f + 0.5f;\n    int vertexColorLocation = glGetUniformLocation(shaderProgram, \"ourColor\");\n    glUniform4f(vertexColorLocation, 0.0f, greenValue, 0.0f, 1.0f);\n\n    \u002F\u002F 绘制三角形\n    glBindVertexArray(VAO);\n    glDrawArrays(GL_TRIANGLES, 0, 3);\n\n    \u002F\u002F 交换缓冲并查询IO事件\n    glfwSwapBuffers(window);\n    glfwPollEvents();\n}\n",[45,866,867,872,876,881,886,890,895,900,905,910,914,919,924,928,933,938,944,950,956,961,967,973,979,984,990,996,1002],{"__ignoreMap":43},[48,868,869],{"class":50,"line":51},[48,870,871],{},"while(!glfwWindowShouldClose(window))\n",[48,873,874],{"class":50,"line":57},[48,875,106],{},[48,877,878],{"class":50,"line":63},[48,879,880],{},"    \u002F\u002F 输入\n",[48,882,883],{"class":50,"line":68},[48,884,885],{},"    processInput(window);\n",[48,887,888],{"class":50,"line":75},[48,889,72],{"emptyLinePlaceholder":71},[48,891,892],{"class":50,"line":81},[48,893,894],{},"    \u002F\u002F 渲染\n",[48,896,897],{"class":50,"line":86},[48,898,899],{},"    \u002F\u002F 清除颜色缓冲\n",[48,901,902],{"class":50,"line":92},[48,903,904],{},"    glClearColor(0.2f, 0.3f, 0.3f, 1.0f);\n",[48,906,907],{"class":50,"line":97},[48,908,909],{},"    glClear(GL_COLOR_BUFFER_BIT);\n",[48,911,912],{"class":50,"line":103},[48,913,72],{"emptyLinePlaceholder":71},[48,915,916],{"class":50,"line":109},[48,917,918],{},"    \u002F\u002F 记得激活着色器\n",[48,920,921],{"class":50,"line":115},[48,922,923],{},"    glUseProgram(shaderProgram);\n",[48,925,926],{"class":50,"line":121},[48,927,72],{"emptyLinePlaceholder":71},[48,929,930],{"class":50,"line":127},[48,931,932],{},"    \u002F\u002F 更新uniform颜色\n",[48,934,935],{"class":50,"line":133},[48,936,937],{},"    float timeValue = glfwGetTime();\n",[48,939,941],{"class":50,"line":940},16,[48,942,943],{},"    float greenValue = sin(timeValue) \u002F 2.0f + 0.5f;\n",[48,945,947],{"class":50,"line":946},17,[48,948,949],{},"    int vertexColorLocation = glGetUniformLocation(shaderProgram, \"ourColor\");\n",[48,951,953],{"class":50,"line":952},18,[48,954,955],{},"    glUniform4f(vertexColorLocation, 0.0f, greenValue, 0.0f, 1.0f);\n",[48,957,959],{"class":50,"line":958},19,[48,960,72],{"emptyLinePlaceholder":71},[48,962,964],{"class":50,"line":963},20,[48,965,966],{},"    \u002F\u002F 绘制三角形\n",[48,968,970],{"class":50,"line":969},21,[48,971,972],{},"    glBindVertexArray(VAO);\n",[48,974,976],{"class":50,"line":975},22,[48,977,978],{},"    glDrawArrays(GL_TRIANGLES, 0, 3);\n",[48,980,982],{"class":50,"line":981},23,[48,983,72],{"emptyLinePlaceholder":71},[48,985,987],{"class":50,"line":986},24,[48,988,989],{},"    \u002F\u002F 交换缓冲并查询IO事件\n",[48,991,993],{"class":50,"line":992},25,[48,994,995],{},"    glfwSwapBuffers(window);\n",[48,997,999],{"class":50,"line":998},26,[48,1000,1001],{},"    glfwPollEvents();\n",[48,1003,1005],{"class":50,"line":1004},27,[48,1006,136],{},[10,1008,1009,1010,1013,1014,436],{},"​\t这里的代码对之前代码是一次非常直接的修改。这次，我们在",[141,1011,1012],{},"每次迭代绘制三角形前先更新uniform值","。如果你正确更新了uniform，你会看到你的三角形",[141,1015,1016],{},"逐渐由绿变黑再变回绿色",[10,1018,1019,1020,1023,1024,1027,1028,1031,1032,1035],{},"​\t可以看到，",[141,1021,1022],{},"uniform对于设置一个在渲染迭代中会改变的属性是一个非常有用的工具","，它",[141,1025,1026],{},"也是一个在程序和着色器间数据交互的很好工具","，但假如我们",[141,1029,1030],{},"打算为每个顶点设置一个颜色的时候该怎么办","？这种情况下，我们",[141,1033,1034],{},"就不得不声明和顶点数目一样多的uniform了","。在这一问题上更好的解决方案是在顶点属性中包含更多的数据，这是我们接下来要做的事情。",[176,1037,1039],{"id":1038},"更多属性","更多属性！",[10,1041,439,1042,1045,1046,388],{},[141,1043,1044],{},"在前面的教程中，我们了解了如何填充VBO","、配置顶点属性指针以及如何把它们都储存到一个VAO里。这次，我们同样打算把颜色数据加进顶点数据中。",[141,1047,1048],{},"我们将把颜色数据添加为3个float值至vertices数组。我们将把三角形的三个角分别指定为红色、绿色和蓝色",[38,1050,1052],{"className":40,"code":1051,"language":42,"meta":43,"style":43},"float vertices[] = {\n    \u002F\u002F 位置              \u002F\u002F 颜色\n     0.5f, -0.5f, 0.0f,  1.0f, 0.0f, 0.0f,   \u002F\u002F 右下\n    -0.5f, -0.5f, 0.0f,  0.0f, 1.0f, 0.0f,   \u002F\u002F 左下\n     0.0f,  0.5f, 0.0f,  0.0f, 0.0f, 1.0f    \u002F\u002F 顶部\n};\n",[45,1053,1054,1059,1067,1072,1077,1082],{"__ignoreMap":43},[48,1055,1056],{"class":50,"line":51},[48,1057,1058],{},"float vertices[] = {\n",[48,1060,1061,1064],{"class":50,"line":57},[48,1062,1063],{},"    \u002F\u002F 位置",[48,1065,1066],{},"              \u002F\u002F 颜色\n",[48,1068,1069],{"class":50,"line":63},[48,1070,1071],{},"     0.5f, -0.5f, 0.0f,  1.0f, 0.0f, 0.0f,   \u002F\u002F 右下\n",[48,1073,1074],{"class":50,"line":68},[48,1075,1076],{},"    -0.5f, -0.5f, 0.0f,  0.0f, 1.0f, 0.0f,   \u002F\u002F 左下\n",[48,1078,1079],{"class":50,"line":75},[48,1080,1081],{},"     0.0f,  0.5f, 0.0f,  0.0f, 0.0f, 1.0f    \u002F\u002F 顶部\n",[48,1083,1084],{"class":50,"line":81},[48,1085,1086],{},"};\n",[10,1088,1089,1090,1092,1093,1096,1097,1100,1101,1103],{},"​\t由于现在有更多的数据要发送到",[141,1091,507],{},"，我们有必要去",[141,1094,1095],{},"调整一下顶点着色器","，使它能够",[141,1098,1099],{},"接收颜色值作为一个顶点属性输入","。需要注意的是我们用",[45,1102,462],{},"标识符来把aColor属性的位置值设置为1：",[38,1105,1107],{"className":40,"code":1106,"language":42,"meta":43,"style":43},"#version 330 core\nlayout (location = 0) in vec3 aPos;   \u002F\u002F 位置变量的属性位置值为 0 \nlayout (location = 1) in vec3 aColor; \u002F\u002F 颜色变量的属性位置值为 1\n\nout vec3 ourColor; \u002F\u002F 向片段着色器输出一个颜色\n\nvoid main()\n{\n    gl_Position = vec4(aPos, 1.0);\n    ourColor = aColor; \u002F\u002F 将ourColor设置为我们从顶点数据那里得到的输入颜色\n}\n",[45,1108,1109,1113,1118,1123,1127,1132,1136,1140,1144,1149,1154],{"__ignoreMap":43},[48,1110,1111],{"class":50,"line":51},[48,1112,517],{},[48,1114,1115],{"class":50,"line":57},[48,1116,1117],{},"layout (location = 0) in vec3 aPos;   \u002F\u002F 位置变量的属性位置值为 0 \n",[48,1119,1120],{"class":50,"line":63},[48,1121,1122],{},"layout (location = 1) in vec3 aColor; \u002F\u002F 颜色变量的属性位置值为 1\n",[48,1124,1125],{"class":50,"line":68},[48,1126,72],{"emptyLinePlaceholder":71},[48,1128,1129],{"class":50,"line":75},[48,1130,1131],{},"out vec3 ourColor; \u002F\u002F 向片段着色器输出一个颜色\n",[48,1133,1134],{"class":50,"line":81},[48,1135,72],{"emptyLinePlaceholder":71},[48,1137,1138],{"class":50,"line":86},[48,1139,100],{},[48,1141,1142],{"class":50,"line":92},[48,1143,106],{},[48,1145,1146],{"class":50,"line":97},[48,1147,1148],{},"    gl_Position = vec4(aPos, 1.0);\n",[48,1150,1151],{"class":50,"line":103},[48,1152,1153],{},"    ourColor = aColor; \u002F\u002F 将ourColor设置为我们从顶点数据那里得到的输入颜色\n",[48,1155,1156],{"class":50,"line":109},[48,1157,136],{},[10,1159,1160,1161,1164],{},"​\t由于我们不再使用uniform来传递片段的颜色了，现在使用",[45,1162,1163],{},"ourColor","输出变量，我们必须再修改一下片段着色器：",[38,1166,1168],{"className":40,"code":1167,"language":42,"meta":43,"style":43},"#version 330 core\nout vec4 FragColor;  \nin vec3 ourColor;\n\nvoid main()\n{\n    FragColor = vec4(ourColor, 1.0);\n}\n",[45,1169,1170,1174,1179,1184,1188,1192,1196,1201],{"__ignoreMap":43},[48,1171,1172],{"class":50,"line":51},[48,1173,517],{},[48,1175,1176],{"class":50,"line":57},[48,1177,1178],{},"out vec4 FragColor;  \n",[48,1180,1181],{"class":50,"line":63},[48,1182,1183],{},"in vec3 ourColor;\n",[48,1185,1186],{"class":50,"line":68},[48,1187,72],{"emptyLinePlaceholder":71},[48,1189,1190],{"class":50,"line":75},[48,1191,100],{},[48,1193,1194],{"class":50,"line":81},[48,1195,106],{},[48,1197,1198],{"class":50,"line":86},[48,1199,1200],{},"    FragColor = vec4(ourColor, 1.0);\n",[48,1202,1203],{"class":50,"line":92},[48,1204,136],{},[176,1206,1208,1211],{"id":1207},"复合顶点数据-的标准方法",[141,1209,1210],{},"复合顶点数据"," 的标准方法",[38,1213,1215],{"className":40,"code":1214,"language":42,"meta":43,"style":43},"        glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)0);\u002F\u002F 位置属性\n        glEnableVertexAttribArray(0);\n        glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)(3 * sizeof(float))); \u002F\u002F 颜色属性\n        glEnableVertexAttribArray(1);\n",[45,1216,1217,1222,1227,1232],{"__ignoreMap":43},[48,1218,1219],{"class":50,"line":51},[48,1220,1221],{},"        glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)0);\u002F\u002F 位置属性\n",[48,1223,1224],{"class":50,"line":57},[48,1225,1226],{},"        glEnableVertexAttribArray(0);\n",[48,1228,1229],{"class":50,"line":63},[48,1230,1231],{},"        glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)(3 * sizeof(float))); \u002F\u002F 颜色属性\n",[48,1233,1234],{"class":50,"line":68},[48,1235,1236],{},"        glEnableVertexAttribArray(1);\n",[10,1238,1239,1240,1243,1244,436],{},"​\t这段代码的核心在于设置了两个独立的顶点属性，它们从同一个 VBO 中读取数据，但具有不同的",[141,1241,1242],{},"步长（Stride）"," 和",[141,1245,1246],{},"偏移量（Offset）",[205,1248,1249],{"id":1249},"假设的顶点数据结构",[10,1251,1252],{},"​\t为了理解这些参数，我们首先假定你的 VBO 数据是按以下格式组织的（每个顶点有 6 个浮点数）：",[10,1254,1255],{},[620,1256],{"alt":1257,"src":1258},"image-20251006173313335",".\u002Fassets\u002Fimage-20251006173313335.png",[205,1260,1262],{"id":1261},"属性-1顶点位置-location-0","属性 1：顶点位置 (Location 0)",[38,1264,1269],{"className":1265,"code":1267,"language":1268},[1266],"language-text","glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)0); \u002F\u002F 位置属性\nglEnableVertexAttribArray(0);\n","text",[45,1270,1267],{"__ignoreMap":43},[10,1272,1273,1276],{},[45,1274,1275],{},"glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)0)"," 解释：",[1278,1279,1280,1300,1309,1318,1331],"ul",{},[1281,1282,1283,1289,1290,1292,1293,1295,1296,1299],"li",{},[141,1284,1285,1288],{},[45,1286,1287],{},"0"," (Index):"," 对应于",[141,1291,507],{},"中的 ",[45,1294,458],{}," 输入变量（如 ",[45,1297,1298],{},"vec3 aPos","）。",[1281,1301,1302,1308],{},[141,1303,1304,1307],{},[45,1305,1306],{},"3"," (Size):"," 位置由 3 个分量（x,y,z）组成。",[1281,1310,1311,1317],{},[141,1312,1313,1316],{},[45,1314,1315],{},"GL_FLOAT"," (Type):"," 每个分量是浮点数。",[1281,1319,1320,1326,1327,1330],{},[141,1321,1322,1325],{},[45,1323,1324],{},"6 \\* sizeof(float)"," (Stride):"," 这是最关键的。它指定了 ",[141,1328,1329],{},"从一个顶点的 x 坐标开始，到下一个顶点的 x 坐标开始，需要跳过的字节数","。因为每个顶点包含 6 个浮点数（3个位置 + 3个颜色），所以步长是 6×4=24 字节。",[1281,1332,1333,1339],{},[141,1334,1335,1338],{},[45,1336,1337],{},"(void\\*)0"," (Offset):"," 位置数据从 VBO 的**起始位置（0 字节）**开始。",[1341,1342],"hr",{},[205,1344,1346],{"id":1345},"属性-2顶点颜色-location-1","属性 2：顶点颜色 (Location 1)",[38,1348,1351],{"className":1349,"code":1350,"language":1268},[1266],"glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)(3 * sizeof(float))); \u002F\u002F 颜色属性\nglEnableVertexAttribArray(1);\n",[45,1352,1350],{"__ignoreMap":43},[10,1354,1355,1276],{},[45,1356,1357],{},"glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)(3 * sizeof(float)))",[1278,1359,1360,1374,1381,1387,1398],{},[1281,1361,1362,1367,1368,1295,1371,1299],{},[141,1363,1364,1288],{},[45,1365,1366],{},"1"," 对应于顶点着色器中的 ",[45,1369,1370],{},"layout (location = 1)",[45,1372,1373],{},"vec3 aColor",[1281,1375,1376,1380],{},[141,1377,1378,1307],{},[45,1379,1306],{}," 颜色由 3 个分量（r,g,b）组成。",[1281,1382,1383,1317],{},[141,1384,1385,1316],{},[45,1386,1315],{},[1281,1388,1389,1393,1394,1397],{},[141,1390,1391,1325],{},[45,1392,1324],{}," 步长",[141,1395,1396],{},"与位置属性相同","（24 字节），因为从一个顶点的颜色 r 开始，到下一个顶点的颜色 r 开始，仍然需要跳过整个 6 个浮点数的数据块。",[1281,1399,1400,1405,1406,1409,1410,1413],{},[141,1401,1402,1338],{},[45,1403,1404],{},"(void\\*)(3 \\* sizeof(float))"," 这是另一个关键点。它指定了",[141,1407,1408],{},"颜色数据在每个顶点数据块中开始的位置","。由于前 3 个浮点数是位置数据，所以颜色数据从 ",[141,1411,1412],{},"3×4=12 字节"," 处开始。",[10,1415,1416],{},[620,1417],{"alt":620,"src":1418},".\u002Fassets\u002Fshaders3.png",[10,1420,1421,1422,1425,1426,1429,1430,1433],{},"​\t这个图片可能不是你所期望的那种，因为我们只提供了3个颜色，而不是我们现在看到的大调色板。",[141,1423,1424],{},"这是在片段着色器中进行的所谓片段插值(Fragment Interpolation)的结果","。当渲染一个三角形时，",[141,1427,1428],{},"光栅化(Rasterization)阶段通常会造成比原指定顶点更多的片段。光栅会根据每个片段在三角形形状上所处相对位置决定这些片段的位置","。\n基于这些位置，它会插值(Interpolate)所有片段着色器的输入变量。比如说，我们有一个线段，上面的端点是绿色的，下面的端点是蓝色的。如果一个片段着色器在线段的70%的位置运行，",[141,1431,1432],{},"它的颜色输入属性就会是一个绿色和蓝色的线性结合","；更精确地说就是30%蓝 + 70%绿。",[10,1435,1436,1437,1440],{},"​\t这正是在这个三角形中发生了什么。我们有3个顶点，和相应的3个颜色，",[141,1438,1439],{},"从这个三角形的像素来看它可能包含50000左右的片段，片段着色器为这些像素进行插值颜色","。如果你仔细看这些颜色就应该能明白了：红首先变成到紫再变为蓝色。片段插值会被应用到片段着色器的所有输入属性上。",[1442,1443,1444],"style",{},"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);}",{"title":43,"searchDepth":57,"depth":57,"links":1446},[1447,1450,1451,1452,1453],{"id":178,"depth":57,"text":178,"children":1448},[1449],{"id":207,"depth":63,"text":207},{"id":414,"depth":57,"text":414},{"id":628,"depth":57,"text":629},{"id":1038,"depth":57,"text":1039},{"id":1207,"depth":57,"text":1454,"children":1455},"复合顶点数据 的标准方法",[1456,1457,1458],{"id":1249,"depth":63,"text":1249},{"id":1261,"depth":63,"text":1262},{"id":1345,"depth":63,"text":1346},"​\t在[Hello Triangle](https:\u002F\u002Flearnopengl-cn.github.io\u002F01 Getting started\u002F04 Hello Triangle\u002F)教程中提到，着色器(Shader)是运行在GPU上的小程序。这些小程序为图形渲染管线的某个特定部分而运行。从基本意义上来说，着色器只是一种把输入转化为输出的程序。着色器也是一种非常独立的程序，因为它们之间不能相互通信；它们之间唯一的沟通只有通过输入和输出。","md",{},"\u002Fcpp\u002Fopengel\u002F着色器",{"description":1459},"cpp\u002Fopengel\u002F着色器","CoMoPyIhOKvZXeZxP7HdbXe7S73OVksRQqAFaTRKJQo",1791042463670]