How to use "Opengl Shader" in cocos2d-x3.0

cocos2d-x C++
#1

We can use the shader like this way

First step:
Add 2 shader files to projects Resource

Second step

bool HelloWorld::init()
{
    if ( !Layer::init() )
    {
        return false;
    }
    ize visibleSize = Director::getInstance()->getVisibleSize();
    auto sprite = Sprite::create("HelloWorld.png");
    sprite->setAnchorPoint(Point(0.5, 0.5));
    sprite->setPosition(Point(visibleSize.width / 3, visibleSize.height / 3));
    this->addChild(sprite);
    graySprite(sprite);
    return true;
}

void HelloWorld::graySprite(Sprite * sprite)
{
    if(sprite)
    {
        GLProgram * p = new GLProgram();
        p->initWithFilenames("gray.vsh", "gray.fsh");
        p->bindAttribLocation(GLProgram::ATTRIBUTE_NAME_POSITION, GLProgram::VERTEX_ATTRIB_POSITION);
        p->bindAttribLocation(GLProgram::ATTRIBUTE_NAME_COLOR, GLProgram::VERTEX_ATTRIB_COLOR);
        p->bindAttribLocation(GLProgram::ATTRIBUTE_NAME_TEX_COORD, GLProgram::VERTEX_ATTRIB_TEX_COORDS);
        p->link();
        p->updateUniforms();
        sprite->setShaderProgram(p);
    }
}


gray.vsh.zip (0.3 KB)
gray.fsh.zip (330 Bytes)

2 Likes
I don't find a single resource that teaches how to use cocos2d-x shaders
I don't find a single resource that teaches how to use cocos2d-x shaders
#2

awesome ā€¦ thanksā€¦ :slight_smile:

#3

What about a few screenshots of sprite before and sprite after?

#4

@slackmoehrle
How to get a screenshot in cocos2dx-3.0 rc0

and you can referece the Testcpp RenderTexture.cpp

1 Like
#5

@yuye - no, not how to take a screenshot.

Can you show us a screenshot of before and after you apply the OpenGL shaders aboveā€¦So we can see how the shaders effect the sprite.

Using ETC1 Textures with aplha
#6

@yuye Thanks again.

However i got a problem, with some (no moving) ā€œspritesā€ its worked fine, but with others (moving or not), maybe the shader has altered the position of sprite so it dose not show correctly.

Any idea?

#7

@slackmoehrle sureļ¼your command it my pleasure!:stuck_out_tongue:

Image Title

Image Title

2 Likes
#8

@victory144 In fact I got same result. I am working on it too.

#9

@yuye Thank you so much. Very helpful.

#10

@yuye

I have the position moving problem too. the distance of offset seems like random.
As below: the button should be on the point A, but it moves to point B. The response area of the button remains on point A.

b9ad15b5f0c96a68.jpg816Ɨ518

#11

Add:

When I set the GLProgram back to default GLProgram of Sprite:

CCGLProgram* p = CCShaderCache::sharedShaderCache()->programForKey(GLProgram::SHADER_NAME_POSITION_TEXTURE_COLOR);
        _buttonNormalRenderer->setShaderProgram(p);
        _titleRenderer->setShaderProgram(p);

The offset did exists too!.
so, I think the problem is the GLProgram we set need some more information or parameter.

#12

@yuye @victory144 @slackmoehrle

Finally!!! I got the key of annoying OFFSET!

I re-check the default GLProgram of Sprite. It turn out to be SHADER_NAME_POSITION_TEXTURE_COLOR_NO_MVP ( what is it? itā€™s a key of a GLProgram, u can search in project libcocos2d.) rather than SHADER_NAME_POSITION_TEXTURE_COLOR witch is the default shader in cocos2dx_2.x.

The difference of them is that SHADER_NAME_POSITION_TEXTURE_COLOR_NO_MVP shader use the vect file ccShader_PositionTextureColor_noMVP.vert in the folder {cocos2dx_3.x_root}\cocos\renderer. So, replace the gray.vsh.zip file with the ccShader_PositionTextureColor_noMVP.vert file. Everything will be OK!

1 Like
#13

@yuye I downloaded the files and copied the sample code, try them on another version (version 3.1.1), badly, it doesnā€™t work, crash when i execute the sample code(platform: Win 7 64 bit ). I have poor knowledge about OpenGL, and I just wanna make the sprite gray. can you show me what should I do? thx.

#14

@C_U_Again Actually there is a sample test EffectGreyScale in cpp-tests now. If you just wanna do a quick test for greying sprites, you can check it in ShaderTest2.cpp.

#16

Thanks for the tip. It works now. Only if you replace the .vert file nothingh shows. So in the gray.vsh file. change the file as below.

gl_Position = CC_PMatrix * a_position;


//gl_Position = CC_MVPMatrix * a_position;
v_fragmentColor = a_color;
v_texCoord = a_texCoord;

And it will work fine in 3.3

#17

i have same problem Sprite move other place plz helpā€¦

1 Like
#18

Unfortunately, gray.vsh is no longer available.
But I tried this one is working: https://github.com/dreamfairy/cocos2dx-2.x-filters/blob/master/resource/shader/gray.vsh

#19

@Monica_L I believe it was just renamed, and uses a common vertex shader instead of its custom one.

vert: cocos/renderer/ccShader_PositionTextureColor_noMVP.vert
frag: cocos/renderer/ccShader_UI_Gray.frag

Edit: you can see shaders used in function GLProgramCache::loadDefaultGLProgram. Each of the ccXXXXXX_vert and ccXXXXXX_frag constant strings are defined in the various .vert/.frag files, two of which were noted above.

#20

Wow! Thank you! I didnā€™t know they are all in the folder!

#21

@stevetranby, Hey, Iā€™m still confused about the ā€œReload Default GL Programā€, why it calls reset() then load those default GL program? And why there is no p->reset() between line 285 and 286?