DrawNode anti-aliasing solution


#1

There are several topics requesting anti-aliasing for DrawNode primitives in v3.x and v4.0. Here is a solution tested on win32 and Android builds. I’m pretty sure it should work on all other platforms as well, maybe you can confirm this and try it out on different Android devices as well.

Part of the fix is to change cocos2d\cocos\renderer\ccShader_PositionColorLengthTexture.frag like this…

const char* ccPositionColorLengthTexture_frag = STRINGIFY(
\n#ifdef GL_ES\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()
{
	gl_FragColor = v_color*smoothstep(0.0, length(fwidth(v_texcoord)), 1.0 - length(v_texcoord));\n
}
);

This has been suggested before, but the crucial change is in cocos2d\cocos\renderer\CCGLProgram.cpp GLProgram::compileShader()

    const GLchar *sources[] = {
#if CC_TARGET_PLATFORM == CC_PLATFORM_WINRT
		(type == GL_VERTEX_SHADER ? "precision mediump float;\nprecision mediump int;\n" : "\n#extension GL_OES_standard_derivatives : enable\nprecision mediump float;\nprecision mediump int;\n"),
#elif (CC_TARGET_PLATFORM != CC_PLATFORM_WIN32 && CC_TARGET_PLATFORM != CC_PLATFORM_LINUX && CC_TARGET_PLATFORM != CC_PLATFORM_MAC)
        (type == GL_VERTEX_SHADER ? "precision highp float;\nprecision highp int;\n" : "\n#extension GL_OES_standard_derivatives : enable\nprecision mediump float;\nprecision mediump int;\n"),
#endif
        "uniform mat4 CC_PMatrix;\n"
        "uniform mat4 CC_MVMatrix;\n"
        "uniform mat4 CC_MVPMatrix;\n"
        "uniform mat3 CC_NormalMatrix;\n"
        "uniform vec4 CC_Time;\n"
        "uniform vec4 CC_SinTime;\n"
        "uniform vec4 CC_CosTime;\n"
        "uniform vec4 CC_Random01;\n"
        "uniform sampler2D CC_Texture0;\n"
        "uniform sampler2D CC_Texture1;\n"
        "uniform sampler2D CC_Texture2;\n"
        "uniform sampler2D CC_Texture3;\n"
        "//CC INCLUDES END\n\n",
        source,
    };

I make no guarantees on the robustness of this fix… It needs testing on all platforms and more devices.
If it works out maybe the 2d-x dev team can include an improved version of this feature into DrawNode with the abilty to set the anti-alias mode in the create function.
Good Luck!


The drawPolygon method creates low definition elements
Thickness of DrawNode line?
Final topic about Anti-Aliasing disease
#2

Cool, thanks! I found a nice example of fwidth(…) since I haven’t used it before.


#3

@IslandPlaya

You tried for which version of coco2d-x exactly? Me using v3.3 + Android
Are you sure you made no other changes except the above two?

Please see


#4

I tested it with the v4-develop branch from github.
I will try to find time to test on the v3 branch from github and on iOS and Mac later today.

Edit:
I have just had a look at the v3 branch. The render pipeline has been changed substantially for v4-develop.
Looks like my fix will only work in v4.
Sorry, I don’t have time at the moment to pursue in detail what needs to be done in v3.


#5

@IslandPlaya, i’m working with cocos2d-x V3.4, and i really need your solution ,could you help me please ?


#6

I’ll get to it as soon as I can. It is obviously possible. Have a look around what I said for other versions of cocos2d-x, I’m sure you can work it out yourself.
Good luck mate!


#7

Cocos 3.13. \ android. No help from solution above - aliasing is the same for lines and curves. Its even worse than from RenderTexture + setAntiAliasTexParameters. Anybody solve this another way? I think its critical issue for all cocos2dx developers and I’ve tried all suggested solutions from forum.

Anybody? =(