Creator3D:shader3_波浪小球

作者：玻璃小屋

前言

在基础1和基础2中，简单做了一下入门，今天就来个实践，3D的波浪小球，

---

效果展示

---

正文

1.文档资料

YAML 101

Effect 语法

Pass 可选配置参数

常用 shader 内置 Uniform

文档是必须要读的，哪怕你是和我一下的小白，第一次不要求看懂，但是最好过一遍，有个印象，方便后边回过头来查找

2.实现

先给大家上代码：

CCEffect %{
  techniques:
  - name: opaque
    passes:
    - vert: general-vs:vert # builtin header
      frag: unlit-fs:frag
}%
//第一个shader 正常渲染
CCProgram unlit-fs %{
  precision highp float;
  #include <cc-global>
  #include <output>
  #include <cc-local-batch>
  in vec3 v_position;
  
  vec4 frag () {
    vec4 color = vec4(0.0,0.6,1.0,1.0); 
    //顶点坐标，法线坐标都是基于世界坐标系的
    if(v_position.y+sin((v_position.x+cc_time.x)*7.0)/40.0> 0.0){
        color = vec4(1.0,1.1,1.0,0.0);
    }
    return CCFragOutput(color);
  }
}%

in vec3 v_position; 新的代码出现，那就大概解释一下

首先大家可以先了解一下in和out的，in表示传入，out表示传出。

在这里是将模型顶点的世界坐标传了进来，从哪里传进来的呢，答案是顶点着色器（vert: general-vs:vert），在这里咱们没有自定义顶点着色器，用的是引擎自带的默认的。

给大家看一下默认顶点着色器的代码：

precision highp float;
#include <input-standard>
#include <cc-global>
#include <cc-local-batch>

in vec3 a_color;
in vec2 a_texCoord;
#if HAS_SECOND_UV
  in vec2 a_texCoord1;
#endif

out vec3 v_position;
out vec3 v_normal;
out vec3 v_tangent;
out vec3 v_bitangent;
out vec2 v_uv;
out vec2 v_uv1;
out vec3 v_color;

vec4 vert () {
  StandardVertInput In;
  CCVertInput(In);

  mat4 matWorld, matWorldIT;
  CCGetWorldMatrixFull(matWorld, matWorldIT);

  v_position = (matWorld * In.position).xyz;
  v_normal = normalize((matWorldIT * vec4(In.normal, 0.0)).xyz);
  v_tangent = normalize((matWorld * vec4(In.tangent.xyz, 0.0)).xyz);
  v_bitangent = cross(v_normal, v_tangent) * In.tangent.w; // note the cross order

  v_uv = a_texCoord;
  #if HAS_SECOND_UV
    v_uv1 = a_texCoord1;
  #endif
  v_color = a_color;

  return cc_matProj * (cc_matView * matWorld) * In.position;
}

因为现在没有说到顶点着色器，所以就不做详细的说明，大家只要知道片元着色器中的in和顶点着色器中的out是对应的。

vec4 color = vec4(0.0,0.6,1.0,1.0);  初始化颜色  蓝色
//顶点的y轴坐标+正弦值（顶点的x坐标+shader运行时间）
//shader运行时间保证同一坐标正弦值是变化的，
//7.0是一个波浪波动速度缩放值，可以手动调整
//40 是波浪高度的缩放值，因为球的大小为vec3(1.0,1.0,1.0,),sin介于-1到1直接，
if(v_position.y+sin((v_position.x+cc_time.x)*7.0)/40.0> 0.0){
    color = vec4(1.0,1.1,1.0,0.0);
    return CCFragOutput(color);
}

3.总结

看着上边的这个波浪小球，大家感觉他像不像一个装了一半水的小球，或者如果让他的高度随时间变化，是不是像一个球形的加载进度显示。

4.地址

• gitee：https://gitee.com/carlosyzy/Creator3D_Mesh_Basics
• 微信公众号：搬砖小菜鸟
  

5.推荐

推荐一款比较好玩的游戏