[HN Gopher] Stanford CS248: Implement an SVG Rasterizer
___________________________________________________________________
Stanford CS248: Implement an SVG Rasterizer
Author : adamnemecek
Score : 86 points
Date : 2020-03-20 18:25 UTC (4 hours ago)
(HTM) web link (github.com)
(TXT) w3m dump (github.com)
| adamnemecek wrote:
| 2d graphics are kinda hard. The problem is that gpus don't
| support them out of the box so you have to do a Lot yourself.
| manfredo wrote:
| What do you mean GPUs don't support them? Most opengl tutorials
| I've read have people building triangles in 2d to learn
| fragment shaders and vertices before going 3d. Most of them
| also support parametric curves, so even hardware accelerated
| bezier curves should be possible.
| Jasper_ wrote:
| Wait, why do you say GPUs support parametric curves? GPUs are
| based on triangles mostly.
| jfkebwjsbx wrote:
| Of course GPUs support 2D. It is just 3D with one less
| dimension.
| joshmarinacci wrote:
| I assume the point is that you have to implement a pure
| software rasterizer. It's not actually that difficult, but it
| feels like a lot for an undergrad who's not familiar with the
| space. I assume this is done as part of a class that gives you
| context.
|
| For an example of a rasterizer, you can take a look at my pure
| JS implementation of canvas (which is roughly the same imaging
| model as SVG). All lines and shapes are flattened into a pure
| line polygon, then drawn with a scanline rasterizer. Getting
| the basics working is fairly easy. Handling the endless edge
| cases, however.... :)
|
| https://github.com/joshmarinacci/node-pureimage
| Jasper_ wrote:
| Yeah, writing a scanline rasterizer from scratch is fun. For
| beginners, I advocate the sample-based approach I've written
| about, as functional "is inside shape" can be easier to
| reason about for simple cases. It's harder for non-convex
| polygons though :)
|
| https://magcius.github.io/xplain/article/rast1.html
|
| The edge cases are similar -- precision in computing the path
| intersections and winding curves.
| adamnemecek wrote:
| It's get somewhat tricky when you want things like gpu
| support, text rendering etc.
|
| You have to do things like stencil texture to speed things up
| etc etc.
| Jasper_ wrote:
| GPUs aren't really designed for 2D graphics out of the box.
| I've written about this before [0].
|
| Text rendering can be tricky, but not that much trickier --
| it's just the same curves at smaller scales.
|
| Not sure what you mean by stencil textures. Are you talking
| about the NV_path_rendering approach where you stencil out
| the path? Yeah, that's not really a thing that people do
| these days.
|
| [0] https://blog.mecheye.net/2019/05/why-is-2d-graphics-is-
| harde...
| adamnemecek wrote:
| Yeah I'm talking about that. What do people use then?
| pjc50 wrote:
| This is a beginner CS course, it's a lot simpler than that.
| [deleted]
| mfabbri77 wrote:
| I've already implemented an SVG renderer at
| https://www.amanithsvg.com based on our openvg engine with
| software rasterization https://www.amanithvg.com
|
| Both are closed source, but there are evaluation version
| available, if someone is interested in compare rendering quality
| and speed.
| adamnemecek wrote:
| Can you recommend some resources for someone trying to do the
| same?
| mfabbri77 wrote:
| You can look at software rasterization from good opensource
| libs: Freetype, Agg, Cairo.
| danielovichdk wrote:
| The code doesn't strike me as very well structured nor
| documenten. Too bad, because it's an interesting challenge
| bluedino wrote:
| This is a good example of a CS project you would do at Stanford
| and wouldn't get assigned at your local university.
| chrisseaton wrote:
| I talk to people who think a CS degree has the same content and
| the same level of rigour and challenge everywhere. Absolutely
| baffles me.
| bhl wrote:
| Same author (kayvonf) was behind this post, "Do Grades Matter? A
| Discussion About Thinking Bigger While at CMU" [1], a while back
| :).
|
| [1] https://news.ycombinator.com/item?id=14694179
| rayshan wrote:
| What's a good JavaScript-based solution to render SVG into an
| image? html2canvas doesn't work well with SVG, especially those
| heavily styled with CSS.
| dublin wrote:
| Kinda defeats the whole purpose of SVG. Only photos should be
| bitmaps. Graphics should be vectors. This is the 21st century,
| folks...
| avmich wrote:
| True, but if you have digital display - that is, which have
| separate, immovable pixels, working with pixels and not with
| vector-based analog primitives - you'll eventually have to
| convert "vector" picture into "pixel" picture.
| rayshan wrote:
| I wish for that world to exist, but rasterized images are
| much easier to share and render nicely in iMessages etc.
| Sephr wrote:
| One reason is to generate screenshots of HTML by combining
| this technique with SVG <foreignObject>.
| Groxx wrote:
| Does Path2D cover it? If it does, seems like you could just
| draw to a canvas and save the result.
| https://developer.mozilla.org/en-US/docs/Web/API/Path2D/Path...
| coreyoconnor wrote:
| Did not know this. Is that due to browser issues or a
| specification issue?
| lucideer wrote:
| https://github.com/fabricjs/fabric.js
| rayshan wrote:
| This looks great, will test it out, thx!
| kylebarron wrote:
| https://github.com/shakiba/svgexport
|
| Is that what you're looking for?
| rayshan wrote:
| No. It does a perfect job because Puppeteer is just Chrome,
| not JavaScript :) Thanks though!
| hypothete wrote:
| If you're not in a Node.js context, the Canvas API does a
| decent job of rasterizing SVGs nowadays. Once rasterized, you
| can call canvas.toDataURL() to get a download link. Here's a
| demo:
|
| https://codepen.io/hypothete/pen/WNvKLEE
| beansie wrote:
| Does the css need to be inlined?
| rayshan wrote:
| Yup this is the problem. Workable but painful.
| yzmtf2008 wrote:
| seems so: https://codepen.io/andyfangdz/pen/abOjPxe
| restingrobot wrote:
| Shameless Plug for a library I helped write:
| https://github.com/SVG-Edit/svgedit
| rayshan wrote:
| This looks so cool! But your demo link is broken :(
___________________________________________________________________
(page generated 2020-03-20 23:00 UTC)