使用 OpenGL 遇到的 Bug - 'color undeclared'

'color' undeclared

code：

vetex shader program

vertex_code = """
    attribute vec2 position;    
    attribute vec4 color;      
    varying vec4 v_color;
    void main()
    {
      gl_Position = vec4(position, 0.0, 1.0);
      v_color= color;
    } """

fragment shader program

fragment_code = """
    varying vec4 v_color;
    void main() { gl_FragColor = color; } """

缘由：

着色器变量：attribute变量、uniform变量，varying变量-内插（interpolate）的过程

varying变量的做用是从顶点着色器向片元着色器传值，varying变量只能是float类型的，只要在片元着色器中也声明同名varying变量，顶点着色器赋给该变量的值就会自动传入片元着色器（在给片元着色器中的同名varying变量赋值以前，有内插的过程，1.0传过去不必定是1.0）

注意：顶点着色器中的varying变量值不是直接传递，会先进行内插，内插就像补间动画同样

内插（interpolate）

插值，缺乏数据才须要插值，好比想要把一系列散点连成平滑曲线，相邻已知点之间缺乏不少点，此时就须要经过内插填补缺乏的数据，最终平滑曲线上除已知点以外的全部点都是插值获得的

例如: Photoshop的自定义渐变，咱们只须要设置几个点的颜色就能自动生成一整条渐变带，这几个点之间的颜色都是经过内置插值算法获得的

varying变量的值传递到片元着色器以前进行的插值过程被称为内插，一样，咱们也能够利用内插生成渐变

source：黯羽清扬 - varying变量与内插_WebGL笔记7

attribute vec4 color => declare vextex colors
varying vec4 v_color => declare varying variables
v_color = color => set value for varying color

解决：

在 fragment shader program 中使用 vertex 中已经定义的 varying color => v_color

gl_FragColor = color => gl_FragColor = v_color