使用 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