シェーダーをCocos Creatorで使用するには、まずマテリアルを作成し、そのマテリアルにカスタムエフェクト（シェーダー）を割り当てる必要がある。その後、対象の3Dモデルにアタッチされたcc.MeshRendererコンポーネントのMaterialsリストにそのマテリアルを追加することで、シェーダー効果が反映される。

Cocosにおけるシェーダー構成

Cocos Creatorのシェーダーは主に以下の2つのブロックで構成される：

• CCEffect：レンダリングパスやプロパティ設定をYAML形式で記述
• CCProgram：実際のGLSLコードを含む頂点/フラグメントシェーダー本体

CCEffectの基本構造

CCEffect %{
  techniques:
  - name: opaque
    passes:
    - vert: vs: entry
      frag: fs: entry
      properties:
        mainTexture: { value: grey }
        colorScale: { value: [1, 1, 1], target: colorScaleAndCutoff.xyz }
      depthStencilState:
        depthTest: true
        depthWrite: true
}%

ここで定義されたpropertiesは、シェーダーコード内のuniform変数と対応し、Creatorエディタ上で調整可能になる。

CCProgramのテンプレート

CCProgram shader-name %{
  precision highp float;
  #include <...>
  
  // uniform, in, out 変数の宣言

  vec4 entry() {
    // 色計算ロジック
    return finalColor;
  }
}%

実践例：縦方向グラデーションシェーダー

以下は、UV座標のY値に基づいて上から下へ色が変化するシンプルなフラグメントシェーダーの例である。

CCEffect %{
  techniques:
  - name: opaque
    passes:
    - vert: general-vs:vert
      frag: gradient-fs:frag
      properties: &props
        mainTexture: { value: white }
        topColor: { value: [1, 1, 0, 1], editor: { type: color } }
        bottomColor: { value: [1, 0, 0, 1], editor: { type: color } }
  - name: transparent
    passes:
    - vert: general-vs:vert
      frag: gradient-fs:frag
      blendState:
        targets:
        - blend: true
          blendSrc: src_alpha
          blendDst: one_minus_src_alpha
      properties: *props
}%

CCProgram gradient-fs %{
  precision highp float;
  #include <legacy/output>
  #include <legacy/fog-fs>

  in vec2 v_uv;
  in vec3 v_position;
  in vec3 v_normal;

  uniform sampler2D mainTexture;

  uniform Constant {
    vec4 topColor;
    vec4 bottomColor;
  };

  vec4 frag() {
    float factor = v_uv.y;
    vec4 baseColor = mix(topColor, bottomColor, factor);
    vec4 texColor = texture(mainTexture, v_uv);
    vec4 col = baseColor * texColor;

    CC_APPLY_FOG(col, v_position);
    return CCFragOutput(col);
  }
}%

このシェーダーをマテリアルに適用し、モデルに割り当てると、テクスチャと2色の線形補間による縦グラデーションが表示される。