d3.js + WebGL

[vrnova]

Not sure if this question has been asked before but I am curious in the possibility of integrating d3.js with WebGL for better rendering performance. Recently I am using d3 to draw over 500 audio signals with about 4k pixels each signal. I have been using svg::line to draw these lines and the speed is somewhat slow (~15 seconds). Any comments?

Thanks ahead,

Yanling

[Chris Rich]

Hey Yanling,

  I've been curious about this too.  It would be super fun to be able to do 3D stuff with D3 + WebGL.

  There are a couple of examples of using D3 + Canvas to speed things up when you would have a HUGE number of line segments.  Some of Kai's parallel coordinate examples come to mind.

http://bl.ocks.org/4181267

  This thread also has some info on performance for a large number of segments.

https://groups.google.com/d/topic/d3-js/ZJ6pznVU5LQ/discussion

  Is anyone out there familiar with WebGL that would feel like throwing together an example of D3 + WebGL?  I would definitely be interested.

Chris

[Chris Viau]

The closest I know is this example using d3 with three.js: http://css.dzone.com/articles/render-geographic-information, but pure webgl with d3 would be a useful experiment. Some other examples uses X3DOM: http://bl.ocks.org/1291667. Another idea to speed-up animations would be to use more css transforms ( i.e., http://famo.us/ ). They often are hardware accelerated.

[marc fawzi]

"Another idea to speed-up animations would be to use more css
transforms ( i.e., http://famo.us/ ). They often are hardware
accelerated."

*often* is the keyword for now, including under the same browser (on
Windows vs Mac)

[kirisu]

I noticed in Kai's example it says,

"Uses requestAnimationFrame to prevent path rendering from locking up the UI"

Does anyone have more details on how this works? (I've looked at Paul Irish's article and the Mozilla docs, but couldn't get much insight)

I experience a ~15 seconds lag trying to render ~4,000 svg circles in a circle packing layout and was hoping to be able to speed it up or at least show a loading spinner until it completes.

As it stands, even when I wrapped my rendering method in a requestAnimationFrame call, the UI gets blocked and the spinner doesn't spin...

Thanks,

Chris

[Ian Johnson]

Kai uses requestAnimationFrame to render lines progressively rather than all at once. You could do the same thing and render x circles/second. requestAnimationFrame is simply the preferred way to do a non-blocking run loop, it does not save you from overwhelming the DOM rendering with too many elements at once.

On Tue, Dec 4, 2012 at 11:00 AM, kirisu <kir...@gmail.com> wrote:

I experience a ~15 seconds lag trying to render ~4,000 svg circles in a circle packing layout and was hoping to be able to speed it up or at least show a loading spinner until it completes.

As it stands, even when I wrapped my rendering method in a requestAnimationFrame call, the UI gets blocked and the spinner doesn't spin...

--
Ian Johnson

http://enja.org

[Kai Chang]

I've also split out the rendering component from parallel coordinates here:

http://bl.ocks.org/d/3341641/

A note on that: performance could probably be improved by not using
splice() each iteration:

http://jsperf.com/search?q=splice

The trick with render queue is the rendering is spaced out. Each
iteration, 10-200 marks are rendered. It might take 8 seconds to
render everything, but that's probably better than freezing the
browser and rendering in 4 seconds. It doesn't render *faster*, it
just starts rendering sooner and let's the user interrupt the
rendering.

I plan on looking into WebGL soon as a renderer for parallel
coordinates though. For speed, the trick is to use as much GPU as
possible, whether that be CSS3 3d transforms, WebGL, or whatever.
Sometimes SVG can be the fastest! It's not easy to reason about, and
it's different for all device/browser combinations.