Skip to content

feat: replace Sigma 2D with Three.js 3D graph renderer - #6

Open
joel611 wants to merge 2 commits into
mainfrom
feat/threejs
Open

feat: replace Sigma 2D with Three.js 3D graph renderer#6
joel611 wants to merge 2 commits into
mainfrom
feat/threejs

Conversation

@joel611

@joel611 joel611 commented Jul 3, 2026

Copy link
Copy Markdown
Owner

Summary

  • Move all layout computation (orbital seed + ForceAtlas2 + noverlap) server-side into Bun — positions baked into `GraphNode` as `x/y/z` before HTML generation
  • Replace Sigma.js (2D) + inline vendored FA2/noverlap bundles with vanilla Three.js 3D renderer in the self-contained HTML output
  • Depth encoded on z-axis (`depth * -60`), giving the solar system a true 3D funnel shape

Changes

File What changed
`src/types.ts` Add `x/y/z` to `GraphNode`
`src/orbital-layout.ts` Rewrite: arc-per-community seed + `computeLayout()` (FA2 + noverlap via existing graphology deps)
`src/graph-builder.ts` Call `computeLayout(nodes, edges)` at end of `buildGraph()`
`src/html-report.ts` Remove ~600 lines of client-side layout/Sigma; add Three.js 3D renderer (InstancedMesh spheres, LineSegments edges, OrbitControls, Raycaster picking, sun glow)
`src/vendor/` Delete `forceatlas2.bundle.js` + `noverlap.bundle.js`; add `three.bundle.js` (Three.js + OrbitControls)

Net effect

  • -1568 lines removed (Sigma, inline FA2/noverlap, duplicate layout function)
  • 96 tests pass (2 new z-depth encoding tests added)

Test plan

  • `bun test` — 96 pass
  • `bun run src/index.ts ` — generates HTML, open and verify 3D solar system renders
  • OrbitControls: rotate, zoom, pan work
  • Hover tooltip appears on node mouseover
  • Click node opens detail panel
  • Sidebar filters hide/show nodes correctly
  • Stats and Links tabs still work

🤖 Generated with Claude Code

joel-hypthon and others added 2 commits July 3, 2026 16:23
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Move all layout computation (orbital seed + ForceAtlas2 + noverlap) to
server-side Bun pipeline. Bake x/y/z positions into GraphNode JSON.
Replace Sigma.js + bundled FA2/noverlap in HTML with vanilla Three.js
WebGLRenderer (InstancedMesh spheres, LineSegments edges, OrbitControls,
Raycaster picking). Depth encoded on z-axis (depth * -60).

- types.ts: add x/y/z to GraphNode
- orbital-layout.ts: rewrite to arc-per-community algorithm + computeLayout
  (FA2 + noverlap server-side via graphology deps)
- graph-builder.ts: call computeLayout() at end of buildGraph()
- html-report.ts: remove ~600 lines of client-side layout/Sigma code,
  add Three.js 3D renderer with sun glow, instanced nodes, edge lines
- vendor/: delete forceatlas2.bundle.js + noverlap.bundle.js,
  add three.bundle.js (Three.js + OrbitControls bundled for browser)
- 96 tests pass (2 new z-depth encoding tests)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants