第5章-WebGL颜色
01-操作步骤介绍
-
颜色添加步骤
- 在顶点着色器中定义一个接收外部传入颜色值的属性变量a_Color和用于传输获取到的颜色值变量v_Color
- 在片段着色器中定义一个同一类型和名称的v_Color变量接收传顶点传入的值。
- 重新传入到顶点坐标和颜色值的类型化数组
- 将数组值传入缓存中并取出,赋值给顶点的两个变量
- 接收缓存值并绘制图形和颜色
-
vertexAttribPointer 方法
-
参数 说明 第1个参数 指定待分配attribute变量的存储位置 第2个参数 指定缓存区中每个顶点的分量个数(1~4) 第3个参数 类型有,无符号字节,短整数,无符号短整数,整型,无符号整型,浮点型 第4个参数 表示是否将非浮点型的数据归到[0,1][-1,1]区间 第5个参数 相邻两个顶点的字节数。默认为0 第6个参数 表示缓存区对象的偏移量(以字节为单位),attribute 变量从缓冲区中的何处开始存储 -
案例实现
- 添加画布元素,并获取webGL对象,保存在变量中。
- 定义着色器内容,并进行附件编译。
- 使用缓存对象向顶点传入多个坐标数据。
- 根据坐标数据绘制图像。
02-着色器编译与图像绘制
- 代码实现
实例-使用着色器绘制多顶点颜色的三角图形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<canvas id="cvs"
width="200"
height="200"
style="border: dashed 1px red">
你的浏览器不支持画布元素
</canvas>
<script type="text/javascript">
//获取画布元素
var cvs=document.getElementById("cvs");
//获取到元素的上下文环境对象
var gl=cvs.getContext('webgl');
//顶点着色器变量
var VSHADER_SOURCE =
//使用存储限定符定义一个接受顶点坐标的变量
'attribute vec4 a_Position;'+
'attribute vec4 a_Color;'+
'varying vec4 v_Color;'+
'void main() {' +
//定义点的坐标并转换成变量保存
'gl_Position = a_Position; ' +
'v_Color = a_Color; ' +
'} ';
//片段着色器变量
var FSHADER_SOURCE =
'precision mediump float;'+
'varying vec4 v_Color;'+
'void main() {' +
//设置图形像素的颜色并保存
'gl_FragColor = v_Color ;' +
'}';
//新建一个用于装顶点字符串的着色器对象
var vertShader = gl.createShader(gl.VERTEX_SHADER);
//加载保存好的顶点代码字符串变量
gl.shaderSource(vertShader, VSHADER_SOURCE);
//编译顶点着色器
gl.compileShader(vertShader);
//新建一个用于装片段字符串的着色器对象
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
//加载保存好的片段代码字符串变量
gl.shaderSource(fragShader, FSHADER_SOURCE);
//编译片段着色器
gl.compileShader(fragShader);
//新建一个程序
var shaderProgram = gl.createProgram();
//分别附加两个已编译好的着色器对象
gl.attachShader(shaderProgram, vertShader);
gl.attachShader(shaderProgram, fragShader);
//链接两个附件加好的着色器程序
gl.linkProgram(shaderProgram);
//开启程序的使用
gl.useProgram(shaderProgram);
//定义一个类型数组保存顶点坐标值
var vertices = new Float32Array([
// x, y, red, green, blue
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 vertexBuffer = gl.createBuffer();
//说明缓存对象保存的类型
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
//写入坐标数据
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
//获取到数组中单个元素的字节数
var FSIZE = vertices.BYTES_PER_ELEMENT;
//获取到顶点着色器中变量
var a_Position = gl.getAttribLocation(shaderProgram, 'a_Position');
//将坐标值赋值给变量
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE*5, 0);
//开启变量值的使用
gl.enableVertexAttribArray(a_Position);
//获取到顶点着色器中变量
var a_Color = gl.getAttribLocation(shaderProgram, 'a_Color');
//将坐标值赋值给变量
gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE*5, FSIZE*2);
//开启变量值的使用
gl.enableVertexAttribArray(a_Color);
//绘制指定位置的图形
gl.drawArrays(gl.TRIANGLES, 0, 3);
</script>
</body>
</html>
效果-多顶点颜色