It's a very cool project. But, you'd hugely improve WebGL's line rendering quality by setting antialias: true in your Renderer's initialisation (https://threejs.org/docs/#api/en/renderers/WebGLRenderer.ant...)

Direct rendering to SVG is very impressive.

Wow the SVG rendering of AlexNet is excellent, far superior to the WebGL option. 3d in SVG -- must be some maths going on underneath.

SVG renderer is very laggy for me (maybe 5 FPS, so about 10x slower than WebGL).

Edit: Also the grey filling has holes in it from some angles.

yeah WebGL definitely snappier.

I wonder though why these 3d stacks are so awful at rendering lines/meshes. Aren't they supposed to be super-optimised for this kind of anti-aliasing work? I mean even blender can be a bit dodgy sometimes on viewport mesh rendering compared with what I'm used to with SVG, even when jacking up the viewport oversampling. Is it that SVG code just spends a huge amount more time/resource on getting line-drawing perfect, whereas the 3d stacks care a lot less?

Yes, they're essentially optimizing for separate things: https://mattdesl.svbtle.com/drawing-lines-is-hard

SVG naturally spends a lot of time and resources tessellating paths into triangle strips, which requires mitering and sorting and other not easily parallelizable (read: slow for GPU) algorithms.

This is great! I'm currently learning 2D graphics from scratch (making vector art software), can anyone recommend any related resources?

I found this interview (one relevant bit at 29:55) very interesting. Shawn McGrath did the graphics code for the game N++ which is very vectory, so he found efficient ways to render it on a GPU. https://youtu.be/cfyWvJdsDRI?t=1795

Related:

NN-SVG: Generate publication-ready NN-architecture schematics - https://news.ycombinator.com/item?id=25272360 - Dec 2020 (8 comments)

This is surprisingly accommodating for mobile. That does make one non-accommodation a little more annoying though: since the render area fills the screen, and since it handles touch events to update the rendering, it prevents swipe-to-navigate-back. Might be a nice, er, touch to ignore touch events originating on the viewport edges

Why does changing the opacity settings make parts of the output jump around? looks like it's non deterministically rendered based on the settings.

It shows not all connections, but chooses a bunch, which is different on every rendering.

what is NN? The website doesn't offer much context

Neural network

Yeah, the github repo is a much better link for this, as it explains what it is. https://github.com/alexlenail/NN-SVG

Agreed. The page could already benefit from one catchy subtitle sentence with a description

This is awesome, thank you! Wish I had it last week working on some slides for a school project :)

This is a lot more useful than plate notation.

Is LLM Vis built on top of this?