DrawNode has serious bug for WebGL in JS v3.0 Final!

cocos2d-x JavaScript
#1

I’m using cocos2d-js v3.0Final in Chrome. The drawQuadBezier function of cc.DrawNode draws something additional to normal one. See below:

7b55fb4fb652adae.png1280×800

I mark the additional lines with red circles.

I try the DrawPrimitivesTest, and add some drawQuadBezier in it:

draw.drawQuadBezier(cc.p(126.5, 198.5), cc.p(126.5, 198.5), cc.p(130.75,195.75), 10, 2, cc.color(0, 255, 0, 255));
draw.drawQuadBezier(cc.p(130.75,195.75), cc.p(135,185), cc.p(135,193), 10, 2, cc.color(0, 255, 0, 255));
draw.drawQuadBezier(cc.p(135,193), cc.p(135,177), cc.p(131,174.5), 10, 2, cc.color(0, 255, 0, 255));
draw.drawQuadBezier(cc.p(131,174.5), cc.p(127,172), cc.p(124.5,173.5), 10, 2, cc.color(0, 255, 0, 255));
draw.drawQuadBezier(cc.p(124.5,173.5), cc.p(122,175), cc.p(112.5,187), 10, 2, cc.color(0, 255, 0, 255));
draw.drawQuadBezier(cc.p(112.5,187), cc.p(103,199), cc.p(103,201), 10, 2, cc.color(0, 255, 0, 255));
draw.drawQuadBezier(cc.p(103,201), cc.p(103,203), cc.p(110.5,203.5), 10, 2, cc.color(0, 255, 0, 255));
draw.drawQuadBezier(cc.p(110.5,203.5), cc.p(118,204), cc.p(126.5,198.5), 10, 2, cc.color(0, 255, 0, 255));

It also has the problem, see below:

062bc662d60ce65a.png805×454

The red arrow in above image indicates the strange things in drawing.

How to solve this problem?

Furthermore, I test in IE11, and it’s very good:

fb6f8bb7498b15dc.png1280×800

No additional lines and antialias is enabled. I think the difference between Chrome and IE11 is that webgl is used in Chrome and canvas is used in IE11. Can this problem be solved in webgl for Chrome? And can antialias be enabled in webgl?

After more tests, I found it’s an obvious problem of WebGL. I improved my code and replace drawQuadBezier whith drawPoly. Problem still exists. Below is the Chrome results of same code, only difference in renderMode (WebGL/Canvas).
For renderMode == 0:

ffd019526c0a88bd.png844×549

For renderMode == 1:
f1c00eb6384e3f18.png853×548

Hope to fix it ASAP!

#2

Thanks very much for reporting this, we will add this issue on the roadmap. Your explanation is very clear, I’m sure there is some issue in WebGL renderer

#3

An issue have been created for v3.2: http://cocos2d-x.org/issues/5992

#4

Thanks @camel_liu ,

I’m fixing it now, I’ll send the PR to you if it has been fixed.

Thanks for feedback.
David

#5

This issue was submitted 3 months ago and v3.2 was published, but it is still not fixed. @ludingping, is it in progress?

#6

Sorry, @camel_liu,

There has been no time to do this, It will be fixed in this PR: https://github.com/cocos2d/cocos2d-js/issues/1338

#7

This issue still exists in v3.6.1. Does anyone deal with it? It’s been one year since its opening. From v3.0 to v3.2, from v3.2 to v3.4, and now to latest v3.6.1, it’s still here and not resolved!

It also occurs in Android when compiled, so it is the bug of cocos2d-x not only cocos2d-js.

#8

Hi,

I’m using cocos2D-X v3.7 and the bug is still present… When drawing a bezier curve using drawQuadBezier, if the curve is not important enough, the line cross the whole screen instead of remaining between origin and destination.

This bug doesn’t seem to happen when running on iOS but it does happen in the browser when using WebGL.

Does anyone has a fix that could work (even if it requires inheriting from DrawNode to put a custom quadBezier method)?

Thank you in advance for your time.