Drawing an arc faster « cocos2d for iPhone

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

Drawing an arc faster

(32 posts) (7 voices)

Started 1 year ago by fg1921
Latest reply from fg1921

Tags:

fg1921
Member

I've got the following method that draws an arc (used in a draw() method). However this seems to be extremely slow on iOS 4.x devices. Brings FPS down to 30 when used in conjunction with a blend mode (really need it for the right effect) and RGBA8 mode and some rich PNG graphic files. If I comment out the following code, I get around 40 FPS. Is there any way to increase the speed of this code in any way? Please help!

void ccDrawArc( CGPoint center, float r, float degrees, int direction)
{
      glEnable(GL_POINT_SMOOTH);
      glBlendFunc (GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

	// Default GL states: GL_TEXTURE_2D, GL_VERTEX_ARRAY, GL_COLOR_ARRAY, GL_TEXTURE_COORD_ARRAY
	// Needed states: GL_VERTEX_ARRAY,
	// Unneeded states: GL_TEXTURE_2D, GL_TEXTURE_COORD_ARRAY, GL_COLOR_ARRAY
	glDisable(GL_TEXTURE_2D);
	glDisableClientState(GL_TEXTURE_COORD_ARRAY);
	glDisableClientState(GL_COLOR_ARRAY);

  // 2 lines define a single degree for smoothness
  int segments = ((int)round(degrees));
  float vertices[segments*2];

	for(int i=0, angle=1;i<(segments*2);i+=2,angle++)
	{
		vertices[i] = r * cos(CC_DEGREES_TO_RADIANS((angle-90)*direction)) + center.x;
		vertices[i+1] = r * sin(CC_DEGREES_TO_RADIANS((angle-90)*direction)) + center.y;
	}

	glVertexPointer(2, GL_FLOAT, 0, vertices);
	glDrawArrays(GL_POINTS, 0, segments);

	// restore default state
	glEnableClientState(GL_COLOR_ARRAY);
	glEnableClientState(GL_TEXTURE_COORD_ARRAY);
	glEnable(GL_TEXTURE_2D);
}

Posted 1 year ago #

Benihana
Member

Do the stuff in the for loop once for each arc, instead of each frame. Hang on to the vertices array and pass it as a parameter.

Posted 1 year ago #
fg1921
Member

Even so, FPS hardly changes. The only time when FPS jumps from 20 to 60 is if I comment out this line:

glBlendFunc (GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

If I keep the alpha blending in tact and comment out the following line, FPS jumps from 20 to 59/58:

glDrawArrays(GL_POINTS, 0, segments);

So I feel it's actually the alpha blending + the actual drawing that's taking up all the time and not the loop/calculations etc. The alpha blending is important to get the right blended 'translucent' effect above the background layer. Any other way I could achieve the same without performance loss?

Posted 1 year ago #
levi
Member

How many points are you drawing? try logging them to see.

Posted 1 year ago #
fg1921
Member

In fact I've managed to pin it down to this: if I comment out the following line (and do the rest of the optimizations here and there) I get around 60 FPS:

glEnable(GL_POINT_SMOOTH);

So the question is, why is this causing it to slow down so much and what alternatives do I have?

Posted 1 year ago #
CJ
Moderator

You can use sprites instead. It would keep your blend mode the same and would give you anti aliasing.
Search this forum for verlet rope, as I'm pretty sure that's what it does for drawing.

Posted 1 year ago #
levi
Member

anti-aliasing is really expensive (GL_POINT_SMOOTH) and uses well over 20 times as many calculations as a non-smooth point. that's why it's slowing you down.

Can you get away with drawing fewer points? are you creating smooth lines out of all the points?

Posted 1 year ago #
fg1921
Member
Thanks CJ, will check verlet rope - I must admit I don't know how to use a texture or a sprite in my 'draw' method (fairly new to OpenGL too).

I can't seem to get the same effect without GL_POINT_SMOOTH. With anti-aliasing I get *just* the effect and look I need but yes it does slow it down tremendously. The moment I comment this line out, I get straight 60 FPS.

I think it's also because I'm using a large point size:
```
glPointSize(18);
```
and on retina:

glPointSize(18*2);

If I reduce the point size, it jumps from 20 to 40 FPS (great) but then I just need it to be that particular size.

Is there a way to use a pre-blended, anti-aliased photoshopped image and draw that on top of the layers (in my draw method)? Is there an example of doing this somewhere (will the verlet rope example help?).

Thank you very much for this but I spent the last 12 hours optimizing my code. I managed to gain heaps by simply using RGBA444 and using the TexturePacker tool to optimize my 32-bit PNGs but am stuck at this last step.
Posted 1 year ago #
levi
Member

@fg1921 it would help to see what the effect you are going for is. can you post a couple screen captures of the different arcs you are drawing as they are now?

Posted 1 year ago #
fg1921
Member

This is what I need (and this is what I get with Anti-aliasing):

http://dl.dropbox.com/u/4960327/Screen%20shot%202010-11-20%20at%2023.11.28.png

And this is without anti-aliasing:

http://dl.dropbox.com/u/4960327/Screen shot 2010-11-20 at 23.11.49.png

Any thoughts?

Posted 1 year ago #
levi
Member

Have you tried GL_LINE_STRIP instead of GL_POINTS? I've never tried different line widths in a setting like this, but if you set the line width with glLineWidth(), and enable anti-aliasing with glEnable(GL_LINE_SMOOTH), then most importantly, change the number if segments to be some fraction of the degrees, like degrees/2, you might get a nearly equally smooth line with 1/4 of the vertices. worth a shot anyway.

if that's not good enough, you could do it by creating textures in photoshop for the left and right half of each arc, and then map them onto a rectangle on each side with the desired height (if it were 90 deg, you'd do a rectangle on the right side that's half the total height, and none on the left. you can get the height using the sin(angle) function). the ends of the arc would be cut off at the end of the rectangle, but that would be hidden by your sun and arm. You'd have to do the texture mapping yourself, obviously.

Posted 1 year ago #
fg1921
Member

Hmm yes that sounds like a plan. I didn't try GL_LINE_STRIP as I read somewhere that the iPhone doesn't support GL_LINE_SMOOTH? Is that correct?

I'm also wondering if using a CCRenderTexture would help? Basically I animate the creation of the arc (begin from 0 and it goes to whatever degree it needs to with 10 FPS animation or so). Once the arc has been drawn, these remain static (but obviously the arcs are constantly being drawn each time 'draw()' is called - which is what's causing the slow down). Once the animation ends I could in theory draw the layer on top of a CCRenderTexture and then swap that with the actual layer drawing the arcs.

Do you think that would work?

Posted 1 year ago #
levi
Member

Looks like you're right: http://discussions.apple.com/thread.jspa?threadID=1611394
according to that thread the iPhone doesn't support GL_LINE_SMOOTH

but your idea with CCRenderTexture sounds perfect. I'd go with that.

Posted 1 year ago #
samkass
Member

Another option is to draw with UIBezierPath into an image, then copy that image to the screen during the draw step. It will be slow to draw the curve, but UIBezierPath has really nice rendering characteristics and control options, and blitting images to the screen is what graphics cards do best.

Posted 1 year ago #
fg1921
Member

Okay so the CCRenderTexture option worked but now I'm seeing differently colored/blended arcs.

The inwards bigger, darker arc uses the color

glColor4ub(0,0,0,12);

whereas the yellow arc uses

glColor4ub(216,152,27,200);

When rendered on top of a CCRenderTexture, the darker arc disappears completely and the yellow on is ugly and sharp. I assume this is because I've got blending switched ON for the original layer. I then did the following to the rendered texture to match the actual blending of the original layer:

[[renderedArcLayer sprite] setBlendFunc:(ccBlendFunc) {GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA}];

This still results in a very different image. I've tried different blending options and can't seem to get the exact same result. I managed to switch blending OFF on the original layer during the time it's being rendered on top of the texture instead switched blending ON (as above) on the texture itself - this too results in a layer which isn't blending with the actual background image.

What am I doing wrong?

Thanks!!

Posted 1 year ago #
fg1921
Member

Hmm I see this is a bug!

http://code.google.com/p/cocos2d-iphone/issues/detail?id=937

Posted 1 year ago #
araker
Moderator

Can you post your code? The render texture needs GL_ONE,GL_ONE_MINUS_SRC_ALPHA (default) for blending since it is premultiplied.

Posted 1 year ago #

fg1921
Member

No matter what I do I can't get it to work. It just won't render correctly. Here's the complete code:

QiblaArcLayer.h

#import <UIKit/UIKit.h>

@interface QiblaArcLayer : CCColorLayer {
  BOOL DrawingMoonArc;
  BOOL DrawingSunArc;
  BOOL DrawingQiblaArc;

  float QiblaAngle;
  float MoonAngle;
  float SunAngle;  

  float DegreeToDrawQibla;
  float DegreeToDrawSun;
  float DegreeToDrawMoon;
  float factor;

  // Qibla
  float *qiblaverticesNeg;

  // Sun
  float *sunverticesNeg;

  // Moon
  float *moonverticesNeg;

  BOOL CanSmoothLines;
  BOOL IsRendering;
}

@property (nonatomic, assign) BOOL DrawingMoonArc;
@property (nonatomic, assign) BOOL DrawingSunArc;
@property (nonatomic, assign) BOOL DrawingQiblaArc;
@property (nonatomic, assign) BOOL CanSmoothLines;
@property (nonatomic, assign) BOOL IsRendering;

@property (nonatomic, assign) float QiblaAngle;
@property (nonatomic, assign) float MoonAngle;
@property (nonatomic, assign) float SunAngle;

@end

QiblaArcLayer.m

#import "QiblaArcLayer.h"

@implementation QiblaArcLayer

@synthesize DrawingQiblaArc;
@synthesize DrawingSunArc;
@synthesize DrawingMoonArc;

@synthesize QiblaAngle;
@synthesize MoonAngle;
@synthesize SunAngle;
@synthesize CanSmoothLines;
@synthesize IsRendering;

void drawCubicBezier(CGPoint origin, CGPoint control1, CGPoint control2, CGPoint destination, int segments)
{
  CGPoint vertices[segments + 1];

  float t = 0.0;
  for(int i = 0; i < segments; i++)
  {
    float x = pow(1 - t, 3) * origin.x + 3.0 * pow(1 - t, 2) * t * control1.x + 3.0 * (1 - t) * t * t * control2.x + t * t * t * destination.x;
    float y = pow(1 - t, 3) * origin.y + 3.0 * pow(1 - t, 2) * t * control1.y + 3.0 * (1 - t) * t * t * control2.y + t * t * t * destination.y;
    vertices[i] = CGPointMake(x, y);
    t += 1.0 / segments;
  }
  vertices[segments] = destination;

  glVertexPointer(2, GL_FLOAT, 0, vertices);
  glDrawArrays(GL_LINE_STRIP, 0, segments+1);
}

void ccDrawArc( CGPoint center, float r, float degrees, float *vertices)
{
  if (vertices == nil) {
    return;
  }

	// Default GL states: GL_TEXTURE_2D, GL_VERTEX_ARRAY, GL_COLOR_ARRAY, GL_TEXTURE_COORD_ARRAY
	// Needed states: GL_VERTEX_ARRAY,
	// Unneeded states: GL_TEXTURE_2D, GL_TEXTURE_COORD_ARRAY, GL_COLOR_ARRAY
	glDisable(GL_TEXTURE_2D);
	glDisableClientState(GL_TEXTURE_COORD_ARRAY);
	glDisableClientState(GL_COLOR_ARRAY);

  // 2 lines define a single degree for smoothness
  int segments = ((int)round(degrees));

	glVertexPointer(2, GL_FLOAT, 0, vertices);
	glDrawArrays(GL_POINTS, 0, segments);

	// restore default state
	glEnableClientState(GL_COLOR_ARRAY);
	glEnableClientState(GL_TEXTURE_COORD_ARRAY);
	glEnable(GL_TEXTURE_2D);
}

// on "init" you need to initialize your instance
-(id) init
{
	// always call "super" init
	// Apple recommends to re-assign "self" with the "super" return value
	if( (self=[super initWithColor:ccc4(255,255,255,0)] )) {

		// Enable touch events
		self.isTouchEnabled = NO;
    factor = [[CCDirector sharedDirector] contentScaleFactor];

    //    qiblavertices = (float*)malloc(2*360*sizeof(float));
    qiblaverticesNeg = nil;
    sunverticesNeg = nil;
    moonverticesNeg = nil;

    qiblaverticesNeg = (float*)malloc(2*360*sizeof(float));

    sunverticesNeg = (float*)malloc(2*360*sizeof(float));

    moonverticesNeg = (float*)malloc(2*360*sizeof(float));

    CGPoint center = ccp((294.0*factor)/2, (294.0*factor)/2);
    for (int i=0, angle=1;i<360*2;i+=2,angle+=1) {
      float r = 87*factor;
      qiblaverticesNeg[i] = r * cos(CC_DEGREES_TO_RADIANS((angle-90)*-1)) + center.x;
      qiblaverticesNeg[i+1] = r * sin(CC_DEGREES_TO_RADIANS((angle-90)*-1)) + center.y;

      r = 113*factor;
      sunverticesNeg[i] = r * cos(CC_DEGREES_TO_RADIANS((angle-90)*-1)) + center.x;
      sunverticesNeg[i+1] = r * sin(CC_DEGREES_TO_RADIANS((angle-90)*-1)) + center.y;

      r = 65*factor;
      moonverticesNeg[i] = r * cos(CC_DEGREES_TO_RADIANS((angle-90)*-1)) + center.x;
      moonverticesNeg[i+1] = r * sin(CC_DEGREES_TO_RADIANS((angle-90)*-1)) + center.y;

    }

    CanSmoothLines = NO;
	}
	return self;
}

- (void) setDrawingQiblaArc:(BOOL) newval {
  if (DrawingQiblaArc != newval) {
    DrawingQiblaArc = newval;
    DegreeToDrawQibla = 0;
  }
}

- (void) setDrawingSunArc:(BOOL) newval {
  if (DrawingSunArc != newval) {
    DrawingSunArc = newval;
    DegreeToDrawSun = 0;
  }
}

- (void) setDrawingMoonArc:(BOOL) newval {
  if (DrawingMoonArc != newval) {
    DrawingMoonArc = newval;
    DegreeToDrawMoon = 0;
  }
}

- (void) draw {  

  CanSmoothLines = YES;
//  QLog(@"   Draw Qibla: %i, Sun: %i, Angle: %f", DrawingQiblaArc, DrawingSunArc, SunAngle);
  if (DrawingQiblaArc || DrawingSunArc || DrawingMoonArc) {
    if (CanSmoothLines) {
      glEnable(GL_POINT_SMOOTH);
      glHint(GL_POINT_SMOOTH_HINT, GL_FASTEST);
    }
    glBlendFunc (GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

    // line: color, width, anti-aliased
    BOOL restoreVals = NO;
    if (DrawingQiblaArc && DegreeToDrawQibla <= QiblaAngle && QiblaAngle != 0){
      restoreVals = YES;
      glColor4ub(0,0,0,12);

      float Radius = 87*factor;
      float BarWidth = 18*factor;

      glPointSize(BarWidth);  

      ccDrawArc(ccp((294.0*factor)/2, (294.0*factor)/2), Radius, QiblaAngle, qiblaverticesNeg);
    }

    if (DrawingSunArc && DegreeToDrawSun <= SunAngle && SunAngle != 0){
      restoreVals = YES;

      glColor4ub(216,152,27,200);

      float Radius = 113*factor;
      float BarWidth = 6*factor;

      glPointSize(BarWidth); 

      ccDrawArc(ccp((294.0*factor)/2, (294.0*factor)/2), Radius, SunAngle, sunverticesNeg);
    }

    if (DrawingMoonArc && DegreeToDrawMoon <= MoonAngle && MoonAngle != 0){
      restoreVals = YES;

      glColor4ub(160,160,160,80);

      float Radius = 65*factor;
      float BarWidth = 6*factor;

      glPointSize(BarWidth); 

      ccDrawArc(ccp((294.0*factor)/2, (294.0*factor)/2), Radius, MoonAngle, moonverticesNeg);
    }

    // restore original values
    if (restoreVals) {
      glColor4ub(255,255,255,255);
      glPointSize(1);
      if (CanSmoothLines) {
        glDisable(GL_POINT_SMOOTH);
      }
    }
  }
}

- (void) dealloc
{
  if (!qiblaverticesNeg)
    free(qiblaverticesNeg);

  if (!sunverticesNeg)
    free(sunverticesNeg);

  if (!moonverticesNeg)
    free(moonverticesNeg);

	[super dealloc];
}

@end

Calling Code:

QiblaArcLayer *qiblaDial = [QiblaArcLayer node];
    [qiblaDial setContentSize: CGSizeMake(294*[[CCDirector sharedDirector] contentScaleFactor], 294*[[CCDirector sharedDirector] contentScaleFactor])];
    [qiblaDial setPosition: ccp(0, 0)];
    [compassDial addChild:qiblaDial z:0 tag: kTagArcLayer];

    CCRenderTexture *renderedArcLayer = [CCRenderTexture renderTextureWithWidth:294*[[CCDirector sharedDirector] contentScaleFactor] height:294*[[CCDirector sharedDirector] contentScaleFactor]];
    [renderedArcLayer setVisible: NO];
    [renderedArcLayer setPosition: ccp((294*[[CCDirector sharedDirector] contentScaleFactor])/2, (294*[[CCDirector sharedDirector] contentScaleFactor])/2)];
    [[renderedArcLayer sprite] setBlendFunc:(ccBlendFunc) {GL_ONE,GL_ONE_MINUS_SRC_ALPHA}];
    [compassDial addChild: renderedArcLayer z:0 tag: kTagArcRenderedLayer];

// Set some angle:
    qiblaDial.QiblaAngle = 218;
    qiblaDial.SunAngle = 65;

// Now swap views
        CCRenderTexture *renderedArcLayer = (CCRenderTexture*) [compasssprite getChildByTag: kTagArcRenderedLayer];
        renderedArcLayer.visible = YES;

        qiblaDial.IsRendering = YES;
        [renderedArcLayer begin];
        [qiblaDial visit];
        [renderedArcLayer end];
        qiblaDial.IsRendering = NO;

        qiblaDial.visible = NO;

Posted 1 year ago #

fg1921
Member

Obviously I should add that the actual layer with the arcs have other layers 'behind' it, thus the blending gives you that smokey effect (see image above). After rendering it on the CCRenderTexture, the result looks nothing like the original layer. The blending also does not take into account layers behind the CCRenderTexture. Not even sure if that's just how the RenderTexture works - but if that's the case one can never achieve the originally blended effect.

I can't even include the background to blend in with the arc-layer when rendering as the arc-layer floats above all layers on a separate 'rotatable dial'.

I'm beginning to think there's no simple solution to this problem.

Posted 1 year ago #
fg1921
Member

For your reference, this is how the rendered image looks like:

http://dl.dropbox.com/u/4960327/Screenshot%202010.11.21%2005.29.38.png

This is when I set the following blend function on the rendertexture:

[[renderedArcLayer sprite] setBlendFunc:(ccBlendFunc) {GL_SRC_ALPHA,GL_ONE_MINUS_SRC_ALPHA}];

http://dl.dropbox.com/u/4960327/Screenshot%202010.11.21%2005.32.08.png

Notice how the bigger arc which had a very low alpha set on its color does not show at all and the yellow arc isn't blending correctly.

This is how it should look like:

http://dl.dropbox.com/u/4960327/Screen%20shot%202010-11-20%20at%2023.11.28.png

Posted 1 year ago #
araker
Moderator

Issue 937 should be solved with issue 1012, which cocos version are you using?

In the newest version of the render texture it isn't needed anymore to multiply the width and height with the contentscale factor, it does that internally.

I'm not sure what goes wrong here, I have a few suggestions though.

Could you save an image of your render texture and see if that is rendered correctly? The sprite that displays the render texture could be in error.

One option is to make the colors premultiplied yourself. Eg (160,160,160,80) would be 80/255 = pm (160 * pm, 160 * pm, 160 *pm, pm) and blending can then be done with GL_ONE, GL_ONE_MINUS_SRC_ALPHA.

I've tested Issue 937 when working on issue 1012 and it happens when you try to mix different blend modes on one sprite, while a texture/sprite can have only one active blend mode (as far as I know).

Posted 1 year ago #
fg1921
Member

I'm using the latest version of Cocos2D (always do) - rc1. I tried the following:

1. In my draw() method I changed blend mode to:

glBlendFunc (GL_ONE, GL_ONE_MINUS_SRC_ALPHA);

instead of using GL_SRC_ALPHA

I then also changed the CCRenderTexture's blend function to the above. With a minor tweak to the color used I was able to get the exact same result from my original Arc sprite into the rendered texture for the big darker arc only. The yellow arc also remained approximately the same in both rendered and original sprite but the color turned into an ugly shade and alpha-blending appears to reveal the actual points (and is no longer blending). So basically no luck.

It appears that if I use 'GL_ONE' in both, I do get 99% of the same result in the CCRenderTexture however the moment I change this to GL_SRC_ALPHA I see what I pasted above in one of the shots, i.e. the darker arc disappears and the yellow arc turns dull.

Even if I premultiply the RGBA with GL_ONE it just won't work. I can play around and tweak the darker black arc to appear the same but the yellow one will always look similar to this:

http://dl.dropbox.com/u/4960327/Screen%20shot%202010-11-21%20at%2012.45.11.png

Any other ideas?

Posted 1 year ago #
araker
Moderator

I'm out of suggestions for your current method. You could draw the line using textured triangles or make a texture of the yellow line and use a mask to display it (another link). Though that would be expensive blending wise.

Posted 1 year ago #
fg1921
Member

Thanks araker - however could this be considered a 'bug' with CCRenderTexture? It's odd that it gives you a 99% result with GL_ONE but won't work with GL_SRC_ALPHA

Posted 1 year ago #
araker
Moderator

About GL_SRC_ALPHA, that blend function is typically used for non premultiplied colors. Since colors of the render texture are premultiplied, using that blend function inside the render texture won't work.

I don't think it's a bug, but a limitation. That being said, if you open a issue with a test project, I'm willing to look into it.

Posted 1 year ago #
abitofcode
Moderator

Have you tried using a circle texture and revealing the part you need using CCProgressTimer set to kCCProgressTimerTypeRadialCW?

Posted 1 year ago #
fg1921
Member

No I haven't tried that because the kind of 'animation' and effect I require isn't easily timed. Moreover the dial is then rotatable (using compass on an iPhone 4/3Gs).

I just tried masking the layer with a pre-antialiased mask but the result was still aliased and gave me around 36 FPS. I can't believe something this simple is in fact extremely complex to achieve. I'm just about to give up and possibly remove the arcs completely, possibly fade them out or something as it isn't worth it :/

Posted 1 year ago #
abitofcode
Moderator

http://fancyratstudios.com/2010/02/programming/progresstimer-for-cocos2d/

The timer is a node so I can't see the rotation being a problem. Not sure how you're animating at the moment but you can set the percentage on the progress timer so you can update it yourself.

I've used this approach for a similar effect with a gaussian blur animation (pulsing from blurred to sharp) happening in real time and not dropped below 60fps

edit: You could create a version of the dial with the translucent bar going all the way around in photoshop and then just reveal what you need rather than trying to get the effect at runtime.

Posted 1 year ago #
fg1921
Member

Hmmm, thanks! That looks promising. I'll give it ago :)

Posted 1 year ago #
fg1921
Member

Actually I just get it a mental thought and that technique will work perfectly!!! No more anti-aliasing required. Moreover the 'aliased' edge will be hidden behind the needles in my case which solves the ugly 'edge-case' problem.

Many thanks for sharing this.

Posted 1 year ago #

RSS feed for this topic

12 Next »

Reply »

You must log in to post.