WebGL学习笔记二
前一章就是第二章主要学的是通过WebGL实现先是在webGL内赋值，但是不实用后来通过定义attribute和uniform存储限定符来将javascript中的数据传到webGL中，大致的流程是1、在js中定义存储限定符2，在js中获取canvas 在js中获取隐藏浏览器兼容性的上下文环境3、将定义的带有存储限定符的参数和上下文环境通过初始化函数进行参数初始化4、在js中获取相应的定以了存储限定符的变量的存储位置并赋值给js变量5、通过webGL函数将webGL位置和数据作为参数然后完成赋值6、设置背景颜色7、清除颜色8、绘制图形（点，线，三角形、矩形）
第三章的内容包括绘制多个点，将大量数据放入缓冲区（创建、写数据、赋值、激活），然后将大量的点显示在canvas上完成点三角形和矩形的绘制。再就是介绍了矩阵重点是4*4矩阵来实现图形的旋转，平移缩放。关于矩阵式如何控制图形变换的且看如下数学公式
1、
展开2 得3、x'=r*cosAcosB-r*sinA*sinB，y'=r*sinAcosB+r*cosAsinB 1、3削去r A得 x'=xcosB-y*sinB,y'=x*sinB+y*cosB 从而只要输入了角度B就能得到移动后的新坐标实现了旋转，但还不是矩阵变换矩阵书写不方便直接上结果 var a=new Float32Array([cosB,-sinB,0.0, sinB,cosB,0.0 ,0.0,0.0,1.0]);这就是3*3的旋转矩阵，同理加上平移后的矩阵为var a=new Float32Array([cosB,-sinB,0.0,tx, sinB,cosB,0.0,ty ,0,0.0,1.0,tz,0.0,0.0,0.0,1.0]);4*4矩阵那么放缩矩阵亦是同理。
先看效果图。前后对比
原图，基准
上代码，用到的js文件在上一篇中已经写了直接复制就能用。
<!DOCTYPE html>
<html>
<head>
<title>RotatedTriangle_Matrix.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script src="js/cuon-matrix.js"></script>
<script src="js/cuon-utils.js"></script>
<script src="js/webgl-debug.js"></script>
<script src="js/webgl-utils.js"></script>
<script type="text/javascript">
var VSHADER_SOURCE=//定点着色器
'attribute vec4 a_Position;\n'+//定义vec4的变量 并且声明该存储限定符是attribute型的
'uniform mat4 u_xformMatrix;\n'+//存储限定符 定义位移量
'void main(){\n'+
'gl_Position=u_xformMatrix*a_Position;\n'+
'}\n';
var FSHADER_SOURCE=//片元着色器
'void main(){\n'+
'gl_FragColor=vec4(0.0,1.0,0.0,1.0);\n'+
'}\n';
var tx=0.0,ty=0.0,tz=0.0;
var ANGLE=4.0;
function main(){
var canvas=document.getElementById("webgl");
var gl=getWebGLContext(canvas);
if(!gl){
console.log("gl load fail!");
return;
}
if(!initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE)){//初始化着色器
console.log("fail init shader()!");
return ;
}
//将角度转化为弧度
var radian=Math.PI*ANGLE/180.0;
//将弧度转化为响应的正玄和余玄值
var cosB=Math.cos(radian);
var sinB=Math.sin(radian);
//alert(cosB+","+sinB);
//获取位置
//通过该矩阵可以进行平移和旋转
var xformMatrix=new Float32Array([
cosB,-sinB,0.0,tx,
sinB,cosB,0.0,ty,
0.0,0.0,1.0,tz,
tx,ty,tz,1.0
]);
var u_xformMatrix=gl.getUniformLocation(gl.program,'u_xformMatrix');
gl.uniformMatrix4fv(u_xformMatrix,false,xformMatrix);
var n=initVertexBuffers(gl);
if(n<0){
console.log("failed to set the positions of the vertices");
return;
}
var a_Position=gl.getAttribLocation(gl.program,'a_Position');//获得attribute的变量
if(a_Position<0){
console.log("fail get the PointPosition location!");
return ;
}
gl.clearColor(0.0,0.0,0.0,1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
//gl.drawArrays(gl.LINE_LOOP,0,n);//mode 参数POINTERS可以绘制多个点 LINES 绘制多条直线 LINE_STRIP绘制一系列连接起来的线段不包括首尾LINE_LOOP绘制一系列连接起来的线段包括首尾
//gl.drawArrays(gl.TRIANGLE_FAN,0,n);//mode 参数TRIANGLES表示绘制三角形 三个点是一组多余的忽略TRIANGLE_STRIP绘制的三角形三个定点一组第一个三角形取前三个第二个取2，3，4 以此类推TRIANGLE_FAN 最后被绘制的一条边与下一个点构成新三角形
gl.drawArrays(gl.TRIANGLES,0,n);//mode可以绘制出矩形
function initVertexBuffers(gl){
var vertices=new Float32Array([-0.5,0.5,-0.5,-0.5,0.5,-0.5,-1.0,1.0,-1.0,-1.0,0.0,0.0]);//类型化数组
var n=3;//点的个数
var vertexBuffer=gl.createBuffer();//在webGL中创建缓冲区
if(!vertexBuffer){
console.log("failed to create the buffer object!");
return -1;
}
gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);//将缓冲区与ARRAY_BUFFER绑定就是指定了缓冲区的用途
gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW);//往缓冲区写数据 STATIC_DRAW对缓冲区优化
var a_Position=gl.getAttribLocation(gl.program,'a_Position');
gl.vertexAttribPointer(a_Position,2,gl.FLOAT,false,0,0);//将缓冲区的数据传入分配给attribute对象 2是定点的分量个数
gl.enableVertexAttribArray(a_Position);//开启attribute变量
return n;
}
}
</script>
</head>
<body onload="main()">
<canvas id="webgl" width="600" height="400"></canvas>
</body>
</html>
<html>
<head>
<title>RotatedTriangle_Matrix.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script src="js/cuon-matrix.js"></script>
<script src="js/cuon-utils.js"></script>
<script src="js/webgl-debug.js"></script>
<script src="js/webgl-utils.js"></script>
<script type="text/javascript">
var VSHADER_SOURCE=//定点着色器
'attribute vec4 a_Position;\n'+//定义vec4的变量 并且声明该存储限定符是attribute型的
'uniform mat4 u_xformMatrix;\n'+//存储限定符 定义位移量
'void main(){\n'+
'gl_Position=u_xformMatrix*a_Position;\n'+
'}\n';
var FSHADER_SOURCE=//片元着色器
'void main(){\n'+
'gl_FragColor=vec4(0.0,1.0,0.0,1.0);\n'+
'}\n';
var tx=0.0,ty=0.0,tz=0.0;
var ANGLE=4.0;
function main(){
var canvas=document.getElementById("webgl");
var gl=getWebGLContext(canvas);
if(!gl){
console.log("gl load fail!");
return;
}
if(!initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE)){//初始化着色器
console.log("fail init shader()!");
return ;
}
//将角度转化为弧度
var radian=Math.PI*ANGLE/180.0;
//将弧度转化为响应的正玄和余玄值
var cosB=Math.cos(radian);
var sinB=Math.sin(radian);
//alert(cosB+","+sinB);
//获取位置
//通过该矩阵可以进行平移和旋转
var xformMatrix=new Float32Array([
cosB,-sinB,0.0,tx,
sinB,cosB,0.0,ty,
0.0,0.0,1.0,tz,
tx,ty,tz,1.0
]);
var u_xformMatrix=gl.getUniformLocation(gl.program,'u_xformMatrix');
gl.uniformMatrix4fv(u_xformMatrix,false,xformMatrix);
var n=initVertexBuffers(gl);
if(n<0){
console.log("failed to set the positions of the vertices");
return;
}
var a_Position=gl.getAttribLocation(gl.program,'a_Position');//获得attribute的变量
if(a_Position<0){
console.log("fail get the PointPosition location!");
return ;
}
gl.clearColor(0.0,0.0,0.0,1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
//gl.drawArrays(gl.LINE_LOOP,0,n);//mode 参数POINTERS可以绘制多个点 LINES 绘制多条直线 LINE_STRIP绘制一系列连接起来的线段不包括首尾LINE_LOOP绘制一系列连接起来的线段包括首尾
//gl.drawArrays(gl.TRIANGLE_FAN,0,n);//mode 参数TRIANGLES表示绘制三角形 三个点是一组多余的忽略TRIANGLE_STRIP绘制的三角形三个定点一组第一个三角形取前三个第二个取2，3，4 以此类推TRIANGLE_FAN 最后被绘制的一条边与下一个点构成新三角形
gl.drawArrays(gl.TRIANGLES,0,n);//mode可以绘制出矩形
function initVertexBuffers(gl){
var vertices=new Float32Array([-0.5,0.5,-0.5,-0.5,0.5,-0.5,-1.0,1.0,-1.0,-1.0,0.0,0.0]);//类型化数组
var n=3;//点的个数
var vertexBuffer=gl.createBuffer();//在webGL中创建缓冲区
if(!vertexBuffer){
console.log("failed to create the buffer object!");
return -1;
}
gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);//将缓冲区与ARRAY_BUFFER绑定就是指定了缓冲区的用途
gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW);//往缓冲区写数据 STATIC_DRAW对缓冲区优化
var a_Position=gl.getAttribLocation(gl.program,'a_Position');
gl.vertexAttribPointer(a_Position,2,gl.FLOAT,false,0,0);//将缓冲区的数据传入分配给attribute对象 2是定点的分量个数
gl.enableVertexAttribArray(a_Position);//开启attribute变量
return n;
}
}
</script>
</head>
<body onload="main()">
<canvas id="webgl" width="600" height="400"></canvas>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>ScaledTriangle.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script src="js/cuon-matrix.js"></script>
<script src="js/cuon-utils.js"></script>
<script src="js/webgl-debug.js"></script>
<script src="js/webgl-utils.js"></script>
<script type="text/javascript">
var VSHADER_SOURCE=//定点着色器
'attribute vec4 a_Position;\n'+//定义vec4的变量 并且声明该存储限定符是attribute型的
'uniform mat4 u_xformMatrix;\n'+//存储限定符 定义位移量
'void main(){\n'+
'gl_Position=u_xformMatrix*a_Position;\n'+
'}\n';
var FSHADER_SOURCE=//片元着色器
'void main(){\n'+
'gl_FragColor=vec4(0.0,1.0,0.0,1.0);\n'+
'}\n';
var tx=0.0,ty=0.0,tz=0.0;
var ANGLE=40.0;
var Sx=1.0,Sy=0.5,Sz=1.0;
function main(){
var canvas=document.getElementById("webgl");
var gl=getWebGLContext(canvas);
if(!gl){
console.log("gl load fail!");
return;
}
if(!initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE)){//初始化着色器
console.log("fail init shader()!");
return ;
}
//将角度转化为弧度
var radian=Math.PI*ANGLE/180.0;
//将弧度转化为响应的正玄和余玄值
var cosB=Math.cos(radian);
var sinB=Math.sin(radian);
//alert(cosB+","+sinB);
//获取位置
//通过该矩阵可以进行平移和旋转
var xformMatrix=new Float32Array([
Sx,0.0,0.0,0.0,
0.0,Sy,0.0,0.0,
0.0,0.0,Sz,0.0,
0.0,0.0,0.0,1.0,
]);
var u_xformMatrix=gl.getUniformLocation(gl.program,'u_xformMatrix');
gl.uniformMatrix4fv(u_xformMatrix,false,xformMatrix);
var n=initVertexBuffers(gl);
if(n<0){
console.log("failed to set the positions of the vertices");
return;
}
var a_Position=gl.getAttribLocation(gl.program,'a_Position');//获得attribute的变量
if(a_Position<0){
console.log("fail get the PointPosition location!");
return ;
}
gl.clearColor(0.0,0.0,0.0,1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
//gl.drawArrays(gl.LINE_LOOP,0,n);//mode 参数POINTERS可以绘制多个点 LINES 绘制多条直线 LINE_STRIP绘制一系列连接起来的线段不包括首尾LINE_LOOP绘制一系列连接起来的线段包括首尾
//gl.drawArrays(gl.TRIANGLE_FAN,0,n);//mode 参数TRIANGLES表示绘制三角形 三个点是一组多余的忽略TRIANGLE_STRIP绘制的三角形三个定点一组第一个三角形取前三个第二个取2，3，4 以此类推TRIANGLE_FAN 最后被绘制的一条边与下一个点构成新三角形
gl.drawArrays(gl.TRIANGLES,0,n);//mode可以绘制出矩形
function initVertexBuffers(gl){
var vertices=new Float32Array([-0.5,0.5,-0.5,-0.5,0.5,-0.5,-1.0,1.0,-1.0,-1.0,0.0,0.0]);//类型化数组
var n=3;//点的个数
var vertexBuffer=gl.createBuffer();//在webGL中创建缓冲区
if(!vertexBuffer){
console.log("failed to create the buffer object!");
return -1;
}
gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);//将缓冲区与ARRAY_BUFFER绑定就是指定了缓冲区的用途
gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW);//往缓冲区写数据 STATIC_DRAW对缓冲区优化
var a_Position=gl.getAttribLocation(gl.program,'a_Position');
gl.vertexAttribPointer(a_Position,2,gl.FLOAT,false,0,0);//将缓冲区的数据传入分配给attribute对象 2是定点的分量个数
gl.enableVertexAttribArray(a_Position);//开启attribute变量
return n;
}
}
</script>
</head>
<body onload="main()">
<canvas id="webgl" width="600" height="400"></canvas>
</body>
</html>
<html>
<head>
<title>ScaledTriangle.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script src="js/cuon-matrix.js"></script>
<script src="js/cuon-utils.js"></script>
<script src="js/webgl-debug.js"></script>
<script src="js/webgl-utils.js"></script>
<script type="text/javascript">
var VSHADER_SOURCE=//定点着色器
'attribute vec4 a_Position;\n'+//定义vec4的变量 并且声明该存储限定符是attribute型的
'uniform mat4 u_xformMatrix;\n'+//存储限定符 定义位移量
'void main(){\n'+
'gl_Position=u_xformMatrix*a_Position;\n'+
'}\n';
var FSHADER_SOURCE=//片元着色器
'void main(){\n'+
'gl_FragColor=vec4(0.0,1.0,0.0,1.0);\n'+
'}\n';
var tx=0.0,ty=0.0,tz=0.0;
var ANGLE=40.0;
var Sx=1.0,Sy=0.5,Sz=1.0;
function main(){
var canvas=document.getElementById("webgl");
var gl=getWebGLContext(canvas);
if(!gl){
console.log("gl load fail!");
return;
}
if(!initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE)){//初始化着色器
console.log("fail init shader()!");
return ;
}
//将角度转化为弧度
var radian=Math.PI*ANGLE/180.0;
//将弧度转化为响应的正玄和余玄值
var cosB=Math.cos(radian);
var sinB=Math.sin(radian);
//alert(cosB+","+sinB);
//获取位置
//通过该矩阵可以进行平移和旋转
var xformMatrix=new Float32Array([
Sx,0.0,0.0,0.0,
0.0,Sy,0.0,0.0,
0.0,0.0,Sz,0.0,
0.0,0.0,0.0,1.0,
]);
var u_xformMatrix=gl.getUniformLocation(gl.program,'u_xformMatrix');
gl.uniformMatrix4fv(u_xformMatrix,false,xformMatrix);
var n=initVertexBuffers(gl);
if(n<0){
console.log("failed to set the positions of the vertices");
return;
}
var a_Position=gl.getAttribLocation(gl.program,'a_Position');//获得attribute的变量
if(a_Position<0){
console.log("fail get the PointPosition location!");
return ;
}
gl.clearColor(0.0,0.0,0.0,1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
//gl.drawArrays(gl.LINE_LOOP,0,n);//mode 参数POINTERS可以绘制多个点 LINES 绘制多条直线 LINE_STRIP绘制一系列连接起来的线段不包括首尾LINE_LOOP绘制一系列连接起来的线段包括首尾
//gl.drawArrays(gl.TRIANGLE_FAN,0,n);//mode 参数TRIANGLES表示绘制三角形 三个点是一组多余的忽略TRIANGLE_STRIP绘制的三角形三个定点一组第一个三角形取前三个第二个取2，3，4 以此类推TRIANGLE_FAN 最后被绘制的一条边与下一个点构成新三角形
gl.drawArrays(gl.TRIANGLES,0,n);//mode可以绘制出矩形
function initVertexBuffers(gl){
var vertices=new Float32Array([-0.5,0.5,-0.5,-0.5,0.5,-0.5,-1.0,1.0,-1.0,-1.0,0.0,0.0]);//类型化数组
var n=3;//点的个数
var vertexBuffer=gl.createBuffer();//在webGL中创建缓冲区
if(!vertexBuffer){
console.log("failed to create the buffer object!");
return -1;
}
gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);//将缓冲区与ARRAY_BUFFER绑定就是指定了缓冲区的用途
gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW);//往缓冲区写数据 STATIC_DRAW对缓冲区优化
var a_Position=gl.getAttribLocation(gl.program,'a_Position');
gl.vertexAttribPointer(a_Position,2,gl.FLOAT,false,0,0);//将缓冲区的数据传入分配给attribute对象 2是定点的分量个数
gl.enableVertexAttribArray(a_Position);//开启attribute变量
return n;
}
}
</script>
</head>
<body onload="main()">
<canvas id="webgl" width="600" height="400"></canvas>
</body>
</html>
