着色器第一章

系列引用

系列demo代码来自：
书籍《the book of shaders》https://thebookofshaders.com/
客户端：CocosCreator2.3.2 https://www.cocos.com/creator

代码来源和实现方式

本页面代码来自：https://thebookofshaders.com/02/?lan=ch
客户端实现为：CocosCreator2.3.2中的材质系统
在cocos creator 2.3.2中,将Effect和matrieral转为了正式版,抛弃了以往版本中的实验版的名号
所以demo使用2.3.2版本为基础来实现书中的demo代码

什么是GLSL

首先，我们来照搬一下书中的解释，什么是GLSL

GLSL 代表 openGL Shading Language，openGL 着色语言，这是你在接下来章节看到的程序所遵循的具体标准。根据硬件和操作系统的不同，还有其他的着色器（shaders)。这里我们将依照Khronos Group的规则来执行。了解 OpenGL 的历史将有助于你理解大多数奇怪的约定，所以建议不妨阅读openglbook.com/chapter-0-preface-what-is-opengl.html。

解读cocos effect文件结构

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

CCEffect %{
}%

CCProgram vs %{
  void main () {
  }
}%

CCProgram fs %{
  void main () {
  }
}%

第一个CCEffect方法块

语法为YAML, Cocos有专门的文章做了解释
传送门:https://docs.cocos.com/creator3d/manual/zh/material-system/yaml-101.html
包括现在SprintBoot也是用YAML来做配置信息, 所以文章中不做过多解释

第二个和第三个方法块分别为CCProgram

里面编写者着色器语句,都会有一个main方法入口
CCEffect中详细passes的参数指南在:
https://docs.cocos.com/creator3d/manual/zh/material-system/pass-parameter-list.html
关于详细的解释,Cocos也有非常详细的解析图 图中以builtin-unlit.effect为例

进入正题

大致介绍(CV)完成后,我们该进入正题,编写书中第一个demo, helloworld了
书中第一个代码片段:

#ifdef GL_ES
precision mediump float;
#endif

uniform float u_time;

void main() {
    gl_FragColor = vec4(1.0,0.0,1.0,1.0);
}

现在,我们需要在cocos中实现这段着色器效果

1. 新建materal材质
2. 新建effect特效
3. 绑定materal材质中的effect为我们刚刚新建的effect特效
4. 给节点中的sprite中的materal更换为我们刚刚新建的materal
5. 编写effect特效代码

// 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 }
        alphaThreshold: { value: 0.5 }
}%

CCProgram vs %{
  precision highp float;

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

  in vec3 a_position;
  in vec4 a_color;
  out vec4 v_color;

  #if USE_TEXTURE
  in vec2 a_uv0;
  out vec2 v_uv0;
  #endif

  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 = pos;
  }
}%

CCProgram fs %{
  precision highp float;

  #include <alpha-test>

  in vec4 v_color;

  #if USE_TEXTURE
  in vec2 v_uv0;
  uniform sampler2D texture;
  #endif

  void main () {
    gl_FragColor = vec4(1.0,0.0,1.0,1.0);
  }
}%

我们将修改第二个CCProgram fs代码块,将原来的void main中的代码块更改为书中的demo代码

  void main () {
    gl_FragColor = vec4(1.0,0.0,1.0,1.0);
  }

到这里,书中的第一个demo就实现完成了

紧接着是书中helloworld中的另外两个小扩展部分:

尝试另外写个函数，返回某个颜色，然后在 main() 里面使用这个函数。给个提示，这个函数应该长这样：
vec4 red(){
    return vec4(1.0,0.0,0.0,1.0);
}
有很多种构造 vec4 类型的方式，试试看其他方式。下面就是其中一种方式：
vec4 color = vec4(vec3(1.0,0.0,1.0),1.0);

1.更改调用方式的red()语句

CCProgram fs %{
  precision highp float;

  #include <alpha-test>

  in vec4 v_color;

  #if USE_TEXTURE
  in vec2 v_uv0;
  uniform sampler2D texture;
  #endif

  vec4 red(){
    return vec4(1.0,0.0,0.0,1.0);
  }

  void main () {
    gl_FragColor = red();
  }
}%

2.更改嵌套式的vec4

CCProgram fs %{
  precision highp float;

  #include <alpha-test>

  in vec4 v_color;

  #if USE_TEXTURE
  in vec2 v_uv0;
  uniform sampler2D texture;
  #endif

  void main () {
    gl_FragColor = vec4(vec3(1.0,0.0,1.0), 1.0);
  }
}%

书中本章节demo在CocosCreator2.3.2中的实现方式到这里就结束了