如何在Cocos2d-x 3.0中使用opengl shader?

有小伙伴提出了这个问题,其实GLProgramCocos2d-x引擎自带了。完全可以直接拿来用。

先上图吧。使用opengl前后的对比:

1.在cpp中使用openGL shader。

(1)添加gray.vsh和gray.fsh到资源目录(见附件)。

(2)添加如下代码:

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);
    }
}
```

2.在js中使用opengl shader.


(1)添加gray.vsh和gray.fsh到资源目录。


(2)添加如下代码:
var HelloWorldLayer = cc.Layer.extend({
    sprite:null,
    ctor:function ()
    {
        this._super();
        var size = cc.director.getWinSize();
        this.sprite = cc.Sprite.create(res.HelloWorld_png);
        this.sprite.attr({
            x: size.width / 2,
            y: size.height / 2,
            scale: 0.5,
            rotation: 180
        });
        this.addChild(this.sprite, 0);
        graySprite(this.sprite);                       
        return true;
    }
});

function graySprite(sprite)
{
    if(sprite)
    {
        var shader = new cc.GLProgram();//cc.GLProgram.create("gray.vsh", "gray.fsh");
        shader.retain();
        //shader.initWithByteArrays("res/gray.vsh", "res/gray.fsh");
        shader.initWithFilenames("res/gray.vsh", "res/gray.fsh");
        shader.addAttribute(cc.ATTRIBUTE_NAME_POSITION, cc.VERTEX_ATTRIB_POSITION);
        shader.addAttribute(cc.ATTRIBUTE_NAME_COLOR, cc.VERTEX_ATTRIB_COLOR);
        shader.addAttribute(cc.ATTRIBUTE_NAME_TEX_COORD, cc.VERTEX_ATTRIB_TEX_COORDS);

        shader.link();
        shader.updateUniforms();
        sprite.setShaderProgram(shader);
    }    
}

```

附件:gray.vsh和gray.fsh shader file.zip (2 KB) 

翻译自:
1.http://www.cocos2d-x.org/forums/6/topics/49035
2.http://www.cocos2d-x.org/forums/19/topics/49038

收藏了!以前都是用两套图片,很浪费资源。
除了这种方法,还有其他的方案么?
或者说,能把这种方法绑定到精灵,设置是label身上么?一直一个方法设置是否置灰,置灰的程度多少。

1.关于shader的效果,置灰只是一种效果,网上还是有不少方案的。

2.这里暂不适合绑定到label。

3.这里是采用资源加载的方式,所以应该是没法做接口,不过多套shader资源肯定也比图片资源来的节省空间。也可以在代码中调用shader,这方面还请google之吧。。

我也是新手哈哈。

我需要这种shader http://weavesilk.com/:2:

:12: :12: :12: 看到此效果,已跪。

shader教程,强烈建议楼主讲原理:14:

label直接setcolor就好了啊

:12::12::12:虽然这个效果setColor就行,但是shader的其他效果是setColor不出来的。。

可以看下testcpp中的示例。什么雪花效果啊乱七八糟的,都是用shader做的。

求版主指教,为啥我的显示如下错误:904::
cocos2d: OpenGL error 0x0502 in ……/cocos2d/cocos/2d/CCTextureAtlas.cpp drawNumberOfQuads 688

看到这个效果我也给跪了。。。

怎么恢复呢?

node.setShaderProgram(cc.ShaderCache.getInstance().getProgram(cc.SHADER_POSITION_TEXTURE_COLOR));

这种常用效果应该自支持,现在还要这么麻烦,而且,我这还有问题,貌似灰度后坐标变大2倍

使用shader是能成功 不过怎么坐标点位置都变化了

坐标点位置都变化了 这是I在 3.0里发现的,以前2.2里没问题!

我也遇到坐标变化了,这个不知道怎么处理好

坐标变化的解决了,将附件gray.vsh 中的CC_MVPMatrix 改为 CC_PMatrix 即可

好像只有Sprite的有效果。其他的貌似不行呢

我为什么会报这个错误啊,cocos2d: cocos2d: ERROR: 0:18: Regular non-array variable ‘CC_Texture0’ may not be redeclared

这个报错已经解决了,//uniform sampler2D CC_Texture0; 注释掉这句就ok了:867: