Module 07

Texture sampling & sprite effects

texture() samples — it doesn't "look up a pixel"

texture(u_sprite, uv) doesn't necessarily hand you one exact stored texel. Depending on the filter mode, it might blend several neighboring texels together first. The playground on the right has a small procedurally-drawn star bound to u_sprite for this whole module — no image file needed, just a shape drawn once and uploaded as a texture.

Filtering: why pixel art goes blurry

LINEAR filtering blends the four nearest texels by distance — smooth, great for photos, and the reason a crisp pixel-art sprite looks soft and blurry the moment you scale it up. NEAREST just grabs the closest texel with no blending, keeping every hard edge crisp. If a pixel-art sprite ever looks blurry in an engine, this is almost always the one setting to check — not a shader problem at all.

Alpha is math, not a switch

"Alpha threshold" undersells what's actually happening. Compositing a foreground color over a background is a real formula — the Porter-Duff over operator: result = fg * a + bg * (1 - a). That's exactly what mix(bg, fg, a) computes. Get this wrong — mixing colors that were saved with alpha already multiplied in (premultiplied) as if they weren't — and you get a subtle dark fringe around sprite edges that's surprisingly hard to track down if you don't know to look for it.

Predict the output

In this lesson's solution, mix(backdrop, spriteColor, sprite.a) is really just another name for...