开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 29 天，点击查看活动详情

本教程带你一步一步进入shader的编程世界，仅仅作为入门教程。

基础概念 Material / Effect

我们知道shader一般是由vertex shader和fragment shader组成，在Creator中将vs和fs统一书写在了effect中。

我们在编写代码前，需要先理解一些基础概念，大部分的游戏引擎都会抽象出material和effect，那这两者之间是什么关系呢？

从webgl的角度理解

• effect其实就是shader(vs+fs)，在shader中我们可以定义一些uniform变量提供给外部使用，在程序运行的过程中可以通过改变uniform，来表现出不同的效果。

• material更像是一个配置，指定了我使用的是哪个effect，使用的effect的默认参数是多少。

从使用者的角度理解

• effect更像是描述了一件衣服的款式。

• material更像是指定款式衣服的不同颜色，不同尺码等差异信息。

从编程的角度理解

• effect的uniform非常像函数的参数，而shader的fs/vs就是整个函数的具体实现。

  void effect1 (uniform vec4 color){
      gl_FragColor = color;
  }
  void effect2 (uniform vec3 color, uniform float alpha){
      gl_FragColor = vec4(color.r, color.g, color.b, alpha);
  }
  

  如上的2个effect，只是参数个数不一样，但是最终的目的都是在设置片段的颜色。

• material更像是一个无参的函数，函数的实现逻辑就是对不同effect的调用

  void material_red_1(){
      effect1(vec4(1,0,0,1)); // red
  }
  void material_red_2(){
      effect2(vec3(1,0,0), 0.5); //透明的红色
  }
  
  void material_green_1(){
      effect1(vec4(0,1,0,1));// green
  }
  void material_green_2(){
      effect2(vec3(0,1,0), 0.5);// 透明的绿色
  }
  

  如上的4个material函数，如果把这4个函数变为配置文件，那么我们只需要记录effect名字和effect参数即可，Creator的mtl文件中的数据刚好就佐证了这个理解。

以上就是我对effect、material的多个角度的理解，希望对你接下来的学习有一定的帮助。

Github仓库