Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support Vector Shapes with WebGLRenderer #4746

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

Support Vector Shapes with WebGLRenderer #4746

zz85 opened this issue May 1, 2014 · 9 comments

Comments

@zz85
Copy link
Contributor

zz85 commented May 1, 2014

Experimenting with rendering vector shapes / graphics with WebGL.

Some advantages:

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
Copy link
Contributor Author

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
Copy link
Contributor Author

zz85 commented May 1, 2014

screenshot 2014-05-01 23 09 07

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

@mrdoob
Copy link
Owner

mrdoob commented May 1, 2014

Interesting! 👍

@zz85
Copy link
Contributor Author

zz85 commented May 1, 2014

screenshot 2014-05-01 23 41 13

Some progress with holes :)

@zz85
Copy link
Contributor Author

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/ http://blurspline.com/labs/3d/vector/

screenshot 2014-05-02 00 59 26

screenshot 2014-05-02 00 58 33

@erichlof
Copy link
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
Copy link
Contributor Author

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
Copy link
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
Copy link
Contributor Author

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

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

No branches or pull requests

3 participants