34 ms·
"Inspired by the gaming world, we realized that the only way to achieve the performance we needed was to build our own UI framework" I'm surprised you did not
by fxtentacle 4y ago
"Inspired by the gaming world, we realized that the only way to achieve the performance we needed was to build our own UI framework"
I'm surprised you did not look at "Dear ImGui", "Noesis", and "JUCE". All three of them are heavily used in gaming, are rather clean C++, use full GPU acceleration, and have visual editors available. Especially JUCE is used for A LOT of hard-realtime professional audio applications.
"When we started building Zed, arbitrary 2D graphics rendering on the GPU was still very much a research project."
What are you talking about? JUCE has had GPU-accelerated spline shapes and SVG animations since 2012?
BTW, I like the explanations for how they use SDFs for rendering basic primitives. But that technique looks an awful lot like the 2018 GPU renderer from KiCad ;) And lastly, that glyph atlas for font rendering is only 1 channel? KiCad uses a technique using RGB for gradients so that the rendered glyphs can be anti-aliased without accidentally rounding sharp corners. Overall, this reads to me like they did not do much research before starting, which is totally OK, but then they shouldn't say stuff like "did not exist" or "was still a research project".
- deleted 4y ago[deleted]
- wnkrshm 4y agoIt's not the first text editor either, Sublime has GPU-accelerated rendering.
- fxtentacle 4y agoAlso, looking at their own performance numbers, it appears that all of this only managed to reduce the character insertion latency by 21% when compared to CLion. That's still useful, but maybe not even noticeable to the user.
- gizmo 4y agoThat latency can’t be render latency, because it’s trivial. It has got to be related to unifying the text buffer with the syntax tree. Otherwise you’ll get wrong syntax highlighting for a couple of frames and that’s jarring.
- swatcoder 4y agoI agree with your final statement and the seeming lack of research, but are you sure your characterization of JUCE is accurate? You’d surprise a lot of people if you were right about it using GPU acceleration for its UI framework. It does have an OpenGL container that fits into its view object hierarchy if you want to write your own accelerated component, but the rest of the UI is pretty much standard event-loop -> platform-API dispatch. It’s accelerated where the underlying platform-API is accelerated but not in any kind of explicit or fine-tuned way. The focus has always been more on portability than performance, even on the audio side. (And of course the high-priority audio processing runs in an entirely segregated context from the UI, so the performance characteristics of the two pieces are decoupled anyway.)
- coldtea 4y ago>I agree with your final statement and the seeming lack of research, but are you sure your characterization of JUCE is accurate? That JUCE is "heavily used in gaming" for starters is widly innacurate
- fxtentacle 4y agoI personally know multiple people using it in their games and game-related tooling and Roli (the company selling JUCE) even has an official Unreal Engine 4 plugin. So to me, it appears to be widely used.
- irh 4y ago> Roli (the company selling JUCE) I know it's tangential to the point that you're making, but JUCE was acquired by PACE in 2020.
- swatcoder 4y agoJUCE is sold by Raw Material Software, which was purchased by PACE Anti-piracy, which is part of Avid. There may be some people you know using JUCE for games, but it’s an odd choice. Trying to figure out what you might mean, JUCE was involved with the BLOCKS SDK for Roli’s hardware peripherals, but again, that’s not really about gaming and definitely not about any familiar kind of gaming. That said, I’m sure you’re relating the best information you have and very likely just transposed some detail by accident and are now caught in a relentless, exhausting online nitpick. We’ve all been there. If you figure out what it was, I’d love to hear it!
- rob74 4y agoMaybe you need to add an "(in Rust)" to all these sentences? Sure there are C++ frameworks, but they probably wanted a pure Rust UI framework? My 2 cents: it's nice to have smooth rendering in your editor, but I'm currently mostly using a Java-based IDE (IDEA family), and it's responsive enough for my taste. If I were to use the current prototype of their editor, I'm afraid the usage of fixed-width fonts all over the place (which I assume can be fixed, but may also be due to constraints of the UI framework?) would probably bother me more than the 120 FPS UI would impress me (assuming that I had a monitor that was fast enough, which I don't). On the plus side, it sounds like they support sub-pixel rendering - if that's the case, kudos to them!
- DeathArrow 4y agoNot true, even if you add Rust. egui was released earlier: https://github.com/emilk/egui https://github.com/emilk/egui And egui isn't tied to Apple proprietary frameworks.
- littlestymaar 4y agoAfaik egui isn't doing any kind of the fancy GPU based 2D graphics this blog post is about though.
- pama 4y agoIt uses glow, GL on whatever, so OpenGL when it exists.
- littlestymaar 4y agoThat doesn't mean it's doing any kind of GPU acceleration of 2D graphics. Given that they don't talk about it in the README, I'm pretty sure they don't.
- decremental 4y agoI use egui. The library itself is agnostic but relies on backend libraries for rendering, all of which (or at least the official ones) render on the GPU.
- littlestymaar 4y ago> What are you talking about? JUCE has had GPU-accelerated spline shapes and SVG animations since 2012? I'm not familiar at all with JUCE, but the state of the art in GPU-accelerated 2D graphics has dramatically improved over the past 10 years so I doubt what JUCE did in 2012 is really comparable.
- fxtentacle 4y agoI shipped a JUCE-based app in 2012 and back then it was "good enough" to have GPU-accelerated rendering of SVG icons moving around in realtime with antialiasing. Since we used their OpenGL context, we could even render the GUI inside customers' games for debug visualization.
- dorkwood 4y ago> KiCad uses a technique using RGB for gradients so that the rendered glyphs can be anti-aliased without accidentally rounding sharp corners. This is known as a “multi-channel signed distance field”, or “msdf”. https://github.com/Chlumsky/msdfgen https://github.com/Chlumsky/msdfgen
- scotty79 4y agoDo you know any text editor that uses it for font rendering?
- fxtentacle 4y agoYou would have to use that if you want smooth antialiased zooming in and out of text. BTW, the KiCad schematics are pretty text-heavy. You typically write down all the parameters and IDs of all the electrical components.
- rikarendsmp 4y agoI used to use it, but its extremely font and glyph-sensitive wether or not it works. And if it doesn't work there is no easy fix (or ability to recognise it nonvisually)
- incrudible 4y ago> KiCad uses a technique using RGB for gradients so that the rendered glyphs can be anti-aliased without accidentally rounding sharp corners They are not using SDFs for the text, they render the glyphs at the specified font size directly.
- shultays 4y agoImGui is at least only used for debug rendering, not something that makes it to end user. At least in the small subset of companies I worked at.
- selfmodruntime 4y agoYou are correct. I've also encountered it sometimes in internal business gui wrappers.
- andersa 4y agoI wonder if this is because the default theme for it is somewhat ugly, and most developers aren't designers to make it look better. It is perfectly capable of rendering standalone applications, if you want it to...
- marginalia_nu 4y agoImGui is amazing to work with though. Like holy fuck is it pleasant compared to basically every other UI-development paradigm ever in the history of user interfaces.
- jspdown 4y agoYes but that's because it's an immediate mode renderer. It feels intuitive and that's why it's the de facto standard for building debug tooling. But this intuitiveness comes at a price! No matter how hard you try, this will always be slower and computationally heavy compared to retained mode. Great for some stuff, terrible choice for some other.
- legosexmagic 4y agoYour mixing up terms. immediate mode rendering and immediate mode gui are unrelated. immediate mode gui libraries generally dont use immediate mode rendering because its realy slow. immediate mode gui tends to be faster in practice because you just naturally end up with less code. also its very easy to write a retained mode ui ontop of an immediate mode gui library.
- sieabahlpark 4y ago[dead]
- ohgodplsno 4y agoAs for text rendering, Slug [0] has existed for much more than ten years, and is pretty much the gold standard for GPU text rendering. [0] https://sluglibrary.com/ https://sluglibrary.com/
- bobajeff 4y agoThanks, I'm reading the paper* linked to on that site explaining the technique used in the library. It's encouraging me more to pursue implementing a 2D render on the GPU. I'm also inspired by a recent talk about gkurve**. * https://jcgt.org/published/0006/02/02/ https://jcgt.org/published/0006/02/02/ ** https://m.youtube.com/watch?v=QTybQ-5MlrE https://m.youtube.com/watch?v=QTybQ-5MlrE
- ohgodplsno 4y agoDo note that as far as I know, this technique is patent-encumbered, at least in the US.
- bobajeff 4y agoThanks. I wonder what the patents cover. With all the work going into 2D rendering on the GPU I'd imagine others discovering similar methods.
- gabereiser 4y agoThe absolutism of some of their statements when we have 30 years of GPU research at our disposal is pretty eye-opening. I get that maybe this stuff didn't exist as a crate for rust but c'mon! Splines and shapes, glyph rendering, I wrote a game engine in C# back in 2007 that did all these things, and more. I like the explanation and the breakdown of SDFs for primitives but they are standing on the shoulders of giants and act like they're on an island.
- fallat 4y agoI'm not even sure it was wise to use SDFs to draw some shaded rounded rectangles.
- kevingadd 4y agoI use sdfs for my unified rasterization in my UI library and they definitely are not the optimal method from a performance standpoint. I've had to do a lot of tricky optimizations to get acceptable performance on low spec hardware. I mostly stick with them because the flexibility and image quality feel worth it.
- Jasper_ 4y agoWhen we talk about 2D graphics as a research problem, we're talking about native rendering of splines and strokes. JUCE does not have GPU-accelerated splines, it flattens the path to lines and rasterizes the coverage area into a texture that then gets uploaded to the GPU: https://github.com/juce-framework/JUCE/blob/2b16c1b94c90d0db3072f6dc9da481a9484d0435/modules/juce_graphics/geometry/juce_PathIterator.cpp https://github.com/juce-framework/JUCE/blob/2b16c1b94c90d0db... https://github.com/juce-framework/JUCE/blob/2b16c1b94c90d0db3072f6dc9da481a9484d0435/modules/juce_graphics/geometry/juce_EdgeTable.cpp https://github.com/juce-framework/JUCE/blob/2b16c1b94c90d0db... It also does stroke handling on the CPU: https://github.com/juce-framework/JUCE/blob/2b16c1b94c90d0db3072f6dc9da481a9484d0435/modules/juce_graphics/geometry/juce_PathStrokeType.cpp https://github.com/juce-framework/JUCE/blob/2b16c1b94c90d0db... Basically, this isn't really "GPU accelerated splines". It's a CPU coverage rasterizer with composting handled by the GPU.
- fxtentacle 4y agoYou linked to the software fallback renderer which can be used for cross-platform compatibility. But JUCE also has platform-specific rendering modules. CoreGraphicsContext::createPath will convert the CPU spline segments to CG spline segments which are then rasterized by CoreGraphics using Metal on the GPU. https://github.com/juce-framework/JUCE/blob/2b16c1b94c90d0db3072f6dc9da481a9484d0435/modules/juce_graphics/native/juce_mac_CoreGraphicsContext.mm#L743 https://github.com/juce-framework/JUCE/blob/2b16c1b94c90d0db... And on Windows 7 and up it'll use the hardware-accelerated Direct2D APIs: https://github.com/juce-framework/JUCE/blob/2b16c1b94c90d0db3072f6dc9da481a9484d0435/modules/juce_graphics/native/juce_win32_Direct2DGraphicsContext.cpp#L40 https://github.com/juce-framework/JUCE/blob/2b16c1b94c90d0db...
- Jasper_ 4y agoYou mentioned using the OpenGL context, and this code is used by the OpenGL context. CoreGraphics does not use the GPU. Direct2D uses a approach which tesselates paths into triangles on the CPU. It is similar to the JUCE code in that the GPU is used for coverage, but it still does not natively render splines on the GPU.
- qbasic_forever 4y agoGoogle has done a ton of work on GPU accelerated vector graphics too for Android and other platforms. Their skia library is pretty nice: https://skia.org/ https://skia.org/
- fxtentacle 4y agoOops I forgot to mention that one. They also have a pretty interesting cross-platform GUI framework using it: https://flutter.dev/ https://flutter.dev/
- EddieRingle 4y agoAnd what was learned from Flutter has produced something I consider even more interesting: Compose UI (https://developer.android.com/jetpack/compose https://developer.android.com/jetpack/compose) and JetBrains' Compose Multiplatform (https://www.jetbrains.com/lp/compose-mpp/ https://www.jetbrains.com/lp/compose-mpp/)
- EngManagerIsMe 4y agoMeanwhile, the gaming world is moving to HTML/CSS/JS for game UI in many cases.
- TylerE 4y agoI know of at least one shippping commercial game - in 2023 - that renders the UI using Adobe Flash.
- EngManagerIsMe 4y agoThat's super common. It was more common historically, these days it's largely gone away. (Scaleform was the technology that used flash for UI dev)
- kevingadd 4y agoAt least as far as dear imgui is concerned, it's an amazing library for dev tools but the accessibility story is dire and it has poor support for high quality typography, so it's a non starter if you're serious about good UI. This is not to diminish the quality work that went into the library, but I passed over it for those and other reasons. I used nuklear for a bit since its typography was extensible but in the end it was too hard to overcome its other issues, so I use a custom mixed immediate/retained library now with rich text and accessibility support.
- mwcampbell 4y ago> a custom mixed immediate/retained library now with rich text and accessibility support. I'm always interested in learning about GUI toolkits that have accessibility support. What level of accessibility support does yours have? e.g. does it implement platform accessibility APIs, and if so, on which platforms? Is your library open source? If not, can I see it in action in any commercially available product? Thanks.
- kevingadd 4y agoI haven't found good platform accessibility API bindings for C#, so right now it just has narration support, adjustable text size/contrast, and full keyboard navigation. I'm hoping that later on in my project's development process I'll have the budget to hire someone to try and fully integrate with the platform APIs - it's designed so it will be possible by pushing updates to the retained model. The way it works is that it has an immediate mode API (see https://github.com/sq/Libraries/blob/0ca01d949e3df5fabb1440de3dbc437ae6ccca9c/Squared/PRGUI.Demo/Game.cs#L1334 https://github.com/sq/Libraries/blob/0ca01d949e3df5fabb1440d... for a simple example of the API) and then under the hood it uses a lightweight retained-mode graph, which means that when it's more convenient you can just write more traditional classes and components. In practice most of the UI I've written for my main project is a mix of both models, like for example an editor popup window uses IMGUI-style API while the items in a virtual listbox are represented by a small custom component. It does have a full imgui-style layout engine under the hood instead of doing retained-mode layout, so it's able to fully re-generate layout from scratch every frame, and to minimize page tearing there is a system where components can request a second relayout pass (typically used for things like text autosize). Here's a more complex mixed-mode example from one of my development tools: https://gist.github.com/kg/6a6ba42d5019b546858a2b18751de019 https://gist.github.com/kg/6a6ba42d5019b546858a2b18751de019 Almost all of the on-screen elements in this footage are either immediate-mode or retained-mode UI using the library: https://www.youtube.com/watch?v=ey3FtFWxbhA https://www.youtube.com/watch?v=ey3FtFWxbhA
- bsder 4y ago> But that technique looks an awful lot like the 2018 GPU renderer from KiCad ;) And lastly, that glyph atlas for font rendering is only 1 channel? KiCad uses a technique using RGB for gradients so that the rendered glyphs can be anti-aliased without accidentally rounding sharp corners. Is this stuff written down somewhere other than the code? I use KiCad all the time and certainly never noticed this.