(radial) gradient fill using OpenGL ES

Question

I am currently drawing a shape 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 shape I draw closes itself, is it possible to fill this shape with a (radial) gradient? If so, how to go about doing this?

Tommy · Accepted Answer · 2015-10-19T12:41:15.140

14

If you're in ES 1.x then you can't get a computed per-pixel radial gradient because colours are interpolated linearly across faces. So you can either upload a radial gradient texture or build suitable geometry to give a near-radial gradient.

In ES 2.x there's no such restriction because you're defining what happens per-pixel for yourself. An extremely naive radial gradient fragment shader might be (coded extemporaneously, not thoroughly grammar checked):

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);

edited Oct 19 '15 at 12:41

answered Jul 14 '11 at 18:55

Tommy

99,986
12
185
204

2

That would have to be `distance(myPosition, referencePosition)`, though. – class stacker Apr 10 '13 at 07:58
@Tommy I haven't used fragment shaders yet. Any chance you could expand this out into a more complete example? – drewish Aug 16 '14 at 18:01

(radial) gradient fill using OpenGL ES

1 Answers1