A 3D accent needs a depth to sort against
One raymarched object in an otherwise 2D scene is an excellent trade: a single element that genuinely turns, catching light in a way no amount of 2D can fake, for the cost of one march. It stops being convincing the moment it needs to go behind something.
Watch the far half of the orbit. On the left the accent stays in front of the pillar the whole way round, so the pillar reads as a painted stripe and the accent reads as a sticker. On the right it passes behind and comes back out, and both objects become solid things in a space.
The 2D scene has to volunteer a depth
This is the part that feels like it should be harder than it is. A raymarch already
produces t, a real distance along the ray, for free. What is missing is
something to compare it to, because a 2D layer has no depth at all.
So assign one. Not per pixel, not a depth map: one number per layer, in the same units the marcher uses.
const float DEPTH_BACK = 3.30; // background slabs
const float DEPTH_FRONT = 1.95; // foreground pillar
// composite back to front, inserting the accent where t puts it
if (t >= DEPTH_BACK) drawAccent();
drawBackground();
if (t >= DEPTH_FRONT && t < DEPTH_BACK) drawAccent();
drawForeground();
if (t < DEPTH_FRONT) drawAccent();That is the entire mechanism. A parallax scene already has these numbers implicitly, since layer scroll speed is a depth in disguise, and deriving one from the other keeps the two systems agreeing without a second source of truth.
The three things that give it away, in order
- Sorting, which is this note. The most obvious and the easiest to fix.
- Light direction. A correctly sorted accent lit from a different direction than everything else still reads as pasted on. One shared light vector, declared once and used by both, and there is nothing to keep in sync.
- Tonemapping applied twice. If the 2D scene is already tonemapped and the accent gets its own pass, the accent's contrast will not match anything. Composite in linear HDR and tonemap the whole frame once at the end.
The last one is the subtle one and it is worth stating as a rule: tonemap the frame, never the element. Anything tonemapped separately is on its own curve and cannot match.
Getting it to belong
- Shadow onto the 2D layers. A soft ellipse under the accent, darkened onto the ground layer, is cheap and does more for grounding than the sorting does.
- Take the scene's color into the accent. A little of the background's hue in the accent's ambient term makes it share the room's light.
- Match the antialiasing. A hard-edged march against soft 2D edges is a tell, and this is also where the seam problem lives.
- Occlude it with the foreground's own alpha, rather than a hard cutoff, or the accent's silhouette gets a stair-stepped edge where it goes behind.
- Give it the same grain and the same dither, applied after compositing, for the same reason as tonemapping.
What it costs
One march is affordable in a way a full 3D scene is not, and the reason is the pixel count: the accent covers a small part of the screen, so a bounding test around it skips the march entirely for most of the frame. That is a genuine early-out here, unlike the per-shard bounding test, because the bound is one shape and every pixel outside it rejects together.
Rules of thumb
- The march gives you
tfor free. The 2D scene has to supply a depth to compare it against. - One depth per layer is enough. You do not need a depth buffer.
- Derive layer depths from parallax scroll speeds so there is one source of truth.
- Share one light direction between the 2D and 3D halves.
- Tonemap the frame, never the element. Composite in linear and curve once at the end.
- A contact shadow buys more belonging than correct sorting does.
One email when something new goes up. No newsletter, no schedule, nothing else.
Double opt-in, so watch for a confirmation email. Unsubscribe any time.