代码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>

WebGl 旋转（矩阵变换）的更多相关文章

  1. webGL 旋转算法

    lon = 0,//y旋转角度 lat = 0, onMouseDownLat = 0, phi = 0, theta = 0; if ( isUserInteracting === false ) ...

  2. WebGL简易教程(五)：图形变换(模型、视图、投影变换)

    [toc] 1. 概述 通过之前的教程,对WebGL中可编程渲染管线的流程有了一定的认识.但是只有前面的知识还不足以绘制真正的三维场景,可以发现之前我们绘制的点.三角形的坐标都是[-1,1]之间,Z值 ...

  3. Unity中动态绘制圆柱体

    问题背景 上次写了动态绘制立方体,这最近又来了新功能,绘制圆柱(风筒),要求是给了很多节点,根据节点去动态绘制风筒,风筒就是圆柱连接而成的,可以理解为管道,还有就是拐角处注意倒角,圆润过度过来. 实现 ...

  4. 探索颜色渐变绘制算法(基于Processing语言) 第一部分

    突然间意识到连续变化的颜色在程序中是如何实现的这一问题.没错,就想有事找事,我会分好几部分慢慢探寻,其实笔者也不会,咱一起研究.ok,我们开始! 第一部分 初始部分就从官方案例来入手学习.官方给了三个 ...

  5. webgl自学笔记——矩阵变换

    这章主要探讨矩阵,这些矩阵代表了应用在我们场景上的变换,允许我们移动物体.然而在webGL api中并没有一个专门的camera对象,只有矩阵.好消息是使用矩阵来取代相机对象能让webgl在很多复杂动 ...

  6. osg矩阵变换节点-----平移旋转缩放

    osg矩阵变换节点-----平移旋转缩放 转自:http://www.cnblogs.com/ylwn817/articles/1973396.html 平移旋转缩放这个三个是osg矩阵操作中,最常见 ...

  7. WebGL编程指南案例解析之平移和旋转的矩阵实现

    手写各种矩阵: //矩阵 var vShader = ` attribute vec4 a_Position; uniform mat4 u_xformMatrix; void main(){ gl_ ...

  8. WebGL编程指南案例解析之平移和旋转的math库实现

    这里说的math库实现,指的是,通过一般的加减乘除(角度计算)来更新坐标值. 因为涉及到坐标的变化,所以这里都是基于对顶点着色器的修改 平移: var vShader = ` attribute ve ...

  9. WebGl 缩放（矩阵变换）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. java中方法调用在内存中的体现

    在java中,方法以及局部变量(即在方法中声明的变量)是放在栈内存上的.当你调用一个方法时,该方法会放在调用栈的栈顶.栈顶的方法是目前正在执行的方法,直到执行完毕才会从栈顶释放.我们知道,栈是一种执行 ...

  2. 五、angularjs在进入界面前加载数据

    有时候我们需要在页面加载前就要绑定数据,比如有的图片太多就会导致在加载的过程中很慢,或者title是动态的,通过从后台取数据来改变,如果进入页面后在读取数据会导致以页面刷新数据太慢,这样就需要我们在进 ...

  3. 求最大公约数和最大公倍数(Java算法)

    最大公约数(最大公因数):指某几个整数共有约数中最大的一个. 求两个整数最大公约数主要的方法: 列举法:各自列出约数,再找出最大的公约数. 素因数分解法:两数各作素因数分解,然后取出共有的项乘起来. ...

  4. byr面经两则

    人人,金山西山居,腾讯互娱,微信,网易游戏offer及面经 首先感谢师兄在两年前发的贴([天道酬勤] 腾讯.百度.网易游戏.华为Offer及笔经面经 ),这篇文章对我帮助很大. 我写这篇文章一是为了感 ...

  5. Delphi IDHTTP用法详解

    一.IDHTTP的基本用法  IDHttp和WebBrowser一样,都可以实现抓取远端网页的功能,但是http方式更快.更节约资源,缺点是需要手动维护cook,连接等  IDHttp的创建,需要引入 ...

  6. 延期年金（deferred annuity）

    含义:推迟m个时期后才开始付款的年金. 延期年金现值为 二.永续年金(Perpetuity) 永续年金:无限期支付下去的年金. 为期末付永续年金(perpetuity-immediate)的现值 表示 ...

  7. Azure 负载均衡器的多个 VIP

    您现在访问的是微软AZURE全球版技术文档网站,若需要访问由世纪互联运营的MICROSOFT AZURE中国区技术文档网站,请访问 https://docs.azure.cn. Azure 负载均衡器 ...

  8. Hdfs&MapReduce测试

    Hdfs&MapReduce测试 测试 上传文件到hdfs 随意打开一个文件夹传一个文件试试(把javafx-src.zip传到hdfs的/根目录下):hadoop fs -put javaf ...

  9. [T-ARA][20090729]

    歌词来源:http://music.163.com/#/song?id=484058959 在基本发音规则之上,考虑到了音变的某些情况,最后结合听力搞定的一版歌词发音(只要学完养乐多老师的教程应该读起 ...

  10. vue2.* 绑定属性 绑定Class 绑定style 03

    <template> <div id="app"> <!-- 绑定属性 --> <div v-bind:title="title ...