iOS. OpenGL. Fill area with gradient under curve line - ios

Question

I need to create a sound wave animation like Siri (SiriAnim)
With OpenGL I'v got a shape of wave:
Here is my code:
#property (strong, nonatomic) EAGLContext *context;
#property (strong, nonatomic) GLKBaseEffect *effect;
// .....
- (void)setupGL {
[EAGLContext setCurrentContext:self.context];
glEnable(GL_CULL_FACE);
self.effect = [[GLKBaseEffect alloc] init];
self.effect.useConstantColor = GL_TRUE;
self.effect.constantColor = GLKVector4Make(0.0f, 1.0f, 0.0f, 1.0f);
}
// .....
- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect {
glClearColor(_curRed, 0.0, 0.0, 1.0);
glClear(GL_COLOR_BUFFER_BIT);
[self.effect prepareToDraw];
GLfloat line[1440];
for (int i = 0; i < 1440; i += 4) {
float x = 0.002*i - 0.75;
float K = 8.0f;
float radians = DEGREES_TO_RADIANS(i/2);
float func_x = 0.4 *
pow(K/(K + pow(radians-M_PI,4.0f)), K) *
cos(radians-M_PI);
line[i] = x;
line[i+1] = func_x;
line[i+2] = x;
line[i+3] = -func_x;
}
GLuint bufferObjectNameArray;
glGenBuffers(1, &bufferObjectNameArray);
glBindBuffer(GL_ARRAY_BUFFER, bufferObjectNameArray);
glBufferData(
GL_ARRAY_BUFFER,
sizeof(line),
line,
GL_STATIC_DRAW);
glEnableVertexAttribArray(GLKVertexAttribPosition);
glVertexAttribPointer(
GLKVertexAttribPosition,
2,
GL_FLOAT,
GL_FALSE,
2*4,
NULL);
glLineWidth(15.0);
glDrawArrays(GL_LINES, 0, 360);
}
BUT! I'm confused because i can't find any solutions for gradient. After a lot of time of searching I even have a strong suspicion that such task is impossible (because GLKBaseEffect *effect . constantColor i think).
So! Could anyone help me with any solution for this task?
Can this problem be solved with shaders or textures (the worst solution)?
Bless you for your answers!

Answer 1

Although this could be done with a texture, I think the easiest way to accomplish this is by using OpenGL's default color interpolation. If you make the top vertex of the lines you're drawing a light blue, and the bottom vertex a darker blue, the GPU will automatically interpolate the colors between them to gradually change, and produce the gradient effect you're looking for.
The easiest way to implement this in your code is to make room in your buffer, the "lines" array, for the color of every single vertex of the line, and set up your shaders to output this value. That means you'll have to add inputs and outputs for this color to your vertex and pixel shaders. The idea is to pass it from the vertex to the pixel shader, and the pixel shader outputs the value unmodified. The hardware handles the interpolation between colors automatically for you(!).
Many modern OpenGL tutorials have examples of doing this. One free online one is from LearnOpenGL's Shader tutorial. If you have the money, though, my favorite explanation of buffers, shaders, and the pipeline itself is in Graham Sellers' OpenGL SuperBible. If you plan on using OpenGL often and really learning it, it's an invaluable desktop reference.