使用shaders 在WebGL 上色- Web APIs | MDN

之前的例子，vertex shader 並沒有指定頂點任何顏色。

In WebGL, objects are built using sets of vertices, each of which has a position and a ... SkiptomaincontentSkiptosearchSkiptoselectlanguage給開發者的網頁技術文件WebAPIsWebGLWebGLtutorial使用shaders在WebGL上色ArticleActions正體中文(繁體)ThispagewastranslatedfromEnglishbythecommunity.LearnmoreandjointheMDNWebDocscommunity.指定頂點顏色替fragment上色畫出顏色RelatedTopics WebGLAPI WebGLtutorial GettingstartedwithWebGL Adding2DcontenttoaWebGLcontext UsingshaderstoapplycolorinWebGL AnimatingobjectswithWebGL Creating3DobjectsusingWebGL UsingtexturesinWebGL LightinginWebGL AnimatingtexturesinWebGL Examplesandarticles Matrixmathfortheweb WebGLmodelviewprojection WebGLbestpractices UsingWebGLextensions Abasic2DWebGLanimationexample WebGLbyexample Interfaces WebGLRenderingContext(en-US) WebGL2RenderingContext(en-US) WebGLActiveInfo(en-US) WebGLBuffer(en-US) WebGLContextEvent(en-US) WebGLFramebuffer(en-US) WebGLProgram(en-US) WebGLQuery(en-US) WebGLRenderbuffer(en-US) WebGLSampler(en-US) WebGLShader(en-US) WebGLShaderPrecisionFormat(en-US) WebGLSync(en-US) WebGLTexture(en-US) WebGLTransformFeedback(en-US) WebGLUniformLocation(en-US) WebGLVertexArrayObject(en-US) Documentation: Contribute TheMDNproject 指定頂點顏色替fragment上色畫出顏色使用shaders在WebGL上色 «前頁 次頁» 上一篇我們建立了一個正方形平面，接下來我們要透過修改shakder來加入顏色。

指定頂點顏色WebGL中物件是由許多頂點來組成，每個頂點有自己的座標、顏色。

其他像素的屬性(顏色、位置)預設是透過計算多頂點的內差值來得到的。

之前的例子，vertexshader並沒有指定頂點任何顏色。

InWebGL,objectsarebuiltusingsetsofvertices,eachofwhichhasapositionandacolor;bydefault,allotherpixels'colors(andallitsotherattributes,includingposition)arecomputedusinginterpolation,automaticallycreatingsmoothgradients.Previously,ourvertexshaderdidn'tapplyanyspecificcolorstothevertices;betweenthisandthefragmentshaderassigningthefixedcolorofwhitetoeachpixel,theentiresquarewasrenderedassolidwhite. Let'ssaywewanttorenderagradientinwhicheachcornerofthesquareisadifferentcolor:red,blue,green,andwhite.Thefirstthingtodoistoestablishthesecolorsforthefourvertices.Todothis,wefirstneedtocreateanarrayofvertexcolors,thenstoreitintoaWebGLbuffer;we'lldothatbyaddingthefollowingcodetoourinitBuffers()function: constcolors=[ 1.0,1.0,1.0,1.0,//white 1.0,0.0,0.0,1.0,//red 0.0,1.0,0.0,1.0,//green 0.0,0.0,1.0,1.0,//blue ]; constcolorBuffer=gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER,colorBuffer); gl.bufferData(gl.ARRAY_BUFFER,newFloat32Array(colors),gl.STATIC_DRAW); return{ position:positionBuffer, color:colorBuffer, }; } 這段程式碼一開始先宣告一個陣列來存放四個四維向量，分別為四個頂點的顏色。

接下來，將陣列轉型為浮點數並存入一個新的WebGLbuffer。

為了使用這些顏色，我們需要修改vertexshader，讓他可以從buffer中取得正確的顏色。

constvsSource=` attributevec4aVertexPosition; attributevec4aVertexColor; uniformmat4uModelViewMatrix; uniformmat4uProjectionMatrix; varyinglowpvec4vColor; voidmain(void){ gl_Position=uProjectionMatrix*uModelViewMatrix*aVertexPosition; vColor=aVertexColor; } `; Thekeydifferencehereisthatforeachvertex,wepassitscolorusingavaryingtothefragmentshader.替fragment上色我們重新回顧一下，之前我們的fragmentshader如下： constfsSource=` voidmain(){ gl_FragColor=vec4(1.0,1.0,1.0,1.0); } `; 為了要讓每個pixel使用內插的顏色，我們讓gl_FragColor取得vColor的值。

constfsSource=` varyinglowpvec4vColor; voidmain(void){ gl_FragColor=vColor; } `; 這樣的改變可以使每個fragment得到利用相對位置內插法所產生顏色，而不是得到一個固定的值。

畫出顏色接下來我們要 Next,it'snecessarytoaddthecodelookuptheattributelocationforthecolorsandsetupthatattributefortheshaderprogram: constprogramInfo={ program:shaderProgram, attribLocations:{ vertexPosition:gl.getAttribLocation(shaderProgram,'aVertexPosition'), vertexColor:gl.getAttribLocation(shaderProgram,'aVertexColor'), }, ... Then,drawScene()canberevisedtoactuallyusethesecolorswhendrawingthesquare: //TellWebGLhowtopulloutthecolorsfromthecolorbuffer //intothevertexColorattribute. { constnumComponents=4; consttype=gl.FLOAT; constnormalize=false; conststride=0; constoffset=0; gl.bindBuffer(gl.ARRAY_BUFFER,buffers.color); gl.vertexAttribPointer( programInfo.attribLocations.vertexColor, numComponents, type, normalize, stride, offset); gl.enableVertexAttribArray( programInfo.attribLocations.vertexColor); } Viewthecompletecode|Openthisdemoonanewpage «前頁 次頁» Foundaproblemwiththispage?EditonGitHubSourceonGitHubReportaproblemwiththiscontentonGitHubWanttofixtheproblemyourself?SeeourContributionguide.Lastmodified:2022年8月20日,byMDNcontributors