CCDrawNode Antialiasing problem

cocos2d-x C++
#22

@mikolaj_o would you mind further explaining your solution? I have the antialias effect working on a Mac, Android but no success on iOS devices.

#23

I have finally managed to make it work on iOS devices with the following code based on the primitives test. Here’s the .h:

class Circle : public cocos2d::Layer
{
private:
    void onDrawPrimitives(const kmMat4 &transform, bool transformUpdated);
    cocos2d::CustomCommand _customCommand;
    
public:    
    Circle();
    virtual void draw(cocos2d::Renderer *renderer, const kmMat4 &transform, bool transformUpdated) override;
};

And the cpp:

#include "Circle.h"
USING_NS_CC;
Circle::Circle()
{

}

void Circle::onDrawPrimitives(const kmMat4 &transform, bool transformUpdated)
{
    kmGLPushMatrix();
    kmGLLoadMatrix(&transform);
    
    Size visibleSize = Director::getInstance()->getVisibleSize();

    glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
    glEnable(GL_BLEND);
    glLineWidth(1);
    color4B(255, 0, 255, 255);
    DrawPrimitives::drawSolidCircle(Point(visibleSize.width/2, visibleSize.height/2), 60, 0, 30, 1, 1);
}

void Circle::draw(Renderer *renderer, const kmMat4& transform, bool transformUpdated)
{
    _customCommand.init(_globalZOrder);
    _customCommand.func = CC_CALLBACK_0(Circle::onDrawPrimitives, this, transform, transformUpdated);
    renderer->addCommand(&_customCommand);
}

I’m almost hitting a point where I will either #if #elif this to use drawnode or my custom layer class depending on the platform, since the shader modification does the job on a Mac and Android.

Even though I’m not very experienced in Cocos2d-x or OpenGL, I would greatly appreciate some insight to answer this question.

Cheers,
Henrique

#24

DrawPrimitives uses ccPosition_uColor shader, did you modify this shader to create AA circle?
With the original C++ and shader implementation, AA circle is not likely possible.

#25

Doesnt work .
When i use
gl_FragColor = v_color*smoothstep(0.0, length(fwidth(v_texcoord)), 1.0 - length(v_texcoord));\n

af4984dda4c59de9.png1334×750

Seems to work partially when i remove fwidth. ie
gl_FragColor = v_color*smoothstep(0.0, length(v_texcoord), 1.0 - length(v_texcoord));\n

but then the blur radius is too big.

36c3e1c9bc7a8b05.png1334×750

Am using 3.2. Checked in ios 7.1.1 and 8.1

Any ideas?

#26

Any ideas how to fix this issue?

#27

Any thing worked out?
@sutharsha
@hcabral

#28

Hmm. Using a win32 build if I simply change main() to this in ccShader_PositionColorLengthTexture.frag

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

without any other changes then triangle primitives at least get anti-aliased (not tested points or lines.)
Can anyone confirm this on win32 and other platforms?

#29

@IslandPlaya
I did this thing also for android with v3.3 but after using this my lines disappeared, I do’t know why!

#30

has this issue been fixed?

#31

Still can’t draw smooth circle with cocos2d-x. Really don’t understand why it can’t do this simple thing with one function.

DrawNode - each "drawDot" increases GL verts amount
#32

I’ve also tried it, and fwidth was not supported, so I used a method found online: const char* ccPositionColorLengthTexture_frag = R"(

#ifdef GL_ES
varying mediump vec4 v_color;
varying mediump vec2 v_texcoord;
#else
varying vec4 v_color;
varying vec2 v_texcoord;
#endif

float calc(vec2 p)
{
return p.x*p.x - p.y;
}

vec2 pixel_step = vec2(0.1,0.1); //TODO 1/width, 1/height = width/height = triangle/quad width/height in px
//https://stackoverflow.com/questions/22442304/glsl-es-dfdx-dfdy-analog/52626735#52626735

void main()
{
float current = calc(v_texcoord);
vec2 xnew = vec2(v_texcoord.x + pixel_step.x,v_texcoord.y);
vec2 ynew = vec2(v_texcoord.x,v_texcoord.y + pixel_step.y);
float dfdx = calc(xnew) - current;
float dfdy = calc(ynew) - current;
float fwidthcustom = abs(dfdx) + abs(dfdy);
gl_FragColor = v_colorsmoothstep(0.0, length(fwidthcustom), 1.0 - length(v_texcoord));
//gl_FragColor = v_colorsmoothstep(0.0, length(fwidth(v_texcoord)), 1.0 - length(v_texcoord));
//gl_FragColor = v_color*smoothstep(0.0, length(v_texcoord), 1.0 - length(v_texcoord));
}
)";