CCDrawNode Antialiasing problem


#3

I got the same issue too. I used CCDrawNode::drawPolygon method to draw a polygon, the edge effects are bad.
Any solutions?


Final topic about Anti-Aliasing disease
#4

Help me. I have the same problem!!! My polygon can’t go antialiased :frowning:


#5

I found a kind of solution- use CCRenderTexture and convert your poly to CCSprite- it is antialiased by default.


#6

I have the same problem.

I’ve tried to restore the commented code in ccShader_PositionColorLengthTexture_frag.h, but there’s no effect.

There’s some way to draw antialiased primitives with DrawNode without using a RenderTexture?


#7

In fact, I’m not able to draw an antialiased image of the layer using a RenderTexture either.
The image quality using a RenderTexture is low, and I don’t get a quality antialiasing if I scale down the node.

I have attached some images to show the problem.

void HelloWorld::update(float delta)
{
    Layer::update(delta);
    
    mRenderTextureSprite->setVisible(false);
    
    Size visibleSize = Director::getInstance()->getVisibleSize();
    mRenderTexture = RenderTexture::create(visibleSize.width, visibleSize.height, Texture2D::PixelFormat::RGBA8888);
    mRenderTexture->begin();
    visit();
    mRenderTexture->end();
    
    auto finalTexture = mRenderTexture->getSprite()->getTexture();
    finalTexture->setAntiAliasTexParameters();
    mRenderTextureSprite->setTexture(finalTexture);
    
    Rect rect = Rect::ZERO;
    rect.size = finalTexture->getContentSize();
    mRenderTextureSprite->setTextureRect(rect);
    //mRenderTextureSprite->cocos2d::Node::setScale(0.5);
    mRenderTextureSprite->setBlendFunc(BlendFunc::ALPHA_PREMULTIPLIED);
    mRenderTextureSprite->setVisible(true);
}

#8

I found it!:slight_smile:

In order to draw antialiased primitives, you have to force smoothstep:

"																															\n\
#ifdef GL_ES																												\n\
// #extension GL_OES_standard_derivatives : enable																			\n\
																															\n\
varying mediump vec4 v_color;																								\n\
varying mediump vec2 v_texcoord;																							\n\
#else																														\n\
varying vec4 v_color;																										\n\
varying vec2 v_texcoord;																									\n\
#endif																														\n\
																															\n\
void main()																													\n\
{																															\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\
// #else																														\n\
	// gl_FragColor = v_color*step(0.0, 1.0 - length(v_texcoord));																\n\
// #endif																														\n\
    gl_FragColor = v_color*smoothstep(0.0, length(fwidth(v_texcoord)), 1.0 - length(v_texcoord));																\n\
}																															\n\
";

Final topic about Anti-Aliasing disease
#9

@Chano,
I tried the code on iOS device and I got this error :
cocos2d: cocos2d: ERROR: 0:29: Call to undeclared function 'fwidth'


#10

@barisatamer
It seems on iOS you have to enable GL_OES_standard_derivatives.
I don’t have an iOS device to test it, but probably if you uncomment all the commented code in the shader fwidth will work:


#11

This helped me in iOS, but the anti-alias issues persists on Mac desktop (Mavericks). Any further ideas?


#12

Correction, it worked in the simulator, not in an ipad mini retina, for instance. =/


#13

Weird, I tested it some time ago on a Mac Mini with Mountain Lion and it worked without problems.


#14

@Chano I overlooked your actual code, i.e., the gl_FragColor definition is outside the conditional blocks. I see it working now, thanks! Will have to test it in Android now.

Cheers!


#16

I think I jumped the gun again, this worked in the Mac build, and never in the iOS device. Still sifting through options.


#17

@hcabral
I have it working on Windows and some Android devices like the Nexus 4 (in other Android devices the app is aborted because this: http://cocos2d-x.org/forums/6/topics/51698?r=51897).

As I said, I tested it on a Mac Mini too. But I haven’t tested it on an iOS device because I don’t have one :stuck_out_tongue:


#18

I will check it on Android, just for kicks now.


#19

It works on iOS, OSX, win32 and Android. Am using v2.2.2.


#20

@IslandPlaya it didn’t work for me in iOS 7.1.1. Works in the simulator, not in the actual device. I’ve tried an iPhone 5s and iPad Mini Retina.

@Chano Android worked too.


#21

Thanks for the info hcabral.
I don’t have a 7.1.1 device to test on, but I will be sure to look into this before my game is released.
Many thanks.


#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