CODEWITHSUNDEEP
opengl-escamerarotationwebglopengl-es-2.0
Petr Bečka
Petr Bečka

Reputation: 794

webgl rotate camera around X-axis

I'm having some trouble with rotating camera around X-axis. I have an image placed in the camera's scene and when I look up with camera I want to keep an image inside the scene.

First I built up some functions to create matrices:

mat4 makeTranslation(float tx, float ty, float tz) {
    return mat4(
         1.,  0.,  0.,  0.,
         0.,  1.,  0.,  0.,
         0.,  0.,  1.,  0.,
         tx, ty, tz, 1.
    );
}
mat4 makeXRotation(float angleInDegrees) {
    float angleInRadians = angleInDegrees * M_PI / 180.;
    float c = cos(angleInRadians);
    float s = sin(angleInRadians);

    return mat4(
        1., 0., 0., 0.,
        0., c, s, 0.,
        0., -s, c, 0.,
        0., 0., 0., 1.
    );
}
mat4 makeZRotation(float angleInDegrees) {
    float angleInRadians = angleInDegrees * M_PI / 180.;
    float c = cos(angleInRadians);
    float s = sin(angleInRadians);
    return mat4(
         c, s, 0., 0.,
        -s, c, 0., 0.,
         0., 0., 1., 0.,
         0., 0., 0., 1.
    );
}
// camera
mat4 myW2N(float ax, float ay, float zNear, float zFar) {
    float cx = 1.0 / ax;
    float cy = 1.0 / ay;
    float z0 = -zNear;
    float z1 = -zFar;
    float az = (z0 + z1) / (z0 - z1);
    float bz = (1. - az) * z0;
    return mat4(
        cx, 0., 0., 0.,
        0., cy, 0., 0.,
        0., 0., az, bz,
        0., 0., -1., 0.
    );
}
// transpose
mat3 rotationW2R() {
    return mat3(
        0., 0., 1.,
        1., 0., 0.,
        0., 1., 0.
    );
}

Than just translated camera position in Y-axis 

float ax = tan(hFOV * M_PI);
float ay = ax / aspectRatio;
mat4 res = makeTranslation(0., move_y, 0.) * myW2N(ax,ay,6.,2.);

But I don't want to translate camera position I want to rotate it around axis and keep image inside the scene

And this is how I'm trying to do it:

float ax = tan(hFOV * M_PI);
float ay = ax / aspectRatio;
mat4 res = makeXRotation(pitch) * makeZRotation(roll) * makeTranslation(0., move_y, 0.) * myW2N(ax,ay,6.,2.);

But in the end my image doesn't move up it expands on both sides up and down not just up or just down, and to expand it vertically I need to rotate camera around X-axis, when I rotate it around Y-axis it expands horizontally.

Don't you have any advice how to fix it?

Upvotes: 1

Views: 1315

Answers (1)

WacławJasper
WacławJasper

Reputation: 3384

Billboard is the common name for a quad that always faces the camera.

The billboard mesh data is a plane that faces the camera (z = 0).

You can render a billboard by setting the rotation portion of the model view matrix to 0, only leaving the translation part: gl_Position = projection * zeroRotationAndScaling(view * model) * attr_position; in the vertex shader.

If you google around searching for "billboard" Im sure you will find lots of references like this.

Upvotes: 1

Related Questions