@cosmos.gl/graph

GPU 加速力图

宇宙号gl 是一个高性能的WebGL Force Graph算法和渲染引擎. 所有计算和绘图都发生在被片段和顶点遮蔽的GPU上,避免了昂贵的内存操作. 它能够实时模拟由数十万个点和现代硬件链接组成的网络图.

这个引擎的力量 宇宙图 ——探索复杂网络和AI嵌入的工具集.

与其他图书馆的比较

来看看我们的故事本

快速启动

安装软件包 :

npm install @cosmos.gl/graph

说明: 润滑剂gl (单位:千美元)@luma.gl/core, (中文(简体) ), @luma.gl/engine, (中文(简体) ), @luma.gl/shadertools, (中文(简体) ), @luma.gl/webgl,兼容范围 ~9.3.0)是同级依赖关系。 npm 7+ 自动安装它; 带有 Yarn 或 pnpm 配置, 跳过自动安装对等器, 明确添加四个包 ~9.3.0 赤裸的安装会得到一个更新的luma.gl. 将luma.gl保持为对等点让cosmos.gl共享一个luma.gl安装——和一个GPU Device ——主机有"甲板"等. gl.

获取数据, 配置 图表并运行模拟:

import { Graph } from '@cosmos.gl/graph'

const div = document.querySelector('div')
const config = {
  simulationFriction: 0.1, // keeps the graph inert
  simulationGravity: 0, // disables the gravity force
  simulationRepulsion: 0.5, // increases repulsion between points
  curvedLinks: true, // curved links
  fitViewOnInit: true, // fit the view to the graph after initialization
  fitViewDelay: 1000, // wait 1 second before fitting the view
  fitViewPadding: 0.3, // centers the graph with a padding of ~30% of screen
  rescalePositions: false, // rescale positions, useful when coordinates are too small
  enableDrag: true, // enable dragging points
  onClick: (pointIndex) => { console.log('Clicked point index: ', pointIndex) },
  /* ... */
}

const graph = new Graph(div, config)

// Points: [x1, y1, x2, y2, x3, y3]
const pointPositions = new Float32Array([
  0.0, 0.0,    // Point 1 at (0,0)
  1.0, 0.0,    // Point 2 at (1,0)
  0.5, 1.0,    // Point 3 at (0.5,1)
]);

graph.setPointPositions(pointPositions)

// Links: [sourceIndex1, targetIndex1, sourceIndex2, targetIndex2]
const links = new Float32Array([
  0, 1,    // Link from point 0 to point 1
  1, 2,    // Link from point 1 to point 2
  2, 0,    // Link from point 2 to point 0
]);

graph.setLinks(links)

graph.render()

V3.0里有什么新鲜事?

cosmos.gl v3.0 带来了一个新的渲染引擎,aync初始化,以及一些新的特性:

• luma.gl (WebGL 2) (中文(简体) ) 从regl到 润滑剂gl,支持共享自定义 Device 跨越多个图表通过 new Graph(div, config, devicePromise)。 。 。 .
• 同步初始化 ——构造器立即返回;所有公用方法排队直到设备准备好. 使用 graph.ready 编号 : graph.isReady 以便知道何时可以使用图表.
• 模拟控制 ——渲染现在与模拟分离. 默认自动启动模拟; 使用 start(), (中文(简体) ), stop(), (中文(简体) ), pause(),以及 unpause() 独立控制它.
• 链接取样 屏幕上的可见链接样本 getSampledLinks() 财务报告和审定财务报表 getSampledLinkPositionsMap() 用于在链接上渲染标签或覆盖.
• 触摸和笔接支持 - 电话和平板电脑上的窃听器、拖动器和相接器 长压(~500ms)会触发上下文菜单回调. onMouseMove 并且所有点击都从触摸输入中调用回火.
• 上下文菜单支持 ——右键点击桌面的新回调和tuch/pen的长压: onContextMenu, (中文(简体) ), onPointContextMenu, (中文(简体) ), onLinkContextMenu, (中文(简体) ), onBackgroundContextMenu。 。 。 .
• 将视图端口切入点数 —— 说 setZoomTransformByPointPositions() 缩放和平板以适合一组点入视野.
• 配置驱动的突出显示 - 以必要选择方法取代 highlightedPointIndices, (中文(简体) ), highlightedLinkIndices,以及 outlinedPointIndices 配置属性 。 点和链接单独突出。 通过下列途径使重点联系更加广泛: focusedLinkIndex 编号 : focusedLinkWidthIncrease新建 findPointsInRect(), (中文(简体) ), findPointsInPolygon(), (中文(简体) ), getNeighboringPointIndices(), (中文(简体) ), getConnectedLinkIndices(),以及 getConnectedPointIndices() 方法。 。 .
• 链接混合控制 —— 说 linkBlending: false 禁用 alpha 混合, 用于在稠密的图上显著地更快的链接渲染 .
• 四. 改进工作 —— 说 onPointMouseOver 现在包括 isHighlighted 财务报告和审定财务报表 isOutlined 参数; 当点相重叠时,会正确显示最顶点.
• 配置 API 更改 —— 说 setConfig() 现在在应用前将所有值重新设置为默认值; 使用新值 setConfigPartial() 更新个人属性而不重置其余属性.
• 仅输入配置字段 —— 说 initialZoomLevel, (中文(简体) ), randomSeed,以及 attribution 只能设置在初始化期间,并保存在配置更新中.
• 切换运行时间模拟 —— 说 enableSimulation 现在可以在运行时通过 setConfig() 或者说 setConfigPartial()。 。 。 .
• GPU 转换 ——指点位置,指点颜色/大小,以及连接颜色/widths 现在默认为动能(transitionDuration: 800, (中文(简体) ), transitionEasing: TransitionEasing.CubicInOut) (中文(简体) ). 使用 transitionDuration: 0 保持快速更新.
• 过渡回调 ——使用 onTransitionStart, (中文(简体) ), onTransition,以及 onTransitionEnd 跟踪过渡生命周期和进展.
• 默认点形状 ——新设 pointDefaultShape 配置属性允许您在不提供每个点形状时为所有点设置倒计时形状。 接受一个 PointShape enum值(例如, PointShape.Star),一个平数(例如, 6),或数字字符串(例如, "6") (中文(简体) ).
• 碰撞力 ——新的GPU-加速相撞力能使点能避免重叠,使用空间-hash网格来缩放成大图. 启用它 simulationCollision,并调整间隔 simulationCollisionRadius (固定半径与大小)和 simulationCollisionPadding (各点间有外差). 见 碰撞实例。 。 。 .
• 导出默认值 —— 说 defaultConfigValues 现在属于公共API.
• 最佳悬浮探测 ——鼠标未移动时跳过GPU工作.

检查 移徙指南 从v2升级.

V2.0里有什么新情况?

cosmos.gl v2.0在性能和数据处理方面作出重大改进:

• 增强具有WebGL兼容格式的数据结构.
• 方法一样 setPointPositions 财务报告和审定财务报表 setLinks 替换 setData 提高效率.
• 通过Float32Array直接控制点和链接属性(如颜色,大小,宽度等).
• 基于索引而不是对象更新的事件处理 .
• 新点集群部队setPointClusters, (中文(简体) ), setClusterPositions 财务报告和审定财务报表 setPointClusterStrength) (中文(简体) ).
• 拖取点的能力.

检查 移徙指南 用于从v1升级.

实例

• 行动

显示大小写( 通过) 相册. app(中文(简体) )

• 丝绸之路案例:比特币交易 (单位:千美元)更多信息(中文(简体) )
• ABACUS 贝壳 (单位:千美元)来源(中文(简体) )
• 数学工作公司:对称正向确定矩阵 (单位:千美元)来源(中文(简体) )

已知问题

• 从15.4版本开始,iOS停止支持关键WebGL扩展为我们的多Body力执行提供动力(EXT_float_blend) (中文(简体) ). 我们正在调查这个问题并探索解决办法. 最新iOS又成功了!
• cosmos.gl不工作 在Android设备 不支持 OES_texture_float WebGL 扩展名.

文档

• 🧑‍💻 快速启动
• 🛠 配置
• ⚙️ API 参考
• 🚀 移徙指南

许可证

麻省理工学院

联系人

GitHub 讨论