与上一节相比这一节相当做了些整合和整理，目的是提高了读写效率和减少代码量，就是做了优化。这里我们只需要在顶点着色器中定义一个用于从js传递参数的变量u_MvcMatrix一看就知道是uniform变量而且是可4*4矩阵，然后再js中 new四个矩阵变量分别是mvcMatrix是几个矩阵 变量相乘后的矩阵，modelMatrix是用于平移旋转变换的矩阵变量，viewMatrix是用于设置前后截面的矩阵变量，projMatrix是用于设置视点，目标点，和方向的矩阵变量。先为变量赋值，然后通过内置函数mvcMatrix.set(projMatrix).multiply(viewMatrix).multiply(modelMatrix)求出最终变换的矩阵变量。然后与点的坐标相乘。
效果图：
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>PerspectiveView_mvp.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_SOURCR=
'attribute vec4 a_Position; '+
//'uniform mat4 u_ModelViewMatrix; '+
'uniform mat4 u_MvpMatrix; '+
'attribute vec4 a_Color; '+
'varying vec4 v_Color; '+
'void main(){ '+
'gl_Position=u_MvpMatrix*a_Position; '+
'v_Color=a_Color; '+
'} ';
var FSHADER_SOURCE=
'precision mediump float; '+
'varying vec4 v_Color; '+
'void main(){ '+
'gl_FragColor=v_Color; '+
'}';
function main(){
var canvas=document.getElementById("webgl");
var nearFar=document.getElementById("nearFar");
var gl=getWebGLContext(canvas);
if(!gl){
console.log("上下文获取失败！！");
}
if(!initShaders(gl,VSHADER_SOURCR,FSHADER_SOURCE)){
console.log("着色器初始化失败！！");
}
gl.clearColor(0,0,0,1);
var n=initVertexBuffer(gl);
var u_MvpMatrix=gl.getUniformLocation(gl.program,'u_MvpMatrix');
var mvpMatrix=new Matrix4();//模型视图投影矩阵
var modelMatrix=new Matrix4();
modelMatrix.setTranslate(0.75, 0, 0);
var viewMatrix=new Matrix4();
viewMatrix.setLookAt(0,0,5,0,0,-100,0,1,0);
var projMatrix=new Matrix4();
projMatrix.setPerspective(30, canvas.width/canvas.height, 1, 100);
mvpMatrix.set(projMatrix).multiply(viewMatrix).multiply(modelMatrix);
gl.uniformMatrix4fv(u_MvpMatrix,false,mvpMatrix.elements);
gl.clearColor(0,0,0,1);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES,0,n);
modelMatrix.setTranslate(-0.75, 0, 0);
mvpMatrix.set(projMatrix).multiply(viewMatrix).multiply(modelMatrix);
gl.uniformMatrix4fv(u_MvpMatrix,false,mvpMatrix.elements);
gl.drawArrays(gl.TRIANGLES,0,n);
}
function initVertexBuffer(gl){
var verticesTexcoords=new Float32Array([//数组中包含顶点坐标以及颜色数值
// Three triangles on the right side
0.0, 1.0, -4.0, 0.4, 1.0, 0.4, // The back green one
-0.5, -1.0, -4.0, 0.4, 1.0, 0.4,
0.5, -1.0, -4.0, 1.0, 0.4, 0.4,
0.0, 1.0, -2.0, 1.0, 1.0, 0.4, // The middle yellow one
-0.5, -1.0, -2.0, 1.0, 1.0, 0.4,
0.5, -1.0, -2.0, 1.0, 0.4, 0.4,
0.0, 1.0, 0.0, 0.4, 0.4, 1.0, // The front blue one
-0.5, -1.0, 0.0, 0.4, 0.4, 1.0,
0.5, -1.0, 0.0, 1.0, 0.4, 0.4,
/* // Three triangles on the left side
-0.75, 1.0, -4.0, 0.4, 1.0, 0.4, // The back green one
-1.25, -1.0, -4.0, 0.4, 1.0, 0.4,
-0.25, -1.0, -4.0, 1.0, 0.4, 0.4,
-0.75, 1.0, -2.0, 1.0, 1.0, 0.4, // The middle yellow one
-1.25, -1.0, -2.0, 1.0, 1.0, 0.4,
-0.25, -1.0, -2.0, 1.0, 0.4, 0.4,
-0.75, 1.0, 0.0, 0.4, 0.4, 1.0, // The front blue one
-1.25, -1.0, 0.0, 0.4, 0.4, 1.0,
-0.25, -1.0, 0.0, 1.0, 0.4, 0.4, */
]);
var n=9;
var vertexColorBuffer=gl.createBuffer();
if(!vertexColorBuffer){
console.log("缓冲区创建失败！！");
return -1;
}
gl.bindBuffer(gl.ARRAY_BUFFER,vertexColorBuffer);
gl.bufferData(gl.ARRAY_BUFFER,verticesTexcoords,gl.STATIC_DRAW);
var SIZE=verticesTexcoords.BYTES_PER_ELEMENT;
//alert(SIZE);
var a_Position=gl.getAttribLocation(gl.program,'a_Position');
gl.vertexAttribPointer(a_Position,3,gl.FLOAT,false,SIZE*6,0);
gl.enableVertexAttribArray(a_Position);
var a_Color=gl.getAttribLocation(gl.program,'a_Color');
gl.vertexAttribPointer(a_Color,3,gl.FLOAT,false,6*SIZE,3*SIZE);
gl.enableVertexAttribArray(a_Color);
return n;
}
</script>
</head>
<body onload="main()">
<canvas width="400" height="400" id="webgl"></canvas>
<p id="nearFar">显示近裁截面和远裁截面</p>
</body>
</html>
<html>
<head>
<title>PerspectiveView_mvp.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_SOURCR=
'attribute vec4 a_Position; '+
//'uniform mat4 u_ModelViewMatrix; '+
'uniform mat4 u_MvpMatrix; '+
'attribute vec4 a_Color; '+
'varying vec4 v_Color; '+
'void main(){ '+
'gl_Position=u_MvpMatrix*a_Position; '+
'v_Color=a_Color; '+
'} ';
var FSHADER_SOURCE=
'precision mediump float; '+
'varying vec4 v_Color; '+
'void main(){ '+
'gl_FragColor=v_Color; '+
'}';
function main(){
var canvas=document.getElementById("webgl");
var nearFar=document.getElementById("nearFar");
var gl=getWebGLContext(canvas);
if(!gl){
console.log("上下文获取失败！！");
}
if(!initShaders(gl,VSHADER_SOURCR,FSHADER_SOURCE)){
console.log("着色器初始化失败！！");
}
gl.clearColor(0,0,0,1);
var n=initVertexBuffer(gl);
var u_MvpMatrix=gl.getUniformLocation(gl.program,'u_MvpMatrix');
var mvpMatrix=new Matrix4();//模型视图投影矩阵
var modelMatrix=new Matrix4();
modelMatrix.setTranslate(0.75, 0, 0);
var viewMatrix=new Matrix4();
viewMatrix.setLookAt(0,0,5,0,0,-100,0,1,0);
var projMatrix=new Matrix4();
projMatrix.setPerspective(30, canvas.width/canvas.height, 1, 100);
mvpMatrix.set(projMatrix).multiply(viewMatrix).multiply(modelMatrix);
gl.uniformMatrix4fv(u_MvpMatrix,false,mvpMatrix.elements);
gl.clearColor(0,0,0,1);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES,0,n);
modelMatrix.setTranslate(-0.75, 0, 0);
mvpMatrix.set(projMatrix).multiply(viewMatrix).multiply(modelMatrix);
gl.uniformMatrix4fv(u_MvpMatrix,false,mvpMatrix.elements);
gl.drawArrays(gl.TRIANGLES,0,n);
}
function initVertexBuffer(gl){
var verticesTexcoords=new Float32Array([//数组中包含顶点坐标以及颜色数值
// Three triangles on the right side
0.0, 1.0, -4.0, 0.4, 1.0, 0.4, // The back green one
-0.5, -1.0, -4.0, 0.4, 1.0, 0.4,
0.5, -1.0, -4.0, 1.0, 0.4, 0.4,
0.0, 1.0, -2.0, 1.0, 1.0, 0.4, // The middle yellow one
-0.5, -1.0, -2.0, 1.0, 1.0, 0.4,
0.5, -1.0, -2.0, 1.0, 0.4, 0.4,
0.0, 1.0, 0.0, 0.4, 0.4, 1.0, // The front blue one
-0.5, -1.0, 0.0, 0.4, 0.4, 1.0,
0.5, -1.0, 0.0, 1.0, 0.4, 0.4,
/* // Three triangles on the left side
-0.75, 1.0, -4.0, 0.4, 1.0, 0.4, // The back green one
-1.25, -1.0, -4.0, 0.4, 1.0, 0.4,
-0.25, -1.0, -4.0, 1.0, 0.4, 0.4,
-0.75, 1.0, -2.0, 1.0, 1.0, 0.4, // The middle yellow one
-1.25, -1.0, -2.0, 1.0, 1.0, 0.4,
-0.25, -1.0, -2.0, 1.0, 0.4, 0.4,
-0.75, 1.0, 0.0, 0.4, 0.4, 1.0, // The front blue one
-1.25, -1.0, 0.0, 0.4, 0.4, 1.0,
-0.25, -1.0, 0.0, 1.0, 0.4, 0.4, */
]);
var n=9;
var vertexColorBuffer=gl.createBuffer();
if(!vertexColorBuffer){
console.log("缓冲区创建失败！！");
return -1;
}
gl.bindBuffer(gl.ARRAY_BUFFER,vertexColorBuffer);
gl.bufferData(gl.ARRAY_BUFFER,verticesTexcoords,gl.STATIC_DRAW);
var SIZE=verticesTexcoords.BYTES_PER_ELEMENT;
//alert(SIZE);
var a_Position=gl.getAttribLocation(gl.program,'a_Position');
gl.vertexAttribPointer(a_Position,3,gl.FLOAT,false,SIZE*6,0);
gl.enableVertexAttribArray(a_Position);
var a_Color=gl.getAttribLocation(gl.program,'a_Color');
gl.vertexAttribPointer(a_Color,3,gl.FLOAT,false,6*SIZE,3*SIZE);
gl.enableVertexAttribArray(a_Color);
return n;
}
</script>
</head>
<body onload="main()">
<canvas width="400" height="400" id="webgl"></canvas>
<p id="nearFar">显示近裁截面和远裁截面</p>
</body>
</html>