🏮 Lanterns & Linework
As light to a fire
As calm to a storm
This study aims to accurately recreate one of Marcel Hampel's stunning lantern drawings in real-time 3D. As with my previous style-studies this project looks beyond one-off replication and instead presents a light-weight & robust workflow solution, ideal for production pipelines and real-time use.
Made using UE5’s default Deferred renderer, without render-pipeline modification. All footage was captured in real-time.
P.S. There are technical notes & learnings on my Distance Field based Linework process at the bottom—I hope it helps~ 😄
🔊 Audio: Sessions Vi, Breathing Break by Sofasound
My 3D Study:
When it comes to highly-stylized dioramas, artists will often use very controlled & highly specific art-processes to more accurately match their reference. The downside of that approach is that it easily becomes fragile & overly-specific—it doesn’t scale well to meet the needs of a full game production.
This is partly why large, highly-stylized games are so rare.
As a result, instead of chasing pixel-perfect accuracy, I try to approach studies like this with large-scale production in mind. To me, it doesn’t matter if a specific leaf or rock is out of place, as long as I can define holistic processes & workflows that follow the “stylistic rules“ that are implicit in the artist’s style.
In this way, I aim to study art-workflows that can achieve highly-specific stylization, while also being scalable & robust enough to support real game productions at scale.
I love this kind of work and I’m so grateful when I get to really study the work of incredible artists like Marcel.
This project has been such a joy ^___^
Marcel’s original post on Artstation
Marcel’s Original:
There are so many nuances & details to appreciate in Marcel’s style. It’s clear he’s a big fan of the lasso & fill tools, and uses them to great effect to create strong silhouettes and an almost “layered paper-cutout“ look. Those foundations are furthered with polish like soft airbrushing over glowing or brightly illuminated surfaces to add gradient & break/soften hard silhouette boundaries. His foliage work is also just incredible—it’s super distinct and was really challenging from a 3D perspective! I also just love how I can see where Marcel uses “shortcuts“ to both inform his style, and to save time. I really could just go on, but I’ll end by pointing out his tremendous eye for composition. —I’m such a fan haha! 😅
One of the more challenging areas was replicating Marcel’s line-style—it’s very distinct. There is just so much nuance & specific gesture in Marcel’s lines, and ultimately, I don’t feel like I really succeeded in capturing them. It’s definitely one of the weaker areas of my recreation—but it’ll be an exciting challenge to return to in the future ✨
The “layered paper cutout“ look I mentioned earlier also made for a fun & challenging “problem“ to figure out in 3D—especially for the foliage! I definitely think I was more successful in replicating those elements, but it’s tough to do consistently.
I love how this study turned out & I’m super grateful for all the learning that came with it! It was such an honor to take a deep-dive into Marcel’s artwork — I’m a huge fan & definitely feel like his style is exceptionally well suited for stylized 3D games & film. So, definitely give his artstation a look & consider reaching out to him if you think your project could benefit from his unique stylistic approach!
LINEWORK: Technical Breakdown
Linework is a topic Tech-artists think a lot about—it’s partly why I started this project. Here’s a breakdown on my linework process & learnings along the way:
Just look at them gnarly pixels 😱
With any Realtime Shading Feature, the best solutions balance Fidelity, Workflow, & Performance.
The general problem with linework in 3D games comes down to Texture Resolution vs. Memory & Compression-artifacts/pixelation—especially if players can get really close to objects.
Increasing texture resolution 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.
So just drawing the lines was a no-go:
I started by exploring Blender’s Grease Pencil feature since it’s changing the game right now—but couldn’t find a good process for batch processing & exporting the lines to an engine like Unreal or Unity.
The results I got trying to convert it to Geometry were dense & not very good 🙁
Further, Blender’s Grease Pencil line rendering does more than just rasterize geo, so eve if I had good line-meshes, Unreal/Unity wouldn’t just draw them “correctly” 🙄
I’d also have do deal with issues like aliasing & z-fighting (from low float-precision) with distance.
So if it Grease Pencil ain’t it, what’s next?
Thinking about this “problem” reminded of an old experiment where I used a Curvature Map to transfer sculpted, geometry features to texture in a (mostly) traditional high- to low-poly baking process.
Here’s that twitter thread along with related Portfolio Page & Video-lecture, although I do consider that exploration somewhat of a failed experiment.
...the issue I ran into there was skyrocketing texture-memory.
That said, font-rendering manages to tackle the texture resolution problem by leveraging Distance Field textures (DF) to interpolate high-res, pixel-free shapes from low-res textures (ex: Unity’s TextMesh Pro). Valve published a whitepaper on the topic years ago.
So, interpolating crisp lines from Distance Field textures seemed like a promising path, but baking DF textures adds a workflow-tax, meaning extra friction & points of failure in the art-process.
Bleh…
Ideally artists could just draw lines in Substance Painter, then export them as DF textures automagically, but AFAIK Substance Painter doesn’t do that.
…or does it? 👀👀👀
…it doesn’t 😅 but in my experience, you don’t really need it to. Substance’s ✨Bevel✨ filter works in a pinch & solves the workflow speedbump!
Is it an accurate Distance Field texture? Nope.
Is it good enough in most cases? Yup.
This method works great for solid lines!
(plz ignore my garbo UVing on this—I was testing worst-case UVs & it was a quick prototype.)
Update Note:
Some time after this post was published, Substance Painter added the 3D Path tool, which can be used as a non-destructive source of DF lines—unlike the hand-drawn approach used in post. Both methods are viable & present pros & cons, and I encourage anyone reading this to explore the new Path Tool for authoring DF lines!
As a rule of thumb, Distance Field textures should be quite small (texture resolution) & need to be very high-quality (uncompressed). Even moving from “Uncompressed” to “high-quality compression“ has a big, negative impact on the final result.
So here are the texture settings I use for Unity & Unreal:
Additionally, Distance Fields allow for A LOT of fun stylizations & animated effects because they’re interpolated in real-time~~~
Here’s a “water-drop on ink“ look I stumbled into ✨
I didn’t have a use for it at the time, but I’m definitely saving it for later. It reminds me of those tear-stained letters in YA novels 😭🌹💌 from my childhood
All together, these interpolated Distance Field lines allow my low-res texture (256x256 for the lantern!) to hold up even at extremely close range!
And, because the lines are interpolated in real-time, I added fun extras like variable line-weight, and an animated line-boil effect ✨
