Z-Tilt without stealing the alpha blend

Ryan H

12/16/18

Consider a vector Fpqr = (Fp , Fq , Fr ) passed from vertex to fragment shader as varying, containing:

Fp = [0, 1] (1)
Fq = y (2)
Fr = y ∗ (1 + Fp ) (3)

Fp is either 0 for bottom vertices, or 1 for top vertices

Fq is the y value of the vertex
Fr is doubled y value for top vertex, but just y for bottom vertex

The values for each fragments Fpqr vector are linearly interpolated via the GPU (as a varying vec3)
Linear interpolation (lerp) is the equation:

a ∗ (1 − t) + b ∗ t = c
We can use values in Fpqr as follows:

Fp = t (4)
F q = c0 (5)
F r = c1 (6)

And:

a = y0
b = y1
Where:
y0 is the lowest y value of the triangle, and
y1 is the highest y value of the triangle

Now we have a system of equations (the lerping of Fq and Fr ):

y0 ∗ (1 − Fp ) + 1 ∗ y1 ∗ Fp = Fq (7)
y0 ∗ (1 − Fp ) + 2 ∗ y1 ∗ Fp = Fr (8)

We can solve for y1 (subract (7) from (8) move everying to the right-hand side):
Fr − Fq
y1 =
Fp

1
We can plug this back into the (7) and calculate y0 (steps not shown):
2Fq − Fr
y0 =
1 − Fp
Now let’s consider a triangle TABC :

TA = (8, 14)
TB = (8, 6)
TC = (12, 14)

And their T∗pqr values:

TApqr = (1, 14, 28)

TBpqr = (0, 6, 6)
TCpqr = (1, 14, 28)

And a fragment F from this triangle at the location (9, 12). The Fpqr vector for this fragment will be
(lerped from triangle TABC ):

Fp = 0.75
Fq = 12
Fr = 22.5

========[link]Here’s an image of this example[link]========

We can plug in our example, Fpqr = (0.75, 12, 22.5):

y0 ∗ (0.25) + 1 ∗ y1 ∗ 0.75 = 12 (9)

y0 ∗ (0.25) + 2 ∗ y1 ∗ 0.75 = 22.5 (10)

Solving the system:

22.5 − 12
y1 =
0.75
10.5
=
0.75
= 14

Which is indeed the highest y value of our triangle.

Once again plugging in our example, Fpqr = (0.75, 12, 22.5):

24 − 22.5
y0 =
0.25
1.5
=
0.25
=6

Which is indeed the lowest y value of our triangle.

2
From here, we can determine the height of the triangle:

Theight = y1 − y0
And the height of our fragment relative to y0 :

Fheight = Theight ∗ Fp
I believe it should be possible to use Fheight to modify the depth value of the fragment, but this is the part
I’m a bit fuzzy on, I’m not sure if it’d be as simple as:

gl F ragDepth = gl F ragCoord.z + Fheight

Or if I’d need to somehow involve the near and far plane and scale Fheight into the [0,1] range, or perhaps
something else?