Steve Z Profile picture
Stylized Rendering Tech-Art @RiotGames RnD 👊🏻 Prev: Tech-Art & AR Prototyping @PokemonGoApp, Made @InnerSpaceGame. Same @ on Cohost. He/Him.

Aug 7, 2022, 14 tweets

Got some LINEWORK comments on my Lantern post
So here's a thread on Linework process & my learnings from this project:

1/12
Linework is a topic Tech-Artists think a lot about—It’s partly why I started this project:

2/13
Like w/ any Realtime Shading Feature, the best solutions balance Fidelity, Workflow, & Performance.

The general problem with linework in games comes down to Texture res vs. Memory, and Compression-artifacts/Pixelation—especially if players can get really close to objects.

3/13
Increasing texture-res for each asset, even with optimal UVs, just doesn’t move the needle enough to be practical. It would also have major fidelity issues on low-spec hardware, mobile, etc. So just drawing the lines was a no-go:

ex: Look at them gnarly pixels😱

4/13
I started by exploring #Blender3d's #Greasepencil since it's changing the game rn—but couldn’t find a good process for batch processing & exporting the lines to an engine like #UnrealEngine or #unity3d

The results I got trying to convert it to Geo were dense & not v good😕

5/13
Blender’s GP line rendering does more than just rasterize geo, so even if I had good line meshes in-engine, they still wouldn’t be drawn “right.”😥

I'd also have to deal w/ issues like float precision z-fighting & aliasing w/ distance.

So if GP ain't it, what’s next?

6/13
I was reminded of an old experiment where I used a Curvature Map to transfer sculpted features to texture in a (mostly) traditional high- to low-poly baking process:

…the issue was skyrocketing texture memory (see the 2nd tweet in this thread😅)

7/12
And font rendering uses Distance Fields to interpolate high-res, pixel-free shapes from low-res textures (ex: Unity’s TextMeshPro).

Valve’s whitepaper on SDFs: steamcdn-a.akamaihd.net/apps/valve/200…

So, interpolating crisp lines from a Distance Field texture seems like a solution, BUT…

8/13
…Baking SDFs adds a workflow-tax, meaning extra friction & points of failure in the process.

Bleh…

Ideally artists could just draw lines in Substance, then export them as SDFs automagically, but AFAIK Substance Painter doesn’t do that

…or does it?👀👀👀

9/13
…it doesn’t😅

But in my experience, you don’t really need to. @Substance3D 's ✨Bevel✨ filter works in a pinch & solves the workflow speed bump!
Is it an accurate DistanceField texture? Probs not.
Is it good enough in most cases? Yup.

This works great for solid lines!

Ignore my garbo UVing on this, y'all ><;
I was testing worst-case UVing & it was a quick prototype haha

10/13
As a rule of thumb, Distance Field textures should be quite small (resolution) & need to be very high quality (uncompressed).
Even moving from “Uncompressed” to “high quality compression” has a big negative impact.

So here are the Texture settings I use:

11/13
That DF foundation allowed for a LOT of room for fun stylization & animated effects.

Here's a "water-drop on ink" look I stumbled into✨
Didn't have a use for it, but I'm def saving it for later

...Reminds me of those tear-stained letters in YA novels😭🌹💌

12/13
Together, these interpolated DF lines allow my low-res texture (256x for the Lantern!) to hold up at extremely close range!

And b/c the lines are interpolated in real-time, I added fun extras like variable line-weight & an animated frame-boil effect✨
#UnrealEngine #shader

While the line-quality doesn't quite match @Marcel_Hampel's original style, I'm happy w/ this process & can imagine a ways to improve it further. Those are for future projects tho~✨

Next deep-dive will be Foliage🍂


Thanks for reading—I hope it's useful!

Share this Scrolly Tale with your friends.

A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.

Keep scrolling