4、cocos2d-x学习笔记——双重纹理透明特效

MultiTexture.png

不知道有没有人看到这个效果会眼熟。这个只是将openg es编程指南里面的多重纹理效果移植到cocos2d上面来。但是，本文多了一个可以设置亮度纹理位置和大小的方法。

这种效果可以用来模拟手电筒吧。

就是利用了shader，读取两块纹理，然后通过一定的算法计算出叠加后的色值，最后渲染出来。

我们了解到，渲染sprite的类是TriangleCommand，这个类只能渲染多个三角形，并且只能渲染一块纹理。因此，我们要使用CustomCommand来渲染两块纹理。

我们在CustomCommand的执行回调里面写这样的代码：

        //Load the mv
        _glProgramState->apply(_modelViewTransform);
        
        float size = sizeof(V3F_C4F_T2F2);
        
        // Load the vertex position
        glVertexAttribPointer ( GLProgram::VERTEX_ATTRIB_POSITION, 3, GL_FLOAT,
                               GL_FALSE, size, &_verts[0]);
        glVertexAttribPointer ( GLProgram::VERTEX_ATTRIB_COLOR, 4, GL_FLOAT,
                               GL_FALSE, size,  &(_verts[0].color));
        // Load the texture coordinate
        glVertexAttribPointer (  GLProgram::VERTEX_ATTRIB_TEX_COORD, 2, GL_FLOAT,
                               GL_FALSE, size, &(_verts[0].texCoords));
        glVertexAttribPointer (  GLProgram::VERTEX_ATTRIB_TEX_COORD1, 2, GL_FLOAT,
                               GL_FALSE, size, &(_verts[0].texCoords1));
        
        glEnableVertexAttribArray ( GLProgram::VERTEX_ATTRIB_POSITION );
        glEnableVertexAttribArray ( GLProgram::VERTEX_ATTRIB_COLOR );
        glEnableVertexAttribArray ( GLProgram::VERTEX_ATTRIB_TEX_COORD );
        glEnableVertexAttribArray ( GLProgram::VERTEX_ATTRIB_TEX_COORD1 );

        //bind texture
        GL::bindTextureN(0, _texture->getName());
        glUniform1i(_glProgramState->getGLProgram()->getUniformLocation(GLProgram::UNIFORM_NAME_SAMPLER0), 0);
        
        GL::bindTextureN(1, _lightTexture->getName());
        glUniform1i(_glProgramState->getGLProgram()->getUniformLocation(GLProgram::UNIFORM_NAME_SAMPLER1), 1);
        
        //draw
        glDrawElements ( GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, quadIndices );

这段代码就是读取纹理、坐标、颜色信息，最后绘制出来。这里只是简简单单的写了一下，如果调用多的话，可以利用VAO和VBO来优化一下执行效率。
这里要提醒的是，不能利用SpriteBatchNode来优化。因为SpriteBatchNode只会获取sprite的单个纹理，而灯光纹理却是没有的。SpriteBatchNode的优化原理是通过减少顶点提交的次数来优化的，如果你需要的话要也可以根据这个原理来做一些处理。

而渲染的主要代码是在shader里面。利用fragment shader处理纹理，然后达成这样的效果。

void main()                                                    
{ 
    vec4 baseColor;                                             
    baseColor = texture2D( CC_Texture0, v_texCoord )*v_fragmentColor;     vec4 lightColor;                                           
    if (v_texCoord1.x>1.0 || v_texCoord1.y>1.0 || v_texCoord1.y < 0.0 || v_texCoord1.x<0.0 )                                       
    {                                                           
        lightColor = vec4(0, 0, 0, 1);                        
    }                                                           
    else                                                       
    {                                                           
        lightColor = texture2D( CC_Texture1, v_texCoord1 );     
    }                                                           
    gl_FragColor = baseColor * (lightColor + 0.25);            
}                                                              

gl_FragColor是最后输出的纹理色值。baseColor是读取的墙壁纹理值，最后lightColor是灯光效果纹理值。

这里做了一下修改，将纹理范围不在0-1的值全部设置成了黑色，也就是将纹理外的颜色变成了黑色，然后参与计算。

最后说一下我在做这个的时候遇到的一个坑，sprite自身的vertex shader里面用到的是p矩阵，然后我也用p矩阵，最后发现不能设置位置。最后，我发现Renderer在渲染三角形之前就将所有顶点做了mv变换，但是我这里没有变换，只好乖乖的用mvp矩阵了。

本文代码下载地址：https://pan.baidu.com/s/1dEIwRQx