OpenGL ES 2.0 Quad Gradient

0
votes

How can one draw a quad gradient with OpenGL ES 2.0?

Unfortunately OpenGL ES 2.0 does not support Quads natively. I'd love to attach a different color to each of the four quad-vertices so that OpenGL would draw a nice gradient between these four points/colors. (just like it does with 3 vertices and a triangle)

How can one get the exact same look with GL_TRIANGLES?

2
iosobjective-copenglopengl-es
What you want seems to be bilinear interpolation across the rectangle. Textures basically provide that functionality. However, you can't just assign your color values to each vertex as a vertex attribute. You need a way to get access to all 4 colors in the vertex shaders. - derhass
So you mean I could pass all 4 colors with each vertex? How would one calculate the result color in the vertex shader then? - Max
possible duplicate of OpenGL: How to render perfect rectangular gradient? - Jherico
It's not a duplicate as I don't want to use a texture every time and it does not answer the question that I asked @derhass - Max
If you want to interpolate between 4 values then they cannot be vertex attributes, because you can't have more than 3 of those at a time. You either need to use a texture, or use a uniform value with the four colors and use texture coordinates to manually do the interpolation in the fragment shader. Using a 2x2 texture basically gives you the same interpolation without a bunch of manual computation in the fragment shader and may be faster. Regardless, you're facing the same problem as the other question, so yes, it's a duplicate. - Jherico

2 Answers

0
votes

If you draw a triangle strip with the same vertices as a quad, you should get the same output visually as you would have with the quad.

The only trick is that you need to reorder your vertices. Consider this shape...

UL---UR
|     |
|     |
|     |
LL---LR

Perhaps you've ordered your vertices LL, LR, UR, UL. This produces a counter-clockwise winding of the face producing the whole of the shape. However, it won't work for a triangle strip, because strips require that the last two vertices of the previous triangle make up one of the edges of the next triangle. That means that the second and third vertices here need to be a diagonal, but instead here they are an edge (LR, UR is the right edge of the quad).

If you reorder your vertices like this LR, UR, LL, UL then you get the following result when treated as a triangle strip..

UL---UR
|    /|
|  /  |
|/    |
LL---LR

OpenGL will then interpret this as two triangles with the vertices LR, UR, LL and LL, UR, UL.

A given quad strip can similarly be converted into a triangle strip by reordering the vertices.

0
votes

Jherico's answer addresses the "make a quad from triangles" part, and derhass' comment hints at a solution to the gradient interpolation part. Bringing them together...

Send your quad as a tristrip (that's better than triangles — you don't need to specify vertices twice, and it costs time to send your VBO to the GPU). Add texture coordinates to each vertex:

UL: (0.0, 1.0)
UR: (1.0, 1.0)
LL: (0.0, 0.0)
LR: (1.0, 0,0)

Then, in your fragment shader, instead of using the texture coordinates (the vertex attribute passed thru the vertex shader as a varying) to lookup in a texture, set your output color based on the texcoord:

varying vec2 texcoord;

main() {
    // simple black-white vertical gradient
    gl_FragColor = vec4(texcoord.y);
}