DailyJS

WebGL D3 with PathGL

Alex R. Young

Subscribe

@dailyjs

Facebook

Google+

animation graphics webgl d3

WebGL D3 with PathGL

Posted by Alex R. Young on .
Featured

animation graphics webgl d3

WebGL D3 with PathGL

Posted by Alex R. Young on .
A PathGL particle simulation.

"PatrickJS" sent in PathGL (GitHub: adnan-wahab / pathgl, License: GPL, npm: pathgl) by Adnan Wahab. It's a library for data visualisation with D3.js that allows you to do cool things with WebGL and particles.

The particle physics example looks like this:

var particles = pathgl.sim.particles(1e5);

d3.select('canvas').selectAll('circle')  
  .data(particles.unwrap())
  .enter().append('circle')
    .attr('r', function (d,i) { return d.z })
    .attr('cx', function (d,i) { return d.x })
    .attr('cy', function (d,i) { return d.y })
    .shader({ stroke: 'texel(pos.xy).xzwy' });

d3.select('canvas')  
  .on('click', particles.reverse);

As you can see, PathGL uses the familiar D3 chained API with an additional shader method that adds texels.

There are other GL-specific methods as well, like uniform, texture, and pipe. These are documented in the API reference.

If you're already used to D3 but don't know much about WebGL, then you should take a look at the PathGL documentation for SVG vs. WebGL. It explains how the scenegraph relates to SVG. There's also a page on GPGPU, a technique for offloading heavy computation to the graphics card.