【WebGL初学系列之五】旋转,平移,缩放
nbcoder.com地址:http://nbcoders.com/webgl-chu-xue-xi-lie-zhi-wu-ai.html
<span style="white-space:pre"> </span>/*一个模型*/ //创建第一个模型矩阵 var m4Rotate = mat4.create(); //置为单位矩阵 mat4.identity(m4Rotate); //缩放 mat4.scale(m4Rotate, [0.5, 0.5, 1.0], m4Rotate); webgl.uniformMatrix4fv(uniformIndex, false, m4Rotate); webgl.drawArrays(webgl.TRIANGLES, 0, 3); /*第二个模型*/ //创建第二个模型矩阵 var translate = mat4.create(); //置为单位矩阵 mat4.identity(translate); //移动第二个模型的位置 mat4.translate(translate, [0.5, 0.5, 0.0], translate); //缩放 mat4.scale(translate, [0.5, 0.5, 0.0], translate); webgl.uniformMatrix4fv(uniformIndex, false, translate); webgl.drawArrays(webgl.TRIANGLES, 0, 3); /*第三个模型*/ //创建第三个模型矩阵 var scaleM = mat4.create(); //置为单位矩阵 mat4.identity(scaleM); //移动第三个模型位置 mat4.translate(scaleM, [-0.5, 0.5, 0.0], scaleM); //缩放 mat4.scale(scaleM, [0.5, 0.5, 0.0], scaleM); webgl.uniformMatrix4fv(uniformIndex, false, scaleM); webgl.drawArrays(webgl.TRIANGLES, 0, 3);当然,shader代码也有所改变:
<span style="white-space:pre"> </span><script id="shader-vs" type="x-shader/x-vertex"> attribute vec3 v3Position; uniform mat4 umMatrix; attribute vec3 av3Color; varying vec3 vv3Color; void main(void) { vec4 v4pos = umMatrix * vec4(v3Position, 1.0); vv3Color = av3Color; gl_Position = v4pos; } </script>
<span style="white-space:pre"> </span> window.setInterval("changeData()", 10); function changeData() { angle += 10; angle %= 360; xPos <= 1.0 ? xPos += 0.005 : xPos = -1; yPos <= 1.0 ? yPos += 0.005 : yPos = -1; scale >= 0.0 ? scale -= 0.005 : scale = 0.5; renderScene(webglCanvas); }让后在每一帧改变每个模型的数据。即旋转角度,平移坐标,缩放大小值等数据。红色部分是与上面不同部分,给出代码如下:
/*一个模型*/ //创建第一个模型矩阵 var m4Rotate = mat4.create(); //置为单位矩阵 mat4.identity(m4Rotate); //绕Z轴旋转 <span style="color:#ff0000;">mat4.rotateZ(m4Rotate, angle * Math.PI / 180);</span> //缩放 mat4.scale(m4Rotate, [0.5, 0.5, 1.0], m4Rotate); webgl.uniformMatrix4fv(uniformIndex, false, m4Rotate); webgl.drawArrays(webgl.TRIANGLES, 0, 3); /*第二个模型*/ //创建第二个模型矩阵 var translate = mat4.create(); //置为单位矩阵 mat4.identity(translate); //移动第二个模型的位置 <span style="color:#ff0000;">mat4.translate(translate, [xPos, yPos, 0.0], translate);</span> //缩放 mat4.scale(translate, [0.5, 0.5, 0.0], translate); webgl.uniformMatrix4fv(uniformIndex, false, translate); webgl.drawArrays(webgl.TRIANGLES, 0, 3); /*第三个模型*/ //创建第三个模型矩阵 var scaleM = mat4.create(); //置为单位矩阵 mat4.identity(scaleM); //移动第三个模型位置 mat4.translate(scaleM, [-0.5, 0.5, 0.0], scaleM); //缩放 <span style="color:#ff0000;"> mat4.scale(scaleM, [scale, scale, 0.0], scaleM);</span> webgl.uniformMatrix4fv(uniformIndex, false, scaleM); webgl.drawArrays(webgl.TRIANGLES, 0, 3);
<html> <head> <script type="text/javascript" src="../Js/InitWebGL.js"></script> <script type="text/javascript" src ="../3dPart/glMatrix-0.9.5.js"></script> <script id="shader-vs" type="x-shader/x-vertex"> attribute vec3 v3Position; uniform mat4 umMatrix; attribute vec3 av3Color; varying vec3 vv3Color; void main(void) { vec4 v4pos = umMatrix * vec4(v3Position, 1.0); vv3Color = av3Color; gl_Position = v4pos; } </script> <script id ="shader-fs" type ="x-shader/x-fragment"> #ifdef GL_FRAGMENT_PRECISION_HIGH precision highp float; #else precision mediump float; #endif varying vec3 vv3Color; void main(void) { gl_FragColor = vec4(vv3Color, 1.0); } </script> <script> var v3PositionIndex = 0; var sampleTexIndex = -1; var triangleBuffer = null; var triangleBuffer = null; var textObj = null; var angle = 0; var scale = 0.5; var xPos = -1.0; var yPos = -1.0; var webglCanvas = null; var uniformIndex = -1; var v3ColorIndex = 1; var triangleColorBuffer = null; function initData(webgl) { //顶点坐标 var jsArrayData = [ 0.0, 1.0, 0.0, -1.0, 0.0, -1.0, 1.0, 0.0, 0.0 ] //创建一个webgl能够访问的缓冲 triangleBuffer = webgl.createBuffer(); //绑定buffer webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer); //将js数据拷贝到buffer上 webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(jsArrayData), webgl.STATIC_DRAW); var jsArrayColor = [ 1.0, 0.0, 0.0,//上顶点 0.0, 1.0, 0.0,//左顶点 0.0, 0.0, 1.0 //右顶点 ]; triangleColorBuffer = webgl.createBuffer(); webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleColorBuffer); webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(jsArrayColor), webgl.STATIC_DRAW); } function renderScene(webgl) { //清空屏幕 webgl.clearColor(0.0, 0.0, 0.0, 1.0); webgl.clear(webgl.COLOR_BUFFER_BIT); //绑定顶点数据 webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer); //启动开关 webgl.enableVertexAttribArray(v3PositionIndex); //制定数据索引原则 webgl.vertexAttribPointer(v3PositionIndex, 3, webgl.FLOAT, false, 0, 0); webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleColorBuffer); webgl.enableVertexAttribArray(v3ColorIndex); webgl.vertexAttribPointer(v3ColorIndex, 3, webgl.FLOAT, false, 0, 0); /*一个模型*/ //创建第一个模型矩阵 var m4Rotate = mat4.create(); //置为单位矩阵 mat4.identity(m4Rotate); //绕Z轴旋转 mat4.rotateZ(m4Rotate, angle * Math.PI / 180); //缩放 mat4.scale(m4Rotate, [0.5, 0.5, 1.0], m4Rotate); webgl.uniformMatrix4fv(uniformIndex, false, m4Rotate); webgl.drawArrays(webgl.TRIANGLES, 0, 3); /*第二个模型*/ //创建第二个模型矩阵 var translate = mat4.create(); //置为单位矩阵 mat4.identity(translate); //移动第二个模型的位置 mat4.translate(translate, [xPos, yPos, 0.0], translate); //缩放 mat4.scale(translate, [0.5, 0.5, 0.0], translate); webgl.uniformMatrix4fv(uniformIndex, false, translate); webgl.drawArrays(webgl.TRIANGLES, 0, 3); /*第三个模型*/ //创建第三个模型矩阵 var scaleM = mat4.create(); //置为单位矩阵 mat4.identity(scaleM); //移动第三个模型位置 mat4.translate(scaleM, [-0.5, 0.5, 0.0], scaleM); //缩放 mat4.scale(scaleM, [scale, scale, 0.0], scaleM); webgl.uniformMatrix4fv(uniformIndex, false, scaleM); webgl.drawArrays(webgl.TRIANGLES, 0, 3); webgl.flush(); } function init() { //获取webgl canvas var canvas = initCanvas("webglCanvas"); //初始化shader程序 var bind1 = [v3PositionIndex, "v3Position"]; var bind2 = [v3ColorIndex, "av3Color"]; var bindData = new Array(); bindData.push(bind1); var shaderProgramObject = initShaders(canvas, "shader-vs", "shader-fs", bindData); //获取Uniform变量在链接时生成的索引 //sampleTexIndex = canvas.getUniformLocation(shaderProgramObject, "sTexture"); uniformIndex = canvas.getUniformLocation(shaderProgramObject, "umMatrix"); canvas.useProgram(shaderProgramObject); //初始化顶点数据 initData(canvas); webglCanvas = canvas; window.setInterval("changeData()", 10); } function changeData() { angle += 10; angle %= 360; xPos <= 1.0 ? xPos += 0.005 : xPos = -1; yPos <= 1.0 ? yPos += 0.005 : yPos = -1; scale >= 0.0 ? scale -= 0.005 : scale = 0.5; renderScene(webglCanvas); } </script> </head> <body onload ="init()"> <canvas id="webglCanvas" style="border:1px solid red" width="600" height="600"></canvas> </body> </html>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。