cocos2d里的法线贴图

法线贴图:

可以看到法线贴图整体一般都是偏向蓝色调，这是因为做贴图的时候法线一般朝向z轴就是vec3(0,0,1)，大象的头顶和脊梁都朝向y轴就是vec3(0,1,0)所以偏蓝，大腿和屁股朝向x轴vec3(1,0,0)所以偏红。

下面是2d光照的shader:

#ifdef GL_ES
precision mediump float;
#endif

//这个好像没有用啊
varying vec4 v_fragmentColor;
//纹理坐标
varying vec2 v_texCoord;
//法线贴图
uniform sampler2D u_normalMap;
//系数
uniform float u_kBump;
//在贴图里的本地坐标位置
uniform vec4  u_lightPosInLocalSpace;
//纹理大小
uniform vec2  u_contentSize;
//漫反色系数
uniform vec3  u_diffuseL;
void main(void)
{
    vec4 texColor=texture2D(CC_Texture0, v_texCoord);
    //获取发现贴图的颜色
	vec3 normal=texture2D(u_normalMap, v_texCoord).rgb;
	//把颜色转换到[-1,-1]
	normal=normal*2.0-1.0;
	normal.y=-normal.y;
	if(u_kBump!=1.0)
	{
        //if the vertex.z mult kBump, then the normal.z should div kBump and re-normalize
        normal=vec3(normal.x,normal.y,normal.z/u_kBump);
        normal=normalize(normal);
    }
	vec4 curPixelPosInLocalSpace=vec4(v_texCoord.x*u_contentSize.x,(1.0-v_texCoord.y)*u_contentSize.y,0.0,1.0);
	vec4 lightDir=normalize(curPixelPosInLocalSpace-u_lightPosInLocalSpace);
	vec3 posToLight=-lightDir.xyz;
	//计算漫反射  夹角越大反射的强度越小
	float normDotPosToLight=max(0.0,dot(normal,posToLight));
	vec4 diffuse=vec4(normDotPosToLight*u_diffuseL,1.0);
	//环境光   这个写的比较简单  环境光是有计算公式的 根据距离会衰减
	vec4 ambient=vec4(0.5,0.5,0.5,1);
	gl_FragColor=texColor*vec4(vec3(diffuse+ambient),diffuse.a);;
}

其实还有漫反色贴图，镜面反射贴图，都可以加上去。

推荐文章:http://learnopengl-cn.readthedocs.io/zh/latest/05%20Advanced%20Lighting/04%20Normal%20Mapping/

http://learnopengl-cn.readthedocs.io/zh/latest/02%20Lighting/04%20Lighting%20maps/

http://blog.sina.com.cn/s/blog_56352fef0101j0rx.html

http://www.cnblogs.com/freeblues/p/5742956.html

高斯模糊:

#ifdef GL_ES
precision mediump float;
#endif

varying vec4 v_fragmentColor;
varying vec2 v_texCoord;

//纹理尺寸
uniform vec2 resolution;
//采样的半径
uniform float blurRadius;
//一行采样的个数
uniform float sampleNum;

vec4 blur(vec2);

void main(void)
{
    vec4 col = blur(v_texCoord); //* v_fragmentColor.rgb;
    gl_FragColor = vec4(col) * v_fragmentColor;
}

vec4 blur(vec2 p)
{
    if (blurRadius > 0.0 && sampleNum > 1.0)
    {
        vec4 col = vec4(0);
        vec2 unit = 1.0 / resolution.xy;
        
        float r = blurRadius;
		//采样的间隔距离
        float sampleStep = r / sampleNum;
        
        float count = 0.0;
        
        for(float x = -r; x < r; x += sampleStep)
        {
            for(float y = -r; y < r; y += sampleStep)
            {
				//采样的权重  离得越近权重越大
                float weight = (r - abs(x)) * (r - abs(y));
                col += texture2D(CC_Texture0, p + vec2(x * unit.x, y * unit.y)) * weight;
                count += weight;
            }
        }
        
        return col / count;
    }
    
    return texture2D(CC_Texture0, p);
}

cocos2d里的法线贴图

猜你喜欢