Support SVG as WebGL texture

[samreid]

Perhaps we can have high resolution scalable vector graphics that render quickly if we can make WebGL textures out of SVG images. We could render them at the desired resolution, or mipmap them.

One idea @jonathanolson suggested: It may be possible to do this by putting the svg content as a base 64 in a div so it can be used as a texture, but we would have to check whether that is supported by IE. I think there is some discussion of that issue in webkit here, but I am not entirely sure about the context: https://gitorious.org/qtwebkit/qt5x2/commit/e87bae47b4beebc07afb21de8e6d8bee5c1e4ba6

Another possibility: using a 3rd party canvas renderer like canvg to render the svg document to a raster, as discussed here:
mrdoob/three.js#1317

One possible situation to look at with this feature: color vision has nice vector graphics for the character's head, but rendering it as svg decreases performance, so it is currently rasterized and a little blurry. (Actually we could look into manually rendering the svg with canvg without webgl too).

[samreid]

Using HTMLImageElement (like new Image()) with svg + mip mapping is looking great on OSX/Chrome, Win/Chrome and iPad Retina. Haven't got it working on IE yet.

[samreid]

Not clear how we should implement spritesheeting with SVG unless using something like https://github.com/gabelerner/canvg

Hmmm.. On the other hand, why not use SVG as the spritesheet? Perhaps SVGs can be added as children, and rasters could be added as SVG images?

[jonathanolson]

Use of canvg (which didn't seem to properly support patterns previously) might be a good option.

Another option would be to convert the SVG into a Scenery form (code to construct a sub-tree) automatically, so that we can rasterize it at arbitrary resolutions. It also works around pattern failures in IE since we would be using Canvas.

[samreid]

convert the SVG into a Scenery form (code to construct a sub-tree) automatically

Can you elaborate on this? Not sure specifically what you mean.

[jonathanolson]

Converts SVG like

<rect x="40" y="50" ...

into Scenery code like

var rect4 = new scenery.Rectangle( 40, 50, ...

[samreid]

Thanks for explaining--seems like a huge project to handle arbitrary SVG code, though! The SVG spec is quite large AFAIK. Would we benefit from implementing a popular subset?

[jonathanolson]

Thanks for explaining--seems like a huge project to handle arbitrary SVG code, though! The SVG spec is quite large AFAIK. Would we benefit from implementing a popular subset?

We would presumably implement the popular subset we need. Scenery can't support many of the features yet anyways (filters, etc.).

[samreid]

@jonathanolson ran into security problems that prevent us from using SVG for our simulations and instead worked on a mipmap plugin. Therefore, we do not need to support WebGL/SVG at the moment. Closing.