1.demo效果

如上图，绘制了一个顶点不同颜色的三角形。是使用varying变量在顶点着色器给片元着色器传值绘制的图形

2.相关知识点

2.1 varying变量介绍

之前已经学习了attribute变量和uniform变量，varying变量的声明与它们一样，也有格式要求：<存储限定符><类型><变量名>。例如varying vec4 v_Color。
varying变量的主要作用是从顶点着色器向片元着色器传输数据

2.2 图形装配和格栅化

如上图， 图形装配 过程其实就是调用gl.drawArrays()函数的过程，通过图形装配过程，将图形的孤立的点装配成几何图形。而 光栅化 就是把装配好的图形转化为片元的过程，光栅化之后我们就能得到组成图形的所有片元。接着片元着色器就开始处理每一个片元，计算出它们的颜色并写入缓冲区

2.3 内插过程

示例中我们得到了一个渐变色的三角形，实际上我们只把三角形顶点的颜色给了顶点着色器中的varying变量v_Color,在顶点着色器向片元着色器传入varying变量v_Color的过程中经过了 内插过程 ，内插过程就是两个顶点之间的所有片元的颜色，都会根据这两个顶点的颜色和片元数量被重新计算出来，然后把每一个片元的颜色信息传给片元着色器中的v_Color变量

3. varying变量使用步骤

3.1 顶点着色器中声明varying变量

在顶点着色器中需要声明attribute变量a_Color和varying变量v_Color，并在main函数中将a_Color赋值给v_Color

//顶点着色器
var VSHADER_SOURCE = '' +'attribute vec4 a_Position;\n' + //声明attribute变量a_Position，用来存放顶点位置信息'attribute vec4 a_Color;\n' + //声明attribute变量a_Color，用来存放顶点颜色信息'varying vec4 v_Color;\n' + //声明varying变量v_Color，用来存放片元颜色信息'void main(){\n' +'  gl_Position = a_Position;\n' + //变量a_Position赋值给顶点着色器内置变量gl_Position'  v_Color = a_Color;\n' + //将颜色数据传给片元着色器，'}\n';

3.2 片元着色器中使用varying变量

在片元着色器中同样也要先声明varying变量v_Color，这样片元着色器与顶点着色器通过v_Color变量建立了通讯通道，就可以接收顶点着色器传送的片元颜色信息，同时将接受到的颜色信息赋值给片元着色器的内置变量gl_FragColor

//片元着色器
var FSHADER_SOURCE = '' +'precision mediump float;\n' + // 设置精度'varying vec4 v_Color;\n' + //声明varying变量v_Color，用来接收顶点着色器传送的片元颜色信息'void main(){\n' +//将varying变量v_Color接收的颜色信息赋值给内置变量gl_FragColor' gl_FragColor = v_Color;\n' +'}\n';

3.3 通过缓冲区对象给attribute变量传值

创建类型化数组。这里创建的类型化数组用来存放顶点坐标和顶点颜色信息，大家看一下注释，这个数组中有三行，每一行是一个顶点，在以顶点1为例，前两个元素是顶点坐标，后三个元素是顶点颜色信息。
创建缓冲区对象并绑定和写入数据。这一步需要创建缓冲区对象，绑定目标，并将创建的存储顶点坐标和颜色信息的类型化数组写入它
a_Position的分配缓存与开启。在这里我们注意一下函数 gl.vertexAttribPointer() 的第五个参数和第六个参数，第五个参数stride 指的是每一个顶点的大小，传值为FSIZE * 5，其实就是告诉缓存，每取一个点，我要取五个数，第六个参数offset 指的是缓冲区对象中的偏移量，我们设置为0，因为每一个点，它都是从开始取值
a_Color的分配缓存与开启。在这里我们也注意一下gl.vertexAttribPointer() 的参数，第五个参数stride 与上一次分配a_Position一样，也值为FSIZE * 5，因为每个点五个元素没有改变。 第六个参数offset 这次设置为FSIZE * 2，因为每一个顶点的前两个元素是顶点坐标，后三个元素是颜色信息

//初始化顶点坐标和颜色
function initVertexBuffers(gl) {var verticesColors = new Float32Array([//顶点坐标     顶点颜色//------\\  //---------\\0.0, 0.5,   1.0, 0.0, 0.0, //顶点1-0.5, -0.5, 1.0, 1.0, 0.0, //顶点20.5, -0.5,  0.0, 1.0, 0.0, //顶点3])//创建缓冲区对象var vertexColorBuffer = gl.createBuffer();if (!vertexColorBuffer) {console.log('创建缓冲区对象失败！')return -1}//将顶点坐标和颜色写入缓冲区对象gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer)gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW)//获取类型化数组中每个元素的大小var FSIZE = verticesColors.BYTES_PER_ELEMENT//获取着色器attribute变量a_Position的存储地址, 分配缓存并开启var a_Position = gl.getAttribLocation(gl.program, 'a_Position');gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 5, 0)gl.enableVertexAttribArray(a_Position)//获取着色器attribute变量a_Color的存储地址, 分配缓存并开启var a_Color = gl.getAttribLocation(gl.program, 'a_Color');gl.vertexAttribPointer(a_Color, 2, gl.FLOAT, false, FSIZE * 5, FSIZE * 2)gl.enableVertexAttribArray(a_Color)return verticesColors.length / 5
}

4.demo代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title></title>
</head><body><!--通过canvas标签创建一个400px*400px大小的画布--><canvas id="webgl" width="400" height="400"></canvas><script>//顶点着色器var VSHADER_SOURCE = '' +'attribute vec4 a_Position;\n' + //声明attribute变量a_Position，用来存放顶点位置信息'attribute vec4 a_Color;\n' + //声明attribute变量a_Color，用来存放顶点颜色信息'varying vec4 v_Color;\n' + //声明varying变量v_Color，用来存放片元颜色信息'void main(){\n' +'  gl_Position = a_Position;\n' + //变量a_Position赋值给顶点着色器内置变量gl_Position'  v_Color = a_Color;\n' + //将颜色数据传给片元着色器，'}\n';//片元着色器var FSHADER_SOURCE = '' +'precision mediump float;\n' + // 设置精度'varying vec4 v_Color;\n' + //声明varying变量v_Color，用来接收顶点着色器传送的片元颜色信息'void main(){\n' +//将varying变量v_Color接收的颜色信息赋值给内置变量gl_FragColor' gl_FragColor = v_Color;\n' +'}\n';//初始化着色器函数function initShader(gl, VSHADER_SOURCE, FSHADER_SOURCE) {//创建顶点着色器对象var vertexShader = gl.createShader(gl.VERTEX_SHADER);//创建片元着色器对象var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);//引入顶点、片元着色器源代码gl.shaderSource(vertexShader, VSHADER_SOURCE);gl.shaderSource(fragmentShader, FSHADER_SOURCE);//编译顶点、片元着色器gl.compileShader(vertexShader);gl.compileShader(fragmentShader);//创建程序对象programvar program = gl.createProgram();//附着顶点着色器和片元着色器到programgl.attachShader(program, vertexShader);gl.attachShader(program, fragmentShader);//链接programgl.linkProgram(program);//使用programgl.useProgram(program);gl.program = program//返回程序program对象return program;}function init() {//通过getElementById()方法获取canvas画布var canvas = document.getElementById('webgl');//通过方法getContext()获取WebGL上下文var gl = canvas.getContext('webgl');//初始化着色器initShader(gl, VSHADER_SOURCE, FSHADER_SOURCE);// 设置canvas的背景色gl.clearColor(0.0, 0.0, 0.0, 1.0);//清空canvasgl.clear(gl.COLOR_BUFFER_BIT);//初始化顶点坐标和颜色var n = initVertexBuffers(gl)//绘制三角形gl.drawArrays(gl.TRIANGLES, 0, n)}//初始化顶点坐标和颜色function initVertexBuffers(gl) {var verticesColors = new Float32Array([//顶点坐标        顶点颜色//------\\  //---------\\0.0, 0.5,   1.0, 0.0, 0.0, //顶点1-0.5, -0.5, 1.0, 1.0, 0.0, //顶点20.5, -0.5,  0.0, 1.0, 0.0, //顶点3])//创建缓冲区对象var vertexColorBuffer = gl.createBuffer();if (!vertexColorBuffer) {console.log('创建缓冲区对象失败！')return -1}//将顶点坐标和颜色写入缓冲区对象gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer)gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW)//获取类型化数组中每个元素的大小var FSIZE = verticesColors.BYTES_PER_ELEMENT//获取着色器attribute变量a_Position的存储地址, 分配缓存并开启var a_Position = gl.getAttribLocation(gl.program, 'a_Position');gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 5, 0)gl.enableVertexAttribArray(a_Position)//获取着色器attribute变量a_Color的存储地址, 分配缓存并开启var a_Color = gl.getAttribLocation(gl.program, 'a_Color');gl.vertexAttribPointer(a_Color, 2, gl.FLOAT, false, FSIZE * 5, FSIZE * 2)gl.enableVertexAttribArray(a_Color)return verticesColors.length / 5}init()</script>
</body></html>

WebGL入门(十二)-使用varying变量在顶点着色器给片元着色器传值，绘制彩色三角形相关推荐

[WebGL入门]十二，模型数据和顶点属性
注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上［lufy:］.另外.鄙人webgl研究还不够深入,一些专业词语.假设翻译有误.欢迎大家指 ...
WebGL入门(十九)-三维视图通过调整正射投影矩阵/盒状可视空间实现三角形的显示与消失
三维视图正射投影矩阵 1.demo效果 2.相关知识点 2.1 正射投影 2.2 Matrix4.setOrtho()函数 3. demo代码 1.demo效果如上,通过上下键调整正投影矩阵参数fa ...
WebGL入门(十六)-三维视图模型原理，视点、视线、观察点、上方向
三维视图模型原理 1.demo效果 2.相关知识点 2.1 视点.视线.观察点.上方向 2.2 创建视图矩阵 3. demo代码 1.demo效果如上图,这个demo中三个不同颜色的三角形展示在三维 ...
WebGL入门(十五)-使用多幅纹理/纹理叠加
使用多幅纹理/纹理叠加 1.demo效果 2.实现要点 2.1 顶点着色器中声明varying变量v_TexCoord 2.2 片元着色器中多纹理处理 2.3 外部纹理图像加载 2.4 纹理叠加处理与 ...
R语言七天入门教程二：认识变量与运算符
R语言七天入门教程二:认识变量与运算符一.什么是变量 1.变量顾名思义,我们可以将变量理解为"可以改变的量",是计算机语言中能储存计算结果或能表示值的抽象概念.这里的值可以是数 ...
Mysql学习总结十二：系统变量、用户变量、定义条件和处理程序
Mysql学习总结十二:系统变量.用户变量.定义条件和处理程序 1.变量 1.1 系统变量 1.1.1 系统变量的分类 1.1.2 查看系统变量 1.2 用户变量 1.2.1 用户变量的分类 1.2. ...
网络编程懒人入门(十二)：快速读懂Http/3协议，一篇就够！
本文中文译文由作者"ably.io"发布于公众号"高可用架构",译文原题:<深入解读HTTP3的原理及应用>.英文原题:<HTTP/3 dee ...
IM开发者的零基础通信技术入门(十二)：上网卡顿？网络掉线？一文即懂！
[来源申明]本文引用了微信公众号"鲜枣课堂"的<上网慢?经常掉线?这篇文章告诉你该怎么办!>文章内容.为了更好的内容呈现,即时通讯网在引用和收录时内容有改动,转载时请注 ...
顶点着色器到片元着色器的过程，varying变量
varying 变量: 从顶点着色器向片元着色器中传入数据. varying 变量只能是float(以及相关的vec2,vec3,vec4,mat2,mat3,mat4). 前面我们了解到顶点着色器是 ...
Android入门(十二)SQLite事务、升级数据库
原文链接:http://www.orlion.ga/610/ 一.事务 SQLite支持事务,看一下Android如何使用事务:比如 Book表中的数据都已经很老了,现在准备全部废弃掉替换成新数据,可 ...

WebGL入门(十二)-使用varying变量在顶点着色器给片元着色器传值，绘制彩色三角形

使用varying变量绘制彩色三角形