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

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

#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)


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


#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


#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.


#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!


#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…


#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?