简介JavaScriptWebGL绘制一个表面，认为我们可以尝试更复杂的。没想到设置颜色的时候出了问题。OriginMyGitHub设置颜色在前面的例子中，设置了单一的颜色，但是每个顶点都可以有自己的颜色信息。基于绘制三角形，主要有以下几个方面的变化：datavertexshaderfragmentshaderbuffercolordatadata颜色数据有4个分量：R,G,B,A.letcolors=[1.0,0.0,0.0,1.0,//红色0.0,1.0,0.0,1.0,//绿色0.0,0.0,1.0,1.0,//蓝色];顶点着色器之前只提供了位置变量，对于颜色，需要额外提供一个颜色变量进行存储。另外，还需要输出相应的颜色给下一个stage。constsource=`属性vec3vertexPos;属性vec4顶点颜色；改变vec4vColor；voidmain(void){gl_Position=vec4(vertexPos,1);vColor=顶点颜色；顶点着色器向片段着色器传递值的一种方式。片段着色器片段着色器接受相应的变量也需要声明。constfragmentSource=`precisionhighpfloat;改变vec4vColor；voidmain(void){gl_FragColor=vColor;}`;这里有变量，需要使用precisionhighpfloat来设置片段着色器的浮点精度。顶点着色器有一个不需要显式设置的默认精度。缓冲颜色数据顶点位置数据被缓冲，颜色数据也被缓冲。/***缓冲颜色数据*@param{*}glWebGL上下文*@param{*}shaderProgram着色器程序*@param{*}colorData颜色数据*/functionsetColorBuffers(gl,shaderProgram,colorData){//创建空缓冲区对象constbuffer=gl.createBuffer();//绑定目标gl.bindBuffer(gl.ARRAY_BUFFER,buffer);//WebGL不支持直接使用JavaScript原始数组类型，需要转换constdataFormat=newFloat32Array(colorData);//初始化数据存储gl.bufferData(gl.ARRAY_BUFFER,dataFormat,gl.DYNAMIC_DRAW);//获取对应的数据索引，变量对应顶点shader中的constvertexPos=gl.getAttribLocation(shaderProgram,"vertexColor");//解析顶点数据gl.vertexAttribPointer(vertexPos,4,gl.FLOAT,false,0,0);//启用顶点属性，默认情况下禁用。gl.enableVertexAttribArray(vertexPos);}效果这是一个例子，效果如下：发现颜色渐变发散，这是因为在光栅化过程中，颜色在转换为像素时进行了插值。程序中只定义了三个顶点的颜色，它们之间的像素颜色会随着像素位置的变化而变化，相邻像素之间同一种颜色的差值是固定值。如果不想要这种效果，可以在片段着色器中自定义。动态定制示例这是一个示例，片段着色器的主要变化：constfragmentSource=`precisionhighpfloat;改变vec4vColor；intfindMax(floatr,floatg,floatb){if(r>g&&r>b){返回0;}如果(g>r&&g>b){返回1;}返回2;}voidmain(void){floatred=vColor.r;浮动绿色=vColor.g;浮动蓝色=vColor.b;intmax=findMax(红、绿、蓝);vec4finalColor=vColor;如果（最大==0）{finalColor=vec4（1.0，0.0，0.0，1.0）;}elseif(max==1){finalColor=vec4(0.0,1.0,0.0,1.0);}elseif(max==2){finalColor=vec4(0.0,0.0,1.0,1.0);}gl_FragColor=finalColor;}`;findMax方法将颜色的分量进行比较，最终的颜色设置为最大的那个。以下是效果：参考资料使用shadersMDNWebGLlessonsshaderWebGLbasicdrawingthree:coloringobjects
