代码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. 对View的onMeasure()方法的进一步研究

    在Android开发中,很多人对自定义View是望而生畏,但这又是向高级进阶的必经之路,主要是对View里面的很多方法不知道怎么理解,其中一个就是onMeasure()方法. 首先,我自定义一个MyV ...

  2. No value specified for 'Date'错误

    今天使用 BeanUtils.copyProperties(m,n);  遇到  No value specified for 'Date'  这个错误,以前用的时候都不需要加 try 今天使用发现需 ...

  3. git操作合集

    目录 安装 下载 本地配置 创建用户凭证ssh 忽略文件 基础操作 新建仓库 克隆仓库 获取更新 推送更新 查看历史 版本回退 分支 别名 linux服务器 疑难问题 清除历史大文件 安装 下载 下载 ...

  4. Python json与pickle

    这是用于序列化的两个模块: • json: 用于字符串和python数据类型间进行转换 • pickle: 用于python特有的类型和python的数据类型间进行转换 Json模块提供了四个功能:d ...

  5. Windows Server 2008 R2 /2012 修改密码策略（摘抄 原文地址 https://www.cnblogs.com/mili3/p/7799347.html）

    今天建了域环境,在添加新用户的时候,发现用简单的密码时域安全策略提示密码复杂度不够,于是我就想在域安全策略里面把密码复杂度降低一点. 问题:    在“管理工具 >> 本地安全策略 > ...

  6. [翻译] MagicPie

    MagicPie Powerful pie layer for creating your own pie view. PieLayer provide great animation with si ...

  7. 超强PHP集成环境，支持800多个不同PHP版本同时运行，无限自定义添加mysql与php版本

    转载自今日头条 小编最近发现PHPWAMP竟然又更新了,激动之余向大家介绍一下新版的强大功能. PHPWAMP是纯绿色集成环境,高版本php无需安装VC运行库,默认已经集成VC运行库!Nginx支持服 ...

  8. TCP/IP 协议图--网络层中的 IP 协议

    IP(IPv4.IPv6)相当于 OSI 参考模型中的第3层——网络层.网络层的主要作用是“实现终端节点之间的通信”.这种终端节点之间的通信也叫“点对点通信”. 网络的下一层——数据链路层的主要作用是 ...

  9. 做 fzu oj 1003 简单的枚举

    暴力求解法---简单枚举 定义一个函数(函数的内容大概是包含了题目所给的限制条件),然后主函数就是通过循环进行枚举,枚举出可能的元素,带入函数中进行验证,如果符合函数所给的情况,则为其解.

  10. windows server 2008/2012安装PostgreSQL过程及问题总结

    今天第一次接触在Windows Server2008/2012 下安装PostgreSQL,遇到的问题总结如下: 1.首先,在安装的时候,我更改安装目录改为自定义的E盘,安装时报错:libintl.d ...