graphics-cocos-doc-shader

例子

UnitOutline

%{
  techniques: [
    {

      passes: [

        {
          vert: vs
          frag: fs
          stage: forward
          cullMode: back
          depthTest: true
          depthWrite: true
        }

        {
          vert: vsOutline
          frag: fsOutline
          stage: forward
          cullMode: front
          depthTest: true
          depthWrite: true
        }
      ]

    }

  ]

  properties: {
    outlineColor: { type: 'color4', value: [1, 1, 1, 1] }
    outlineSize :  { type: 'float', value: 0.05 }

    diffuseColor: { type: 'color4', value: [1, 1, 1, 1] }
    diffuseTexture: { type: 'sampler2D', value: null }

    normalTexture: { type: 'sampler2D', value: null }
    bumpScale:  { type: 'float', value: 0.05 }
  }
%}

%% vs {
    precision highp float;

    #include <cc-local>
    #include <cc-global>

    #include <common-attribute>
    #include <skinning>

    varying vec3 v_worldNormal;
    varying vec3 v_worldPos;

    void main () {
        vec4 position = vec4(a_position, 1);
      vec4 normal = vec4(1, 1, 1, 0);

      MUL_ATTR_NORMAL(normal);
      SKIN_VERTEX(position, normal);

      v_worldPos = (cc_matWorld * position).xyz;
      v_worldNormal = cc_matWorldIT * normal.xyz;

      ATTRIBUTE_TO_VARYING();

      gl_Position = cc_matViewProj * cc_matWorld * position;
    }

}

%% fs {

    precision highp float;

    #include <cc-global>
    #include <common-attribute>
    #include <encodings>

    #include <common>

    #include <normal>
    #include <diffuse>
    #include <specular>
    #include <emissive>
    #include <lights-phong>
    #include <alpha-test>

    varying vec3 v_worldNormal;
    varying vec3 v_worldPos;

    uniform lowp float bumpScale;
    uniform lowp vec4 outlineColor;


    // 双向光处理
    void doBrdf (inout Lighting result, LightInfo info, vec3 normal, vec3 viewDirection, float glossiness) {
      float ndh = 0.0;
      // Get the half direction in world space
      vec3 halfDir = normalize(viewDirection + info.lightDir);
      float NdotH = max(0.0, dot(normal, halfDir));
      NdotH = pow(NdotH, max(1.0, glossiness * 128.0));

      vec3 diffuse = info.radiance * max(0.0, dot(normal, info.lightDir));
      vec3 specular = info.radiance * NdotH;

      result.diffuse += diffuse;
      result.specular += specular;
    }

    // 获取漫反射光照
    Lighting getDiffuseLight (vec3 normal, vec3 worldPos, vec3 viewDirection, float glossiness) {
      Lighting result;
      result.diffuse = vec3(0, 0, 0);
      result.specular = vec3(0, 0, 0);

      #if _NUM_DIR_LIGHTS > 0
      for (int i = 0; i < _NUM_DIR_LIGHTS; i++) {
        LightInfo info = computeDirectionalLighting(cc_dirLightDirection[i], cc_dirLightColor[i]);
        doBrdf(result, info, normal, viewDirection, glossiness);
      }
      #endif

      #if _NUM_POINT_LIGHTS > 0
      for (int i = 0; i < _NUM_POINT_LIGHTS; i++) {
        LightInfo info = computePointLighting(worldPos, cc_pointLightPositionAndRange[i], cc_pointLightColor[i]);
        doBrdf(result, info, normal, viewDirection, glossiness);
      }
      #endif

      #if _NUM_SPOT_LIGHTS > 0
      for (int i = 0; i < _NUM_SPOT_LIGHTS; i++) {
        LightInfo info = computeSpotLighting(worldPos, cc_spotLightPositionAndRange[i], cc_spotLightDirection[i], cc_spotLightColor[i]);
        doBrdf(result, info, normal, viewDirection, glossiness);
      }
      #endif

      result.diffuse += cc_sceneAmbient;

      return result;
    }

    // 混合高光
    vec4 composePhongLight (Lighting lighting, PhongMaterial mtl) {
      vec4 o = vec4(0.0, 0.0, 0.0, 1.0);

      //diffuse is always calculated
      o.rgb = lighting.diffuse * mtl.diffuse;

      #if USE_EMISSIVE
        o.rgb += mtl.emissive;
      #endif

      #if USE_SPECULAR
        o.rgb += lighting.specular * mtl.specular;
      #endif

      #if _USE_SHADOW_MAP
        o.rgb *= computeShadow();
      #endif

      o.a = mtl.opacity;

      return o;
    }

    // 光照计算
    void CalcLight (inout vec4 outColor, in PhongMaterial material, in vec3 normal, in vec3 worldPosition, in vec3 viewDirection) {
      Lighting phongLighting = getDiffuseLight(normal, worldPosition, viewDirection, glossiness);
      outColor = composePhongLight(phongLighting, material);
    }

    void main () {
        vec4 diffuse;
          CALC_DIFFUSE(diffuse);
          ALPHA_TEST(diffuse);

          //PhongMaterial material;
          //material.diffuse = diffuse.rgb;
          //material.opacity = diffuse.a;

          //CALC_EMISSIVE(material.emissive);
          //CALC_SPECULAR(material.specular);

          //vec3 viewDirection = normalize(cc_cameraPos.xyz - v_worldPos);
          //vec3 normal;
          //vec4 finColor;

          //CALC_NORMAL(normal, v_worldPos, v_worldNormal);
          //CalcLight(finColor, material, normal, v_worldPos, viewDirection);

          gl_FragColor = LINEAR_TO_OUTPUT_TEXEL( diffuse );
    }

}

%% vsOutline {

  precision highp float;

  #include <cc-local>
  #include <cc-global>

  #include <common-attribute>
  #include <skinning>

  uniform lowp float outlineSize;
  uniform lowp vec4 outlineColor;


  void main () {
    //vec4 position = vec4(a_position, 1);
    //vec3 outNormal = normalize(a_normal);

    //outNormal.z -= 0.5;
    //position.x = position.x + outNormal.x * outlineSize;
    //position.y = position.y + outNormal.y * outlineSize;
    //position.z = position.z + outNormal.z * outlineSize;

    //vec4 worldPos = cc_matWorld * position;

    //gl_Position = cc_matViewProj * worldPos;



    //gl_Position.x = gl_Position.x + outNormal.x * outlineSize;
    //gl_Position.y = gl_Position.x + outNormal.y * outlineSize;
    //gl_Position.z = gl_Position.x + outNormal.z * outlineSize;

    vec4 position = vec4(a_position, 1);
    vec3 outNormal = normalize(a_normal);


    position.x = position.x + outNormal.x * outlineSize;
    position.y = position.y + outNormal.y * outlineSize;
    position.z = position.z + outNormal.z * outlineSize;

    //vec4 normal = vec4(1, 1, 1, 0);
    //v_worldPos = (cc_matWorld * position).xyz;
    //v_worldNormal = cc_matWorldIT * normal.xyz;

    SKIN_VERTEX(position);
    ATTRIBUTE_TO_VARYING();

    gl_Position = cc_matViewProj * cc_matWorld * position;
  }
}

%% fsOutline {

    precision highp float;

    uniform lowp vec4 outlineColor;

    void main () {
      gl_FragColor = outlineColor;
    }
}

参考

Cocos Creator 2.x Shader组件与材质系统
CocosCreator2.1.0渲染流程与shader