7.移动旋转和缩放(矩阵)

1.逆时针(正旋转):如果旋转角是正值,观察者在Z轴正半轴某处,视线沿着Z轴负方向进行观察,那么看到的物体是逆时针方向旋转的。

2.右手法则旋转:右手握拳,大拇指伸直并使其指向旋转轴的正方向,那么右手其余手指就指明了旋转的方向。

3.平移矩阵:

如图:x' = x + Tx ; y' = y + Ty ; z' = z + Tz;

则平移矩阵就是:

4.旋转矩阵:

在二维平面中,x' = x * cosB - y * sinB ; y' = y * sinB + y * cosB ; z' = z ;

那么旋转矩阵就是:

5.缩放矩阵:

如图:x' = Sx * x ; y' = Sy * y ; z' = Sz * z ; 

那么缩放矩阵就是:

6.程序实现

    使用旋转矩阵来实现旋转三角形

    (1)在GLSL ES中定义了4x4矩阵:mat4,着色器内置了矢量和矩阵运算

    (2)在JavaScript中定义4x4矩阵:JavaScript中并没有专门表示矩阵的类型,所以需要使用类型化数组Float32Array,将矩阵中的元素按列主序顺序存储在数组中。

    (3)对着色器中定义的矩阵进行赋值

gl.uniformMatrix4fv(u_xformMatrix,false,xformMatrix);

    API:gl.uniformMatrix4fv( location, transpose, array)

            location:uniform变量的存储位置

            transpose :必须设置为false,表示是否转置矩阵,WebGL并没有提供转置矩阵的方法

            array:待传输的类型化数组

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值