美文网首页
cocos creator 2.x shader

cocos creator 2.x shader

作者: 千罹 | 来源:发表于2019-12-27 12:02 被阅读0次

    示例文件

    // Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.  
    
    CCEffect %{
      techniques:
      - passes:
        - vert: vs
          frag: fs
          blendState:
            targets:
            - blend: true
          rasterizerState:
            cullMode: none
          properties:
            texture: { value: white }
    }%
    
    // 顶点着色器,对应上main声明的名字 vs
    CCProgram vs %{
      // lowp 低等精度(low pixel)
      // mediump 中等精度(medium pixel)
      // highp 高等精度(high pixel)
      precision highp float;
    
      // 统一值(shader playground 内置的变量(见附录),非cocos 内置变量,不能直接使用)
      // uniform vec2 u_resolution; // 画布尺寸(宽,高)
      // uniform vec2 u_mouse;      // 鼠标位置(在屏幕上哪个像素)
      // uniform float u_time;     // 时间(加载后的秒数)
    
      // 下面说明
      #include <cc-global>
      // 下面说明
      #include <cc-local>
    
      in vec3 a_position;
      in vec4 a_color;
      out vec4 v_color;
    
      in vec2 a_uv0;
      out vec2 v_uv0;
    
      void main () {
        vec4 pos = vec4(a_position, 1);
    
        #if CC_USE_MODEL
        pos = cc_matViewProj * cc_matWorld * pos;
        #else
        pos = cc_matViewProj * pos;
        #endif
    
        v_uv0 = a_uv0;
        v_color = a_color;
        gl_Position = pos; // gl_ 开头的变量都是 openGL 的内置变量,自己的变量不要用 gl_ 开头
      }
    }%
    
    // 片段(片元)着色器,对应最上面声明的名字 fs
    CCProgram fs %{
      precision highp float;
    
      // 下面说明
      #include <cc-global>
    
      in vec4 v_color;
      in vec2 v_uv0;
      uniform sampler2D texture;
      // uniform PROPERTIES{ vec4 color; float factor; float width; float u_time; } 
    
      void main () {
        vec4 c = texture2D(texture, v_uv0);
        float clrbright = (c.r + c.g + c.b) * (1. / 3.);
        float gray = (0.6) * clrbright;
        float d = sin(cc_time.x); // 使用 cc-global 中的内置变量 cc_time.x
        gl_FragColor = vec4(c.r * d, c.g, c.b, c.a);  // gl_ 开头的变量都是 openGL 的内置变量,自己的变量不要用 gl_ 开头
      }
    }%
    
    

    说明

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

    cc-global

    是内置的全局变量包,包含以下变量(常用的时间等)

    #pragma builtin(global)
    uniform CCGlobal {
      vec4 cc_time; // x
      vec4 cc_screenSize; // xy zw
      vec4 cc_screenScale; //
      vec4 cc_nativeSize; //
      mat4 cc_matView;
      mat4 cc_matViewInv;
      mat4 cc_matProj;
      mat4 cc_matProjInv;
      mat4 cc_matViewProj;
      mat4 cc_matViewProjInv;
      vec4 cc_cameraPos; // xyz
      vec4 cc_exposure; // x: exp, y: expInv, w: expScale
      vec4 cc_mainLitDir; // xyz
      vec4 cc_mainLitColor; // xyz: color, w: intensity
      vec4 cc_ambientSky;
      vec4 cc_ambientGround;
    };
    
    • 因为uniform 每个「插槽」能够存储一个四元数。
    • cc_time 应该只有第一位放了时间,也就是 [x,y,z,w] 里的 x。
    • 下面其它变量同理。

    cc-local

    #pragma builtin(local)
    uniform CCLocal {
      mat4 cc_matWorld;
      mat4 cc_matWorldIT;
    };
    

    其他包和常用方法

    |-- 点我去 cocos creator 源码 -->>>

    常见问题

    1. 精度问题

    1 != 1.
    0.1 == .1
    

    1 是整数
    1.1.0 即浮点数

    openGL 不会进行强制类型转换,需要书写的时候确定变量类型

    eg:

    gl_FragColor = vec4(1, 1, 1, 1); // 错误
    gl_FragColor = vec4(1., 1., 1., 1.); // 正确
    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); // 正确
    

    附录:怎么学 shader

    相关文章

      网友评论

          本文标题:cocos creator 2.x shader

          本文链接:https://www.haomeiwen.com/subject/zatdoctx.html