Barycentric Interpolation
Blend per-vertex attributes across a triangle so every covered fragment gets a sensible color, depth, or texture coordinate.
Interactive playground
Tweak the operator or scene live so the article connects to an immediate visual result.
Barycentric interpolation
Use vertex weights that sum to one so attributes vary smoothly across the triangle interior.
Vertex colors
Scene viewInterpolated interior
Result viewEach colored cell inherits a different mix of the three vertex colors according to its barycentric weights.
Family
Rendering pipeline
Rasterization, visibility, and alternate image synthesis strategies such as ray marching.
Builds on
1 topic
Read these first if you want the surrounding pipeline context.
Unlocks
2 next topics
Use these follow-ups when you want to keep turning the image-processing pipeline forward.
Learning paths
1
This topic appears in curated graphics progressions so the next step is obvious.
Problem
Rasterization tells you which pixels lie inside a triangle, but those pixels still need attributes such as color, UV coordinates, or depth values that vary smoothly across the primitive.
Intuition
Barycentric coordinates express any point inside a triangle as weights on the three vertices. Because those weights sum to one, they naturally interpolate per-vertex data across the interior.
Core idea
- Compute the barycentric weights for the fragment relative to the triangle vertices.
- Use those weights to blend vertex attributes such as color, depth, normals, or texture coordinates.
- Feed the interpolated attributes into later shading and visibility logic.
Worked example
If one vertex is red, one is green, and one is blue, barycentric interpolation produces a smooth color gradient across the triangle where each pixel inherits a different mixture of those three endpoints.
Complexity
The math is constant work per fragment, which is why it fits naturally inside the raster pipeline.
When to choose it
- Choose it whenever triangle interiors need smoothly varying per-vertex data.
- Perspective-correct interpolation becomes important when the interpolated attributes live in projected geometry rather than pure screen space.
- The technique only makes sense after rasterization has already identified covered fragments.
Key takeaways
- Barycentric weights sum to one and stay local to the triangle.
- They are the standard way to interpolate triangle attributes.
- Color, depth, normals, and UVs all rely on the same core idea.
- They are a foundational concept for understanding fragment shading.
Practice ideas
- Interpolate vertex colors across a software-rasterized triangle.
- Display the three barycentric weights directly as RGB channels.
- Compare naive linear interpolation with perspective-correct interpolation on textured geometry.
Relation to other topics
- Rasterization identifies the fragments barycentric interpolation operates on.
- The z-buffer often uses interpolated depth from the same weights.
- Shadow mapping later reuses interpolated coordinates in another projected space.
Build on these first
These topics supply the mental model or preceding stage that this page assumes.
What this enables
Once the current operator feels natural, these are the most useful follow-up jumps.
Z-Buffer
Resolve which fragment is actually visible at each pixel by keeping only the smallest depth seen so far.
Shadow Mapping
Use a depth map from the light’s point of view to decide whether a visible surface point is blocked from that light.
Related directions
These topics live nearby conceptually, even if they are not strict prerequisites.
Color Spaces
Choose the right representation for the job, because RGB, HSV, linear light, and display-encoded values make different operations easy or safe.
Z-Buffer
Resolve which fragment is actually visible at each pixel by keeping only the smallest depth seen so far.
More from Rendering pipeline
Stay in the same family when you want parallel operators built from the same mental model.
Rasterization
Turn geometric primitives such as triangles into covered screen pixels so the rendering pipeline can shade actual fragments.
Z-Buffer
Resolve which fragment is actually visible at each pixel by keeping only the smallest depth seen so far.
Ray Marching and Signed Distance Fields
Render implicit shapes by stepping along a ray according to the nearest safe distance reported by an SDF.
Paths that include this topic
Follow one of these sequences if you want a guided next step instead of open-ended browsing.
Raster pipeline
Follow the classic rendering path from clipping and rasterization into visibility, shadows, occlusion, and temporal cleanup.
From the blog
Pair the graphics atlas with recent writing from the broader site whenever you want a wider engineering lens.