Cocos2d-x v3 Anti-Aliasing for Primitives

I am drawing lines with cocos2dx primitives. My code looks like this:

OnTouchMoved:

    Touch *touch = touches[0];
    Point start = touch->getLocationInView();
    start = Director::getInstance()->convertToGL(start);
    Point end = touch->getPreviousLocationInView();
    end = Director::getInstance()->convertToGL(end);

    targetTexture->begin();
    
    if (end.getDistance(start) > 2)
    {
        drawCurPoint(start, end);
   }

drawCurPoint looks like this:

Point dir = end - start;
dir = dir.getPerp();
Point perpendicular = dir.getNormalized();
Point A =  start + (perpendicular * (DOT_RADIUS / 2));
Point B =  start - (perpendicular * (DOT_RADIUS / 2));
Point C =  end + (perpendicular * (DOT_RADIUS / 2));
Point D =  end - (perpendicular * (DOT_RADIUS / 2));

Point poly[4] = {A, C, D, B};

dot->drawSolidPoly(poly, 4, Color4F::BLACK);
dot->drawDot(end, DOT_RADIUS / 2.0, Color4F::BLACK);

And it works but the lines are horribly aliased… now I know there exist this topic:

But Chano’s solution does not work for me :confused: Actually there are some strange things happening… for example the canvas size is smaller 4 times! And the lines don’t appear at all :confused:

Does somebody know how to add anti-aliasing to the lines I’m drawing? I’m using cocos2dx v. 3.4 (if it matters)

I too would very much like an answer to this.
Using Cocos2d-x v2.x I could get nice anti-aliased DrawNode rendering on all platforms by using smoothstep in the shader.
Now using v3/v4 I can’t seem to get it working (so far.)
Thanks in advance!

Bump :wink:

But seriously… there should be a straight forward solution for this… Anybody? :frowning:

Bump :smiley:

For getting smoothlines in DrawNode, open ccShader_PositionColorLengthTexture.frag and comment out lines 36-38 (basically use smoothstep when available).

This has worked for me in 3.3.

Hope it helps.

Thanks,
Harsh

@jarsj

I commented out those lines but instead of creating smooth lines it is not drawing any line. Also, it has removed 2 LabeltTTF labels from my scene.

I using DrawNode

@jarsj
The same problem as above… when I comment out the lines then its not drawing any lines. Well actually it does… but you cant see them… The program responds to the drawings correctly but you cant see the lines at all… also it destroys my ScrollView :confused:

EDIT:
I did some changes to the “brush” colour and actually you can see the lines on black background but the aliasing is still killing my eyes :confused: (somehow it’s even worse)

Sorry guys, Missed out line 25. Please comment that out as well.

My entire ccShader_PositionColorLengthTexture.frag looks like this

const char* ccPositionColorLengthTexture_frag = STRINGIFY(

\n#ifdef GL_ES\n
\n#extension GL_OES_standard_derivatives : enable\n

varying mediump vec4 v_color;
varying mediump vec2 v_texcoord;
\n#else\n
varying vec4 v_color;
varying vec2 v_texcoord;
\n#endif\n

void main()
{
 \n#if defined GL_OES_standard_derivatives\n
gl_FragColor = v_color*smoothstep(0.0, length(fwidth(v_texcoord)), 1.0 - length(v_texcoord));\n    
\n#else\n
gl_FragColor = v_color*step(0.0, 1.0 - length(v_texcoord));
 \n#endif\n
}
);
2 Likes

@jarsj
Your solution does not work for me :confused: However now with the line 25 uncommented I can finally see the line I am drawing but its still aliased :confused: Whats your code for drawing the lines? Can you show me the code itself?
Mine looks like this:
In the init() method:

dot = DrawNode::create();
this->addChild(dot);

later:

Point dir = end - start;
dir = dir.getPerp();
Point perpendicular = dir.getNormalized();
Point A =  start + (perpendicular * (DOT_RADIUS / 2));
Point B =  start - (perpendicular * (DOT_RADIUS / 2));
Point C =  end + (perpendicular * (DOT_RADIUS / 2));
Point D =  end - (perpendicular * (DOT_RADIUS / 2));
    
Point poly[4] = {A, C, D, B};

dot->drawDot(end, DOT_RADIUS / 2.0, color);    
dot->drawSolidPoly(poly, 4, color);

DOT_RADIUS is set to 14.

#define DOT_RADIUS 14.0f

Am I missing something? Maybe something with the render texture? Or dont know… I cant get that anti aliasing to work :frowning:

Guys! I almost have it! The lines are antialiased when I comment out the smoothstep part:

gl_FragColor = v_color*smoothstep(0.0, length(fwidth(v_texcoord)), 1.0 - length(v_texcoord));\n  

BUT! You need to remove also the fwidth part from this function so in the end the line looks like this:

gl_FragColor = v_color*smoothstep(0.0, length(v_texcoord), 1.0 - length(v_texcoord));\n

The sad part about this solution is that this blurs ONLY the drawDot part:

dot->drawDot(end, DOT_RADIUS / 2.0, color);  

The solidPoly is not being blurred:

dot->drawSolidPoly(poly, 4, color);

Why is it so? Or how can I replace the SolidPoly part so I get a line without holes in it? Because when I comment out the SolidPoly part I will draw only Dots and when I move my finger fast I get holes in the line I draw. I’m so close yet so far! :frowning: HELP!

1 Like

Both the solutions above works for me! I’m using Cocos2d-x and I’m drawing with drawCardinalSpline primitive of DrawNode.

I solved it! :smiley:
I changed the:

 dot->drawDot(end, DOT_RADIUS / 2.0, color);

to:

dot->drawSegment(start, end, DOT_RADIUS / 2, color);

drawSegment is also antialiased (same as Dot) so it works perfectly and does not kill the performance so badly :smile:

So if someone is still looking for a solution here it is!

1 Like

Yes, removing fwidth was the last thing. I guess without it there are compilation issues elsewhere.

I’m using v3.5. To make primitive smooth for ios (I don’t have android device to test), in AppController.mm (native ios code). I change:

// Init the CCEAGLView
CCEAGLView *eaglView = [CCEAGLView viewWithFrame: [window bounds]
                                     pixelFormat: (NSString*)cocos2d::GLViewImpl::_pixelFormat
                                     depthFormat: cocos2d::GLViewImpl::_depthFormat
                              preserveBackbuffer: NO
                                      sharegroup: nil
                                   multiSampling: NO
                                 numberOfSamples: 0 ];                 numberOfSamples: 0 ];                 numberOfSamples: 0 ];

into:

// Init the CCEAGLView
    CCEAGLView *eaglView = [CCEAGLView viewWithFrame: [window bounds]
                                         pixelFormat: (NSString*)cocos2d::GLViewImpl::_pixelFormat
                                         depthFormat: cocos2d::GLViewImpl::_depthFormat
                                  preserveBackbuffer: NO
                                          sharegroup: nil
                                       multiSampling: YES
                                     numberOfSamples: 4 ];
1 Like

This line worked for me! Thanks!

I’ve done the modification, but still see the poor quality circle by drawCircle. Anyone can fix this trouble?

Testing on iOS simulator