• varying变量 前边讲过将顶点的信息从JavaScript程序中传给顶点着色器有两种方法1.attribute,2.uniform。 varying变量的作用是从顶点着色器向片元着色器传输数据，如顶点颜色数据，声明方式同attribute和uniform。

变量声明格式： <存储限定符><类型><变量名>
在WebGL中，如果顶点着色器和片元着色器中有类型和命名都相同的varying变量，那么顶点着色器赋给该变量的值就会被自动传入片元着色器。varying变量使用方法：在顶点着色器中和片元着色器中同时声明一个同名的varying变量即可

• 在执行顶点着色器和片元着色器之间，有两个步骤：
  1. 图形装配过程（gl_Position执行的过程）：这一步的任务是，将孤立的顶点坐标装配成几何图形。几何图形的类别由gl.drawArrays()函数的第一个参数决定
  2. 光栅化过程：这一步的任务是，将装配好的几何图形转化成片元图形（片元数目就是图形最终在屏幕上所覆盖的像素数）。
     光栅化过程生成的片元都是带有坐标信息的，调用片元着色器时这些坐标信息也随片元传了进去，我们可以通过片元着色器中的内置变量来访问片元的坐标。
     被转化成片元之后，我们就可以在片元着色器内做更多的事情，如为每个片元指定不同的颜色

示例程序

// 示例：一个彩色的三角形 // varying变量负责将颜色值传给片元着色器，注意：要在顶点着色器中和片元着色器中同时声明一个同名的varying变量 var VSHADER_SOURCE = ` attribute vec4 a_Position;\n attribute vec4 a_Color;\n varying vec4 v_Color;\n void main () {\n gl_Position = a_Position;\n gl_PointSize = 10.0;\n v_Color = a_Color;\n } ` var FSHADER_SOURCE = ` precision mediump float;\n varying vec4 v_Color;\n void main(){\n gl_FragColor = v_Color;\n }\n ` function main(){ var canvas = document.getElementById('webgl'); var gl = getWebGLContext(canvas); if (!initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE)) { return; } gl.clearColor(0.0,0.0,0.0,1.0); var n = 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() function initVertexBuffers(gl) { // 每一行的前两个数为顶点的x,y坐标，后三个数为顶点的rgb三原色值 var verticesColors = new Float32Array([ 0.0, 0.5, 1.0,0.0,0.0, -0.5,-0.5, 0.0,1.0,0.0, 0.5,-0.5, 0.0,0.0,1.0 ]); var n = 3; var vertexColorBuffer = gl.createBuffer(); if (!vertexBuffer) { console.log('Failed to create the buffer object'); return -1; } gl.bindBuffer(gl.ARRAY_BUFFER,vertexColorBuffer); gl.bufferData(gl.ARRAY_BUFFER,verticesColors,gl.STATIC_DRAW); var FSIZE = verticesColors.BYTES_PER_ELEMENT; var a_Position = gl.getAttribLocation(gl.program,'a_Position'); // WebGL系统会根据stride和offset参数从缓冲区中正确地抽取出数据，依次赋值给着色器中的各个attribute变量并进行绘制 // stride（第5个参数）为FSIZE*5意味着verticesColors数据中5个数为一组是属于一个顶点的所有数据(包括顶点坐标和颜色大小等)， // offset（第6个参数）为0意味着从5个数一组的单元中的第0个数开始取值（offset代表当前考虑的数据项距离首个元素的距离，即偏移参数） // size（第2个参数）为2意味着从5个数一组的单元中取出两个数， // type(第3个参数)为gl.FLOAT意味着数据类型为浮点数 // normalize(第4个参数)为false意味着不对这些数据进行归一化操作 gl.vertexAttribPointer(a_Position,2,gl.FLOAT,false,FSIZE*5,0); gl.enableVertexAttribArray(a_Position); var a_Color = gl.getAttribLocation(gl.program,'a_Color'); // 参数含义参考上边5条 gl.vertexAttribPointer(a_Color,3,gl.FLOAT,false,FSIZE*5,FSIZE*2); gl.enableVertexAttribArray(a_Color); return n; } 

绘制结果：

讯享网

为什么在顶点着色器中只是指定了每个顶点的颜色，最后得到了一个具有渐变色彩效果的三角形？事实上，我们把顶点的颜色赋值给了顶点着色器中的varying变量v_Color，它的值被传给片元着色器中的同名，同类型变量。但是更准确的说，顶点着色器中的v_Color变量在传入片元着色器之前经过了内插过程。所以，片元着色器中的v_Color变量和顶点着色器中的v_Color变量实际上并不是一回事，这也正是我们将这种变量称为varying(变化的）变量的原因，每个varying变量都会经过这样的内插过程。如果想深入了解这一过程，参考《计算机图形学》一书



WebGL只能绘制三种图形：点，线段，三角形。但是，从球体到立方体，到游戏中的三维角色，都可以由小的三角形组成。以上这些最基本的图形可以绘制出任何东西