《VR入门系列教程》之12---转换矩阵(转载)【上海

  2、开头编制条带网格的门径(顶点数组),首先生成三个半径是7的圆形路线,规定圆弧由127个顶峰组成(事实上最终生成的门道有1三十多个极点):

原来的小说地址:http://blog.csdn.net/liulong1567/article/details/50616523

假诺运动经过(1,0,0)的移动之后就为:(1 0.5 0 1),那正是我们地点见到的三角的上终点在显示屏中间活动了。

  使用上一篇文章(  

调换矩阵

模型网格的三维空间地方都以由它们的极限坐标决定的,借使每趟想要移动一下模子地方都要逐项更改各类网格的极端坐标,那将一件十一分高烧的事,如若遇上供给出示动画效果那就更糟了。为了解决这几个标题,大多数的三个维度系统都会提供转变操作,这几个操作原理是完好移动网格,那样网格与世界坐标就有一个相持调换,而没有必要去改变每叁个终端的坐标值。当中,调换操作富含:移动、旋转、缩放,那个操作都以指向网格全体相对世界坐标系的,并非特定的每三个极端。
图3-3中显得了改动操作,图中有五个立方,每二个立方都是由一个立方网格组成,它们都饱含同样的顶点,在大家进行活动、旋转、缩放操作的时候没有须求更动那一个极端的坐标值,而是给立方体网格赋予八个转移操作。左边浅绛红的立方体向右移动了4个单位(进行了[-4,0,0]操作),然后又相对x和y轴举办了旋转(这里注意一下,大家那边角度的单位是弧度,即一弧度等于360度除以2PI)。左边紫褐的立方体向右移动了4个单位,然后对多个方向都加大了1.5倍,中间中绿立方体就是最早阶地方。

上海时时乐走势图官网 1

*
图3-3
大家用三个矩阵来代表调换操作,那个矩阵中保留着一个数组,通过那一个数组进行部分数学计算就足以博得改造之后的极端坐标值。超过四分之二的改造矩阵用44的数组表示,这几个数组满含4行4列一共15个数。图3-4正是二个44数组的暗意图,个中m12、m13、m14用来操作移动,m0、m5、m10用来操作缩放,m1和m2、m4和m6、m8和m9分别用来操作相对x、y、z轴的旋转,转变矩阵乘以顶点坐标就是更动之后的坐标。

上海时时乐走势图官网 2

图3-4
要是你同本人同一是个线性代数极客,笔者如此讲你肯定听得懂,若是你面生线性代数也没涉及,Unity3D乃至任何工具中早已将那一个操作都卷入好了,大家只须求准确调用它们的API就能够,不过领会一下那一个操作的底层总结进度总依旧好的。

GLuint transformUniformLocation = glGetUniformLocation(program, "transform");
glUniformMatrix4fv(transformUniformLocation, 1, 0, transformMatrix.m);
 1 //后掠翼,具有圆弧状的边缘
 2             if(obj.x>0&&obj.y>0&&obj.y<1)
 3             {
 4                 //这一层翼面和最小翼面的边缘差值
 5                 var rate=Math.cos(Math.asin(Math.abs(0.5-obj.y)/(0.5/1)/1));
 6                 var size1=1*rate;
 7                 var h=14 size1;
 8                 var w=6.5 size1;
 9                 if((15-obj.x)<h)
10                 {
11                     var rate2=Math.cos(Math.asin(Math.abs(15-obj.x)/(h/w)/w));
12                     if(obj.z>0)
13                     {
14                         obj.z =w*rate2;
15                     }
16                     else if(obj.z<0)
17                     {
18                         obj.z-=w*rate2;
19                     }
20                     var rate3=3/(15-Math.abs(obj.z))
21                     obj.x =rate3;
22                 }
23 
24             }
GLKMatrix4 scaleMatrix = GLKMatrix4MakeScale(elValue, elValue, 1.0);
// 很明显这个矩阵会改变顶点坐标的x、y值

  这里的arr7是献身同叁个职位的1贰拾贰个顶峰,用来给敞开的船尾封口(使用多余的终点算是条带网格模型的贰个短处,但那个毛病和条带网格的易用性比起来能够承受)至于船首的封口则由末端的网格转换负担。

上海时时乐走势图官网 3

  这里的算法很轻便,遍历路线中的种种终端,然后分局方的设计进行逻辑判定就可以。

只要照旧点(0.0,0.5,0.0)的x和y值在收缩0.5过后为(0.0,0.25,0.0),看下矩阵总结:

 1 //上下挤压,对于每个顶点都生效的变换尽量只执行一次
 2 function TranceRing1(arr)
 3 {
 4     var len=arr.length;
 5     for(var j=0;j<len;j  )
 6     {
 7         var obj=arr[j];
 8         if(obj.y<0)
 9         {
10             obj.y=obj.y/4;
11             if(obj.y<-1)
12             {
13                 obj.y=-1;
14             }
15         }
16         else if(obj.y>2)
17         {
18             obj.y=(obj.y-2)/2 2;
19         }
20     }
21     return arr;
22 }

GLKit提供了GLKMatrix4MakeRotation(float angleRedians, float x, float y, float z)函数,这一个函数通过旋转一个单位矩阵来回到二个定义了坐标系的新矩阵。angleRedians参数钦点了要旋转的弧度数。使用GLKMathDegreesToRadians(float degrees)函数可以把角度转变来弧度。x、y和z参数用于钦赐当前坐标系的哪三个轴作为旋转的轮毂。

  4、使用上一篇小说中涉嫌的章程生成条带网格:

比如:GLKMatrix4MakeRotation(GLKMathDegreesToRadians(60.0) , 1.0, 0.0, 0.0)会沿着二个特定的坐标系的X轴旋转60度来发出一个新的坐标系。

上海时时乐走势图官网 4

OpenGL ES中的二种基本转移:平移(translation)、旋转(rotation)。基本转移的一道决定了在叁个新的坐标系中的每一个极端地点是怎么转换为参考坐标系中的贰个地方的。四个主题转移足以产生持续坐标系。

  3、将方不熟习成的一条路子克隆为多条门路,规定每两条门路之间的相距为0.25:

此地的GLKMatrix4Identity也正是下边包车型客车矩阵:

  能够看见船头的1贰18个终端被缩放到了同样职位,船头呈现油滑的弧线。

上海时时乐走势图官网 5

  当然Babylon.js还帮衬更头晕目眩的纹理类型,笔者翻译了Babylon.js官方教程中关于反射与折射,反射探查,地图纹理,多种材质,动态纹理,高亮描边的文书档案(部分文书档案翻译的不明明,因为官方文书档案本身的抒发亦非很明显),能够在

上海时时乐走势图官网 6

  MakePointPath代码如下:

下边结合两种转移,直接相乘就足以,不过要注意顺序:平移旋转缩放。那样能够确定保障先缩放,再旋转,最终平移。

 1 //克隆复制对象数组
 2     function CloneArrPoint(arr)
 3     {
 4         var arr2=[];
 5         var len=arr.length;
 6         for(var i=0;i<len;i  )
 7         {
 8             arr2.push(arr[i].clone());
 9         }
10         return arr2;
11     }
12     //平移x轴
13     function MoveX(path,dis)
14     {
15         var len=path.length;
16         for(var i=0;i<len;i  )
17         {
18             path[i].x =dis;
19         }
20         return path;
21     }
GLKMatrix4 transformMatrix;

// 初始化为单位矩阵,不对图形产生任何变换
transformMatrix = GLKMatrix4Identity;

上海时时乐走势图官网 7

// 绕x轴
    transformMatrix = GLKMatrix4Make(1.0, 0.0,           0.0,          0.0,
                                     0.0, cos(elValue), -sin(elValue), 0.0,
                                     0.0, sin(elValue),  cos(elValue), 0.0,
                                     0.0, 0.0,           0.0,          1.0);

    // 绕y轴
    transformMatrix = GLKMatrix4Make(cos(elValue),0.0, sin(elValue), 0.0,
                                     0.0,         1.0, 0.0,          0.0,
                                    -sin(elValue),0.0, cos(elValue), 0.0,
                                     0.0,         0.0, 0.0,          1.0);

    // 绕z轴
    transformMatrix = GLKMatrix4Make(cos(elValue),-sin(elValue), 0.0, 0.0,
                                     sin(elValue), cos(elValue), 0.0, 0.0,
                                     0.0,           0.0,         1.0, 0.0,
                                     0.0,           0.0,         0.0, 1.0);

  6、生成都飞机船的后掠翼,生成规律与船首类似:

GLKMatrix4 rotateMatrix = GLKMatrix4MakeRotation(elValue , 0.0, 0.0, 1.0);
// 绕Z轴旋转

上海时时乐走势图官网 8

把那些调换矩阵赋值到uniform mat4 transform上:

  缩放后的显示效果如下:

在极端着色器中新扩大了贰个uniform mat4 transform。 mat4那几个类型前文有关联过,4X4的矩阵。它是Shader内置的档期的顺序,扶持直接加减乘等操作。使用矩阵会产生更加少的运算指令,GPU能够越来越好的优化运算进度。

上海时时乐走势图官网 9

旋转
旋转是透过相对于参照他事他说加以考察坐标系坐标轴的势头旋转新坐标系的坐标轴来定义贰个新坐标系。旋转的坐标系会与参照他事他说加以考察坐标系使用同一个原点。旋转不会潜濡默化坐标轴的单位长度,唯有坐标轴的样子会发生变化。

 1 function MakeRing(radius,sumpoint)//两个参数分别是圆形的半径和圆形由多少个顶点组成
 2     {
 3         var arr_point=[];//顶点数组
 4         var radp=Math.PI*2/sumpoint;//每一个顶点在圆弧上转过的角度
 5         for(var i=0.0;i<sumpoint;i  )
 6         {
 7             var x=0;
 8             var rad=radp*i;
 9         //算出顶点的y、z坐标
10             var y=radius*Math.sin(rad);
11             var z=radius*Math.cos(rad);
12             arr_point.push(new BABYLON.Vector3(x,y,z));
13         }
14         arr_point.push(arr_point[0].clone());//为了保持首尾相连,要再添加一次第一个顶点
15         return arr_point;
16     }
// 定义一个在值域-1和1之间的局部变量
GLfloat elValue = sinf(changeValue);

// 创建平移变换矩阵,这里只改变了X坐标
GLKMatrix4 translateMatrix = 
GLKMatrix4MakeTranslation(elValue, 0.0, 0.0);

  对于船体上部,高度低于2的局部直接选用半径为7的半圆形作为仓壁,高于2的一部分则将中度裁减一半;对于船体下部,将大致形状设为压扁到五分之一的拱形,再将中度低于-1的一些设为平直的船底。

本例代码:LearningOpenGL ES GitHub

  想象翼面在y方向由多层互相重叠的社团构成,每一片的尺寸不相同,因而页面能够具有两重的半圆形边缘,暗意图如下:

关于OpenGL ES的二种基本转移就谈到那边,其实还应该有多少个第一的投影调换 -- 透视投影和正交易投资影。就不在本篇继续说了,尽量调控一下篇幅,就在下一篇讲吧!

 1 //用一个重合点路径封口
 2 function MakePointPath(vec,size)
 3 {
 4     var arr_point=[];
 5     for(var i=0;i<size;i  )
 6     {
 7         arr_point.push(vec.clone());
 8     }
 9     return arr_point;
10 }

看下效果图:

 

attribute vec4 position;
attribute vec4 color;
varying vec4 fColor;
uniform mat4 transform;
void main(void) {
    fColor = color;
    gl_Position = transform * position;
}

  遵照设计,从最上端俯视船体的前半有个别是七个z向半径为7、x向半径为15的“圆弧形”,从侧边看船头的上部是y向半径为3.25、x向半径为5的圆弧形,船头的底下是y向半径为1、x向半径为2的圆弧形。

透过地方的矩阵总结能够窥见,平移矩阵正是在八个4x4的改变矩阵中填充第4行前面多少个地点:

   然后参照他事他说加以考察上海教室,在三个短轴为w长轴为h的拉伸扇形中总括每一个终端向左或右臂的偏移量。

因为我们只是挪动了坐标X值,Y和Z值未有变,所以三角形只是沿着X轴平行移动。

  事实上,在编辑3D模型时一定的长度数值并不曾决定性的意思(当然过大或过小可能产生实体脱出视场),决定模型形状的首借使随地尺寸之间的比重关系,具体的尺码大小都得以在载入模型后基于必要张开缩放,这里将船体长度设为30单位是为着在预设的编辑场景里方便查看。

缩放
缩放是经过相对于参谋坐标系的坐标轴的单位长度更动新坐标系的坐标轴的单位长度来定义一个新坐标系。缩放坐标系与参考坐标系使用同叁个原点。坐标轴的来头普通不会转移。然而,通过叁个负值所做的缩放就能翻转坐标轴的大方向。

  

上面的elValue值域为[-1,1],先看一下为-1的时候,大家取当中二个极限(0,0.5,0)经过(-1,0,0)的活动之后为(-1,0.5,0),我们看一下矩阵计算:

上海时时乐走势图官网 10

上海时时乐走势图官网 11

  5、通过极端转换生成锥形的船头:

上海时时乐走势图官网 12

  认为翼面由多层组成,参考下图,最大的一层宽度为7.5,最小的一层宽度为6.5,个中某一层与小小层的小幅差为size1,使用和船头圆弧类似的点子算出size1的值,进而算出这一层的尺寸。

而外选取GLKit提供的GLKMatrix4MakeRotation函数直接扭转,我们还足以友善定义4x4的旋转矩阵:

  执行职能如下:

各种中央转移对应于矩阵的一个轻松变化。定义贰个与参谋坐标系一样的坐标系的矩阵叫做单位矩阵。放肆三个矩阵能够在三个联级(又叫矩阵乘法)操作中结合起来以发出三个新矩阵,那么些新矩阵满含了五个矩阵的装有转变。实际上,各个大旨转移会发生一个回顾的矩阵,然后把这几个轻便的矩阵与日前调换矩阵连接起来以发出四个新的当前矩阵。

  y和z的总计需求使用初级中学数学的三角函数知识。

一句话来讲分析:elValue为正弦函数的值,所以在-1和第11中学间,在elValue为1是,不会对原数占领影响,当为-1时,就能够翻转坐标轴的大势。所以最后效果就是上航海用体育地方这样,从原图收缩到0,然后负数增大,正是倒过来了。

  附实际开采时利用的草图:

上海时时乐走势图官网 13

  规定船体沿x轴方向摆放,船体中央位于世界坐标系原点,船头朝向x轴负方向,船顶朝向y轴正方向。

修改代码,看一下GLKit提供的GLKMatrix4MakeTranslation函数达成活动作效果果。

  尾翼的变迁格局和档期的顺序翼相似。

周旋于平移和缩放,旋转要复杂一些。旋转让承包涵多少个重大成分,旋转的角度,绕什么轴转动。

  克隆路线和x轴平移的不二秘技如下:

上海时时乐走势图官网 14

  作者将圆弧定义为拉伸的正圆形的一有个别,然后由x坐标值总括出对应路径的缩放比例,原理图如下(以“从侧面看的船首上部”为例):

// 缩放
GLKMatrix4 scaleMatrix = GLKMatrix4MakeScale(elValue, elValue, 1.0);

// 旋转
GLKMatrix4 rotateMatrix = GLKMatrix4MakeRotation(elValue , 0.0, 0.0, 1.0);

// 平移
GLKMatrix4 translateMatrix = GLKMatrix4MakeTranslation(elValue, elValue, 0.0);

/*
transformMatrix = translateMatrix * rotateMatrix * scaleMatrix
矩阵会按照从右到左的顺序应用到position上。也就是先缩放(scale),再旋转(rotate),最后平移(translate)
如果这个顺序反过来,就完全不同了。从线性代数角度来讲,就是矩阵A乘以矩阵B不等于矩阵B乘以矩阵A。
*/
transformMatrix = GLKMatrix4Multiply(translateMatrix, rotateMatrix);
transformMatrix = GLKMatrix4Multiply(transformMatrix, scaleMatrix);
1 mat_blue.twoSidedLighting=true;//双面光照选项

看一下提起底效果:

  随后编写三个格局让机翼向前面倾斜斜,距机身越远的极限向后运动的偏离越大。

从数学上说,转换正是在三个坐标系之间转变顶点坐标。每一个坐标系都是对立于别的的参照坐标系定义的。对于OpenGL ES来讲,最后的仿照效法坐标系是在三个像素颜色渲染缓存中的像素地点的2D数组。

上海时时乐走势图官网 15

关于旋转矩阵能够参见那篇三个维度空间中的旋转:旋转矩阵、欧拉角

  用分歧的比例对路径进行压缩,将原来尺寸同样的路子形成尺寸渐变的不二秘籍,路线连成的条带网格就交易会现椎体的形状,那么难题就在于怎么样总结那么些缩放的百分比,使得椎体的外界展现为狡猾的拱形。

因为我们的多寡更新在update里,而赋值绘制在glkView:(GLKView *)view drawInRect:(CGRect)rect中,所以须求定义为全局:

上海时时乐走势图官网 16

概念全局

上海时时乐走势图官网 17

绘制之后看下效果:

  大家第一对3D模型的大致举办价值评估,然后创设二个有着丰富多终端的、与模型轮廓近似的网格对象(这里采用条带类网格对象),接着对网格的一部分极端实行岗位调换以爆发模型的细节,最后为模型设置一个材质。

上海时时乐走势图官网 18

  从顶端看的缩放比例也是那般猜想,那时总结获得的是z轴方向的缩放比例。

接下去在动用中成立一个平移调换矩阵:

 

看下最终包蕴了运动、缩放、旋转的作用:

  计算y、z坐标的暗指图如下:

平移
通过相对于参考坐标系的原点移动新坐标系的原点、平移定义了多个新的坐标系。平移不会影响坐标轴的单位长度,平移不会转移坐标轴相对于参考坐标系的势头。
GLKit提供了GLKMatrix4MakeTranslation(float x,float y,float z)函数,这么些函数通过活动三个单位矩阵来回到一个定义了坐标系的新矩阵。x、y、z参数钦点了新坐标原点沿着当前仿效坐标系的各种轴移动的单位数。

  左边暗示图如下:

GLKit提供了GLKMatrix4MakeScale(float x,float y,float z)函数,那些函数会通过增加只怕收缩三个单位矩阵的人身自由坐标轴的单位长度来回到贰个定义了坐标系的矩阵。x、y和z参数钦定了用来扩大或然减少每种轴的单位长度的成分。GLKMatrix4Scale(float x,float y,float z)函数通过按钦命的因子缩放作为参数字传送入矩阵来回到七个定义了坐标系的新矩阵。

  生成的轮廓网格如下图:

  路线克隆的暗指图如下:

  船首的变形代码如下:

  接下去使用“var arr1=TranceRing1(MakeRing(7,128));”将圆形路径形成我们安排的船体截面路线,TranceRing1办法代码如下:

 

上海时时乐走势图官网 19

上海时时乐走势图官网 20

  执行ChangeMaterial(mesh_origin,mat_阿尔法)能够将材质转化为半晶莹剔透,同样须求对mat_阿尔法设置上述性格,不然将独有飞船的内表面可知,半晶莹剔透效果如下图:

  首先将从右边看船头上部的高级中学级截面通过将x坐标除以(5/3.25)的方法调换为正圆的一部分,用(-10-obj.x)/(5/3.25)总结出“xsize”的尺寸,因为y轴缩放比例十三分在这里个截面上顶峰中度(y值)和半径(r)的比等于sin(a),所以只须要出角a的轻重缓急就可以算出比例,而角a的大大小小能够由(xsize/r)的反余弦得出。如此得出y方向的缩放比例。

  1、从最上端看,预计飞船的首尾长度为30单位,船体最宽处半径为7单位,船头处呈狡猾的锥形;从船头方向看,船体顶上部分为较扁的拱形,船尾部边缘圆滑中间平直(有点像上个世纪的航天飞机)。草图如下:

  然后开头塑造多少个合乎上述轮廓的条带网格。

 1 //有的顶点变换会受到周围顶点的影响,所以要在已经构造好的基础上进行变换
 2 function TransCraft()
 3 {
 4     var len=arr_path.length;
 5     //遍历每个点,用程序判断这个点是否符合某些标准,并进行相应变化
 6     for(var i=0;i<len;i  )
 7     {
 8         var arr_point=arr_path[i];
 9         var len2=arr_point.length;
10         for(var j=0;j<len2;j  )
11         {
12             var obj=arr_point[j];
13             //var x=obj.x;
14             //var y=obj.y;
15             //var z=obj.z;
16             //船首呈椎体状
17             if(obj.x<-13&&obj.y<0)//从侧面看的船首下部
18             {
19                 var rate=Math.sin(Math.acos((-13-obj.x)/2/1));//y轴方向缩放系数
20                 obj.y=obj.y*rate;
21             }
22             if(obj.x<-10&&obj.y>0)//从侧面看的船首上部
23             {
24                 var rate=Math.sin(Math.acos((-10-obj.x)/(5/3.25)/3.25));//y轴方向缩放系数
25                 obj.y=obj.y*rate;
26             }
27             if(obj.x<0)//从顶部看的船首
28             {
29                 var rate=Math.sin(Math.acos((-obj.x)/(15/7)/7));//y轴方向缩放系数
30                 obj.z=obj.z*rate;
31             }
1 var arr7=MakePointPath(new BABYLON.Vector3(15,0,0),129);//用一个点封口
2     arr_path.push(arr7);
3 
4     mesh_origin=BABYLON.MeshBuilder.CreateRibbon("mesh_origin",{pathArray:arr_path
5         ,updatable:true,closePath:false,closeArray:false});
6     mesh_origin.material=mat_frame;

    

  7、在调节台施行ChangeMaterial(mesh_《VR入门系列教程》之12---转换矩阵(转载)【上海时时乐走势图官网】。origin,mat_blue)能够将材质转化为纯深红,因为条带网格的法线方向暗中认可指向飞船内部,那时飞船外界将不可能展现光照的镜面反射作用,解决办法是在起首化材料时设置:

1 arr_path=[];//路径数组
2     var xstartl=-15;//设置船头(也就是第一个圆环路径)在x轴上的位置    
3     var arr1=TranceRing1(MakeRing(7,128));
4     for(var i=0;i<121;i  )
5     {
6         var arr_point=CloneArrPoint(arr1);//克隆一条路径
7         arr_path.push(MoveX(arr_point,i*0.25 xstartl));//将克隆出的路径沿x轴方向平移
8     }

上海时时乐走势图官网 21 

本文由上海时时乐走势图发布于web前端,转载请注明出处:《VR入门系列教程》之12---转换矩阵(转载)【上海

您可能还会对下面的文章感兴趣: