zoukankan      html  css  js  c++  java
  • 不好意思,我膨胀了! shader 入门精要! Cocos Creator 3D Shader !

    不好意思,我膨胀了! shader 入门精要! Cocos Creator 3D Shader !

    shader 也能让你变胖?膨胀肥胖效果! 附完整项目!

    效果

    实现

    模型的形状一般都是由三角形围成的,每个顶点一般都会有一个法线信息。

    所以我们只需要把每个顶点的位置沿着法线方向,增加一点距离就可以了。

    position.xyz + v_normal * fatFactor
    

    那么在 CCC 3D 中怎么融入这个效果呢?

    先找到模型的材质,看看默认使用的是什么effect (一般都是builtin-standard.effect)。

    拷贝一份 effect 开始编写 (这里拷贝的是builtin-standard.effect)。

    找到法线向量和计算顶点坐标的地方。

    加上法线方向的位移即可。

    return cc_matProj * (cc_matView * matWorld) * vec4(In.position.xyz + v_normal*0.05, In.position.w);
    

    最后选择我们写好的 builtin-standard-fat.effect ,就可以看到效果啦。

    当然也可以定义一个肥胖系数fatFactor

      uniform lamyoung_com {
        float fatFactor;
      };
      //In.position.xyz + v_normal * fatFactor
    

    在外部控制这个肥胖系数,就达到了原理那个效果图啦。

    this.modelComponent.getMaterial(0).setProperty('fatFactor', 0.1 * slider.progress);
    

    小结

    法线向量! 膨胀 !shader

    以上为白玉无冰使用 Cocos Creator 3D v1.1.2 实现 "shader 膨胀效果(fat)" 的技术分享。欢迎分享给身边的朋友!

    天下事有难易乎?为之,则难者亦易矣;不为,则易者亦难矣。人之为学有难易乎?学之,则难者亦易矣;不学,则易者亦难矣。

    更多

    3D雾
    噪声纹理之消融效果
    流体之 LiquidFun 流体纹理 shader

    █ 原创文章导航 █

    原文链接
    完整代码(见readme)

  • 相关阅读:
    Wireshark——工具
    Wireshark——网络协议
    Wireshark——过滤器
    Wireshark——数据包、着色规则和提示
    Floyd最小环
    有向环覆盖问题
    KM算法
    归并排序
    树状数组
    构造强连通图
  • 原文地址:https://www.cnblogs.com/lamyoung/p/13698904.html
Copyright © 2011-2022 走看看