7

这是我想做的：http: //mbostock.github.com/d3/talk/20111116/iris-splom.html

但我想在 webgl 2d 中做到这一点（因为 SVG 性能非常慢，10k SVG 只下降到 12 fps）

在快速搜索中，我发现了几个 webgl-2d 库：cocos2d-html5、pixijs、Three.js 和 webgl-2d（已放弃？）

它们看起来很简单，但我想做的是数据可视化。cocos 和 pixjs 是 2d 游戏库。我是 webgl 和那些库的新手，所以你们可以推荐一些专家吗？

我需要的东西的总结：

相互作用 ：

  • 图中的矩形选择。单击以选择某些元素。
  • 缩放和平移支持（如果可能，半缩放）

渲染器：WebGL2d（根据基准 webgl 最快）

4

1 回答 1

3

根据您的要求和总结，我会推荐包含 WebGL 渲染支持的Cocos2D-html5最新版本。这就像在cocos2d.js设置文件中将渲染设置从 Canvas 更改为 WebGL 一样简单。例如，在 HelloHTML5World/cocos2d.js 中将 renderMode 更改为 2 以进行基于 WebGL 的渲染。

renderMode:0,       //Choose of RenderMode: 0(default), 1(Canvas only), 2(WebGL only)

Cocos2d-html5 更准确地说是一个图形库，并且可能仅与（默认）花栗鼠或 box2d 游戏物理库结合使用才能被解释为一个完整的游戏库。

它是否支持矩形选择，或缩放和平移？是的，您可以扩展现有的库来实现这些行为。

Cocos2d-html5 平台的其他优点是增加了对使用 Cocosbuilder 进行可视化图形编辑的支持，以及对具有 Javascript 绑定的相同代码库的跨平台原生支持（iOS、Android 等）。

如果您有特定的平台问题，可以使用代码更详细地回答这些问题。

您可能需要查看JS 参考和cocos2d-html5 论坛以了解入门。

更新 1：查看了 iris 数据集的数据可视化代码，这些图位于 svg 元素中，小圆圈根据 x,y 坐标绘制每个数据点。这些也可以在 Cocos2d 中通过 x,y 坐标、网格、具有不同不透明度的框和数据点的小圆圈来完成。通过 javascript 代码以 json/xmll/csv 格式导入您的虹膜数据集，并通过上述 cocos2d 方法进行绘图。通过 javascript 事件回调和鼠标处理程序方法选择矩形以及相应的画布场景更新。

更新 2：再想一想，如果您发现 cocos2d 的学习曲线陡峭，您最好将自己限制在基于 WebGL 的仅图表库。这个项目VivaGraphJS似乎适合基于 WebGL 的高性能。

另外，请最好以这种格式提出问题，您在代码中尝试了什么，预期的输出是什么，您得到了什么。SO 并不意味着库的比较。WebGL 是一种渲染方法。例如在 three.js 中的开关很简单

renderer = new THREE.WebGLRenderer();

而不是画布：

renderer = new THREE.CanvasRenderer();

导致更高的性能。

于 2013-05-02T16:02:05.423 回答