01 / 03

The graph

Every source a model cites, linked by topic.

Scroll to play

Motion / 3D Lablab.iamnaw.dev/graph04 · Answer graph

-- fps·-- ms

TECH SHEET · 04 / 06

Answer graph

A knowledge graph in the spirit of Reality Graph: nodes, links and small signals travelling between them. Scroll dives into a hub.

Three.js
InstancedMesh
GSAP

TECHNIQUE

140 nodes in one instanced mesh, hubs scaled and tinted per instance
Edges as a single line-segments buffer
40 signals moved along edges every frame

PERFORMANCE · MEASURED LIVE

Draw calls: —
Triangles: —
Frame rate: —
Pixel ratio cap: 1.5
JS per frame: —

FALLBACK

Reduced motion: graph shown still, signals frozen. Without WebGL: a still image of the same layout.

FROM THE SOURCE

const nodes = new InstancedMesh(
  new IcosahedronGeometry(0.05, 1), material, 140);
P.forEach((p, i) => {
  m.makeScale(s, s, s).setPosition(p);
  nodes.setMatrixAt(i, m);
});