11 ms·
Stanford CS248: Implement an SVG Rasterizer
- adamnemecek 7y ago2d 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.
- joshmarinacci 7y agoI 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 https://github.com/joshmarinacci/node-pureimage
- adamnemecek 7y agoIt'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_ 7y agoGPUs 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-harder-than-3d-graphics/ https://blog.mecheye.net/2019/05/why-is-2d-graphics-is-harde...
- adamnemecek 7y agoYeah I'm talking about that. What do people use then?
- Jasper_ 7y agoFast, efficient 2D graphics using the PostScript (i.e. SVG) rendering model is still an open research problem. Most shipping implementations these days do full tessellation to triangles on CPU.
- bitL 7y ago> it's just the same curves at smaller scales. It's not that simple unfortunately. Hinting for TrueType fonts is a thing and without properly aligning resulting pixels at their own scale fonts tend to look very ugly when following pure curve definitions. Oversampling at e.g. 8x size is one possible option but then there are other problems that pop up once downscaling to display size.
- pjc50 7y agoThis is a beginner CS course, it's a lot simpler than that.
- Jasper_ 7y agoYeah, 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 https://magcius.github.io/xplain/article/rast1.html The edge cases are similar -- precision in computing the path intersections and winding curves.
- bitL 7y agoMaking a 2D rasterizer is fairly trivial, making a rasterizer that looks good is insanely difficult. Handling things like aliasing without overblowing and making it work in all possible cases is tricky and one spends 99% of time addressing those tiny little details that "make one fall in love with software".
- deleted 7y ago[deleted]
- jfkebwjsbx 7y agoOf course GPUs support 2D. It is just 3D with one less dimension.
- manfredo 7y agoWhat 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_ 7y agoWait, why do you say GPUs support parametric curves? GPUs are based on triangles mostly.
- manfredo 7y agoGPUs can take in way more than just triangles as input. There are particle simulation and even Ray tracing implemented on GPUs nowadays. Support for parametric curves was one of the more recent additions.
- Jasper_ 7y agoThat's a very... naive view of how a GPU works. Particle simulation is done in compute, and ray tracing, as implemented in RTX/DXR, is done on a soup of triangles. The core of rasterization is still done on triangles, and can't easily be done in compute. Have any references to parametric curves on GPUs? All the approaches I know of, like the recent mesh shader work, still output triangle meshes.
- fulafel 7y ago"In compute" just means that there aren't inputs and outputs related to the current output frame in the calculation job - the computational possibilities are the same. Triangles aren't necessarily involved in in rendering either, see eg how the stuff on shadertoy.com works.
- manfredo 7y agoThis is from 2007: https://developer.nvidia.com/gpugems/gpugems3/part-iv-image-effects/chapter-25-rendering-vector-art-gpu https://developer.nvidia.com/gpugems/gpugems3/part-iv-image-... Again, the vast majority of use cases for GPUs is 3d vertex graphics. But they're capable of more than that. Modern GPUs are very different from early GPUs that only worked with triangles. Some of the early ones were actually ASICs, and couldn't even load different shader programs.
- mfabbri77 7y agoI've already implemented an SVG renderer at https://www.amanithsvg.com https://www.amanithsvg.com based on our openvg engine with software rasterization https://www.amanithvg.com 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 7y agoCan you recommend some resources for someone trying to do the same?
- mfabbri77 7y agoYou can look at software rasterization from good opensource libs: Freetype, Agg, Cairo.
- zerr 7y agoWhy did you name a closed source product openX? :)
- mfabbri77 7y agoThe name is AmanithVG and it is an implementation of OpenVG (a standard API for 2D vector graphics from Khronos group).
- danielovichdk 7y agoThe code doesn't strike me as very well structured nor documenten. Too bad, because it's an interesting challenge
- fraggle222 7y agoIt's pretty ridiculous and has a ton of just bizarre stuff you have to read through (and do!) to even get to something remotely interesting. One of the first projects I "assigned" to myself when learning to program was to create a 3d environment and be able to scale, rotate, translate objects in 3d. It was easy and fun because I got to choose the language, the rules, etc. This assignment makes me cringe a bit because there are a lot of hoops to jump through. But yeah, I guess, no pain no gain or something like that :)
- bhl 7y agoSame 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 https://news.ycombinator.com/item?id=14694179
- rayshan 7y agoWhat'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.
- Groxx 7y agoDoes 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/Path2D https://developer.mozilla.org/en-US/docs/Web/API/Path2D/Path...
- coreyoconnor 7y agoDid not know this. Is that due to browser issues or a specification issue?
- lucideer 7y agohttps://github.com/fabricjs/fabric.js https://github.com/fabricjs/fabric.js
- rayshan 7y agoThis looks great, will test it out, thx!
- kylebarron 7y agohttps://github.com/shakiba/svgexport https://github.com/shakiba/svgexport Is that what you’re looking for?
- rayshan 7y agoNo. It does a perfect job because Puppeteer is just Chrome, not JavaScript :) Thanks though!
- hypothete 7y agoIf 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 https://codepen.io/hypothete/pen/WNvKLEE
- bluedino 7y agoThis is a good example of a CS project you would do at Stanford and wouldn't get assigned at your local university.
- chrisseaton 7y agoI talk to people who think a CS degree has the same content and the same level of rigour and challenge everywhere. Absolutely baffles me.
- 3fe9a03ccd14ca5 7y agoIs that true for literally any degree from a top 5 university?
- TwoBit 7y agoWhat makes you so confident saying this?
- chrisseaton 7y agoBecause I’ve been to multiple universities myself and I know it to not be true from my own eyes. You can also just go to any university website yourself and compare their syllabi and see how different they are.
- adamnemecek 7y agoYou can easily do this on your own.
- shuckles 7y agoI think the spirit of the post is correct: the quality of instructors can dramatically increase the quality and relevance of course content in the curriculum. Stanford courses tend to produce new, interesting assignments that other schools crib. Same applies to all the top engineering departments. My friend tried to get a CS degree at Pepperdine and the curriculum was 15 years out of date. To students who are new to the field, it is hard to figure out where to start even if they could do it independently.
- iamkeyur 7y agoDoes anyone know similar courses where you get to do similar kind of practical assignments?
- boulos 7y agoCS148 [1] varies from year to year (most people complained that I made the final assignment on subdivision surfaces too hard, but I had at least a few "Thank you, this was awesome") and is the pre-cursor to 248. I'd recommend it if you're getting started. If you like ray tracing, Cem Yuksel currently teaches most of the related courses at Utah [2]. [1] http://web.stanford.edu/class/cs148/assignments.html http://web.stanford.edu/class/cs148/assignments.html [2] http://www.cemyuksel.com/courses/ http://www.cemyuksel.com/courses/
- bjt 7y agoSometimes I kick myself for not doing CS while I was at Utah. :(
- boulos 7y agoThere's tons of material online now. If you want a "traditional Utah graphics" curriculum, Cem is teaching most of the stuff (with updates!) from 15 years ago. You can also probably find the old course slides and assignments. I'd suggest cs6620, personally: https://graphics.cs.utah.edu/courses/cs6620/fall2019/ https://graphics.cs.utah.edu/courses/cs6620/fall2019/
- oefrha 7y agoCS 140 (hope I remembered the course number right) where you write an operating system mostly from scratch is notoriously time consuming and rewarding, at least back when I was there. Edit: http://www.scs.stanford.edu/20wi-cs140/notes/ http://www.scs.stanford.edu/20wi-cs140/notes/
- bitL 7y agoIs there a similar course about Boolean operations on general Bezier shapes out there somewhere? Thanks!
- lawrenceyan 7y agoCheck out https://cs184.eecs.berkeley.edu/sp20 https://cs184.eecs.berkeley.edu/sp20 That's the class I'm currently taking.
- rpasquay 7y agoIs there any good book/resource about how all that fancy stuff you can use in Inkscape/Illustrator is actually implemented in terms of rendering. E.g. how are curves and lines with a thickness rendered or shapes that are defined by boolean operations etc. ?
- julius_set 7y agoAs an alternative if you build SDKs or do work in gaming, mobile, or anything involving images really you will end up understanding / implementing this or more than this.
- tinus_hn 7y agoAn interesting challenge, are the accompanying lectures also available?
- swjz 7y agoSlides are available at http://cs248.stanford.edu/winter20/ http://cs248.stanford.edu/winter20/