Shader 3d RayMarching4 相机与鼠标控制

坐标系

首先理解一个图形学中常常听到的概念【视图变换（View Transformation）】, 这个变换是计算机图形学中将场景从世界坐标系转换到相机坐标系的过程。先回忆以下坐标系

世界坐标系 (World Coordinates): 这是物体在三维空间中的实际位置和方向。所有物体和相机的位置、方向都在这个坐标系中定义。
视图坐标系 (View Coordinates): 这是以相机的位置为原点，相机的视线方向为一个轴建立起来的坐标系。视图变换将世界坐标系中的物体转换到视图坐标系中。
投影坐标系 (Projection Coordinates): 将3D坐标映射到2D平面上的过程。常见的投影方式有透视投影和正交投影。
屏幕坐标系 (Screen Coordinates): 最终的2D图像在屏幕上的像素位置。

在rayMarch中， ray的方向函数已经表示了屏幕与透视投影。

glsl 复制代码

     vec3 rayDirection = normalize(vec3(uv.x, uv.y, 1.));

相机函数

视图变换通常通过一个视图矩阵（View Matrix）来实现。这个矩阵将世界坐标转换到以相机位置为中心的坐标系中。在shader中视图矩阵的一般构建过程如下：

相机的位置 (ro): 相机在世界坐标系中的位置。
相机的目标 (ta): 相机镜头指向的目标点。
相机的上方向 (up): 定义相机的"顶部"方向，通常为 (0, 1, 0)，表示相机向上的方向。

通过三个参数可以确定以下是那个矢量

前向矢量 zaxis: 从相机的位置指向目标点的归一化矢量。表示相机视线的方向。
右向矢量 xaxis: 上方向和前向矢量的叉积，并归一化。表示相机右手边的方向。
上向矢量 yaxis: 前向矢量和右向矢量的叉积。表示相机头顶方向。

以三个矢量对应的便是三个角度 Pictch Yaw Roll

Pitch （俯仰角）定义: pitch 是围绕物体的右向轴（一般为X轴）旋转的角度。这种旋转导致物体前后倾斜，比如从地平面上向上或向下看。正值: 向上仰视（抬头）。负值: 向下俯视（低头）。想象一个飞机的话，当飞机的机头上仰或下俯时，这就是pitch的效果。
Yaw（偏航角）定义: yaw 是围绕物体的上向轴（一般为Y轴）旋转的角度。这种旋转改变了物体的朝向左右方向，不过不改变其高度。正值: 向右旋转。负值: 向左旋转。像汽车转弯时的场景，当汽车向左或向右转时，这就是yaw的效果。
Roll（滚转角）定义: roll 是围绕物体前向轴（一般为Z轴）旋转的角度。这种旋转导致物体左右翻滚，如飞机翻滚。正值: 顺时针旋转（从前向看）。负值: 逆时针旋转。

一般调试的时候Roll不会使用到，因为人的观察可以左右和上下，但是很少有翻转观察的场景。另外鼠标的变化只有x,y 两个方向， x方向用来控制相机的位置，沿着x axis移动等于沿着目的地旋转。我个人喜欢y Axis用作pitch，所以最后我们可以确定生成相机Matrix函数签名为

java 复制代码

mat3 setCamera(vec3 ro, vec3 ta, float pitch)

相机实现

相机主线逻辑主要分为以下4步骤

计算初始前向（forward）和右向（right）矢量。
构建 pitch 和 yaw 变换矩阵，用来表示上下旋转和左右旋转。
应用这些变换矩阵，生成新的前向、上向和右向矢量。
返回新的相机方向矩阵。

glsl 复制代码

mat3 setCamera(vec3 ro, vec3 ta, float a) {
    vec3 forward = normalize(ta - ro);
    vec3 up = vec3(0., 1.,  0.);
    vec3 right = cross(forward, up);
    
    // pitch
    mat3 pitchMat = mat3(
      cos(a), sin(a), 0.0,
     -sin(a), cos(a), 0.0,
         0.0,    0.0, 1.0
    );
    
    // roll
    mat3 rollMat = mat3(
    1.0,    0.0,    0.0,
    0.0, cos(a), sin(a),
    0.0,-sin(a), cos(a)
    );
     
     
     // yaw
     mat3 yawMat = mat3(
     cos(a), 0.0, sin(a),
        0.0, 1.0, 0.0,
    -sin(a), 0.0, cos(a)
    );
     
     
    vec3 newForward = forward * pitchMat ;
    vec3 newUp = up * pitchMat;
    vec3 newRight = cross(newForward, newUp);
    

    return mat3(newRight, newUp, newForward);
}

鼠标控制

shadertoy里面有 imouse的 unifrom可以用，用屏幕坐标x表示旋转角度， y表示 pitch于是有

glsl 复制代码

float theta = 2.0 * PI * iMouse.x/ iResolution.x;
float pitch =  0.1 * PI * (iMouse.y - iResolution.y * .5)/ iResolution.y;
vec3 target = vec3(0.0);
vec3 rayOrigin  = vec3( 10.*cos(theta), 2.0, 10.*sin(theta) );

实现看像世界中心，相机的位置随鼠标沿着屏幕坐标X的移动，绕世界坐标Y axis 环绕运动

ini 复制代码

vec3 target = vec3(0.0);
vec3 rayOrigin  = vec3( 10.*cos(theta), 2.0, 10.*sin(theta) );

随着camera的变化，我们的rayDirection需要去做视图变换变换

ini 复制代码

mat3 camera = setCamera( rayOrigin, target, pitch );
vec3 rayDirection = normalize(camera * vec3(uv,1.8) );

最后得到镜头感十足的画面