使用Shader进行纹理的旋转

游戏的开发过程中经常会使用纹理的线性变换,来制作出一些特殊的效果,比如旋转的火球,漂浮的云朵等,纹理的线性变换简单来说就是纹理的坐标乘以相应的矩阵。

纹理为二维坐标,我们可以直接写出它的旋转矩阵[cosA,sinA,-sinA,cosA],纹理坐标的起点在纹理的左上角,所以旋转时是以左上角为中心旋转的,如果要使旋转中心在纹理的中心我们就要把纹理坐标xy都减去0.5,让其围绕中心点旋转。

    //_RotateSpeed和gTotalTime为旋转的速率和当前时间,从从着色器外面传输进来
    float _RotateSpeed;
    float  gTotalTime;

    float2 uv = vout.TexC.xy - float2(0.5, 0.5);
    //float2()中的结果为纹理坐标与旋转矩阵相乘后的结果,如果不知道怎么来的自己回去复习3D游戏数学或线性代数
    uv = float2(uv.x * cos(_RotateSpeed * gTotalTime) - uv.y * sin(_RotateSpeed * gTotalTime),
                uv.x * sin(_RotateSpeed * gTotalTime) + uv.y * cos(_RotateSpeed * gTotalTime));
    //旋转完成后需要将纹理坐标平移回去,否则纹理通过寻址会出现其他我们不需要的效果
    uv += float2(0.5, 0.5);
    vout.TexC.xy = uv;
    return vout;
着色器内纹理旋转

着色器内纹理旋转

这就是最后做出来的效果,因为最后是生成动图放上来的所以感觉会非常卡顿,但是像这种效果对现代GPU来说都是小case,用程序跑起来非常的流畅随随便便就几百帧,类似的效果其实可以直接让CPU计算好矩阵,然后给GPU去乘上就可以的。不一定非要在GPU中计算矩阵(包括旋转)。

公众号洛必达

公众号洛必达

未经允许不得转载:他日重逢 » 使用Shader进行纹理的旋转

赞 (2) 打赏

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

隐藏
变装