Shader on Sprite makes it disappear

cocos2d-x JavaScript
1

Can anyone explain to me why the following sprite disappears?

    var shaderProgram = new cc.GLProgram();
    shaderProgram.initWithVertexShaderByteArray(cc.SHADER_POSITION_TEXTURE_VERT, cc.SHADER_POSITION_TEXTURE_FRAG);
    shaderProgram.addAttribute(cc.ATTRIBUTE_NAME_POSITION, cc.VERTEX_ATTRIB_POSITION);
    shaderProgram.addAttribute(cc.ATTRIBUTE_NAME_TEX_COORD, cc.VERTEX_ATTRIB_TEX_COORDS);
    shaderProgram.link();
    shaderProgram.updateUniforms();

    var sprite = cc.Sprite.create(res.HelloWorld_png);
    sprite.setShaderProgram(shaderProgram);
    sprite.setPosition(cc.vertex2(size.width / 2, size.height / 2));
    this.addChild(sprite);

This happens no matter what shader I use, so I’m using the default shader to prove it’s not my shader’s fault. This shader should be exactly the same as the default one so nothing should happen, but instead the sprite disappears.

If I comment out the setShaderProgram line, the sprite appears. So I know it is the shader’s fault but I don’t understand why.

I am testing HTML5 using cocos2d-x 3.11 with js.

2

It even disappears if I just use the shader from the shaderCache:

var sprite = cc.Sprite.create(res.HelloWorld_png);
sprite.setPosition(cc.vertex2(size.width / 2, size.height / 2));
sprite.setShaderProgram(cc.shaderCache.programForKey("ShaderPositionTextureColor"));
this.addChild(sprite);

The shader definitely exists but trying to use it just makes the sprite vanish.

It doesn’t seem like it is possible to use setShaderProgram in HTML5.

Somebody correct me please.

3

Now solved.

The correct invocations are:

sprite.setShaderProgram(cc.shaderCache.programForKey(cc.SHADER_SPRITE_POSITION_TEXTURECOLORALPHATEST));

or piecewise as in the first sample:

var shaderProgram = new cc.GLProgram();
shaderProgram.initWithVertexShaderByteArray(cc.SHADER_SPRITE_POSITION_TEXTURE_COLOR_VERT, cc.SHADER_POSITION_TEXTURE_COLOR_ALPHATEST_FRAG);
shaderProgram ...
1 Like