title: webgl rotate camera around X-axis
body: <p>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.  </p>
  
  <p>First I built up some functions to create matrices:</p>
  
  <pre><code>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.
      );
  }
  </code></pre>
  
  <p>Than just <b>translated camera position</b> in Y-axis </p>
  
  <pre><code>float ax = tan(hFOV * M_PI);
  float ay = ax / aspectRatio;
  mat4 res = makeTranslation(0., move_y, 0.) * myW2N(ax,ay,6.,2.);
  </code></pre>
  
  <p>But I don't want to translate camera position I want to <b>rotate it around axis</b> and keep image inside the scene </p>
  
  <p>And this is how I'm trying to do it:</p>
  
  <pre><code>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.);
  </code></pre>
  
  <p>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.</p>
  
  <p>Don't you have any advice how to fix it?</p>