前面文章:

WebGL入门教程(一)-初识webgl

WebGL入门教程(二)-webgl绘制三角形

WebGL动画有移动、旋转和缩放,我们将移动、旋转和缩放图形,然后将其绘制到屏幕上,称为变换(transformations)或者仿射变换(affine transformations).

1.移动

效果图:

1.1在WebGL入门教程(二)-webgl绘制三角形的基础上进行修改,原理就是,三个顶点的坐标(x,y,z)同时发生了变化,重新计算三个坐标值;

//顶点着色器程序
var VSHADER_SOURCE =
"attribute vec4 a_Position;" +
"uniform vec4 u_Translation;" +
"void main() {" +
//设置坐标
"gl_Position = a_Position + u_Translation; " +
"} ";

从上面可以看到,顶点增加了一个变量平移距离u_Translation,然后将平移距离传输给定点着色器;

//声明偏移变量
var Tx = 0.5,Ty = 0.5,Tz = 0.0; //将平移距离传输给定点着色器
var u_Translation = gl.getUniformLocation(shaderProgram,'u_Translation'); gl.uniform4f(u_Translation,Tx,Ty,Tz,0.0);

1.2还有一种表达方式,就是用变形矩阵进行计算坐标。

经过计算得出平移矩阵公式(这是行主序,但是在写代码的时候就是列主序了):

什么是列主序:

例如一个坐标点 V(x,y,z,w),其实是以列的形势存储的。

[x]

[y]

[z]

[w]

刚才得到的公式是行主序的,所以,一定要灵活变通。

得出x'=x+Tx;y'=y+Ty;z'=z+Tz;

由上面的公式就开始写代码吧:首先就是顶点着色器的更改,<新坐标>=<矩阵>*<旧坐标>,得出下面代码;

var VSHADER_SOURCE =
"attribute vec4 a_Position;" +
"uniform mat4 u_xformMatarix;" +
"void main() {" +
//设置坐标
"gl_Position = u_xformMatarix * a_Position;" +
"} ";

然后将矩阵传输给定点着色器;

var Tx = 0.5,Ty = 0.5,Tz = 0.0;
//注意WebGL的矩阵式列主序的
var xformMatrix = new Float32Array([
1.0, 0.0, 0.0, 0.0,
0.0, 1.0, 0.0, 0.0,
0.0, 0.0, 1.0, 0.0,
Tx, Ty, Tz, 1.0
]);
//然后将矩阵传输给定点着色器
var u_xformMatarix = gl.getUniformLocation(shaderProgram,'u_xformMatarix');
gl.uniformMatrix4fv(u_xformMatarix, false, xformMatrix);

uniformMatrix4fv方法参数的讲解,

第一个参数:代表uniform变量的存储位置;

第二个参数:在WebGL中指定为false;

第三个参数:待传输的类型化数组;

2.旋转 

效果图:

2.1同理,旋转也需要计算旋转之后三个坐标的值,不过它的要求就高了, 需要知道旋转轴,旋转方向和旋转角度。

这是就需要数学知识了

//顶点着色器程序
var VSHADER_SOURCE =
"attribute vec4 a_Position;" +
"uniform float u_CosB,u_SinB;" +
"void main() {" +
//设置坐标
"gl_Position.x = a_Position.x * u_CosB - a_Position.y * u_SinB;" +
"gl_Position.y = a_Position.x * u_SinB + a_Position.y * u_CosB;" +
"gl_Position.z= a_Position.z;" +
"gl_Position.w = 1.0;" +
"} ";

从上面可以看到,顶点着色器定义了正弦值,余弦值,然后根据得到的值或得坐标值,,然后将旋转图形所需的数据传输给定点着色器

//旋转角度
var ANGLE = 45.0;
// 将旋转图形所需的数据传输给定点着色器
var radian = Math.PI*ANGLE/180.0;//转化为弧度
var cosB = Math.cos(radian);
var sinB = Math.sin(radian); var u_CosB = gl.getUniformLocation(shaderProgram,'u_CosB');
var u_SinB = gl.getUniformLocation(shaderProgram,'u_SinB'); gl.uniform1f(u_CosB,cosB);
gl.uniform1f(u_SinB,sinB);

2.2 经过计算得出旋转矩阵公式(这是行主序,但是在写代码的时候就是列主序了):

由上面的公式就开始写代码吧:首先就是顶点着色器的更改,<新坐标>=<矩阵>*<旧坐标>,得出下面代码;

var VSHADER_SOURCE =
"attribute vec4 a_Position;" +
"uniform mat4 u_xformMatarix;" +
"void main() {" +
//设置坐标
"gl_Position = u_xformMatarix * a_Position;" +
"} ";

然后将矩阵传输给定点着色器;

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 u_xformMatarix = gl.getUniformLocation(shaderProgram,'u_xformMatarix');
gl.uniformMatrix4fv(u_xformMatarix, false, xformMatrix);

3.缩放

效果图:

直接来看矩阵表示吧,毕竟以后都是用矩阵的,

主需要更改传输到顶点时的代码

 var Sx = 1.0;Sy =1.5; Sz = 1.0;
var xformMatrix = new Float32Array([
Sx, 0.0, 0.0, 0.0,
0.0, Sy, 0.0, 0.0,
0.0, 0.0, Sz, 0.0,
0.0, 0.0, 0.0, 1.0
]);
var u_xformMatarix = gl.getUniformLocation(shaderProgram,'u_xformMatarix');
gl.uniformMatrix4fv(u_xformMatarix, false, xformMatrix);

*以上摘至《WebGL编程指南》

WebGL入门教程(三)-webgl动画的更多相关文章

  1. WebGL入门教程(五)-webgl纹理

    前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL入门教程(三)-webgl动画 WebGL入门教程(四)-webgl颜色 这里就需要用到 ...

  2. WebGL入门教程(四)-webgl颜色

    前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL入门教程(三)-webgl动画 颜色效果图: 操作步骤: 1.创建HTML5 canva ...

  3. WebGL入门教程(二)-webgl绘制三角形

    前面已经介绍过了webgl,WebGL入门教程(一)-初识webgl(http://www.cnblogs.com/bsman/p/6128447.html),也知道了如何绘制一个点,接下来就用web ...

  4. CPF 入门教程 - 样式和动画(三)

    CPF NetCore跨平台UI框架 系列教程 CPF 入门教程(一) CPF 入门教程 - 数据绑定和命令绑定(二) CPF 入门教程 - 样式和动画(三) 用样式可以对内部元素进行批量设置属性. ...

  5. 无废话ExtJs 入门教程三[窗体:Window组件]

    无废话ExtJs 入门教程三[窗体:Window组件] extjs技术交流,欢迎加群(201926085) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3 ...

  6. PySide——Python图形化界面入门教程(三)

    PySide——Python图形化界面入门教程(三) ——使用内建新号和槽 ——Using Built-In Signals and Slots 上一个教程中,我们学习了如何创建和建立交互widget ...

  7. Elasticsearch入门教程(三):Elasticsearch索引&映射

    原文:Elasticsearch入门教程(三):Elasticsearch索引&映射 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文 ...

  8. RabbitMQ入门教程(三):Hello World

    原文:RabbitMQ入门教程(三):Hello World 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog. ...

  9. JasperReports入门教程(三):Paramters,Fields和Detail基本组件介绍

    JasperReports入门教程(三):Paramter,Field和Detail基本组件介绍 前言 前两篇博客带领大家进行了入门,做出了第一个例子.也解决了中文打印的问题.大家跟着例子也做出了de ...

随机推荐

  1. vtk多线程简单测试

    vtkMultithreader is a class that provides support for multithreaded execution using sproc() on an SG ...

  2. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

  3. iOS小知识:使UIButton中的图片和文字实现左对齐

    UIButton setImage 和 setTitle之后,默认的 image和title 对齐方式是居中, 由于 title 长度不固定,所以如果要几个这样有image有title的按钮纵向排列对 ...

  4. awk命令和grep命令的使用

    1.遇到需求:用ping命令去检测系统网络延迟 跑 ping baidu.com -c 3,想要直接得到平均延迟. ping baidu.com -c 3 | grep rtt | awk -F \/ ...

  5. Burp Suite 使用教程(上传突破利器)

    Burp Suite是一个免费的网站攻击工具. 它包括proxy.spider.intruder.repeater四项功能.该程序使用Java写成,需要 JRE 1.4 以上版本 下载该程序的源代码, ...

  6. 【sdoi2013】森林 BZOJ 3123

    Input 第一行包含一个正整数testcase,表示当前测试数据的测试点编号.保证1≤testcase≤20. 第二行包含三个整数N,M,T,分别表示节点数.初始边数.操作数.第三行包含N个非负整数 ...

  7. 关于开放式CNC系统实时软件控制系统的一些简单分析

    随笔: 黄杰U201310771 首先,我们一起了解或复习两个概念:开放式CNC和开放式CNC体系结构.按照工EEE规定:一个开放式的系统必须具备不同应用程序能很好地运行于不同供应商提供的不同平台之上 ...

  8. ARM概论(Advanced RISC Machines)

    简介 ARM7是32 位通用微处理器ARM(Advanced RISC Machines)家族中的一员,具有比较低的电源消耗和良好的性价比, 基于(精简指令)RISC结构,指令集和相关的译码机制与微程 ...

  9. Total Hamming Distance

    The Hamming distance between two integers is the number of positions at which the corresponding bits ...

  10. javaee 导航

    tomcate端口设定和服务器虚拟目录设定 静态web 应用和动态web应用 tomcat相关问题 web应用 http 响应 url uri 动态页面 servlet 一个简单的servlet的de ...