
3D Wireframes Using SVG - prideout
https://prideout.net/blog/svg_wireframes/
======
namirez
This is great! There is, however, one potential issue with this implementation
stated here:

" _Faces are sorted back-to-front in a very approximate way according to the Z
centroid_ ".

In certain cases, this can lead to showing the back face and hiding the front
face because the centroid position is not sufficient for figuring out the Z
order of triangles.

Other than this minor issue, it's a great implementation.

~~~
prideout
Yeah, the painter's algorithm fails with certain geometries, like when
polygons intersect each other, or when they overlap in a certain way.

Maybe I should compare min positions rather than centroids, but I don't think
that would fix those cases.

I think the only real fix involves splitting up the polygons for the failure
cases, which seems complex.

~~~
namirez
You're right! The min positions won't resolve the issue either and,
unfortunately, there is no trivial fix for it.

Handling intersecting polygons, as you said, is a bit more complex, but for
overlapping polygons it's possible to find the Z-order robustly by computing
the intersections with the line of sight.

~~~
ZenPsycho
perhaps you could preprocess the shape using the Binary Space Partitioning
(BSP) algorithm. there’s a step in the algorithm that finds polygons that
would cause z-sorting conflict and splits them along the exact line you need
to resolve the conflict. you end up with a data structure that gives you the z
sorting order for any camera angle.

------
sbr464
Awesome work!

I ran the 4 shape example through SVGOMG and lowered the precision slider down
until it didn't affect the perceived output.

The result was about 40% of the original size.

[https://jakearchibald.github.io/svgomg/](https://jakearchibald.github.io/svgomg/)

SVG tested:

[https://camo.githubusercontent.com/ffa6eed9348fcd42454fc3916...](https://camo.githubusercontent.com/ffa6eed9348fcd42454fc3916f7662bc0f9808a6/68747470733a2f2f70726964656f75742e6e65742f626c6f672f7376675f776972656672616d65732f66696c6d73747269702e737667)

Side note -- if using React, svg2jsx is great for converting the SVG
properties to React JSX names.

[https://svg2jsx.herokuapp.com/](https://svg2jsx.herokuapp.com/)

~~~
news_hacker
Ah I've been looking for something like svg2jsx for a while... thanks for
sharing!

It was one of those moments where I knew someone out there MUST'VE made a tool
for it, but it was a discoverability problem.

~~~
itsyogesh
You can also take a look at this: [https://svgr.now.sh/](https://svgr.now.sh/)
It converts SVG to both react and react-native.

------
mohn
Very nice! This reminds me a bit of Michael Fogleman's 3D Line Art Engine [0].
His project was motivated by a desire to make vector art for a pen plotter, so
not quite the same goals. I appreciate how you've woven together images, code,
and explanatory text in this post.

[0] [https://github.com/fogleman/ln](https://github.com/fogleman/ln)

~~~
david_ar
Also Sketch (for ps/pdf rather than svg):
[http://sketch4latex.sourceforge.net/](http://sketch4latex.sourceforge.net/)

------
spankalee
I wish I could find it, but a while back there was a post about a web-based
vector renderer for 3D objects, possibly a three.js plugin. It has some really
nice looking demos.

I don't think it was seen.io, but seen.io appears to do something similar to
this post, in JS: [http://seenjs.io/](http://seenjs.io/)

~~~
doersino
You're thinking of Zdog: [https://zzz.dog](https://zzz.dog)

~~~
spankalee
Absolutely! Thanks!

------
anigbrowl
Outstanding documentation quality - simple descriptions of the context,
problem and solution, at increasing levels of specificity. Other people should
learn from this when writing their own Readmes.

------
piadodjanho
Nice. But 17 digits of of precision is on the rendered drawing bit much.

~~~
eldavojohn
Yeah this is crazy neat but the unnecessary precision is a real bummer that
could be solved by just restricting things to three decimal places. For
example when I use a utility like
[https://jakearchibald.github.io/svgomg/](https://jakearchibald.github.io/svgomg/)
to optimize, I see a 3.53k -> 2.21k reduction for the sphere with lighting.
This is not just from precision reduction but also using simple paths over
polygons ... there could likely be increased size savings by "rolling up" the
fills in the final output.

Still a crazy neat tool but targeting edges as paths instead of polygons would
save quite a few bites when hosting this stuff.

~~~
prideout
Thanks for pointing this out, I just now added a precision field to the Engine
class to help with this.

------
Const-me
I have thought about doing something similar for PDF reports in a CAE app.
Concluded it won’t scale. I need to handle high-poly meshes, 1M vertices and
more. That’s why instead I’m using 600DPI jpeg images, rendered on GPU.

But when you know the mesh is low-poly, the technique is really cool. It
should be trivial to port from Python to any other language, also from SVG to
e.g. PDF.

------
th0ma5
Anyone know of something that vectorizes STLs or OBJs into a 2D perhaps ortho
perspective?

~~~
ktpsns
When I did 3D printing, I racked my brain how to render STL files to SVG.
Blender (can import STL and) seems to be able to render to SVG with a plugin
([https://blender.stackexchange.com/questions/23661/render-3d-...](https://blender.stackexchange.com/questions/23661/render-3d-mesh-
to-2d-svg-export)) but I was never so happy about the results. This small
Python code is really so much better!

~~~
avhon1
You don't actually need a plugin -- Blender comes with this feature built-in.
It's called "Freestyle" rendering.

[https://docs.blender.org/manual/en/latest/render/freestyle/i...](https://docs.blender.org/manual/en/latest/render/freestyle/index.html)

------
bhouston
This seems useful for SIGGRAPH paper graphics.

BTW I always think this website is something to do with being Out and Pride.
That is my default parsing no matter how many times I've seen cool stuff on
this website and the great stuff that Philip does.

~~~
pepy07
Lol :) Phil, perhaps you can consider renamimg to
prideout.computergraphics.net!

------
gaze
This is cool! I’m very interested in vector rendering techniques. What’s the
current best heuristic for crease detection when doing NPR rendering?

------
wwarner
Unfortunately I can only +1 this a single time.

~~~
abathur
Well, you can star it on github, too. :]

------
Lowkeyloki
This is really cool. I wonder what the performance would be like for real-time
transformations and animations.

------
mncharity
I wonder if one might use an svg tween to get a continuous wiggle 3D?

------
quickthrower2
This is a very nice library. It deserves to be ported to JS so it can be
enjoyed in the front end too.

~~~
Const-me
You have access to GPU hardware in web frontends, through WebGL. It’s faster,
also more power efficient.

~~~
quickthrower2
I was thinking that svg would get you better browser support, but it turns out
it just gets you IE9/10 and Opera Mini. Which might be important for business
apps, but I guess not for everyone:

[https://caniuse.com/#feat=webgl](https://caniuse.com/#feat=webgl)

[https://caniuse.com/#feat=svg](https://caniuse.com/#feat=svg)

I am interested at where it would be an advantage (if at all) to use SVG over
OpenGL on the front end or server?

~~~
Const-me
I know little about modern web development, but I think WebGL is way more
efficient on clients.

Even on mobiles, GPUs have much more computing power. They have architecture
designed for transforming vertices and computing lightning, very fast and
highly parallel.

In best case, SVG will take input triangles and submit them to GPU. Very small
overhead (slightly more GPU bandwidth because lightning, when it’s that
simple, bandwidth is often more expensive than compute). But in worst case,
SVGs will rasterize on CPU, very slow in comparison.

If you rasterize on the server e.g. send jpeg images to browser, it becomes
complicated, and depends on many factors like scene complexity and server
hardware. Rasterizing triangles is much cheaper on GPU, but JPEG compressor
needs data in system RAM not in VRAM, need to download back, relatively slow.
Also on many public clouds virtual GPUs are expensive.

------
gingabriska
And I need more Innovation in 3d printing space, most slicer seem to suck.

------
pepy07
Very neat utility!

