巴拉巴拉
小魔仙

着色器系列,第一篇,helloworld

着色器第一章


系列引用

系列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中的实现方式到这里就结束了

赞(2) 打赏
如果文章对你有帮助,欢迎你来评价反馈。AgainFly » 着色器系列,第一篇,helloworld

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  • Q Q(选填)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏