Making a grid with colors blended between cells. Use vertex `colors` for this?

I’m looking to make a grid with colors for each cell, and would like to blend colors between cells.

Basically something like the following but with rectangular cells instead of hexagons:

Is it possible with geometry vertex colors perhaps? @hofk Any demos come to mind?

I was originally thinking I could make a flat mesh with each rectangle being two triangles (one Geometry overall). But this won’t work because vertex colors will blend the colors across the whole cell instead of just at the edges. Is there a way to keep a simple grid geometry, and achieve only a certain level (thickness) of blending on the edges?

Here’s an new image that shows more of what I want to make:

I’m thinking another way I could achieve this is to just make the grid simple, with solid cell colors, then apply a blur over the whole thing, and lastly mask it to get sharp edges.

I don’t want to blur the whole scene though. I suppose this means I’d have to make a second scene just for this grid, apply a blur effect to the second scene, then render the second scene as a texture inside the first scene.


What approach would you take?

Because you want to create an effect only within some defined distance of the edges, without blending across the whole cell, you’ll probably find Barycentric coordinates useful:

The second link includes code for generating Barycentric coordinates from a given geometry in lib/geom.js. The point is that you can get a varying in the fragment shader that indicates a pixel’s distance from the edge of the triangle, which you could use to draw lines or interpolate something.

Beyond that, I’m not sure. Maybe ensure triangles don’t share vertices, give each vertex two sets of vertex colors: color_self and color_adjacent. Compute the adjacent colors from adjoining triangles, blending if necessary. Then use the Barycentric coordinates to interpolate between those colors near the edges, clamping to the value of color_self after a fixed distance from the edge.

EDIT: If it’s an option for your scene, drawing on Canvas 2D with blur and using that as a texture might be quite a bit easier. :sweat_smile:

1 Like