Support Vector Shapes with WebGLRenderer

[zz85]

Experimenting with rendering vector shapes / graphics with WebGL.

Some advantages:

• provide resolution-independent scaling
• reduce the need for higher subdivisions
• potentially much better performances
• potentially the ability to support bezier lines with widths > 1 (see #4056 and here)

Posting progress if I've any on this.

Some references:

• http://http.developer.nvidia.com/GPUGems3/gpugems3_ch25.html
• http://www.mdk.org.pl/2007/10/27/curvy-blues

Related: #4429, https://github.com/openframeworks/openFrameworks/issues/1190 and probably some other places I remember discussing but don't remember where now..

[zz85]

Upper left: current ShapeGeometry implementation Bottom right: current triangulated shape without any bezier segments Top right: bezier segments :)

[zz85]

Got solid shapes to work :) Now to get holes working...

[mrdoob]

Interesting! :+1:

[zz85]

Some progress with holes :)

[zz85]

Still not perfect yet, but here's a live demo rendering 90% of the alphabets :)

http://jabtunes.com/labs/3d/vector/ http://blurspline.com/labs/3d/vector/

[erichlof]

@zz85 , This is really cool! Forgive my ignorance, but can this technique be used to render 3D geometry as well (like cubes, spheres, etc), or is this mainly used for curved 2d shapes like fonts, cartoons, 2d-sprites, etc.. ?
The reason I ask is that when one searches YouTube for 'vector graphics', some of the old games like Star Wars, Mega Drive, and I - Robot appear, which I thought were strictly rasterized. Would your vector graphics implementation be slower/faster at drawing 3D geometry as opposed to the current Three.js techniques? I like the idea of infinite resolution 3D geometry, but I don't know if that is the right way of thinking about this problem.

Anyway thanks for the demo - I really like how the letters don't get deformed when they are far away. Keep up the great work!

[zz85]

@erichlof this technique is meant primary for infinite scaling for vector graphics. so unless you are working with vector graphics, i do not think you would use this.

as for performance, I would think its slightly more performant than the using the existing tessellation scheme with ShapeGeometry as less faces are being generated. (I've managed to render about 3K letters with this at 60fps.) Of course, it does require more preprocessing work.

there's also good description on this here also: http://commaexcess.com/articles/6/vector-graphics-on-the-gpu

[erichlof]

@zz85 , Ahh, ok - thanks for clearing that up for me. And thanks for all the links! I am enjoying browsing them. Best of luck to you on this project! :)

[zz85]

Opened pull request #4756 for vector shader example and closing this.

There's an entire new world with rendering vectors on the hardware. Anyone who choses to pursue this can check out

• http://research.microsoft.com/en-us/um/people/hoppe/ravg_tr.pdf
• http://on-demand.gputechconf.com/gtc/2012/presentations/S0024-GPU-Accelerated-Path-Rendering.pdf
• http://stackoverflow.com/questions/401422/best-openvg-implementation