V 3.14.1 中 cc.DrawNode 绘制图形会发生内容错乱

Cocos2d-x JavaScript
#1

问题环境:

cocos2d-x 3.14.1

Mac / Chrome Version 56.0.2924.87 (64-bit)
Mac / Safari Version 9.0.1 (11601.2.7.2)

webgl 模式

具体的问题表现比较难以描述，可以说是在使用 cc.Drawnode 实例，进行绘制 （如 drawSegment，drawDot，drawPoly） 的时候（每帧绘制，比如绘图软件），画着画着，画面上的内容就会变花掉。而且貌似是有复数个 cc.Drawnode 实例的时候比较容易出现。

我知道 drawPoly 在绘制凹多边形的时候是由问题，需要自己三角化处理的，所有测试的时候画的都是凸多边形。

这个问题貌似是新版中引入的，因为我试过了 cocos2d-x 3.13.1 and cocos2d-x 3.12 都没有这个问题。

而新版的 3.14.1 的日志中，有如下描述:

cocos2d-x-3.14 Dec 22 2016

[REFINE]        Web: Reimplement a much faster cc.DrawNode WebGL renderer
I have uploaded a simple demo in the attachment, I hope you guys can run and test it I think it is easy to reproduce the problem.

下面是两个 gif 来演示这个问题的发生的表现:

cocos2d-x 3.13.1 完全没问题:

http://discuss.cocos2d-x.org/uploads/default/original/2X/8/81cb8b3e3154a392fcb006652642248feea95de9.gif

cocos2d-x 3.14.1 画着画着就出现问题了 :

http://discuss.cocos2d-x.org/uploads/default/original/2X/9/94fc55e26decd3204ab9719641d0980e6a29221d.gif

此外，附上例子的代码，只要直接浏览器运行，画多边形就可以重现了，希望官方可以看一下，谢谢了。

js-template-default.zip (1.5 MB)

#2

帮忙 @panda

#3

绘图的凹多边形 描边会错乱的问题能不能修复下啊··

#4

感谢，顺便贴一下英文社区的帖子地址:

http://discuss.cocos2d-x.org/t/cc-drawnnode-acts-weird-in-the-latest-version-3-14-1/35290/4

#5

抱歉，DrawNode 的确经过了重构，可能是数据处理上有一些问题，我会查一下

#6

感谢回复，现在看来这个问题还是非常容易发生的，希望官方加油 :slightly_smiling:

#7

已经找到问题原因，有两个计算错误，明天会提交修复代码并同步到这里

#8

请问这种修复bug的情况， 我们要怎么更新到？ 重新下载整个引擎吗？

#9

还是有哪个网址提供checkout？

#10

万分感谢 :slightly_smiling:

非常需要这个 fix，因为新版的 cc.DrawNode 的效率提高是非常巨大的。（如果可能的话，希望官方能够找机会分享一点这次做的优化 cc.DrawNode 的相关知识）。简单的看了下源码，改了还是相当多的地方的。。。

#11

修复在此：

https://github.com/cocos2d/cocos2d-html5/pull/3468/commits/1fec2d2ece083d631862386289f3290295b46db8

#12

这次 DrawNode 修改的核心代码在这里

https://github.com/cocos2d/cocos2d-html5/commit/360eba7157361b498ddc0d665471c7b3fc70b1fa

核心思路有两个：

  1. 降低内存的使用：彻底删除 cc.V3F_C4B_T2F 类型的使用，这种类型在数据的存取上效率很低，占用内存也比较高，现在的实现使用最基本的数据类型来存储数据，计算完数据直接存入渲染用的 ArrayBuffer，没有中间类型
  2. 避免内部创建和销毁对象：前面提到的类型每个对象使用独立的 ArrayBuffer，这难免导致在 DrawNode 添加新的顶点数据（任何 draw 函数和重绘）的时候导致对象的创建和销毁。这里引入了一个 GlobalVertexBuffer，用于从固定的 ArrayBuffer 中取数据段存储顶点数据，可以结合 DrawNode 的 _ensureCapacity 来看
1赞