Rotate model with GLKit – Quaternions and Matrices math

I was looking for algorithm to apply additional rotation to model with current rotation matrix, and found this:

1
2
3
GLKVector3 up = GLKVector3Make(0.f, 1.f, 0.f);
up = GLKQuaternionRotateVector3( GLKQuaternionInvert(quarternion), up );
GLKQuaternion quarternion = GLKQuaternionMultiply(quarternion, GLKQuaternionMakeWithAngleAndVector3Axis(delta.x * RADIANS_PER_PIXEL, up));

It’s from this small tutorial about rotation:
A bit modified code, source here
Under code a bit more text and links
Continue reading

Decompose matrix, functions for GLKit

Иногда появляется необходимость развернуть объект из одного положения в другое. Для этого нужно извлечь угол из текущей матрицы и добавить дельта угол, в результате чего получим угол на который будет повернут объект. Итак, сперва необходимо получить размер по x,y,z и исходя из этих величин и матрицы, получить матрицу вращения из которой мы уже получим угол на который повернут наш объект.

Decompose Scale factor, matrix rotation and translate vector from modelViewMatrix

Translate vector:
vt = (M41, M42, M43)T

Getting scaling factors:
sx = sqrt(M112 + M122 + M132);
sy = sqrt(M212 + M222 + M232);
sz = sqrt(M312 + M322 + M332);

 

 

Now you can work backwards for the rotation matrix:

Mrot = M11/sx   M12/sx   M13/sx   0
M21/sy M22/sy M23/sy 0
M31/sz M32/sz M33/sz 0
0 0 0 1

Additional functions for iOS GLKit
Continue reading

GLKit, Opengl ES 2.0 Picking Ray for select object

Solution for picking

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
GLKVector4 normalisedVector = GLKVector4Make((2 * position.x / self.view.bounds.size.width - 1),
                                                 (2 * (self.view.bounds.size.height-position.y) / self.view.bounds.size.height - 1),  
                                                   -1,
                                                   1);

GLKMatrix4 inversedMatrix = GLKMatrix4Invert(_modelViewProjectionMatrix, nil);

GLKVector4 near_point = GLKMatrix4MultiplyVector4(inversedMatrix, normalisedVector);

near_point.v[3] = 1.0/near_point.v[3];
near_point = GLKVector4Make(near_point.v[0]*near_point.v[3], near_point.v[1]*near_point.v[3], near_point.v[2]*near_point.v[3], 1);

normalisedVector.z = 1.0;
GLKVector4 far_point = GLKMatrix4MultiplyVector4(inversedMatrix, normalisedVector);

far_point.v[3] = 1.0/far_point.v[3];
far_point = GLKVector4Make(far_point.v[0]*far_point.v[3], far_point.v[1]*far_point.v[3], far_point.v[2]*far_point.v[3], 1);

On

Use Matrix of rotate +MozOrientation

Previous post is simple example of usage MozOrientation. But now i use Matrix of rotate and i have nice animation.

You can read many information about Matrix of rotate here. These methods are used in game development, make animations and many others.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var context = drawingCanvas.getContext('2d');

var xc = 75;
var yc = 75;
var xi = 0;
var yi = 0;

var myImage = new Image();

var angle = (Math.PI/2)*-o.x;
myImage.onload = function() {
     context.clearRect(0,0,150,150);
     context.save();
     
     xi = xi*Math.cos(angle)-yi*Math.sin(angle)-xc;
     yi = yi*Math.sin(angle)+yi*Math.cos(angle)-yc;
     
     
     context.translate( xc , yc);
     
     context.rotate(angle);
     context.scale(1+o.y,1+o.y);
     context.drawImage(myImage, xi, yi);
     
     context.restore();
}
myImage.src = "feedme.png";

Result:

Your browser doesn’t support canvas.


Continue reading