5 ms·

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.

joshmarinacci 7y ago
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 https://github.com/joshmarinacci/node-pureimage
- adamnemecek 7y ago
  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_ 7y ago
    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-harder-than-3d-graphics/ https://blog.mecheye.net/2019/05/why-is-2d-graphics-is-harde...
    - adamnemecek 7y ago
      Yeah I'm talking about that. What do people use then?
      - Jasper_ 7y ago
        Fast, 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 ago
    This is a beginner CS course, it's a lot simpler than that.
- Jasper_ 7y ago
  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 https://magcius.github.io/xplain/article/rast1.html The edge cases are similar -- precision in computing the path intersections and winding curves.
- bitL 7y ago
  Making 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 ago
Of course GPUs support 2D. It is just 3D with one less dimension.
manfredo 7y ago
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_ 7y ago
  Wait, why do you say GPUs support parametric curves? GPUs are based on triangles mostly.
  - manfredo 7y ago
    GPUs 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 ago
      That'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 ago
        This 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.

joshmarinacci 7y ago

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 https://github.com/joshmarinacci/node-pureimage

adamnemecek 7y ago
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_ 7y ago
  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-harder-than-3d-graphics/ https://blog.mecheye.net/2019/05/why-is-2d-graphics-is-harde...
  - adamnemecek 7y ago
    Yeah I'm talking about that. What do people use then?
    - Jasper_ 7y ago
      Fast, 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 ago
  This is a beginner CS course, it's a lot simpler than that.
Jasper_ 7y ago
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 https://magcius.github.io/xplain/article/rast1.html The edge cases are similar -- precision in computing the path intersections and winding curves.
bitL 7y ago
Making 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 ago

Of course GPUs support 2D. It is just 3D with one less dimension.

manfredo 7y ago

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_ 7y ago
Wait, why do you say GPUs support parametric curves? GPUs are based on triangles mostly.
- manfredo 7y ago
  GPUs 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 ago
    That'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 ago
      This 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.