The Quest for Very Wide Outlines | Hacker News Reader

The Quest for Very Wide Outlines

bgolus.medium.com

151 pointstodsacerdoti19 comments

Fantastic article that dives into the deep end. Quote: "At 20 pixels it’s nearly 10 ms, so I didn’t test going above that. At one point I accidentally set the radius to 80 and my GPU locked up."

Never having done any work like this on the GPU, I hadn't realized this would be possible.

Yeah on pretty much any modern configuration, it's possible to hard lock the GPU and the reason it doesn't happen to you on a regular basis is that various parties go out of their way to try and prevent it. Preventing this robustly is part of why WebGL implementations are complex and WebGL apps end up being much slower than equivalent native OpenGL apps.

Windows has had a built in 'timeout detection & recovery' system for years now specifically designed to detect when the GPU locks up and then basically just knock it over and restart it so your PC becomes usable again. [ https://docs.microsoft.com/en-us/windows-hardware/drivers/di... ]

Vulkan and Direct3D 12 have, by giving you more direct access to 3D hardware, brought back a lot of the fun 'this game caused a kernel mode crash or hung the entire machine' experience we used to get in the Windows 9x days. As a game dev whenever I do some Vulkan or D3D12 testing I make sure to reboot the machine afterward to avoid having my browser crash 4 hours later because the video driver stomped on some stray pages in the file cache.

Outlines are high on the list of “it should be easy but it’s not”.

I’ve explained this many times to art and design directors and there is always the starement of “but this game did it”! To which my response is, this game is on PS4 not mobile, or it required a lot of asset pipeline customization, and/or hand authoring. Of course it can be done, but it may come at the significant expense of other systems.

Why are outlines so expensive? The article assumes we all know.

Yeah, I also have no intuition about this and fail to grasp the problem. When the author talked of rendering a slightly larger mesh to a white texture I just assumed that was it, but apparently not. I assume much of the complexity is to do with where in the pipeline this issue is being handled (i.e. just in shaders).

Oversimplification, but the high-level problem is that you have a 3D object, with overlapping bits, holes, thin jutting edges, and other unusual geometry. The outline is behind that shape (and usually, only that shape), but the outline is a "flat" 2D shape.

As the images with the black outline show near the top of the article, scaling up the component parts and drawing them as black don't achieve a good effect. The "correct" approach is to find each opaque bit of the 3D object you're outlining and draw opaque outline pixels within a radius of the outline width around it. This is slow, however, since you're essentially operating per-pixel. To achieve reasonable performance, there's a good amount of optimizing that needs to happen.

Signed distance fields is a really useful technique. Its commonly used in font rendering in games as it lets you dynamically change font weights and add effects like outlines or drop shadows.

Interesting, but in what circumstance does this actually look good?

In the Jet Set Radio HD and Guilty Gear Xrd -SIGN- examples, I get it. But the really thick one with the robot only reminds me of activity books for very young children, which are used with those dull safety scissors.

I'm failing to come up with some circumstance in which I'd actually want something to look that way.

In many games, a similar effect outlines the object that you're looking at (e.g., a player, item, or part of the scenery that can be interacted with). Minecraft shows an outline similar to this with certain potion effects or game commands.

I mean, I get outlines. Just the very thick variety this article is showing looks very ugly to me.

What if instead of mapping positions to 2D points and finding the closest point among 9 samples, you mapped positions to 1D coverage values and picked the maximum value among the 9 samples? Would this make antialiasing easier to implement? What about using 4 samples rather than 9?

I'm concerned that the results turn a single point into a square rather than a circle. Would using non-square-grid point distributions alleviate this?

Perhaps this could be useful for GPU line rendering, though it's a texture-space algorithm and won't solve drawing a thin line in the first place (which I don't know if it's easier than a thick line or not).

Good, but I felt like this article was missing the code. Talking about shaders without code feels like talking about physics without any equations.

There’s full code for the winning JFA version at the end. It’s true that there’s no code for all the other attempts, but it does link to a bunch of shadertoy pages and the like along the way, so you can get some source code that way.

I get that this is missing the point a bit... but this effect looks more like something you could add in post-processing, photoshop, or after effects, and not something you really need in your 3d engine.

It’s useful to have as a shader which can help define the visual style of your game. Additionally you can highlight the model from any angle, which is a useful hint to users.

Since the model may be viewed from any direction, this would be very hard to do in post, since there’s no way you can get the model to look correct from all angles.

Surely it all depends on what you're using it for. Maybe I want to create a game where all characters look like that in real-time (think Borderlands but turned up a notch).

Your comment makes it sound like there's only one presumed use-case for this.

I thought he was only applying this to one or two outlines at a time ? I wonder if there are other performance trade offs when you outline a hundred game elements in frame or something ?

Also, FWIW, this was posted today on Reddit - a nice writeup of "5 ways to draw an outline" in Unity that also tips a hat to the OP article:

https://alexanderameye.github.io/notes/rendering-outlines/

Someone writing a photo or video editing program could use this technique to process images fast. Instagram used to do filters on the CPU then changed to a shader version for a huge speedup. I use JFA in a game to generate outlines of 2D characters that are procedurally generated in the app. Also the JFA is a way of generating voronoi diagrams in log2(textureSize) steps and could be used for anything that uses voronoi diagrams. Generating a distance field is just one use.

3D outlines around objects are an increasingly necessary effect in the visual language of modern 3D video games because increases in post-processing and shader tech have made it such that it's hard to identify individual interactable objects in 3D space in increasingly photorealistic environments. the article shows some examples of how this can be used, including the The Last Of Us "rough outline of figures that you can sense behind walls" effect.

Reply on news.ycombinator.com