(radial) gradient using OpenGL ES

Question

I am currently drawing a form using the following code:

GLfloat vertex = // vertex points glLineWidth(2); glEnableClientState(GL_VERTEX_ARRAY); glColor4f(1.0, 0.0, 0.0, 1.0); glVertexPointer(2, GL_FLOAT, 0, vertex); glDrawArrays(GL_LINE_STRIP, 0, vertex_size); glDisableClientState(GL_VERTEX_ARRAY); 

The form that I draw closes, is it possible to fill this form with a (radial) gradient? If so, how to do it?

Answer 1

If you are in ES 1.x, you cannot get a calculated radial gradient per pixel, because the colors are interpolated linearly along the edges. Thus, you can either load the radial gradient texture or build suitable geometry to get an almost radial gradient.

There is no such restriction in ES 2.x because you determine what happens per pixel for yourself. An extremely naive gradient gradient gradient shader can be (pre-encoded, not fully checked by grammar):

 varying mediump vec3 myPosition; uniform mediump vec3 referencePosition; uniform lowp vec4 centreColour, outerColour; [...] mediump float distanceFromReferencePoint = clamp(distance(myPosition, referencePosition), 0.0, 1.0); gl_FragColor = mix(centreColour, outerColour, distanceFromReferencePoint);