mcanthony/3ource

browser based git source visualization with three.js

3ource

This (horrible) project name "3ource" comes from words "Tree source" (also a pun of "three.js sauce").

It was intended to be a Time-based visualization of git repositories renderered in the browser.

It was also inspired by Gource.

Warning: Work-in-progress

Sneak peak:

• Gitlog viewer
• Git History Player (WebGL Rendering with Three.js)
• Git History Player (Canvas)

Slides

Slides for presentation at SingaporeJS meetup.

Usage

Converting Git Data to 3ource JS format.

node utils/process.js

or

npm run transform

for generating data files of git directory. If the git repository is huge, transforming may take some time.

go poke into /src

Components

• git history parser

• git log viewer and intepretor Loads the git data structure produced by the parser and display both the logs and a pretty git graph. Viewer uses virtual rendering to support huge number of logs

• force directed graph simulation A simple homebrew force directed simulator.

• force directed graph rendering Renders with webgl/three.js or canvas.

History

Xuanji and Chernjie joined me to work on this idea SuperHappyDevHouse Singapore at the start.

We experimented with the Github REST API, and node.js git bindings. I opt instead then to use node.js to exec() git commands that outputs a json format that can be read by browsers more effeciently.

If I were to implement this today, I might also consider

• nodegit https://github.com/nodegit/nodegit
• jsgit https://github.com/creationix/jsgit
• grapheen https://github.com/nashira/grapheen
• commits-graph https://github.com/tclh123/commits-graph

Although are also many force-directed js libraries (springy, d3, vivagraph, n-graph arbor, etc), I wrote mine because I wanted to try writing one by my own.