iOS版。 OpenGL的。 在曲线下面用梯度填充区域

我需要创build一个像Siri（ SiriAnim ）的声波animationOpenGL我有一个波形：

这是我的代码：

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

但！ 我很困惑，因为我找不到任何渐变的解决scheme。 经过大量的search，我甚至有强烈的怀疑，这样的任务是不可能的（因为GLKBaseEffect *效果，constantColor我认为）。 所以！ 任何人都可以帮我解决这个任务吗？ 这个问题可以用着色器或纹理解决（最糟糕的解决scheme）吗？

祝福你的答案！

Answer 1

虽然这可以用纹理完成，但我认为最简单的方法是使用OpenGL的默认颜色插值。 如果您将绘制的线的顶点设为浅蓝色，而底部的顶点为深蓝色，则GPU会自动插入它们之间的颜色以逐渐改变，并生成您要查找的渐变效果。

在你的代码中实现这个最简单的方法是在你的缓冲区，“线”数组，为每行的每个顶点的颜色，并设置你的着色器输出这个值的空间。 这意味着你将不得不为这个颜色添加input和输出到你的顶点和像素着色器。 这个想法是把它从顶点传递给像素着色器，像素着色器输出未经修改的值。 硬件自动为您处理颜色之间的插值（！）。

许多现代的OpenGL教程都有这样的例子。 LearnOpenGL的Shader教程是一个免费的在线教程 。 如果你有钱的话，我最喜欢的缓冲区，着色器和pipe道本身的解释是在Graham Sellers的OpenGL SuperBible中 。 如果你打算经常使用OpenGL并真正学习它，那么这是一个非常宝贵的桌面参考。