在学习 Shader 的过程中做的小案例，在 Creator v3.8.3 复现2D物体的翻转效果或者叫伪3D效果？ 56

fake3DMaterial.mtl 、 fake3DEffect.effect 用于实现效果

创建 SpriteNode 节点，给其添加上图和 fake3DMaterial.mtl 材质。

原理

使用旋转矩阵，在片段着色器中对uv进行翻转变化，在顶点着色器对修改后的图像尺寸进行调整。

Effect

通过修改内置的 builtin-sprite.effect 来实现。

参数 properties

properties:
        ...
        FOV: { value: 90, editor: { tooltip: '视场角', range: [1, 179]}}
        y_rot: { value: 0, editor: { tooltip: 'y轴角度', range: [-360, 360] }}
        x_rot: { value: 0, editor: { tooltip: 'x轴角度', range: [-360, 360] }}
        textureSize: { value: [0, 0], editor: { tooltip: '纹理尺寸' }}
        cull_back: { value: 0, editor: { tooltip: '不显示背面, 0:关闭',range: [0, 1, 1] }}

顶点着色器 vs

CCProgram sprite-vs %{
  precision highp float;
  #include <builtin/uniforms/cc-global>
  #include <common/common-define>
  
  #if USE_LOCAL
    #include <builtin/uniforms/cc-local>
  #endif

  #if SAMPLE_FROM_RT
    // #include <common/common-define>
  #endif

  #if USE_FAKE3D

    // 'out/in mediump' 作用为 'varying' 
    out mediump vec3 camera_pos;
    out mediump vec2 offset;

    uniform Fake3D_vs {
      vec2 textureSize;
      float FOV;
      float y_rot;
      float x_rot;
    };
  #endif

  in vec3 a_position;
  in vec2 a_texCoord;
  in vec4 a_color;

  out vec4 color;
  out vec2 uv0;

  vec4 vert () {
    vec4 pos = vec4(a_position, 1);

    #if USE_FAKE3D
      vec2 UV = a_texCoord;
      float sin_b = sin(y_rot / 180. * PI);
      float cos_b = cos(y_rot / 180. * PI);
      float sin_c = sin(x_rot / 180. * PI);
      float cos_c = cos(x_rot / 180. * PI);

      // Y轴旋转矩阵
      mat3 inv_rot_mat_y = mat3(
        vec3(cos_b, 0.0  , sin_b),
        vec3(0.0  , 1.0  , 0.0),
        vec3(-sin_b, 0.0  , cos_b)
      );

      // X轴旋转矩阵
      mat3 inv_rot_mat_x = mat3(
        vec3(1.0  , 0.0  , 0.0),
        vec3(0.0  , cos_c  , -sin_c),
        vec3(0.0  , sin_c  , cos_c)
      );

      // 合成的旋转矩阵
      mat3 inv_rot_mat = inv_rot_mat_y * inv_rot_mat_x;

      // 计算投影角度的正切
      float t = tan(FOV / 360. * PI);
      float v = (0.5 / t) + 0.5;

      // 计算模拟的摄像机位置 和 偏移量
      camera_pos = inv_rot_mat * vec3(UV - 0.5, 0.5 / t);
      camera_pos.xy *= inv_rot_mat[2].z * v;
      offset = inv_rot_mat[2].xy * v;

      pos.x += (UV.x - 0.5) * textureSize.x;
      pos.y -= (UV.y - 0.5) * textureSize.y;

    #endif

    #if USE_LOCAL
      pos = cc_matWorld * pos;
    #endif

    #if USE_PIXEL_ALIGNMENT
      pos = cc_matView * pos;
      pos.xyz = floor(pos.xyz);
      pos = cc_matProj * pos;
    #else
      pos = cc_matViewProj * pos;
    #endif

    uv0 = a_texCoord;
    #if SAMPLE_FROM_RT
      CC_HANDLE_RT_SAMPLE_FLIP(uv0);
    #endif
    color = a_color;

    return pos;
  }
}%

片段着色器 fs

CCProgram sprite-fs %{
  precision highp float;
  #include <builtin/internal/embedded-alpha>
  #include <builtin/internal/alpha-test>

  in vec4 color;

  #if USE_TEXTURE
    in vec2 uv0;
    #pragma builtin(local)
    layout(set = 2, binding = 12) uniform sampler2D cc_spriteTexture;
  #endif

  #if USE_FAKE3D
  in mediump vec3 camera_pos;
  in mediump vec2 offset;

  uniform Fake3D_fs {
    int cull_back;
  };
 #endif

  vec4 frag () {
    vec4 o = vec4(1, 1, 1, 1);

    #if USE_TEXTURE
      o *= CCSampleWithAlphaSeparated(cc_spriteTexture, uv0);
      #if IS_GRAY
        float gray  = 0.2126 * o.r + 0.7152 * o.g + 0.0722 * o.b;
        o.r = o.g = o.b = gray;
      #endif

      #if USE_FAKE3D
        // 启用背面剔除 && 摄像机位置在背面 => 丢弃片段
        if (cull_back != 0 && camera_pos.z <= 0.) discard;

        // 将摄像机位置转换为屏幕上的 UV 坐标, 减去偏移量
        vec2 uv = (camera_pos.xy / camera_pos.z).xy - offset;

        // 纹理采样, 加上 0.5 以调整偏移
        o = texture(cc_spriteTexture, uv + 0.5);

        // 控制纹理的透明度，使超出范围的部分透明
        o.a *= step(max(abs(uv.x), abs(uv.y)), 0.5);
      #endif
    #endif

    o *= color;
    ALPHA_TEST(o);
    return o;
  }
}%

脚本

import { _decorator, Component, EventMouse, Node, renderer, Sprite, tween, UITransform, v2, v3, Vec2 } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('Fake3DCtrl')
export class Fake3DCtrl extends Component {
    @property minAngle: number = -25;
    @property maxAngle: number = 25;

    private pass: renderer.Pass = null;
    private y_rot: number = 0;
    private x_rot: number = 0;

    private spriteWidth: number = 0;
    private spriteHeight: number = 0;

    private lastYRot: number = 0;
    private lastXRot: number = 0;

    start(): void {
        // 材质 初始化
        const sprite = this.node.getComponent(Sprite);
        this.spriteWidth = sprite.spriteFrame.width;
        this.spriteHeight = sprite.spriteFrame.height;

        const material = sprite.getMaterialInstance(0);
        material.setProperty('textureSize', v2(this.spriteWidth , this.spriteHeight));

        this.pass = material.passes[0];
        this.y_rot = this.pass.getHandle('y_rot');
        this.x_rot = this.pass.getHandle('x_rot');

        // 监听鼠标移动
        this.node.on(Node.EventType.MOUSE_ENTER, this.onMouseEnter, this);
        this.node.on(Node.EventType.MOUSE_MOVE, this.onMouseMove, this);
        this.node.on(Node.EventType.MOUSE_LEAVE, this.onMouseLeave, this);
    }

    onMouseEnter() {
        tween(this.node)
        .to(0.1, {scale: v3(1.5, 1.5, 1)})
        .start();
    }

    onMouseMove(event: EventMouse) {
        const screenPos = event.getUILocation();
        const nodePos = this.node.getComponent(UITransform).convertToNodeSpaceAR(v3(screenPos.x, screenPos.y, 1));

        const angleX = this.remap(nodePos.x, -this.spriteWidth/2, this.spriteWidth/2, this.minAngle, this.maxAngle);
        const angleY = this.remap(nodePos.y, -this.spriteHeight/2, this.spriteHeight/2, this.minAngle, this.maxAngle);

        this.pass.setUniform(this.y_rot, angleX);
        this.pass.setUniform(this.x_rot, angleY);

        this.lastYRot = angleX;
        this.lastXRot = angleY;
    }

    onMouseLeave() {
        tween(this.node)
        .to(0.1, {scale: v3(1, 1, 1)})
        .start();
        
        // 缓慢改变材质属性
        tween({ angleVec2: v2(this.lastYRot, this.lastXRot) })
        .to(0.1, { angleVec2: Vec2.ZERO}, {
            onUpdate: (target) => {
                this.pass.setUniform(this.y_rot, target['angleVec2'].x);
                this.pass.setUniform(this.x_rot, target['angleVec2'].y);
            }
        })
        .call(()=>{
            this.lastYRot = 0;
            this.lastXRot = 0;
        })
        .start();
    }

    /**
     * 映射
     * @param num 当前值
     * @param sourceMin 原最小值
     * @param sourceMax 原最大值
     * @param targetMin 目标最小值
     * @param targetMax 目标最大值
     * @returns 映射后的目标值
     */
    remap(num: number ,sourceMin: number, sourceMax: number, targetMin: number = 0, targetMax: number = 1): number {
        
        if (num < sourceMin || num > sourceMax) {
            console.log(`Source Range Error: ${num} Not In [${sourceMin}, ${sourceMax}]`);
            return;
        }

        if (sourceMin > sourceMax) {
            console.log(`Source Range Error: sourceMin(${sourceMin}) > sourceMax(${sourceMax})`);
            return;
        }

        if (targetMin > targetMax) {
            console.log(`Target Range Error: targetMin(${targetMin}) > targetMax(${targetMax})`);
            return;
        }

        const sourceRange = sourceMax - sourceMin;
        const targetRange = targetMax - targetMin;

        if (sourceRange === 0) {
            console.log(`Source Range Warning: Source Range Is 0`);
            return targetMin;
        }

        const normalizedNum  = (num - sourceMin) / sourceRange;
        
        return targetMin + (normalizedNum * targetRange);
    }
}

效果