<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>MultiAttributeColor--外部传入点颜色数据---交错组织--顶点坐标&颜色--varying</title>
</head>
<body οnlοad="main();">
<canvas id="webgl" width="400" height="400">
Please use a browser that supports "canvas"
</canvas>
<script type="text/javascript" src="/WebGL/js/lib/webgl-utils.js"></script>
<script type="text/javascript" src="/WebGL/js/lib/webgl-debug.js"></script>
<script type="text/javascript" src="/WebGL/js/lib/cuon-utils.js"></script>
<script type="text/javascript" src="/WebGL/js/MultiAttributeColor.js"></script>
<script>
</script>
</body>
</html>
//顶点着色器程序
var VSHADER_SOURCE =
'attribute vec4 a_Position;\n'+ //attribute被称为存储限定符,表示接下来的变量(a_Position)
'attribute vec4 a_Color;\n'+
'varying vec4 v_Color;\n'+ //varying变量
'void main() {\n' +
'gl_Position = a_Position;\n' + //赋值 设置坐标
'gl_PointSize = 20.0;\n' + //设置尺寸 gl_PointSize为浮点型 不然报错
'v_Color = a_Color;\n' + //将数据传给片元着色器
'}\n';
//片元着色器程序
var FSHADER_SOURCE =
'#ifdef GL_ES\n' +
'precision mediump float;\n' + //精度限定,中精度
'#endif\n' +
'varying vec4 v_Color;\n' +
'void main() {\n' +
' gl_FragColor = v_Color;\n' +
'}\n';
function main(){
//获取<canvas>元素
var canvas = document.getElementById('webgl');
//获取WebGL绘图上下文
var gl = getWebGLContext(canvas);
if(!gl){
console.log('Failed to get the rendering context for WebGL');
return;
}
//初始化着色器
if(!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)){
console.log('Failed to initialize shaders');
return;
}
//获取attribute变量的存储位置--地址
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');//参数1:程序对象; 参数2:想要获取存储地址的attribute变量名称;
var a_Color = gl.getAttribLocation(gl.program, 'a_Color');
//检查
if(a_Position < 0 || a_Color < 0){
console.log('Failed to get the storage location of a_Position');
return;
}
//设置顶点位置
var n = initVertexBuffers(gl);
if(n < 0){
console.log('Failed to set the position of the vertices');
return;
}
//设置<canvas>的背景颜色-----黑色
gl.clearColor(0.0,0.0,0.0,1.0);
//清空<canvas>
gl.clear(gl.COLOR_BUFFER_BIT);
//绘制三个点 draw绘制
gl.drawArrays(gl.TRIANGLES, 0, n);//n is 3
}
function initVertexBuffers(gl){
//设置点的位置&尺寸
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 vertexColorBuffer = gl.createBuffer();
if(!vertexColorBuffer){
console.log('vertexColorBuffer Failed to create the buffer object');
return -1;
}
var n = 3;//点的个数
//将缓冲区对象绑定到目标
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');
//将缓冲区对象分配给a_Position变量
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 5, 0);
//连接a_Position变量与分配给它的缓冲区对象
gl.enableVertexAttribArray(a_Position);
var a_Color = gl.getAttribLocation(gl.program, 'a_Color');
gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 5, FSIZE * 2);
gl.enableVertexAttribArray(a_Color);
return n;
}
//gl.vertexAttribPointer(localhost, size, type, normalized, stride, offset);的步进和偏移参数
//localhost:指定待分配attribute变量的存储位置。
//size:指定缓冲区中每个顶点的分量个数(1 到 4)。
//type:指定数据个数(列如,gl.Float)。
//normalize:true 或 false,表明是否将非浮点型的数据归一化到[0,1]或[-1,1]区间
//stride:指定相邻两个顶点间的字节数,默认为0
//offset:指定缓冲区对象中的偏移量(以字节为单位),既attribute变量从缓冲区中的何处开始存储。如果是从起始位置开始,该参数应设为0
//WebGl允许我们将顶点的坐标和尺寸数据打包到同一缓冲区对象中,并通过某种机制分别访问缓冲区对象中不同种类的数据:
//交错组织(interleaving) 将几种“逐顶点”的数据(坐标和尺寸)交叉存储在一个数组中,并将数组写入一个缓冲区对象。
//WebGL就需要有差别的从缓冲区中获取某种特定数据(坐标或尺寸),既使用gl.vertexAttribPointer()函数的第5个参数stride
//和第6个参数offset。
//var FSIZE = verticesSize.BYTES_PER_ELEMENT;
//将verticeSize数组中的每个元素的大小(字节数)存储到FSIZE中。类型化数组具有BYTES_PER_ELEMENT属性,
//可以从中获知数组中每个元素所占的字节数。