主題

【程式】OpenGL 3.3 使用貼圖

Shark | 2021-07-18 11:42:16 | 巴幣 1228 | 人氣 1147

前篇：OpenGL 3.3 架設基本繪圖管線
前一篇還沒有使用uniform buffer、texture和sampler，這次要加上這三種物件，並且寫比較複雜的shader。

整個系列可以看這篇目錄，「Direct3D與OpenGL」的部分。
Shark流程式教學一覽

本篇使用的圖檔，可以下載回去用，把檔名改成「char1.png」放在與exe檔相同資料夾。

用這個軟體做的
キャラクターなんとか機 http://khmix.sakura.ne.jp/download.shtml

#define GL_GLEXT_PROTOTYPES
#define GLX_GLXEXT_PROTOTYPES
#include<GL/gl.h> //間接引用GL/glext.h
#include<GL/glx.h> //間接引用X11/Xlib.h

#include<stdio.h>
#include<time.h> //使用clock_gettime()和nanosleep()
#include<fcntl.h> //使用open()
#include<sys/stat.h> //使用fstat()
#include<gdk-pixbuf/gdk-pixbuf.h> //讀取圖檔
#include<x86intrin.h> //使用_rotr()和__bswapd()

const int WINDOW_W=400,WINDOW_H=400;
//OpenGL global狀態
Display* dsp;
Window window;
GLXContext context;
//OpenGL物件
uint32_t programID;
uint32_t vertexData;
uint32_t vertexArrayObj;
//本篇新增的物件
uint32_t uniformBuffer;
uint32_t texture;
uint32_t sampler;

//要傳給GPU的資料在下面說明

//這些函式在下面說明
static int initGL();
static int initSettings();
static void nextFrame();
static void deinitSettings();
static void deinitGL();
static char* loadWholeFile(const char* fileName, uint32_t* outFileSize);
static int loadShader(uint32_t shaderID, const char* fileName);
static void initVertexData1(uint32_t* outVertexData, uint32_t* outVao);
static uint32_t loadTexture(const char* fileName);

//這個函式留待之後介紹layout時解說
static void initVertexData2(uint32_t* outVertexData, uint32_t* outVao);

int main(){
  dsp = XOpenDisplay( NULL );
  window = XCreateSimpleWindow(dsp,
    DefaultRootWindow(dsp),
    0, 0,WINDOW_W, WINDOW_H, //xywh
    0, 0, 0);

  if(initGL()){
    printf("Can not initialize OpenGL\n");
    return 0;
  }
  if(initSettings()){
    return 0;
  }

  //設標題
  XStoreName(dsp, window, "simplepipeline");
  //設定事件mask
  Atom wmDelete = XInternAtom(dsp, "WM_DELETE_WINDOW", True);
  XSetWMProtocols(dsp, window, &wmDelete, 1);
  XMapWindow( dsp, window );

  XEvent evt;
  int isEnd=0;
  struct timespec prevTime,nextTime;
  while(!isEnd){
    clock_gettime(CLOCK_MONOTONIC, &prevTime);
    //接收事件
    while(XPending(dsp)){
      XNextEvent(dsp, &evt);
      switch(evt.type){
      case ClientMessage:
        if(evt.xclient.data.l[0]== wmDelete){ isEnd=1; }
        break;
      }
    }

    //正式寫遊戲時，遊戲邏輯放在此處

    nextFrame(); //更新畫面

    clock_gettime(CLOCK_MONOTONIC, &nextTime); //單位為奈秒(10^-9秒)
    int64_t elapsedTime = (nextTime.tv_sec-prevTime.tv_sec)*1000000000
      +(nextTime.tv_nsec-prevTime.tv_nsec); //求出經過的奈秒數
    struct timespec sleepTime={0, 16000000-elapsedTime};
    if(sleepTime.tv_nsec>0){ nanosleep(&sleepTime, NULL); }
  }

  XDestroyWindow( dsp, window );
  XFlush(dsp);
  deinitSettings();
  deinitGL();
  XCloseDisplay( dsp );
  return 0;
}

將視窗尺寸設得比較大以配合圖檔，且多了一些header用來讀檔案。

這次要傳給GPU的資料如下

//uniform buffer
const float WINDOW_SIZE[]={WINDOW_W, WINDOW_H};

//頂點資料
typedef struct{
  float pos[2];
  short texCoord[2];
  uint32_t color;
} VertexData1;
VertexData1 VERTEX_DATA1[4]={
  {100,0,  0,  0,  0xffffffff},
  {100,400,0,  400,0xffffffff},
  {400,0,  300,0,  0xffffffff},
  {400,400,300,400,0xffffffff},
};

typedef struct{
  float pos[8];
  short texCoord[8];
  uint32_t color[4];
} VertexData2;
VertexData2 VERTEX_DATA2={
  {100,0,100,400,400,0,400,400},
  {0,0,0,400,300,0,300,400},
  {0xffffffff,0xffffffff,0xffffffff,0xffffffff},
};

資料跟D3D篇一樣，只是那篇使用C++而本篇使用C，純C用struct定義資料型態必須寫成typedef struct。
說明照搬那邊的：

VERTEX_DATA1和VERTEX_DATA2是相同頂點資料用不同layout儲存，本篇只用1，2等之後寫layout的教學再使用。
這次頂點資料有三項：位置、貼圖坐標、顏色，之前說過D3D和OpenGL的畫面坐標是-1~1、貼圖坐標是0~1，但2D畫面習慣上以畫面左上角為原點、以像素為單位，這裡頂點資料就這樣給，在shader裡換算成D3D和OpenGL標準。
雖然本篇故意在vertex shader裡算，這裡只有4個頂點，在CPU把4個頂點全部算好才傳給GPU其實效能不會差多少，但如果一次畫很多個三角形(如tilemap和粒子系統)，在vertex shader裡算比較方便。

坐標是這樣，右圖的ABCD是頂點順序。

多數繪圖軟體和函式庫以左上角為原點，但上傳貼圖的函式glTexImage2D()規定給它的資料以左下角為原點，所以圖在OpenGL內部是倒立的狀態。不過OpenGL讀取貼圖也以左下角為原點，兩次顛倒抵消，能畫出正立的圖片。
但如果用framebuffer object把圖畫在記憶體內的點陣圖，再把它當成貼圖畫在另一張點陣圖，就要對坐標特別處理了。

shader這次採用讀外部檔的方式，由於OpenGL 3.3沒有提供事先編譯的方式，主程式要把shader原始碼載入，在執行時編譯。
準備這兩個檔案，因為GLSL程式起點固定叫做main()，不能把兩個shader放在同一個檔案。

//usetexture.vert.glsl
#version 330
layout(std140) uniform uniform1{
  vec2 windowSize;
};
uniform sampler2D sampler1; //GLSL的sampler物件包含sampler和貼圖

//頂點資料，對應到struct VertexData1
layout(location=0) in vec2 inPos;
layout(location=1) in vec2 inTexCoord;
layout(location=2) in vec4 inColor;

//vertex傳給fragment shader的資料
varying vec2 varTexCoord;
varying vec4 varColor;

void main(){
  vec2 outPos=inPos*vec2(2,-2)/windowSize+vec2(-1,1);
  gl_Position=vec4(outPos, 0, 1);
  ivec2 texSize=textureSize(sampler1, 0);
  varTexCoord=inTexCoord/texSize;
  varColor=inColor;
}

//usetexture.frag.glsl
#version 330
uniform sampler2D sampler1;

varying vec2 varTexCoord;
varying vec4 varColor;

void main(){
vec4 texColor=texture(sampler1, varTexCoord);
gl_FragColor=texColor*varColor;
}

「shader的輸入與輸出」提到的輸出入在這裡出現了，看本篇時可以跟那篇對照著看。

shader裡面的處理方式跟D3D篇一樣，以下是從D3D篇照抄：

vertex shader坐標轉換的算式怎麼求出，回想一下學校學過的二元一次方程式。
畫面坐標要把左邊的換算成右邊

二元一次方程式的標準式「x'=xa+b, y'=yc+d」，把兩組坐標代進去，得到兩組聯立方程式

X坐標
-1 = 0 + b
1 = windowW×a + b Y坐標
1 = 0 + d
-1 = windowH×c + d

解出a,b,c,d如下
  x' =( 2/windowW)x - 1
  y' =(-2/windowH)y + 1
因為shader可以一次計算四維向量，可以寫成這樣
  outPos = inPos×(2,-2)/(windowW, windowH) + (-1,1)

貼圖坐標只要除以貼圖寬高即可，內建函式textureSize()可以取得貼圖寬高。
顏色就原封不動傳給rasterizer內插。

fragment shader讀取貼圖裡的像素，跟頂點資料裡的顏色相乘。

OpenGL 3.3雖然不能事先編譯，但有一個工具glslangValidator可以在把shader包進主程式前檢查語法。Fedora要裝glslang的套件；Ubuntu要20.04版，Mint要20版以後才有這個套件，名稱是glslang-tools。
Windows的話就自己去官網找下載的地方。
https://www.khronos.org/opengles/sdk/tools/Reference-Compiler/

像這樣打可檢查語法錯誤

glslangValidator usetexture.vert.glsl
glslangValidator usetexture.frag.glsl

它會根據副檔名判斷這是哪一階段的shader、語言是GLSL還是HLSL，把檔案命名為.vert.glsl和.frag.glsl目的在此。

如果要查uniform block裡各變數的位置作為寫C struct的參考，好像必須用「glslangValidator -i 檔名」再從裡面找出offset資訊，不知道有沒有更簡單的方法。
另外如果想在OpenGL比較新的版本用SPIR-V，將程式碼編譯成SPIR-V也是用這個工具。

static int initGL(){
  const int fbConfigAttr[]={
    GLX_X_RENDERABLE,True,
    GLX_DOUBLEBUFFER,True,
    GLX_X_VISUAL_TYPE, GLX_TRUE_COLOR,
    GLX_RED_SIZE, 8, GLX_GREEN_SIZE, 8, GLX_BLUE_SIZE, 8, GLX_ALPHA_SIZE,8,
    None
  };
  int fbCount;
  GLXFBConfig* fbc = glXChooseFBConfig(dsp, DefaultScreen(dsp),fbConfigAttr,&fbCount);
  if(fbc==NULL){ return 1; }

  //產生OpenGL 3.3 context
  const int contextAttribs[] = {
    GLX_CONTEXT_MAJOR_VERSION_ARB,3,
    GLX_CONTEXT_MINOR_VERSION_ARB,3,
    GLX_CONTEXT_PROFILE_MASK_ARB, GLX_CONTEXT_CORE_PROFILE_BIT_ARB,
    None,
  };
  context = glXCreateContextAttribsARB(dsp, fbc[0], 0,True, contextAttribs);
  XFree(fbc);
  if(context==0){ return 1; }
  glXMakeCurrent(dsp, window, context);

  //設定Vsync
  PFNGLXSWAPINTERVALMESAPROC glXSwapIntervalMESA=
    (PFNGLXSWAPINTERVALMESAPROC)glXGetProcAddress("glXSwapIntervalMESA");
  if(glXSwapIntervalMESA){
    glXSwapIntervalMESA(0);
  }
  PFNGLXSWAPINTERVALSGIPROC glXSwapIntervalSGI=
    (PFNGLXSWAPINTERVALSGIPROC)glXGetProcAddress("glXSwapIntervalSGI");
  if(glXSwapIntervalSGI){
    glXSwapIntervalSGI(0);
  }
  return 0;
}

static void deinitGL(){
  glXDestroyContext(dsp, context);
}

initGL()、deinitGL和之前一樣。

static void nextFrame(){
  glClear(GL_COLOR_BUFFER_BIT);
  glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
  glXSwapBuffers(dsp, window);
}

glDrawArrays()第一參數的幾何形狀改成GL_TRIANGLE_STRIP，第三參數的頂點數量改成4。
本篇要講的東西很多，先不介紹各種幾何形狀。雖然OpenGL 3.0以後把四邊形列為deprecated，OpenGL ES也一開始就沒支援四邊形，只有四個頂點的情況下用triangle strip可以畫四邊形。

static void deinitSettings(){
  glDeleteProgram(programID);
  uint32_t buffers[]={vertexData, uniformBuffer};
  glDeleteBuffers(2, buffers);
  glDeleteVertexArrays(1, &vertexArrayObj);

  glDeleteTextures(1, &texture);
  glDeleteSamplers(1, &sampler);
}

要刪除的物件增加3個。
buffer物件有兩個，這裡利用glDeleteBuffers()可以一次刪除多個物件的特性，傳入長度為2的陣列。

接下來的initSettings()是主題，用到的輔助函式會在旁邊解說。

-Vertex & Fragment Shader-

//傳回來的指標要用free()釋放
static char* loadWholeFile(const char* fileName, uint32_t* outFileSize){
  int file=open(fileName, O_RDONLY);
  if(file==-1){
    *outFileSize=0;
    return NULL;
  }
  struct stat buf;
  fstat(file, &buf);
  long fileSize=buf.st_size;
  char* data=(char*)malloc(fileSize);
  read(file, data, fileSize);
  close(file);
  *outFileSize=fileSize;
  return data;
}

//傳回0代表成功、非0代表失敗
static int loadShader(uint32_t shaderID, const char* fileName){
  uint32_t fileSize;
  const char* shaderCode=loadWholeFile(fileName, &fileSize);
  if(shaderCode==NULL){
    return 1;
  }
  glShaderSource(shaderID, 1, &shaderCode, &fileSize);
  free((void*)shaderCode);
  glCompileShader(shaderID);
  //檢查shader錯誤
  int ret;
  glGetShaderiv(shaderID, GL_COMPILE_STATUS, &ret); //ret=0代表有錯誤
  if(!ret){
    int infoLen;
    glGetShaderiv(shaderID, GL_INFO_LOG_LENGTH, &infoLen); //取得訊息長度
    char info[infoLen]; //配置空間
    glGetShaderInfoLog(shaderID, infoLen, NULL, info); //取得訊息
    printf("%s:\n%s",fileName, info);
  }
  return !ret;
}

//傳回0代表成功，非0代表失敗
static int initSettings(){
  //compile vertex shader
  uint32_t vsID=glCreateShader(GL_VERTEX_SHADER);
  loadShader(vsID, "usetexture.vert.glsl");
  //compile fragment shader
  uint32_t fsID=glCreateShader(GL_FRAGMENT_SHADER);
  loadShader(fsID, "usetexture.frag.glsl");

  //create program object
  programID=glCreateProgram();
  glAttachShader(programID, vsID);
  glAttachShader(programID, fsID);
  glLinkProgram(programID);
  glDetachShader(programID, vsID);
  glDetachShader(programID, fsID);
  glDeleteShader(vsID); //之後不會再用到shader物件，可刪除
  glDeleteShader(fsID);
  //check program error
  int ret;
  glGetProgramiv(programID,GL_LINK_STATUS, &ret);
  if(!ret){
    int infoLen;
    glGetProgramiv(programID, GL_INFO_LOG_LENGTH, &infoLen);
    char info[infoLen];
    glGetProgramInfoLog(programID, infoLen, NULL, info);
    printf("program linking:\n%s", info);
    glDeleteProgram(programID);
    return 1;
  }
  glUseProgram(programID);

loadWholeFile()用到的Linux API函式請參照這篇：檔案操作—Linux篇，作業系統沒有直接提供「傳入檔名→讀取整個檔案」的函式，但這功能有時候會用到，寫一個函式做這件事。

把shader程式碼讀入記憶體之後，按照「OpenGL 3.3 架設基本繪圖管線」的方法建立shader與program物件、檢查error。

-Vertex buffer & Input assembler-

static void initVertexData1(uint32_t* outVertexData, uint32_t* outVao){
  //vertex buffer
  glGenBuffers(1, outVertexData);
  glBindBuffer(GL_ARRAY_BUFFER, *outVertexData);
  glBufferData(GL_ARRAY_BUFFER, sizeof(VERTEX_DATA1),VERTEX_DATA1, GL_STATIC_DRAW);

  //vertex array object
  glGenVertexArrays(1,outVao);
  glBindVertexArray(*outVao);
  glEnableVertexAttribArray(0);
  glVertexAttribPointer(0, 2, GL_FLOAT,0,
    sizeof(VertexData1), 0);
  glEnableVertexAttribArray(1);
  glVertexAttribPointer(1, 2, GL_SHORT,0,
    sizeof(VertexData1), (void*)offsetof(VertexData1, texCoord));
  glEnableVertexAttribArray(2);
  glVertexAttribPointer(2, GL_BGRA, GL_UNSIGNED_BYTE,1,
    sizeof(VertexData1), (void*)offsetof(VertexData1, color));
}

//initSettings()內容
//vertex data & vertex array object
initVertexData1(&vertexData, &vertexArrayObj);

建buffer和vertex array物件的方法跟「OpenGL 3.3 架設基本繪圖管線」一樣，本篇頂點有三項資料，要呼叫三次glEnableVertexAttribArray()和glVertexAttribPointer()設定格式。glVertexAttribPointer()的參數是什麼意思留待下一篇介紹。

-Uniform buffer-

  //uniform buffer
  glGenBuffers(1, &uniformBuffer);
  glBindBuffer(GL_UNIFORM_BUFFER, uniformBuffer);
  glBufferData(GL_UNIFORM_BUFFER, sizeof(WINDOW_SIZE), WINDOW_SIZE, GL_STATIC_DRAW);

  //將這個物件與shader裡的buffer物件對應
  uint32_t uniformIndex=glGetUniformBlockIndex(programID, "uniform1");
  glUniformBlockBinding(programID, uniformIndex, 2);
  glBindBufferBase(GL_UNIFORM_BUFFER, 2, uniformBuffer);

本篇新增的東西之一。與vertex buffer一樣是buffer所以建立的方法很像，只是bind的第一參數換成GL_UNIFORM_BUFFER。

-Sampler-

  //sampler
  glGenSamplers(1, &sampler);
  glSamplerParameteri(sampler, GL_TEXTURE_MAG_FILTER, GL_LINEAR); //default
  glSamplerParameteri(sampler, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
  glSamplerParameteri(sampler, GL_TEXTURE_WRAP_S, GL_REPEAT); //default
  glSamplerParameteri(sampler, GL_TEXTURE_WRAP_T, GL_REPEAT); //default

  //將這個物件與shader裡的sampler物件對應
  int location=glGetUniformLocation(programID, "sampler1");
  glUniform1i(location, 2);
  glBindSampler(2, sampler);

本篇新增的東西之二。跟大部分OpenGL物件一樣用Gen函式產生識別碼，不過修改sampler屬性不需要先bind，因為操作sampler的函式用第一參數指定要操作哪個sampler。
FILTER和WRAP是什麼請參照這篇貼圖的部分：shader的輸入與輸出，MAG_FILTER和MIN_FILTER分別設定放大和縮小要做什麼處理，WRAP_S和WRAP_T分別是貼圖的X坐標和Y坐標，兩個方向可以用不同鋪排方式。
OpenGL wiki: Sampler Object
有幾行有標示「//default」，sampler物件建好之後就會填入一些預設值，這幾行剛好跟預設的值相同，把這幾行拿掉執行結果不會變。

-Texture-

//讀取圖檔、解碼、產生texture物件
//成功傳回OpenGL物件識別碼，失敗傳回0
static uint32_t loadTexture(const char* fileName){
  //用gdk-pixbuf讀取圖檔，把RGBA值存在一個叫pixels的變數
  GError* error=NULL;
  GdkPixbuf* pixbuf = gdk_pixbuf_new_from_file(fileName,&error);
  if(pixbuf==NULL){
    return 0;
  }
  int w = gdk_pixbuf_get_width(pixbuf);
  int h = gdk_pixbuf_get_height(pixbuf);
  uint32_t* pixels = (uint32_t*)malloc(w*h*4);
  GdkPixbuf* outPixbuf=gdk_pixbuf_new_from_data((uint8_t*)pixels,
    GDK_COLORSPACE_RGB, 1,8,w,h,w*4,NULL,0);
  gdk_pixbuf_copy_area(pixbuf,0,0,w,h,outPixbuf,0,0);
  g_object_unref(pixbuf);
  g_object_unref(outPixbuf);
  //RGBA轉BGRA
  uint32_t* tempP=pixels;
  for(int i=0; i<w*h; i++,tempP++){
    *tempP=_rotr(__bswapd(*tempP), 8);
  }

  //建立texture物件
  uint32_t textureID;
  glGenTextures(1, &textureID);
  glBindTexture(GL_TEXTURE_2D, textureID);
  glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA8, w,h,0, GL_BGRA,GL_UNSIGNED_BYTE, pixels);
  glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAX_LEVEL, 0); //設mipmap層數
  free(pixels);
  return textureID;
}

//initSettings()內容
  //texture
  glActiveTexture(GL_TEXTURE2); //目前要操作2號slot
  texture = loadTexture("char1.png");

本篇新增的東西之三，用到一個輔助函式loadTexture()。用一個函式庫：gdk-pixbuf讀取圖檔和解碼，方法參照這篇：讀取圖檔的方法-Linux篇。
再抄一段D3D篇的過來：PNG、JPG、webP這些編碼過的格式不能給GPU使用，因為GPU讀取貼圖需要迅速找到任意位置的像素(即隨機存取，random access)，這些格式必須完全解碼才能得知每個像素的值。用在GPU的壓縮格式必須設計成能隨機存取，D3D和OpenGL有支援一些壓縮格式，以後用到再介紹。

gdk-pixbuf解碼出來的byte順序是RGBA，之後把它轉換成BGRA。R,G,B,A四個分量，每個分量8bit剛好形成一個32位元整數，四個byte的順序D3D和OpenGL可以支援RGBA(最低位元組是R)和BGRA(最低位元組是B)，筆者選用BGRA的理由是大部分繪圖軟體的十六進位顏色值都是BGR，可以直接把軟體裡的值複製貼上到程式裡。
只用C/C++語法轉換byte順序有點麻煩，這裡用兩個組合語言指令做這工作：bswap和ror，

__bswapd()和_rotr()是所謂的intrinsic function，有些組合語指令沒有直接對應的C/C++語法，C/C++只能用函式的型式提供功能，這些函式編譯後會直接轉換成組合語言指令，不會產生函式呼叫。

之後建立貼圖物件，老樣子的Gen、Bind兩步驟，再用glTexImage2D()設定貼圖格式並上傳資料。參數如下：
1：target。glBindTexture()把貼圖ID設給一個叫GL_TEXTURE_2D的變數，然後glTexImage2D()讀取這個變數得知要操作哪個貼圖物件。
貼圖種類有很多，除了本篇用的2D貼圖以外，還有1D、3D、cube map、貼圖陣列等等。
2：如果有使用mipmap且建立物件時就要上傳mipmap，要用這個參數指定層數，不使用mipmap就填0。
3：在顯示記憶體裡以何種格式儲存。
4、5：寬高。
6：border。是早期版本的功能，但現在的OpenGL取消了，必須填0。
7、8：你傳進去的資料(第9參數)是什麼格式，7是有幾個顏色分量和byte順序，8是各分量是什麼型態。
9：要上傳的資料，byte數會從寬高和格式求出。

3,7,8全部可以填什麼格式要看官方文件
OpenGL wiki: GLAPI/glTexImage2D
內部格式和第7,8參數如果是不同格式，GPU會做轉換，如果不能轉換就產生error code，取得error code的方法以前提過，是用glGetError()。
內部格式可以填這篇文件裡的Base Internal Formats讓GPU自行決定各分量bit數，也可以填Sized Internal Formats指定bit數；不需要指定byte順序，GPU會看情況自行決定。
下面還有Sized Depth and Stencil Internal Formats和Compressed Internal Formats兩個表，要求GPU配置一塊depth或stencil buffer也是用這個函式，文件裡有列出壓縮格式但上傳壓縮過的貼圖要用另一個函式：glCompressedTexImage2D()。

下一行「glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAX_LEVEL, 0)」絕對不能少，本篇沒有用到mipmap的功能，但貼圖物件被建出來時是設定成要套用mipmap，如果沒準備好mipmap就不能使用這個物件，所以要用這一行告訴OpenGL這個貼圖不用mipmap。
(筆者有一次因為沒打這行卡了好幾個小時)

-Rasterizer, depth, stencil, and blend-

  //rasterizer
  glDisable(GL_CULL_FACE); //default
  glDisable(GL_MULTISAMPLE);
  glViewport(0, 0, WINDOW_W, WINDOW_H);

  //depth and stencil
  glDisable(GL_DEPTH_TEST); //default
  glDisable(GL_STENCIL_TEST); //default

  //blend
  glEnable(GL_BLEND);
  glBlendEquation(GL_FUNC_ADD); //default
  glBlendFuncSeparate(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA, GL_ONE, GL_ONE_MINUS_SRC_ALPHA);

  const float color[]={1,1,1,1};
  glClearColor(color[0],color[1],color[2],color[3]);
  return 0;
}
//initSettings()結束

rasterizer、depth和stencil跟以前一樣，只有blend換了算式，改成正式繪圖軟體使用的。
  (Sc, Sa)：pixel shader輸出的顏色和alpha，數值範圍0~1
  (Dc, Da)：畫面上的顏色和alpha
    color = ScSa + Dc(1-Sa)
    alpha = screen(Sa, Da) = Sa + Da(1-Sa)
  screen()是圖層模式的濾色模式

glClearColor()把背景設成白色，且把alpha設成1簡化blend的算式。如果畫面的alpha不是1，那其實D3D和OpenGL的blend設定湊不出正確的alpha blend算式，要用premultiply alpha的技巧，讀取圖檔時做一點特別處理。
以前有寫過一篇筆記：premultiply alpha的妙用

如果檔名是usetexture.c，用這個指令build

gcc usetexture.c -o usetexture -s -Os -lX11 -lGL `pkg-config --cflags --libs gdk-pixbuf-2.0`

比上次多了`pkg-config --cflags --libs gdk-pixbuf-2.0`是因為用gdk-pixbuf讀取圖檔。

執行的樣子。

uniform buffer、texture、sampler這三種物件如何將主程式和shader的物件對應，可以想成顯卡少女的工作臺有個置物櫃，有很多格子。

跟D3D11不一樣的是，OpenGL所有shader階段共用一個置物櫃，且把貼圖和sampler放在同一個格子。program物件裡有一張表把變數名稱和格子編號對應，由於OpenGL要把全部階段的shader連結成一個program才能使用，這個對應表是全部階段共用。
(註：有兩個擴充：ARB_shading_language_420pack和ARB_separate_shader_objects會改變本節介紹的規則，因為分別是4.2與4.1版才列為標準配備，本篇不介紹)

本篇的shader裡有這兩段，其中的uniform1和sampler1是變數名稱，兩階段同名的變數會視為同一個物件。

//vertex shader
layout(std140) uniform uniform1{
vec2 windowSize;
};
uniform sampler2D sampler1;

//fragment shader
uniform sampler2D sampler1;

link之後program會記住裡面有"uniform1"和"sampler1"兩個變數，留待之後對應到格子。

變數名稱與格子的對應，以及指示顯卡少女把物件放進格子，是在主程式裡做。
這一段是設定uniform buffer

//填對應表，將名稱"uniform1"對應到2號
uint32_t uniformIndex=glGetUniformBlockIndex(programID, "uniform1");
glUniformBlockBinding(programID, uniformIndex, 2);
//將物件"uniformBuffer"放入2號格子
glBindBufferBase(GL_UNIFORM_BUFFER, 2, uniformBuffer);

格子的索引是從0開始，本篇故意用2。
不知為何不用一個函式直接填入(programID, "uniform1", 2)就好，還要取得uniformIndex再用另一個函式設定，但這就是OpenGL的規定。

上面說對應表是存在program物件裡，如果有3個program物件，要呼叫3次glGetUniformBlockIndex()和glUniformBlockBinding()分別設定對應，但只要呼叫一次glBindBufferBase()就可以3個program共用這個uniform buffer。

這一段是設定sampler物件

//填對應表，將名稱"sampler1"對應到2號
int location=glGetUniformLocation(programID, "sampler1");
glUniform1i(location, 2);
//將物件"sampler"放入2號格子
glBindSampler(2, sampler);

同樣要用一個暫時變數location。
glGetUniformLocation()用第一參數指定要操作哪個program，但glUniform1i()沒有programID的參數，它用前面的glUseProgram()決定要操作的program。OpenGL有個討厭的地方是有些函式只由參數決定行為，但有些函式會讀取內部的全域變數，規則不一致。

texture物件的話，因為GLSL的sampler物件也包含貼圖，sampler部分的前兩行也同時設定texture的格子對應。
把物件放到2號格子要這樣做

//設全域變數，設定之後要操作2號格子
glActiveTexture(GL_TEXTURE2);
//將物件"textureID"放入2號格子，本篇是在loadTexture()裡呼叫此
glBindTexture(GL_TEXTURE_2D, textureID);

格子編號不是填數字，而是用常數GL_TEXTURE0、GL_TEXTURE１……，這些是連續整數，所以也可以用「GL_TEXTURE0+i」的方式。

可以做到這樣，在vertex和fragment shader用不同的變數名稱，但是對應到相同格子。
但這會讓人寫程式混亂，同一個slot最好還是用相同名稱。

//vertex shader
uniform sampler2D sampler1;

//fragment shader
uniform sampler2D sampler2;

//主程式
int location = glGetUniformLocation(programID, "sampler1");
glUniform1i(location, 2);
location = glGetUniformLocation(programID, "sampler2");
glUniform1i(location, 2);

具體有幾個格子隨硬體、驅動程式和作業系統而異，要用glGetIntegerv()查詢以下的值：
GL_MAX_VERTEX_UNIFORM_BLOCKS
GL_MAX_FRAGMENT_UNIFORM_BLOCKS
GL_MAX_VERTEX_TEXTURE_IMAGE_UNITS
GL_MAX_TEXTURE_IMAGE_UNITS
…………
在命令列打「glxinfo -B -l」會列出目前環境中OpenGL各功能的上限，其中有這些值。
參考 OpenGL wiki: Resource limitations
OpenGL規格會要求晶片廠商支援一定數量以上，照這篇說明，3.3版至少有12格uniform buffer(編號0~11)，16格sampler。

sampler物件是OpenGL 3.3版新增的東西，3.2版以前的做法是每個貼圖物件都內附一個sampler，想設定取樣方式要修改貼圖屬性，如果看OpenGL比較早版本的教學會看到這種用法。

glBindTexture(GL_TEXTURE_2D, textureID);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);

查這兩個函式的說明會看到很多相同的設定值
glTexParameter
glSamplerParameter

#程式 #OpenGL #Linux

ETH官方钱包

【程式】OpenGL 3.3 使用貼圖

創作回應

作者相關創作

相關創作

更多創作