Gradient Shading by referring inner meshes

Hello. I need someone to advise me about a gradient shading using multiple vertex data.

Let’s say I have three meshes (see Picture 1) that Mesh 3 is enclosed by Mesh 2 and Mesh 2 is enclosed by Mesh 3 and all the meshes are convex.

Each mesh is extruded from 2D sketch (so think it as a problem of coloring a plane) with same height and shape of them are dynamically changing, while keeping the relationship of including like I described above.

What I want to do is shading Mesh 1’s color smoothly changing over the region defined by enclosed mesh. For example, like Picture 2. (The innermost object will be shaded without gradient)

  1. I think the equation I wrote in Picture 1 is reasonable for fragment shader. What I don’t know is how to pass external vertex data into shader. If it is possible, the problem will be much easier.

  2. If it is not possible, I have a vague idea about making a mask of Mesh 2 & 3 in real-time. Can it be an option?

  3. Any idea about implement it in a clever way?

I don’t know how you’d map the vertices to look up from another buffer, although I believe it can be possible, likely with the use of buffers.

However a more traditional approach would be to generate triangles between the meshes and rely on vertex interpolation for shading. With this approach, you could just set the color attribute per vertex and then perform whatever fragment instructions you want to get your desired effect.

Also a slight bonus, if you’d call it that, to this approach is that you can make it 1 draw call instead of 3 draw calls by making one mesh instead of three separate meshes.