[小白自学]Shader-07-实现根据视差切换贴图效果

功能描述:
根据相机看向平面的视差来显示不同的贴图。
效果:
ezgif-8e59c2f557cfe2
参数:

//主视角贴图
mainTexture:    { value: white }
//俯视视角贴图
upviewTexture: { value: white }
//仰视视角贴图
downviewTexture: { value: white }
mainColor:      { value: [1, 1, 1, 1], editor: { type: color } }

核心思路:
根据相机位置与平面中心点位置计算平面中心的观察向量,再根据平面上的法方向来求解当前的视差夹角。利用向量投影公式,容易求算出当前的大致观察位置,再根据观察位置来采样不同的贴出来显示。

vec4 frag () {
    //获取视点到平面中心的向量
    vec3 viewDir = -normalize(vec3(0) - cc_cameraPos.xyz);
    float dotPrd = dot(viewDir, v_normal);
    
    //计算视点到平面中心的向量与法线的投影
    vec3 viewPrj = normalize(viewDir - v_normal * dotPrd);
    vec4 col = mainColor;

    //根据投影的方向选择不同的纹理进行采样
    if(dotPrd < 0.9){
      col *= viewPrj.z < 0.0 ? texture(upviewTexture, v_uv) : texture(downviewTexture, v_uv);
    }else{
      col *= texture(mainTexture, v_uv);
    } 
    return CCFragOutput(col);
  }

扩展:可以根据此原理制作3D卡片效果,以及简单的空间视差效果。

1赞

:ox::beer:,高产啊,我怀疑你是巨佬,但是没有证据

谢谢关注,我还在学习中,也是想到一些就尝试记录一下。 :smile: