CocosCreator2.3.2 Shader Effect学习

最新推荐文章于 2022-09-01 15:39:53 发布

SlowFeather

最新推荐文章于 2022-09-01 15:39:53 发布

阅读量343

点赞数

文章标签： cocos-creator shader

本文链接：https://blog.csdn.net/a71468293a/article/details/115731724

版权

本文介绍了在CocosCreator2.3.2中使用Shader实现水面效果的学习过程，包括顶点着色器和片元着色器的GLSL代码，涉及纹理、混合状态和渲染参数的设置。同时，注意到当前格式可能是实验性的，未来可能需要手动更新以保持兼容性。

摘要由CSDN通过智能技术生成

前言

项目需要一个水面的效果。。但是正在学习

简单翻译

// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd. 

// Note: Current format version is experiment, the format may be changed.
// The future format may not be compatible, you may need to update the script manually.

// 注意：当前版本的格式是实验性的，之后还会进行修改。
// 后续版本的格式不保证兼容当前格式，可能需要手动升级到最新版本。，

CCEffect %{
  techniques:
  - passes:
    - vert: vs  #指向vert shader
      frag: fs  #指向frag shader
      blendState: #渲染参数
        targets:
        - blend: true
      rasterizerState:
        cullMode: none
      properties: #变量，会显示在 material 面板 上
        texture: { value: white }
        # bool:{ value:true }
        alphaThreshold: { value: 0.5 }
}%


CCProgram vs %{ //顶点着色器（GLSL 300 es格式）
  precision highp float; //定义精度

  #include <cc-global>  //引用头文件，cc_matViewProj 变换矩阵就是在里面的变量
  #include <cc-local> 

  in vec3 a_position; //顶点位置
  in vec4 a_color;  
  out vec4 v_color;

  #if USE_TEXTURE
  in vec2 a_uv0;  //uv 坐标
  out vec2 v_uv0; 
  #endif

  // 所有着色器都有一个main方法
  void main () {
    vec4 pos = vec4(a_position, 1);

    #if CC_USE_MODEL
    pos = cc_matViewProj * cc_matWorld * pos;
    #else
    pos = cc_matViewProj * pos;
    #endif

    #if USE_TEXTURE
    v_uv0 = a_uv0;
    #endif

    v_color = a_color;
    // gl_Position 是一个顶点着色器主要设置的变量
    gl_Position = pos;
  }
}%


CCProgram fs %{ //片元着色器
  // mediump是一个不错的默认值，代表“medium precision”（中等精度）
  //precision mediump float;
  precision highp float;  //定义精度
  
  #include <alpha-test>

  in vec4 v_color;

  #if USE_TEXTURE
  in vec2 v_uv0; //uv
  uniform sampler2D texture;  //纹理
  #endif

  void main () {
    //创建一个纹理
    vec4 o = vec4(1, 1, 1, 1);

    //如果使用贴图
    #if USE_TEXTURE

    //给o赋值
    o *= texture(texture, v_uv0);
      #if CC_USE_ALPHA_ATLAS_TEXTURE
      o.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;
      #endif
    #endif

    o *= v_color;

    ALPHA_TEST(o);

    //给片元（像素）赋值
    // gl_FragColor是一个片断着色器主要设置的变量
    gl_FragColor = o;
  }
}%