4 ms·

Couple times in the past I have implemented GPU-targeted GUI renderers, here’s an example: https://github.com/Const-me/Vrmac?tab=readme-ov-file#vector-graphics-

Couple times in the past I have implemented GPU-targeted GUI renderers, here’s an example: https://github.com/Const-me/Vrmac?tab=readme-ov-file#vector-graphics-engine https://github.com/Const-me/Vrmac?tab=readme-ov-file#vector-... https://github.com/Const-me/Vrmac/blob/master/Vrmac/Draw/VAA.md https://github.com/Const-me/Vrmac/blob/master/Vrmac/Draw/VAA... 2D graphics have very little in common with game engines. The problem is very different in many regards. In 2D, you generally have Bezier and other splines on input, large amount of overdraw, textures coming from users complicate VRAM memory management. OTOH, game engines are solving hard problem which are irrelevant to 2D renderers, like dynamic lighting, volumetric effects, and dynamic environment.

lukan 3y ago
There is PixiJS, a 2D web graphic engine. It is really, really fast. I can imagine something like this, as the base.
- Jasper_ 3y ago
  PixiJS is the easy problem, blitting a bunch of premade textures to the screen. The much harder problem is getting curveTo() and text and gradients and strokes, etc.
  - lukan 3y ago
    That is all or mostly possible with PixiJS or an extension to my knowledge. Edit: but then again, Pixi uses the HTML canvas element for text drawing, which uses the browsers text capabilities. So yes, at some point and somewhere those functionalities need to be implemented
    - interactivecode 3y ago
      Sure canvas can render text, but its filled with problems and limitations. It doesn’t do linewrapping or any of the font rendering correctly. Doesn’t do aliasing correctly. It needs so much hand holding and manual handling to render semi decent that basically all canvas apps just opt out and use html to render text on top of canvas. Canvas is almost always the wrong choice if you want to do layouts.
- JoeyJoJoJr 3y ago
  I gotta disagree that PixiJS is fast. I’ve worked with a bunch of 2D graphics engines going back to the Flash days, and I found it’s really easy to hit a wall with PixiJS performance, especially if you are using text and filters. I wouldn’t have much issue with it if the cacheAsBitmap feature was reliable, but I found it buggy as heck and it didn’t help performance as much as you would expect. There is no way I would use PixiJS for a full screen game or mobile game.
  - lukan 3y ago
    Ok, I also found that performance can drop in unexpected ways, causing workarounds, to get it flowing again. And I don't use cacheasbitmap, but do my own caching. (Not because I knew of flaws, but because I was already doing it) And for text I really recommend BitmapText. That is fast. (But not possible with all use cases, sure) Also Pixi8 with WebGPU will be stable soon, looking forward to it. But all in all I am really impressed, I used quite a few other js graphic engines before and Pixi was by far the best. Or which one did you find better?
  - paddy_m 3y ago
    Can you give examples of better JS renderers? What is needed for performance of traditional GUI app rendering? I'm particularly interested in table rendering. Glide and Perspective are both canvas based renderers, but I haven't dug into the internals. [1] https://github.com/glideapps/glide-data-grid https://github.com/glideapps/glide-data-grid [2] https://github.com/finos/perspective https://github.com/finos/perspective
    - jassmith87 3y ago
      I am the author of GDG. If you have any questions feel free to let em rip.
BlueTemplar 3y ago
While 3D games are the most common ones these days, there's still plenty of development done on 2D games too : https://www.factorio.com/blog/post/fff-251 https://www.factorio.com/blog/post/fff-251 https://www.factorio.com/blog/post/fff-264 https://www.factorio.com/blog/post/fff-264 https://www.factorio.com/blog/post/fff-281 https://www.factorio.com/blog/post/fff-281
- Const-me 3y ago
  2D games are mostly rendering sprites. GUI renderers do that too for raster images and font glyphs, but the harder part for GUI is vector 2D graphics.

lukan 3y ago

There is PixiJS, a 2D web graphic engine. It is really, really fast. I can imagine something like this, as the base.

Jasper_ 3y ago
PixiJS is the easy problem, blitting a bunch of premade textures to the screen. The much harder problem is getting curveTo() and text and gradients and strokes, etc.
- lukan 3y ago
  That is all or mostly possible with PixiJS or an extension to my knowledge. Edit: but then again, Pixi uses the HTML canvas element for text drawing, which uses the browsers text capabilities. So yes, at some point and somewhere those functionalities need to be implemented
  - interactivecode 3y ago
    Sure canvas can render text, but its filled with problems and limitations. It doesn’t do linewrapping or any of the font rendering correctly. Doesn’t do aliasing correctly. It needs so much hand holding and manual handling to render semi decent that basically all canvas apps just opt out and use html to render text on top of canvas. Canvas is almost always the wrong choice if you want to do layouts.
JoeyJoJoJr 3y ago
I gotta disagree that PixiJS is fast. I’ve worked with a bunch of 2D graphics engines going back to the Flash days, and I found it’s really easy to hit a wall with PixiJS performance, especially if you are using text and filters. I wouldn’t have much issue with it if the cacheAsBitmap feature was reliable, but I found it buggy as heck and it didn’t help performance as much as you would expect. There is no way I would use PixiJS for a full screen game or mobile game.
- lukan 3y ago
  Ok, I also found that performance can drop in unexpected ways, causing workarounds, to get it flowing again. And I don't use cacheasbitmap, but do my own caching. (Not because I knew of flaws, but because I was already doing it) And for text I really recommend BitmapText. That is fast. (But not possible with all use cases, sure) Also Pixi8 with WebGPU will be stable soon, looking forward to it. But all in all I am really impressed, I used quite a few other js graphic engines before and Pixi was by far the best. Or which one did you find better?
- paddy_m 3y ago
  Can you give examples of better JS renderers? What is needed for performance of traditional GUI app rendering? I'm particularly interested in table rendering. Glide and Perspective are both canvas based renderers, but I haven't dug into the internals. [1] https://github.com/glideapps/glide-data-grid https://github.com/glideapps/glide-data-grid [2] https://github.com/finos/perspective https://github.com/finos/perspective
  - jassmith87 3y ago
    I am the author of GDG. If you have any questions feel free to let em rip.

BlueTemplar 3y ago

While 3D games are the most common ones these days, there's still plenty of development done on 2D games too : https://www.factorio.com/blog/post/fff-251 https://www.factorio.com/blog/post/fff-251 https://www.factorio.com/blog/post/fff-264 https://www.factorio.com/blog/post/fff-264 https://www.factorio.com/blog/post/fff-281 https://www.factorio.com/blog/post/fff-281

Const-me 3y ago
2D games are mostly rendering sprites. GUI renderers do that too for raster images and font glyphs, but the harder part for GUI is vector 2D graphics.