CCRenderTexture artifacts (z-ordering related) when enabling depth testing...

cocos2d for iPhone » Programming » cocos2d support (graphics engine)

CCRenderTexture artifacts (z-ordering related) when enabling depth testing...

(10 posts) (2 voices)

Started 11 months ago by Panajev
Latest reply from Panajev

Tags:

Hello everyone :),

The scene in question was working correctly before I tried to use a 3D transition (like the page curl) between Cocos2D scenes. This change in scene transitions caused the situation you see below (turning depth tests off for this scene made the scene look "all right" again, but the transitions between scenes would be off...)

The scenes uses various layers (the pieces of cloth are rendered using a CCSpriteBatchNode and the other layers with another one... thinking of trying to use a single atlas for all of them, but I do not know if this is the issue here... the number of objects and the draw calls overhead do not worry me too much). This happens with both an RGBA8 cocos2d FBO as well as a RGB565 one...

-(id) init
{
	if( (self=[super init])) {
		self.isTouchEnabled = YES;
		self.isAccelerometerEnabled = YES;

        [[CCDirector sharedDirector] setDepthTest: YES];

		CGSize screenSize = [CCDirector sharedDirector].winSize;
		target = [[CCRenderTexture renderTextureWithWidth:screenSize.width height:screenSize.height] retain];
		[target setPosition:ccp(screenSize.width/2, screenSize.height/2)];

        [target.sprite runAction:[CCRepeatForever actionWithAction:[CCSequence actions:[CCRipple3D actionWithPosition:MID_POINT_COCOS radius:650 waves:30 amplitude:40 grid:ccg(64, 64) duration:10], [CCStopGrid action], nil]]];

[... physics stuff...]

		[self createWasherWheel];

		batch = [CCSpriteBatchNode batchNodeWithFile:@"Page08/Pag8_lay2_sprite1.png" capacity:16];
        [batch retain];
        [self addChild:target z:2];
		[self addNewSpriteWithCoords:b2Vec2(600, 400)];

        CCSprite * bgL4 = [CCSprite spriteWithSpriteFrameNameOrFile:@"Page08/Pag8_lay4.png"];
        [bgL4 setPosition:MID_POINT_COCOS];
        CCSprite * bgL3 = [CCSprite spriteWithSpriteFrameNameOrFile:@"Page08/Pag8_lay3.png"];
        [bgL3 setPosition:MID_POINT_COCOS];
        bgL1 = [[CCSprite spriteWithSpriteFrameNameOrFile:@"Page08/Pag8_lay1.png"] retain];
        [bgL1 setPosition:MID_POINT_COCOS];

        [self addChild:bgL3 z:5];
        [self addChild:bgL4 z:6];

        [(OminoAppDelegate*)[[UIApplication sharedApplication] delegate] addMenuToLayer:self];

		[self schedule: @selector(tick:)];

		_mouseJoint = NULL;

	}
	return self;
}

I need to draw into the RTT in the -tick: method because I want to wapr box2D driven sprites:

-(void) tick: (ccTime) dt
{
    if(dist>=0){
        dist -= dt * 0.05;
        dist = CLAMP_VAL(dist, 0.0f, 1.5f);
    }
    else {
        dist += dt * 0.05;
        dist = CLAMP_VAL(dist, -1.5f, 0.0f);
    }
    washingMachineMotor->SetMotorSpeed(dist);
	[self step:dt];
    [target beginWithClear:0 g:0 b:0 a:0];

	//Iterate over the bodies in the physics world
	for (b2Body* b = world->GetBodyList(); b; b = b->GetNext())
	{
		if (b->GetUserData() != NULL) {
			//Synchronize the AtlasSprites position and rotation with the corresponding body
			CCSprite *myActor = (CCSprite*)b->GetUserData();
			myActor.position = CGPointMake( b->GetPosition().x * PTM_RATIO, b->GetPosition().y * PTM_RATIO);
			myActor.rotation = -1 * CC_RADIANS_TO_DEGREES(b->GetAngle());
		}
	}

    [bgL1 visit];
    [batch visit];
    [target end];	

}

This is the method I use to add each sprite to the scene inside the -init: method:

- (void) addNewSpriteWithCoords:(b2Vec2)p {
    b2Vec2 spriteposition = p;
    b2Vec2 sprite1position = p + b2Vec2(120, 15);
    b2Vec2 sprite2position = p + b2Vec2(-120, -15);

    CCSprite *sprite = [CCSprite spriteWithBatchNode:batch rect:CGRectMake(224*0,224*0,224,224)];
	[batch addChild:sprite];
	sprite.position = ccp(spriteposition.x, spriteposition.y);

	CCSprite *sprite1 = [CCSprite spriteWithBatchNode:batch rect:CGRectMake(224*1,224*0,224,224)];
	[batch addChild:sprite1];
	sprite1.position = ccp(sprite1position.x, sprite1position.y);

	CCSprite *sprite2 = [CCSprite spriteWithBatchNode:batch rect:CGRectMake(224*2,224*0,224,224)];
	[batch addChild:sprite2];
	sprite2.position = ccp(sprite2position.x, sprite2position.y);

[... physics stuff...]

    CCSprite *sprite3 = [CCSprite spriteWithBatchNode:batch rect:CGRectMake(224*0,224*1,224,224)];
	[batch addChild:sprite3];
	sprite3.position = ccp(sprite3position.x, sprite3position.y);;

	CCSprite *sprite4 = [CCSprite spriteWithBatchNode:batch rect:CGRectMake(224*1,224*1,224,224)];
	[batch addChild:sprite4];
	sprite4.position = ccp(sprite4position.x, sprite4position.y);;

	CCSprite *sprite5 = [CCSprite spriteWithBatchNode:batch rect:CGRectMake(224*2,224*1,224,224)];
	[batch addChild:sprite5];
	sprite5.position = ccp(sprite5position.x, sprite5position.y);;

[... physics stuff...]

    CCSprite *sprite6 = [CCSprite spriteWithBatchNode:batch rect:CGRectMake(224*0,224*2,224,224)];
	[batch addChild:sprite6];
	sprite6.position = ccp(sprite6position.x, sprite6position.y);;

	CCSprite *sprite7 = [CCSprite spriteWithBatchNode:batch rect:CGRectMake(224*1,224*2,224,224)];
	[batch addChild:sprite7];
	sprite7.position = ccp(sprite7position.x, sprite7position.y);;

	CCSprite *sprite8 = [CCSprite spriteWithBatchNode:batch rect:CGRectMake(224*2,224*2,224,224)];
	[batch addChild:sprite8];
	sprite8.position = ccp(sprite8position.x, sprite8position.y);;

[... physics stuff...]

    ///////////////////

    [nodeSprite addChild:sprite];
    [nodeSprite addChild:sprite1];
    [nodeSprite addChild:sprite2];

    [nodeSprite addChild:sprite3];
    [nodeSprite addChild:sprite4];
    [nodeSprite addChild:sprite5];

    [nodeSprite addChild:sprite6];
    [nodeSprite addChild:sprite7];
    [nodeSprite addChild:sprite8];
}

What do you think is happening here? Simple z-ordering issue?

Posted 11 months ago #

Panajev
Member

I have tried a completely different approach to it, using a tool to layout the scene and order the elements... same problem... :(. Does anyone have some clue about it?

Posted 11 months ago #
Panajev
Member

BTW,

without this:

[target.sprite runAction:[CCRepeatForever actionWithAction:[CCSequence actions:[CCRipple3D actionWithPosition:MID_POINT_COCOS radius:650 waves:30 amplitude:40 grid:ccg(64, 64) duration:10], [CCStopGrid action], nil]]];

it would work with the 3D transition as well as depthTesting enabled. This should mean that the problem is caused by the CCRipple3D action... it could even make some sense considering that it is a 3D deformation in a world of objects sitting close together on layers...

What do you think?

Thank you for your help,

Panajev

Posted 11 months ago #
araker
Moderator

As a work around you could turn the depth test on before starting the transition and turn it off again when the transition is finished. I think setting a 2D projection after the transition is finished would also do the trick (and change to a 3D projection again before the transition starts).

Edit, the depth test works on comparing the z-coordinate of objects (the vertexZ property of sprites), so normally it shouldn't interfere with the z-order, which is nothing more than the drawing order.

Posted 11 months ago #
Panajev
Member

Hello araker,

I think I would also have to defer from adding the RTT to the scene layer or is it that the init function gets called after the transition has ended?

I tried setting a 2D projection, but last thing I remember happening was the screen becoming all black.

Regarding the depth testing issue,that's what was making me mumble incoherently about it. Depth testing should not affect rendering in this case, it is enabled by default (like the 3D projection in this project), and there is no artifact that would signal some depth precision issues. Depth testing artifacts are quite clear (like surface acne when rendering shadow maps).
It looks like something related to drawing order.

[target.sprite runAction:[CCRepeatForever actionWithAction:[CCSequence actions:[CCRipple3D actionWithPosition:MID_POINT_COCOS radius:650 waves:30 amplitude:40 grid:ccg(64, 64) duration:10], [CCStopGrid action], nil]]];

I do not get how this effect can be causing such nasty issues though... perhaps the way the mesh behind it is deformed to achieve the effect... maybe I should not deform the RTT object but another surface which gets rendered in the RTT object which gets added to the current layer?

I only used standard CCSprites in the code above and I do not do graphics operations in the blocks I have not quoted, so there already is everything about that particular scene in this thread. I have no problems sharing the entire file if needed though.

I would really appreciate if it was possible to solve this issue.

It's sad to use workarounds when a solution could be found :). Thanks for your post though.

Posted 11 months ago #
araker
Moderator

@Panajev, one other question, are you enabling a depth buffer? It's a argument of the EAGLView and you need it for the 3D effects.

When using a depth buffer in combination with transparent sprites, the draw order becomes important again. If the artifacts are still there when enabling the depth buffer, the correct draw order is to first draw all opaque objects and then the transparent ones from back to front.

Posted 11 months ago #
Panajev
Member
I am enabling the depth buffer:
```
EAGLView *glView = [EAGLView viewWithFrame:[window bounds]
								   pixelFormat:kEAGLColorFormatRGBA8	// kEAGLColorFormatRGBA8
								   depthFormat:GL_DEPTH_COMPONENT16_OES						// GL_DEPTH_COMPONENT16_OES
						];

	// attach the openglView to the director
    [glView setMultipleTouchEnabled:YES];
	[director setOpenGLView:glView];
```
The depth buffer was set-up correctly... I'll have to consider the draw order issue, beside from giving each layer the appropriate Z... I could go back to visit each node again. Luckily, those objects sit in separate CCSprites objects and not in a single batch node... Reason is, with batch nodes I seem to remember that you can only call -visit

My issue is with this:

Why is the scene rendering correctly, with depth buffer enabled as normal, when I am not running the ripple effect?

[target.sprite runAction:[CCRepeatForever actionWithAction:[CCSequence actions:[CCRipple3D actionWithPosition:MID_POINT_COCOS radius:650 waves:30 amplitude:40 grid:ccg(64, 64) duration:10], [CCStopGrid action], nil]]];

Commenting that line does not cause me any artifacts, the scene does not look like the screenshot above.
If I enable the CCRipple3D action, without changing anything else, I do get the artifact shown in the image I posted in this thread. I will double check the drawing order though. Thanks :).

Edit: I understand that sorting objects, rendering opaque objects first, then transparent objects in back to front order is the correct rendering recipe, but unless I am missing something important from CCRipple3D's documentation... if something renders in the correct depth order without it (also considering the fact that I am applying the deformation to a single layer), it should still render in the same render order with it.

Also, I am not sure how to best enforce render order with CCSpriteBatch nodes with multiple children attached to it...
Posted 11 months ago #

Panajev
Member

-(void) tick: (ccTime) dt
{
    if(dist>=0){
        dist -= dt * 0.05;
        dist = CLAMP_VAL(dist, 0.0f, 1.5f);
    }
    else {
        dist += dt * 0.05;
        dist = CLAMP_VAL(dist, -1.5f, 0.0f);
    }
    washingMachineMotor->SetMotorSpeed(dist);
	[self step:dt];
    [target beginWithClear:0 g:0 b:0 a:1];

	//Iterate over the bodies in the physics world
	for (b2Body* b = world->GetBodyList(); b; b = b->GetNext())
	{
		if (b->GetUserData() != NULL) {
			//Synchronize the AtlasSprites position and rotation with the corresponding body
			CCSprite *myActor = (CCSprite*)b->GetUserData();
			myActor.position = CGPointMake( b->GetPosition().x * PTM_RATIO, b->GetPosition().y * PTM_RATIO);
			myActor.rotation = -1 * CC_RADIANS_TO_DEGREES(b->GetAngle());
		}
	}

    [bgL1 visit];
    [batch visit];

    [target end];
}

Depth testing enabled, 3D projection, ripple effect set-up, etc... Well, I avoided to add all other layers to the scene layer using the -addChild method and visited those nodes inside the -draw method. We render into the RTT inside the -tick method and the RTT is visited in the -draw method.

Result? No ripples were showing up.

Posted 11 months ago #

araker
Moderator

Okay, after looking at your code again I see that I've should have looked at it more carefully.

What is going on is that the 3D effect (transformation on the z-coordinate) of the ripple affects the sprites above the render texture because they are all on the same height in the depth buffer (every sprite has a z-coordinate of 0). So give all your sprites that are above the render texture a vertexZ that is higher than the amplitude of the CCRipple3D and they won't be affected anymore by the ripple effect.

If you get other artifacts, try to use the draw order from my previous post on the sprites that are above the render texture.

Posted 11 months ago #
Panajev
Member

Ok, now this makes sense and I feel a bit stupid for assuming that Cocos2D could handle this automagically. I just need to adjust the XYZ of all the items that should sit above the RTT layer when the scene is loaded and the re-adjusted when you leave the scene.

Thanks for your help!

Posted 11 months ago #

RSS feed for this topic

Reply

You must log in to post.