9 ms·
3D Wireframes Using SVG
- bhouston 7y agoThis 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 7y agoLol :) Phil, perhaps you can consider renamimg to prideout.computergraphics.net!
- pepy07 7y agoVery neat utility!
- piadodjanho 7y agoNice. But 17 digits of of precision is on the rendered drawing bit much.
- eldavojohn 7y agoYeah 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.
- deleted 7y ago[deleted]
- prideout 7y agoThanks for pointing this out, I just now added a precision field to the Engine class to help with this.
- spankalee 7y agoI 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/
- gaze 7y agoThis is cool! I’m very interested in vector rendering techniques. What’s the current best heuristic for crease detection when doing NPR rendering?
- Lowkeyloki 7y agoThis is really cool. I wonder what the performance would be like for real-time transformations and animations.
- namirez 7y agoThis 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 7y agoYeah, 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 7y agoYou'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 7y agoperhaps 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.
- JoshTriplett 7y agoIf you have only one camera angle, you can certainly do polygon intersection to avoid dealing with overlapping polygons. It's not necessarily going to be as efficient (or rather, as hardware-acceleratable) as computing Z at each point and maintaining a Z-buffer, but that would assume a fixed resolution.
- gingabriska 7y agoAnd I need more Innovation in 3d printing space, most slicer seem to suck.
- th0ma5 7y agoAnyone know of something that vectorizes STLs or OBJs into a 2D perhaps ortho perspective?
- tapia 7y agoMaybe you can do this with gl2ps [1]. You can read the STL file with python-occ [2] and then export it to vector format (it uses gl2ps for this). [1] http://geuz.org/gl2ps/ http://geuz.org/gl2ps/ [2] http://www.pythonocc.org/ http://www.pythonocc.org/
- mkl 7y agoIt looks like this library could do it. OBJ is a very simple format to parse, but I'm sure there are libraries to do that too.
- ktpsns 7y agoWhen 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-mesh-to-2d-svg-export https://blender.stackexchange.com/questions/23661/render-3d-...) but I was never so happy about the results. This small Python code is really so much better!
- avhon1 7y agoYou 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/index.html https://docs.blender.org/manual/en/latest/render/freestyle/i...
- daeken 7y agoThe `Lightness' subproject under LumberSharp does (among many other things) this: https://github.com/daeken/LumberSharp https://github.com/daeken/LumberSharp I built this out to translate 3d models or signed distance fields to SVGs for pen plotting purposes. You can see an example here, generated from a few lines of distance field code: https://scontent-atl3-1.cdninstagram.com/vp/9212f4c15cf305833e57afe2e5d25077/5DBDD3D4/t51.2885-15/e35/47584375_314412145847978_430522436344251005_n.jpg?_nc_ht=scontent-atl3-1.cdninstagram.com https://scontent-atl3-1.cdninstagram.com/vp/9212f4c15cf30583... And another generated from an STL I generated with OpenSCAD (part of an Egg sculpture series I did for 3d printing): https://scontent-atl3-1.cdninstagram.com/vp/d3fdf208c687551a8bf869b6cf96c906/5DB07D3F/t51.2885-15/e35/47689741_914010932139703_2726030096804164662_n.jpg?_nc_ht=scontent-atl3-1.cdninstagram.com https://scontent-atl3-1.cdninstagram.com/vp/d3fdf208c687551a...
- wwarner 7y agoUnfortunately I can only +1 this a single time.
- abathur 7y agoWell, you can star it on github, too. :]
- anigbrowl 7y agoOutstanding 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.
- mncharity 7y agoI wonder if one might use an svg tween to get a continuous wiggle 3D?
- sbr464 7y agoAwesome 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/ffa6eed9348fcd42454fc3916f7662bc0f9808a6/68747470733a2f2f70726964656f75742e6e65742f626c6f672f7376675f776972656672616d65732f66696c6d73747269702e737667 https://camo.githubusercontent.com/ffa6eed9348fcd42454fc3916... 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 7y agoAh 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 7y agoYou can also take a look at this: https://svgr.now.sh/ https://svgr.now.sh/ It converts SVG to both react and react-native.
- quickthrower2 7y agoThis is a very nice library. It deserves to be ported to JS so it can be enjoyed in the front end too.
- quickthrower2 7y agoI guess not!
- Const-me 7y agoYou have access to GPU hardware in web frontends, through WebGL. It’s faster, also more power efficient.
- quickthrower2 7y agoI 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 7y agoI 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.
- 7y ago
- mohn 7y agoVery 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 7y agoAlso Sketch (for ps/pdf rather than svg): http://sketch4latex.sourceforge.net/ http://sketch4latex.sourceforge.net/
- motadata 7y agoI read good article here https://techtiptrick.com/wireframe-tools/ https://techtiptrick.com/wireframe-tools/
- Const-me 7y agoI 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.