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

1497426363-3627-1334318-adda14f49ab1e4dd

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

开心一下:

那日微信上,我对一陌生MM发消息:“美女,出来玩不?” “有病! ” “那算了,祝早日康复! ”
1.本站所有资源仅用于学习及研究使用,请必须在24小时内删除所下载资源,切勿用于商业用途,否则由此引发的法律纠纷及连带责任本站和发布者概不承担。资源除标明原创外均来自网络整理,版权归原作者或本站特约原创作者所有,如侵犯到您权益请联系本站删除! 2.本站站内提供的所有可下载资源(软件等等)本站保证未做任何负面改动(不包含修复bug和完善功能等正面优化或二次开发);但本网站不能保证资源的准确性、安全性和完整性,用户下载后自行斟酌,我们以交流学习为目的,并不是所有的源码都100%无错或无bug;同时本站用户必须明白,小鱼源码对提供下载的软件等不拥有任何权利(本站原创和特约原创作者除外),其版权归该资源的合法拥有者所有。 3.请您认真阅读上述内容,购买即以为着您同意上述内容。
小鱼源码下载网 » cocos2d-x学习笔记——双重纹理透明特效

精品源码,商业服务,发布得积分,VIP免费下

开通会员 发布资源