Experimenting with rendering vector shapes / graphics with WebGL.
Posting progress if I've any on this.
Related: #4429, openframeworks/openFrameworks#1190 and probably some other places I remember discussing but don't remember where now..
Upper left: current ShapeGeometry implementation
Bottom right: current triangulated shape without any bezier segments
Top right: bezier segments :)
Got solid shapes to work :) Now to get holes working...
Some progress with holes :)
Still not perfect yet, but here's a live demo rendering 90% of the alphabets :)
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!
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
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! :)
Add example Resolution-Independent Vector Fonts rendering with WebGL
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