Support Vector Shapes with WebGLRenderer #4746

Closed
zz85 opened this Issue May 1, 2014 · 9 comments

Projects

None yet

3 participants

@zz85
Contributor
zz85 commented May 1, 2014

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:

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

@zz85
Contributor
zz85 commented May 1, 2014

screenshot 2014-05-01 21 34 34

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

@zz85
Contributor
zz85 commented May 1, 2014

screenshot 2014-05-01 23 09 07

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

@mrdoob mrdoob added the Enhancement label May 1, 2014
@mrdoob
Owner
mrdoob commented May 1, 2014

Interesting! 👍

@zz85
Contributor
zz85 commented May 1, 2014

screenshot 2014-05-01 23 41 13

Some progress with holes :)

@zz85
Contributor
zz85 commented May 1, 2014

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

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

screenshot 2014-05-02 00 59 26

screenshot 2014-05-02 00 58 33

@erichlof
Contributor
erichlof commented May 2, 2014

@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
Contributor
zz85 commented May 3, 2014

@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
Contributor
erichlof commented May 3, 2014

@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 zz85 added a commit to zz85/three.js that referenced this issue May 3, 2014
@zz85 zz85 Add example Resolution-Independent Vector Fonts rendering with WebGL
See #4746
a1928a8
@zz85
Contributor
zz85 commented May 3, 2014

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

@zz85 zz85 closed this May 3, 2014
@lehni lehni referenced this issue in paperjs/paper.js Jan 22, 2016
Closed

pointText.clipMask looks not work #918

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment