GLSL 著色器入門範例（C 語言 + OpenGL）：變色三角形動畫

概述

本範例展示最基本的 GLSL 4.0 著色器管線：頂點著色器接收位置與顏色屬性，片段著色器輸出插值後顏色。主程式使用 VAO/VBO 管理幾何資料，並示範 uniform 矩陣傳遞與動畫計時器。

著色器原始碼

basic.vert

#version 400
layout(location = 0) in vec3 VertexPosition;
layout(location = 1) in vec3 VertexColor;
out vec3 Color;
uniform mat4 Matrix;
void main() {
    Color = VertexColor;
    gl_Position = Matrix * vec4(VertexPosition, 1.0);
}

basic.frag

#version 400
in vec3 Color;
out vec4 FragColor;
void main() {
    FragColor = vec4(Color, 1.0);
}

主程式 main.c 關鍵模組

1. 著色器編譯與鏈接

void initShader() {
    vShader = glCreateShader(GL_VERTEX_SHADER);
    vs = readText("../basic.vert");
    glShaderSource(vShader, 1, &vv, NULL);
    glCompileShader(vShader);
    // 檢查編譯日誌...

    fShader = glCreateShader(GL_FRAGMENT_SHADER);
    fs = readText("../basic.frag");
    glShaderSource(fShader, 1, &ff, NULL);
    glCompileShader(fShader);

    programHandle = glCreateProgram();
    glAttachShader(programHandle, vShader);
    glAttachShader(programHandle, fShader);
    glLinkProgram(programHandle);
    glUseProgram(programHandle);
}

2. VBO/VAO 初始化

float positionData[] = { -1,-1,0,  1,-1,0,  0,1,0 };
float colorData[]    = { 0.2,0.8,0,  0.4,0.6,0,  0.1,0.9,1 };

void initVBO() {
    glGenBuffers(2, vboHandles);
    glBindBuffer(GL_ARRAY_BUFFER, vboHandles[0]);
    glBufferData(GL_ARRAY_BUFFER, sizeof(positionData), positionData, GL_STATIC_DRAW);
    glBindBuffer(GL_ARRAY_BUFFER, vboHandles[1]);
    glBufferData(GL_ARRAY_BUFFER, sizeof(colorData), colorData, GL_STATIC_DRAW);

    glGenVertexArrays(1, &vaoHandle);
    glBindVertexArray(vaoHandle);
    glEnableVertexAttribArray(0);
    glEnableVertexAttribArray(1);
    glBindBuffer(GL_ARRAY_BUFFER, vboHandles[0]);
    glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 0, NULL);
    glBindBuffer(GL_ARRAY_BUFFER, vboHandles[1]);
    glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 0, NULL);
}

3. 旋轉矩陣構建與每幀更新

float matrix[16] = {
    0.5, 0, -0.866, 0,
    0,   1,  0,      0,
    0.866, 0, 0.5,   0,
    0,   0,  0,      1
}; // 繞 Y 軸旋轉 60 度

void display() {
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_TEST);
    glBindVertexArray(vaoHandle);
    glDrawArrays(GL_TRIANGLES, 0, 3);
    glBindVertexArray(0);

    matrixLocation = glGetUniformLocation(programHandle, "Matrix");
    glUniformMatrix4fv(matrixLocation, 1, GL_TRUE, matrix);
    glutSwapBuffers();
    glutPostRedisplay();
}

執行效果

視窗顯示一個三角形，三頂點顏色分別為綠、青、藍，內部平滑插值。三角形繞 Y 軸旋轉 60 度固定顯示（若將矩陣改為動態計算可產生旋轉動畫）。

編譯與依賴

gcc main.c readtext.c -o glsl_demo -lGLEW -lglut -lGL -lGLU

需提供 readtext.h/c 讀取著色器檔案工具函式。

學習重點

• layout(location = N) 明確指定屬性索引，避免 glGetAttribLocation 查詢。
• VAO 封裝頂點屬性綁定狀態，繪製前只需 glBindVertexArray。
• Uniform 矩陣以列主序上傳，GL_TRUE 表示轉置（C 陣列為行主序）。
• 著色器錯誤日誌檢查是開發必備步驟。