Hacker News Reader

Comment by Const-me | Hacker News Reader

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-... 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.

View on HN

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-264

https://www.factorio.com/blog/post/fff-281

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.

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

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.

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

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.

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.

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?

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

[2] https://github.com/finos/perspective

I am the author of GDG. If you have any questions feel free to let em rip.

Reply on news.ycombinator.com