1

Is there a JavaScript implementation of the OpenVG standard based on WebGL?

I'm pretty aware that we can render vector graphics in the browser, I'm just curious as to whether or not anyone has actually managed to render SVG with WebGL, with or without basing this on the OpenVG standard. If it doesn't exist, would it be useful to start a project?

genpfault
  • 51,148
  • 11
  • 85
  • 139
Matt Esch
  • 22,661
  • 8
  • 53
  • 51
  • "If it doesn't exist, would it be useful to start a project?" How could it be? As you yourself point out, you can do vector graphics just fine. And you're not exactly going to be directly porting JavaScript applications from Canvas drawing to out-of-browser standalone applications (where you would want to use OpenVG). So what's the point? – Nicol Bolas Mar 18 '12 at 04:58
  • Well the point is, I wouldn't know the first thing about mixing vector graphics with 3D rendered graphics. If you assert that no one is going to want to do that then you are saying basically no, it's not useful. But there are quite a number of possibilities for vector graphics within a WebGL context, not least because it can be more suitable for games in terms of performance, but because you can mix the content types and apply shaders. – Matt Esch Mar 18 '12 at 05:01

3 Answers3

1

Well none of these answers answer the question explicitly. @tom shows that yes, we can render vector graphics on the webgl canvas using a neat stencil trick. This isn't however a full implementation of the OpenVG specification and I am curious as to how much of the OpenVG spec could be implemented this way. So to conclude:

There are no implementations currently, but there doesn't appear to be a particular demand for it.

Matt Esch
  • 22,661
  • 8
  • 53
  • 51
1

Here's some C code for parsing and rendering SVG in OpenGL 1.x: https://github.com/tnovelli/vsprite. It might not be quite what you're looking for. We used a Stencil Buffer trick to draw 2D polygons. For 3D, I guess you'd have to render into an off-screen buffer and texture-map it onto a 3D object. (Why not pre-render SVG into raster images? Because our objects are breakable and deformable.)

I'm thinking about porting this to Javascript+WebGL. The browser's XML/SVG/CSS parsing features should eliminate a lot of the work, but the stencil trick could pose a challenge. This is a back burner project for me, so if anyone else wants to try something, don't hold your breath, just do it! :)

0

As WebGL mixes just fine with any other HTML(5) technique, you can mix it up already. The only thing is that you won't be able to mix SVG with WebGL using its depth buffer - for example a logotype (SVG) placed in a 3D-world (WebGL). But maybe that's just what you like to do?

MikaelEmtinger
  • 559
  • 3
  • 6