Calculating dFdx and dFdy of texture coordinates in 2D manually

Game Mechanics
#1

Hello.

I have this problem where I want to calculate the gradient of the texture coordinates of a 2D triangle. I have:

  • three 2D positions XY for each vertex of the triangle, in screen pixels.
  • three 2D texture coordinates ST for each vertex of the triangle, in the range [0-1].

I want to calculate the gradient along X and Y for the texture coordinates, but I can’t remember how to do that from my linear algebra classes, and my Google-fu is failing me. In other words, what’s the change in the texture coordinates when I go one pixel to the right (dFdx) or one pixel up (dFdy)?

The ultimate goal is to derive a function F(XY) = ST, so that I can calculate the texture coordinates of any pixel on the screen quickly (even points outside the triangle). It will have the form F(XY) = XdFdx + YdFdy + offset, with the 2D offset being possible to calculate once I have dFdx and dFdy.

#2

You’d have to split the triangle in two, along the X-axis (’ scanline’) of the point that is between the other two points (when projected on the Y axis). Then use the typical scanline approach on the two triangles.

Basically just what the GPU does (unless it changed in the last 10 years).

Also, don’t you need to take depth (in screenspace) into consideration? Or don’t you need perspective when sampling? It affects dfdx and dfdy significantly.

Calculating dfdx and dfdy without the split seems quite complex.

#3

This is a rather useful function. Added to JOML here: https://github.com/JOML-CI/JOML/blob/master/src/org/joml/Interpolationf.java#L173
You could convert that to GLSL.
Note that this is just bilinear interpolation with barycentric coordinates, since you only have the values of ‘F’ available at the vertices. A true dFdx/dFdy would need to be given a true function to differentiate.

#4

KaiHH was nice enough to help me get what I needed implemented into JOML! Thanks, Kai!

#5

Right on @theagentd! For posterity care to post your JOML based solution?

#6

Sure, check out dFdxLinear()/dFdyLinear() here: https://github.com/JOML-CI/JOML/blob/master/src/org/joml/Interpolationf.java

#7

If it’s just affine mapping(and if you can reaf basic), I wrote something about that 10 or 15 years ago:

http://rel.phatcode.net/mytutes/3dtutes/chapter3/chapter3.htm

Scroll down a bit for the triangle texturing part(split in two like Riven said).