WebGl 旋转（矩阵变换）

代码1：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>WebGl 旋转（矩阵变换）</title>
 </head>
 <body>
 <canvas id="myCanvas" width="500" height="300" style="border: 1px solid red"></canvas>
 </body>
 <script>

     window.onload = function () {

         //第1步 - 准备Canvas和获取WebGL的渲染上下文
         var canvas = document.getElementById('myCanvas'),
             gl = canvas.getContext('webgl');

         //第2步 - 定义几何并将其存储在缓冲区对象
         var vertices = [
                 -0.5,0.5,0.0,
                 0.0,0.5,0.0,
                 -0.25,0.25,0.0,
             ],
             colors = [
                 0,0,1,
                 1,0,0,
                 0,1,0,],
             indices =[0,1,2];

         var vertex_buffer = gl.createBuffer();
         gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

         var color_buffer = gl.createBuffer ();
         gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);

         var index_buffer = gl.createBuffer();
         gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer);
         gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

         //第3步 - 创建和编译着色器程序
         var vertCode =
             'attribute vec3 coordinates;' +
             'uniform mat4 rotate;'+
             'attribute vec3 color;'+
             'varying vec3 vColor;'+
             'void main(void) {' +
             ' gl_Position = rotate*vec4(coordinates,1.0);' +
             'vColor = color;'+
             '}';

         var fragCode =
             'precision mediump float;'+
             'varying vec3 vColor;'+
             'void main(void) {' +
             ' gl_FragColor = vec4(vColor, 1);' +
             '}';

         var vertShader = gl.createShader(gl.VERTEX_SHADER);
         var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
         gl.shaderSource(vertShader, vertCode);
         gl.shaderSource(fragShader, fragCode);
         gl.compileShader(vertShader);
         gl.compileShader(fragShader);
         var shaderProgram = gl.createProgram();
         gl.attachShader(shaderProgram, vertShader);
         gl.attachShader(shaderProgram, fragShader);
         gl.linkProgram(shaderProgram);
         gl.useProgram(shaderProgram);

         //第4步 - 关联着色器程序到缓冲区对象

         gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
         var coord = gl.getAttribLocation(shaderProgram, 'coordinates');
         gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, 0, 0);
         gl.enableVertexAttribArray(coord);

         gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
         var color = gl.getAttribLocation(shaderProgram, "color");
         gl.vertexAttribPointer(color, 3, gl.FLOAT, false,0,0) ; //color
         gl.enableVertexAttribArray(color);

         //绕着Z轴旋转
         var init_angle = 0.0;//初始角度
         var angle_step = 1;//旋转步伐
         var current_angle = init_angle;
         var radian = Math.PI * (current_angle % 360) / 180.0;
         var cosB = Math.cos(radian);
         var sinB = Math.sin(radian);
         var xformMatrix = new Float32Array([
             cosB,  sinB, 0.0, 0.0,
             -sinB, cosB, 0.0, 0.0,
             0.0,    0.0, 1.0, 0.0,
             0.0,    0.0, 0.0, 1.0
         ]);
         var rotate = gl.getUniformLocation(shaderProgram, "rotate");
         gl.uniformMatrix4fv(rotate, false, xformMatrix);

         //第5步 - 绘制所需的对象
         setInterval(function () {
             radian = Math.PI * (current_angle % 360) / 180.0;
             cosB = Math.cos(radian);
             sinB = Math.sin(radian);
             xformMatrix = new Float32Array([
                 cosB,  sinB, 0.0, 0.0,
                 -sinB, cosB, 0.0, 0.0,
                 0.0,    0.0, 1.0, 0.0,
                 0.0,    0.0, 0.0, 1.0
             ]);
             gl.uniformMatrix4fv(rotate, false, xformMatrix);

             gl.enable(gl.DEPTH_TEST);
             gl.depthFunc(gl.LEQUAL);
             gl.clearColor(0.5, 0.5, 0.5, 0.9);
             gl.clearDepth(1.0);
             gl.viewport(0.0, 0.0, canvas.width, canvas.height);
             gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
             gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);

             //当前角度
             current_angle = current_angle + angle_step;

         },10);

     }

 </script>
 </html>

代码2：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>WebGl 旋转（矩阵变换）</title>
 </head>
 <body>
 <canvas id="myCanvas" width="500" height="300" style="border: 1px solid red"></canvas>
 </body>
 <script>

     window.onload = function () {

         //第1步 - 准备Canvas和获取WebGL的渲染上下文
         var canvas = document.getElementById('myCanvas'),
             gl = canvas.getContext('webgl');

         //第2步 - 定义几何并将其存储在缓冲区对象
         var vertices = [
                 -0.5,0.5,0.0,
                 0.0,0.5,0.0,
                 -0.25,0.25,0.0,
             ],
             colors = [
                 0,0,1,
                 1,0,0,
                 0,1,0,],
             indices =[0,1,2];

         var vertex_buffer = gl.createBuffer();
         gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

         var color_buffer = gl.createBuffer ();
         gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);

         var index_buffer = gl.createBuffer();
         gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer);
         gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

         //第3步 - 创建和编译着色器程序
         var vertCode =
             'attribute vec3 coordinates;' +
             'uniform mat4 Pmatrix;'+
             'uniform mat4 Vmatrix;'+
             'uniform mat4 Mmatrix;'+
             'attribute vec3 color;'+
             'varying vec3 vColor;'+
             'void main(void) {' +
             ' gl_Position = Pmatrix*Vmatrix*Mmatrix*vec4(coordinates,1.0);' +
             'vColor = color;'+
             '}';

         var fragCode =
             'precision mediump float;'+
             'varying vec3 vColor;'+
             'void main(void) {' +
             ' gl_FragColor = vec4(vColor, 1);' +
             '}';

         var vertShader = gl.createShader(gl.VERTEX_SHADER);
         var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
         gl.shaderSource(vertShader, vertCode);
         gl.shaderSource(fragShader, fragCode);
         gl.compileShader(vertShader);
         gl.compileShader(fragShader);
         var shaderProgram = gl.createProgram();
         gl.attachShader(shaderProgram, vertShader);
         gl.attachShader(shaderProgram, fragShader);
         gl.linkProgram(shaderProgram);
         gl.useProgram(shaderProgram);

         //第4步 - 关联着色器程序到缓冲区对象
         var Pmatrix = gl.getUniformLocation(shaderProgram, "Pmatrix");
         var Vmatrix = gl.getUniformLocation(shaderProgram, "Vmatrix");
         var Mmatrix = gl.getUniformLocation(shaderProgram, "Mmatrix");

         gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
         var coord = gl.getAttribLocation(shaderProgram, 'coordinates');
         gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, 0, 0);
         gl.enableVertexAttribArray(coord);

         gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
         var color = gl.getAttribLocation(shaderProgram, "color");
         gl.vertexAttribPointer(color, 3, gl.FLOAT, false,0,0) ; //color
         gl.enableVertexAttribArray(color);

         //
         var proj_matrix = get_projection(40, canvas.width/canvas.height, 1, 100);
         var mov_matrix = [1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1];
         var view_matrix = [1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1];

         //translating z
         view_matrix[14] = view_matrix[14]-2; //zoom

         //第5步 - 绘制所需的对象
         var time_old = 0;
         var animate = function(time) {
             var dt = time-time_old;
             rotateZ(mov_matrix, dt*0.002);
             time_old = time;

             gl.enable(gl.DEPTH_TEST);
             gl.depthFunc(gl.LEQUAL);
             gl.clearColor(0.5, 0.5, 0.5, 0.9);
             gl.clearDepth(1.0);
             gl.viewport(0.0, 0.0, canvas.width, canvas.height);
             gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

             // 将旋转矩阵传输给顶点着色器
             gl.uniformMatrix4fv(Pmatrix, false, proj_matrix);
             gl.uniformMatrix4fv(Vmatrix, false, view_matrix);
             gl.uniformMatrix4fv(Mmatrix, false, mov_matrix);

             gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);
             window.requestAnimationFrame(animate);
         }

         animate(0);

         /*========================= MATRIX ========================= */

         function get_projection(angle, a, zMin, zMax) {
             var ang = Math.tan((angle*.5)*Math.PI/180);//angle*.5
             return [
                 0.5/ang, 0 , 0, 0,
                 0, 0.5*a/ang, 0, 0,
                 0, 0, -(zMax+zMin)/(zMax-zMin), -1,
                 0, 0, (-2*zMax*zMin)/(zMax-zMin), 0
             ];
         }

         //z轴旋转
         function rotateZ(m, angle) {
             var c = Math.cos(angle);
             var s = Math.sin(angle);
             var mv0 = m[0], mv4 = m[4], mv8 = m[8];

             m[0] = c*m[0]-s*m[1];
             m[4] = c*m[4]-s*m[5];
             m[8] = c*m[8]-s*m[9];
             m[1] = c*m[1]+s*mv0;
             m[5] = c*m[5]+s*mv4;
             m[9] = c*m[9]+s*mv8;
         }

     }

 </script>
 </html>