使用shader制作投影

在游戏中有时候会用到投影的一些效果，但是又不能让美术，每张都投影都要出一张图，那么我们可以通过shader来实现投的效果。先看下效果图：

主代码：

Size size = Director::getInstance()->getWinSize();
auto sprite = Sprite::create("grossinis_sister2.png");
sprite->setScale(2);
sprite->setPosition(size.width / 2 - 200, size.height / 2);

auto bg = Sprite::create("map.jpg");
bg->setPosition(size.width / 2,size.height / 2);
this->addChild(bg);
	
auto shader_program = GLProgram::createWithFilenames("lesson1.vsh", "lesson1.fsh");
sprite->setGLProgram(shader_program);
this->addChild(sprite);

其中定点主色器跟片段着色器代码如下：

.vsh

attribute vec4 a_position;
attribute vec2 a_texCoord;

varying vec2 v_texCoord;
void main()
{
	gl_Position = CC_PMatrix * a_position;
	v_texCoord = a_texCoord;
}

.fsh

varying vec2 v_texCoord;
 
vec4 composite(vec4 over, vec4 under)
{
return over + (1 - over.a)*under;
}

void main()
{
	vec2 shadowOffset =vec2(-0.05, -0.05);
	vec4 textureColor = texture2D(CC_Texture0,v_texCoord );
	float shadowMask = texture2D(CC_Texture0,v_texCoord +shadowOffset ).a;
	const float shadowOpacity = 0.5;
	vec4 shadowColor = vec4(0,0,0,shadowMask*shadowOpacity);
	gl_FragColor = composite(textureColor,shadowColor);
}

这里面有两种类型的变量，attribute和varying

attribute是从外部传进来的，每一个顶点都有这两个属性：当前顶点的位置和纹理的坐标

attribute vec4 a_position; 

attribute vec2 a_texCoord;

varying是在vertexshader和fragment shader之间传递数据用的

两个文件里面都定义了varying vec2 v_texCoord;

注意：gl_开头的变量名是系统内置的变量，例如：

gl_Position是顶点的位置，gl_FragColor最终画在屏幕上面的像素点的颜色

shadowOffset是自己设置的偏移量。