使用varying变量绘制彩色三角形
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, //顶点2
0.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);
//创建程序对象program
var program = gl.createProgram();
//附着顶点着色器和片元着色器到program
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
//链接program
gl.linkProgram(program);
//使用program
gl.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);
//清空canvas
gl.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, //顶点2
0.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>
670
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
