Cocos2d-x v3: ClippingNode not working on RenderTexture

Question

If a ClippingNode is rendered to a RenderTexture rather than being added as child (or in my case added to a container which is itself rendered to a RenderTexture), the effect is broken:

The sprite is not masked (the stencil has no effect), and all the rest of the screen is filled with white colour (in the case where the ClippingNode is added on top of all other layers).

(Tested on ios and win32)

auto stencil = DrawNode::create();
static Point triangle[3];
triangle[0] = Point(-40, -40);
triangle[1] = Point(40, -40);
triangle[2] = Point(0, 40);
static Color4F green(0, 1, 0, 1);
stencil->drawPolygon(triangle, 3, green, 0, green);

auto clipper = ClippingNode::create();
clipper->setAnchorPoint(Point(0.5, 0.5));
clipper->setPosition( Point(100, 100) );
clipper->setStencil(stencil);
clipper->setInverted(true);

// containerAddedAsChild->addChild(clipper, 20);      // this works fine
containerRenderedToTexture->addChild(clipper, 20);    // this breaks 

auto img = Sprite::create("test_sprite.png");
img->setAnchorPoint(Point(0.5, 0.5));
clipper->addChild(img);

How can I get a ClippingNode working on a RenderTexture with the intended result (the result you get when adding the ClippingNode as a child rather than using a RenderTexture)? Thanks.

Answer 1

I'm not sure if this is exactly what you're asking, but you can get ClippingNodes to render correctly onto your RenderTexture by making sure to set the depth stencil option.

In Cocos2d-x 3.x it looks like this:

RenderTexture* renderTexture = RenderTexture::create(paddedSize.width, paddedSize.height,
    Texture2D::PixelFormat::RGBA8888,
    GL_DEPTH24_STENCIL8_OES); // configure for clipping node

renderTexture->beginWithClear(0, 0, 0, 0, 1.0f);
clippingNode->Node::visit();
renderTexture->end();

In Cocos2d-iPhone / Swift 3.x it looks like this:

CCRenderTexture *renderTexture = [CCRenderTexture renderTextureWithWidth:paddedSize.width height:paddedSize.height
    pixelFormat:CCTexturePixelFormat_RGBA8888
    depthStencilFormat:GL_DEPTH24_STENCIL8_OES];
[renderTexture beginWithClear:0.0f g:0.0f b:0.0f a:0.0f depth:1.0f];
[clippingNode visit];
[renderTexture end];