推荐：将NSDT场景编辑器加入你的3D工具链

3D工具集：NSDT简石数字孪生

UI 自定义材质

从 1.2 版本开始， UI 的 Sprite 组件支持自定义材质的使用，其使用界面如下图：

其使用方法与其他材质并无不同，但由于 Sprite 面板有基于 UI 内置材质的功能，所以有一些需要注意的点：

• 当设置自定义材质数量为 0 或为空时，会使用默认材质进行渲染，面板功能及使用方法可参考 Sprite
• UI 并不支持多材质，自定义材质的数量最多为一个
• 当使用了 ui 自定义材质之后，面板上的 Grayscale 功能将会失效，用户可选择自己在材质中实现此功能
• 设置了自定义材质之后，面板上的 Color 属性会与本身材质中设置的颜色（如果有的话）混合影响精灵的渲染颜色
• 针对自定义材质，需要在 shader 中引入 cc-sprite-texture 头文件并对 cc_spriteTexture 进行采样，即可直接通过设置面板上的 SpriteFrame 设置 sprite 使用的图片资源

例如一个简单的使用了面板设置 SpriteFrame 来采样纹理的 fragment shader 应该是下面的样子：

  CCProgram sprite-fs %{
      precision highp float;
      #include <embedded-alpha>
      #include <cc-sprite-texture> // 引入预设头文件

      in vec4 color;
      in vec2 uv0;

      uniform Constant {
          vec4 mainColor;
      };

      vec4 frag () {
          vec4 o = vec4(1, 1, 1, 1);
          o *= texture(cc_spriteTexture, uv0); // 对 cc_spriteTexture 进行采样
          o *= color;
          o *= mainColor;
          return o;
      }
  }%

如果用户希望对自定义材质进行 uniform 赋值操作，可通过获取 Sprite 上的 material 来进行操作，我们提供了不同的接口以应对不同的操作情况，如下代码所示：（请一定注意看不同接口的注释说明！）

      let spriteCom = this.node.getComponent(Sprite);
      // 通过 sharedMaterial 方法获取到的为 共享材质资源，针对 material 进行的操作将会影响到所有使用此材质的渲染对象
      let material = spriteCom.sharedMaterial;

      // 通过 material 方法获取到的为 当前渲染组件使用的材质试例，针对 material Instance 进行的操作只会对当前组件产生影响
      let materialInstance = spriteCom.material;

由3D建模学习工作室 翻译整理，转载请注明出处!

上一篇：Cocos Creator3D：制作可任意拉伸的 UI 图像 (mvrlink.com)

下一篇：Cocos Creator3D：声音系统总览 (mvrlink.com)