webgl 绕 X 轴旋转相机

Question

我在围绕 X 轴旋转相机时遇到了一些问题。我在相机的场景中放置了一张图像，当我用相机抬头时，我想在场景中保留一张图像。

首先我建立了一些函数来创建矩阵：

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.
    );
}

不仅仅是 Y 轴上的平移相机位置

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

但我不想平移相机位置我想绕轴旋转并将图像保留在场景中

我就是这样做的：

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.);

但最终我的图像并没有向上移动，而是在上下两侧展开，而不仅仅是向上或向下，为了垂直展开，我需要在旋转相机时围绕 X 轴旋转相机围绕 Y 轴水平扩展。

您没有任何解决方法的建议吗？

Answer 1

广告牌是始终面向相机的四边形的通用名称。

广告牌网格数据是面向相机的平面 (z = 0)。

您可以通过将模型视图矩阵的旋转部分设置为 0 来渲染广告牌，只保留平移部分：gl_Position = projection * zeroRotationAndScaling(view * model) * attr_position; 在顶点着色器中。

如果您 google 搜索 "billboard"，我相信您会找到很多参考资料，例如 this。

webgl 绕 X 轴旋转相机

webgl rotate camera around X-axis

camera

opengl-es

rotation

webgl

opengl-es-2.0