有两种方法可以在varying变量之前将顶点信息从JavaScript程序传递到顶点着色器。 1.attribute，2 .统一。 varying变量的作用是将数据(如顶点颜色数据)从顶点着色器传输到片段着色器，声明方法与attribute和uniform相同。 变量声明格式：存储修饰符类型变量名
在WebGL中，如果顶点着色器和片段着色器具有相同类型和名称的变量，则顶点着色器指定给该变量的值会自动传递给片段着色器。varying变量使用方法：在顶点着色器中和片元着色器中同时声明一个同名的varying变量即可
在顶点着色器和片段着色器的执行之间有两个步骤：图形装配过程(gl_Position执行的过程)。 此步骤的任务是将孤立的顶点坐标装配到几何图形中。 几何体类别由gl.drawArrays () )函数中的第一个参数决定光栅化过程。 此步骤的任务是将装配的几何图元转换为平铺图元。 平铺数是图形最终在屏幕上覆盖的像素数。
光栅化生成的切片包含坐标信息，这些坐标信息在调用片段着色器时与切片一起传递。 您可以使用片段着色器中内置的变量访问切片的坐标。
转换为薄片后，我们可以在薄片着色器内做更多的事情。 如果通过为每个切片指定不同的颜色片段着色器的内置变量类型和变量名称来编写vec4 gl_FragCoord，则该内置变量的第一个和第二个分量是canvas坐标系(窗口坐标系)中的切片(像素) 注意： varying变量varvshader _ source=` attribute vec4a _ position，顶点着色器和片段着色器的名称相同； nattribute vec4 a_Color； nvarying vec4 v_Color； nvoidmain ((ngl _ position=a _ position； ngl_PointSize=10.0； nv_Color=a_Color； n } ` varf shader _ source=` precisionmediumpfloat； nvarying vec4 v_Color； nvoidmain ((ngl _ frag color=v _ color； n}n`function main () var canvas=document.getelementbyid (web GL )； varGL=getwebglcontext(canvas )； if (！ initshaders(GL，VSHADER_SOURCE，FSHADER_SOURCE ) {return； } GL.clear color (0.0，0.0，0.0，1.0 )； varn=initvertexbuffers(GL； GL.clear(GL.color_buffer_bit； //GL.drawarrays(GL.lines，0，n )； //GL.drawArrays(GL.line_strip，0，n )； //GL.drawArrays(GL.line_loop，0，n )； //GL.drawarrays(GL.points，0，n )；//三个不同颜色的点GL.drawarrays(GL.Triangles，0，n )； //彩色三角形(}main ) functioninitvertexbuffers(GL ) /每行前两个数为顶点的x、y坐标，最后三个数为顶点的rgb三原色值varverticescolors=newfloat 32 arrry var n=3； varvertexcolorbuffer=GL.create buffer (； if (！ vertexbuffer({console.log ) ) failedtocreatethebufferobject； 返回- 1； }GL.bindbuffer(GL.Array_buffer，vertexColorBuffer )； GL.bufferdata(GL.Array_buffer，verticesColors，gl.STATIC_DRAW )； var fsize=vertices colors.bytes _ per _ element； vara_position=GL.getattriblocation (GL.program，' a _ position ' )； //WebGL系统根据stride和offset参数正确地从缓冲区中提取数据，并将其分配给着色器中的每个attribute变量进行呈现。 ///stride(5 (第五个参数)为FSIZE*5意味着verticesColors数据中有五个属于一个顶点的所有数据(包括顶点坐标和顶点坐标)//offset(6 (第六个爸爸5个一组的单元中从第0个个数开始取值(offset是指与现在考虑的数据项的最初要素的距离即偏移参数)//size )为2意味着从5个一组的单元中取出2个个数type(3 (第三个参数)为gl.FLOAT意味着数据类型为浮点数(//normalize )第四个参数)为false，意味着不对这些数据执行归一化操作的GL.vertexattrate vara_color=GL.getattriblocation (GL.program，' a _ color ' )； //自变量的含义见上面5条GL.vertexattribpointer(a_color，3，gl.FLOAT，false，FSIZE*5，FSIZE*2)； GL.enablevertexattribarray (a _ color； 返回n； }绘制结果：
为什么只要在顶点着色器中指定每个顶点的颜色，就可以最终获得具有渐变颜色效果的三角形？ 实际上，顶点颜色被指定给顶点着色器的varying变量v_Color，其值将传递给元着色器的同名同类变量。 但更准确地说，顶点着色器的v_Color变量在传递给面片着色器之前经过了插值过程。 因此，片上着色器的v_Color变量和顶点着色器的v_Color变量实际上并不相同。 因此，这样的变量称为varying变量，每个varying变量都经过这样的插值过程。 如果想详细了解这个过程，请参考《计算机图形学》的书
在WebGL中只能绘制点、线段和三角形这三种图形。 但是，从球体到立方体、游戏内的三维角色，可以由小三角形构成。 这些最基本的图形什么都能画