前言
在基础1和基础2中，简单做了一下入门，今天就来个实践，3D的波浪小球，
效果展示
image
正文
1.文档资料
文档是必须要读的，哪怕你是和我一下的小白，第一次不要求看懂，但是最好过一遍，有个印象，方便后边回过头来查找
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
- 微信公众号：搬砖小菜鸟
