[CG從零開始] 4. pyopengl 繪製一個正方形

在做了 1～3 的基礎工作後，我們的開發環境基本 OK 了，我們可以開始嘗試利用 pyopengl 來進行繪製了。
本文主要有三個部分

1. 利用 glfw 封裝視窗類，並開啟視窗；
2. 封裝 shader 類，進行編譯、連結、使用；
3. 封裝 VAO、VBO、EBO
4. 完成主函數進行繪製

完整的程式碼在倉庫 (tag: v0.1) https://github.com/MangoWAY/CGLearner/tree/v0.1

1. 利用 glfw 封裝視窗類

為了顯示我們繪製的內容，開啟視窗是必不可少的操作，因此我們來簡單封裝一個視窗類，便於我們後續的學習、呼叫。我們設定 opengl 的版本，向前相容和設定（這倆在 macOS 必須設定），這些其實可以不用太關心，並不影響我們後續的學習程序，感興趣可以看一下 glfw 的官方關於視窗的檔案。

# window_helper.py

import glfw, logging, sys
from OpenGL import GL as gl
log = logging.getLogger(__name__)
class Window:

    class Config:
        def __init__(self,gl_version = (3,3), size = (500,400), title = "cglearn", bgcolor = (0,0.4,0)) -> None:
            self.gl_version = gl_version
            self.size = size
            self.title = title
            self.bgcolor = bgcolor
            
    def __init__(self,config: Config) -> None:
        self.native_window = None
        self.config = config
        self.init(config)

    def set_background(self,r,g,b):
        gl.glClearColor(r, g, b, 0)

    def init(self, config: Config):
        if not glfw.init():
            log.error('failed to initialize GLFW')
            sys.exit(1)
        log.debug('requiring modern OpenGL without any legacy features')
        glfw.window_hint(glfw.CONTEXT_VERSION_MAJOR, config.gl_version[0])
        glfw.window_hint(glfw.CONTEXT_VERSION_MINOR, config.gl_version[1])
        glfw.window_hint(glfw.OPENGL_FORWARD_COMPAT, True)
        glfw.window_hint(glfw.OPENGL_PROFILE, glfw.OPENGL_CORE_PROFILE)

        log.debug('opening window')
        self.native_window = glfw.create_window(config.size[0], config.size[1], config.title, None, None)
        if not self.native_window:
            log.error('failed to open GLFW window.')
            sys.exit(2)
        glfw.make_context_current(self.native_window)
        log.debug('set background to dark blue')
        gl.glClearColor(0, config.bgcolor[0], config.bgcolor[1],config.bgcolor[2])
    

2. 封裝 shader 類

用 OpenGL 完成一次簡單的繪製有一些基本的操作，

1. 需要編寫 shader，然後建立 shader 程式，進行編譯、連結、啟用；
2. 需要建立 VAO，VBO，EBO（可選），來管理資料，傳遞給 shader 進行計算；
3. 在迴圈中呼叫繪製指令來進行繪製；

這一小節我們來封裝一個 shader 類，來完成 shader 的建立、編譯、連結等操作。

建立一個 shader 分幾個步驟：

• 建立 VERTEX 和 FRAGMENT shader；
• 傳送 shader 的程式碼 （string）；
• 編譯 VERTEX 和 FRAGMENT shader；
• 建立 program （shader 程式）；
• 將 VERTEX 和 FRAGMENT shader 附加到 program 上；
• 連結 program；

在渲染前，還要啟用 shader 程式

# shader.py

import sys
from OpenGL import GL as gl
from enum import Enum
import logging
log = logging.getLogger(__name__)

class ShaderType(Enum):
    VERTEX = 0
    FRAGMENT = 1

class Shader:
    def __init__(self) -> None:
        self.vertex_shader = ""
        self.fragment_shader = ""
        self.program_id = -1
        self.shader_ids = []

    def load_shader_source_from_string(self, shader_type: ShaderType, source: str):
        if shader_type == ShaderType.VERTEX:
            self.vertex_shader = source
        elif shader_type == ShaderType.FRAGMENT:
            self.fragment_shader = source
        else:
            logging.error("wrong shader type !")

    # 從檔案讀取 shader，按照普通的文字檔案讀取即可。
    def load_shader_source_from_path(self, shader_type: ShaderType, path: str):
        with open(path,"r") as f:
            source = f.read()
            self.load_shader_source_from_string(shader_type, source)

    # 這個主要是用來列印編譯時候出現的錯誤資訊，不是關鍵，這裡先略去
    def log_shader_info(self, shader_id):
        ...

    # 這個主要是用來列印連結時候出現的錯誤資訊，不是關鍵，這裡先略去
    def log_program_info(self,program_id):
        ...

    def create_program(self):
        # 建立 shader 程式
        self.program_id = gl.glCreateProgram()
        for shader_type in [gl.GL_VERTEX_SHADER, gl.GL_FRAGMENT_SHADER]:
            # 建立 VERTEX 和 FRAGMENT shader
            shader_id = gl.glCreateShader(shader_type)
            # 傳送 shader 程式碼
            if shader_type == gl.GL_VERTEX_SHADER:
                gl.glShaderSource(shader_id, self.vertex_shader)
            else:
                gl.glShaderSource(shader_id, self.fragment_shader)
            log.debug(f'compiling the {shader_type} shader')
            # 編譯 VERTEX 和 FRAGMENT shader
            gl.glCompileShader(shader_id)

            self.log_shader_info(shader_id)
            # 將 VERTEX 和 FRAGMENT shader 附加到 program 上
            gl.glAttachShader(self.program_id, shader_id)
            self.shader_ids.append(shader_id)
        log.debug('linking shader program')
        # 連結 shader 程式
        gl.glLinkProgram(self.program_id)

        self.log_program_info(self.program_id)
        log.debug('installing shader program into rendering state')

    # 啟用 shader 程式
    def use_program(self):
        gl.glUseProgram(self.program_id)

    # 刪除 shader 程式
    def clean_program(self):
        log.debug('cleaning up shader program')
        for shader_id in self.shader_ids:
            gl.glDetachShader(self.program_id, shader_id)
            gl.glDeleteShader(shader_id)
        gl.glUseProgram(0)
        gl.glDeleteProgram(self.program_id)

3. 封裝 VAO、VBO、EBO

VBO 一般用來儲存頂點資料之類的資訊，EBO 一般用來儲存索引資訊，VBO 和 EBO 都表現為 buffer，只不過型別不一樣。OpenGL 是個巨大的狀態機，需要各種設定狀態，每次渲染前都要正確的 bind VBO、EBO 等等，這個時候 可以用 VAO 可以用來管理 VBO 和 EBO 等的資訊，在後續繪製中，只要 bind VAO 即可，不用再 bind VBO、EBO 等，比較方便。關於 VAO、VBO、EBO 的詳細說明，這裡就不過多的解釋了，網上有很多的資料，這裡只是想展示它們的基本用法。

基本的操作順序：

1. 建立 VAO，bind VAO；
2. 建立 VBO，bind VBO，傳送 VBO 資料，設定頂點屬性，啟用頂點屬性；
3. 建立 EBO，bind EBO，傳送 EBO 資料；
4. unbind VAO、VBO、EBO

from OpenGL import GL as gl
import logging, ctypes
log = logging.getLogger(__name__)

# 用來管理 VAO、VBO、EBO
class RendererData:
    def __init__(self) -> None:
        self.vao: VAO = None
        self.vbo: VBO = None
        self.ebo: VBO = None

    def use(self):
        self.vao.bind()

    def unuse(self):
        self.vao.unbind()

    def draw(self):
        self.use()
        gl.glDrawElements(gl.GL_TRIANGLES, len(self.ebo.indices), gl.GL_UNSIGNED_INT, None)
        self.unuse()

    def build_data(self, desp:list, vertices:list, indices:list):
        # create vertex array object
        self.vao = VAO()
        self.vao.create_vertex_array_object()
        self.vao.bind()

        # create vertex buffer object
        self.vbo = VBO()
        self.vbo.vertex_attrib_desps = desp
        self.vbo.vertex_data = vertices
        self.vbo.create_vertex_array_object()
        self.vbo.bind()
        self.vbo.gen_buffer_data()

        # create element buffer object
        self.ebo = EBO()
        self.ebo.indices = indices
        self.ebo.create_index_array_object()
        self.ebo.bind()
        self.ebo.gen_buffer_data()

        # unbind all
        self.vao.unbind()
        self.vbo.unbind()
        self.ebo.unbind()

    def clean(self):
        self.vao.clean()
        self.vbo.clean()
        self.ebo.clean()
        

class VAO:
    def __init__(self) -> None:
        self.vao_id = -1
    
    def clean(self):
        log.debug('cleaning up vertex array')
        gl.glDeleteVertexArrays(1, [self.vao_id])

    def create_vertex_array_object(self):
        log.debug('creating and binding the vertex array (VAO)')
        self.vao_id = gl.glGenVertexArrays(1)

    def bind(self):
        gl.glBindVertexArray(self.vao_id)

    def unbind(self):
        gl.glBindVertexArray(0)
        
# 描述頂點資料的佈局資訊
class VertexAttribDesp:
    def __init__(self) -> None:
        self.attr_id = 0
        self.comp_count = 3
        self.comp_type = gl.GL_FLOAT
        self.need_nor = False
        self.stride = 0
        self.offset = 0

class EBO:
    def __init__(self) -> None:
        self.indices = []
        self.buffer_id = -1

    def create_index_array_object(self):
        self.buffer_id = gl.glGenBuffers(1)

    def bind(self):
        gl.glBindBuffer(gl.GL_ELEMENT_ARRAY_BUFFER, self.buffer_id)

    def unbind(self):
        gl.glBindBuffer(gl.GL_ELEMENT_ARRAY_BUFFER, 0)

    def gen_buffer_data(self):
        array_type = (gl.GLuint * len(self.indices))
        
        gl.glBufferData(gl.GL_ELEMENT_ARRAY_BUFFER, 
                        len(self.indices) * ctypes.sizeof(ctypes.c_uint),
                        array_type(*self.indices),
                        gl.GL_STATIC_DRAW
                        )
    def clean(self):
        log.debug('cleaning up buffer')
        gl.glDeleteBuffers(1, [self.buffer_id])

class VBO:
    def __init__(self) -> None:
        self.vertex_data = []
        self.vertex_attrib_desps = []
        self.buffer_id = -1
    
    def clean(self):
        log.debug('cleaning up buffer')
        for desp in self.vertex_attrib_desps:
            gl.glDisableVertexAttribArray(desp.attr_id)
        gl.glDeleteBuffers(1, [self.buffer_id])

    def create_vertex_array_object(self):
        self.buffer_id = gl.glGenBuffers(1)

    def bind(self):
        gl.glBindBuffer(gl.GL_ARRAY_BUFFER, self.buffer_id)

    def unbind(self):
        gl.glBindBuffer(gl.GL_ARRAY_BUFFER, 0)

    def gen_buffer_data(self):
        array_type = (gl.GLfloat * len(self.vertex_data))
        gl.glBufferData(gl.GL_ARRAY_BUFFER,
                        len(self.vertex_data) * ctypes.sizeof(ctypes.c_float),
                        array_type(*self.vertex_data),
                        gl.GL_STATIC_DRAW)

        log.debug('setting the vertex attributes')
        for desp in self.vertex_attrib_desps:
            gl.glVertexAttribPointer(
                desp.attr_id,       
                desp.comp_count,    
                desp.comp_type,     
                desp.need_nor,     
                desp.stride,        
                desp.offset         
            )
            gl.glEnableVertexAttribArray(desp.attr_id)

4. 完成主函數進行繪製

from base import shader, window_helper
from OpenGL import GL as gl
from base.gl_render_data import *
import glfw

# ----- 建立視窗
window_config = window_helper.Window.Config(bgcolor = (0.5,0.5,0.5))
window = window_helper.Window(window_config)
# ----- 

# ----- 建立著色器，從檔案中讀取
# base.vert
"""
#version 330 core
layout(location = 0) in vec3 aPos;
void main(){
    gl_Position.xyz = aPos;
    gl_Position.w = 1.0;
}
"""
# base.frag
"""
#version 330 core
out vec3 color;
void main(){
    color = vec3(1,0,0);
}

"""

mshader = shader.Shader()
mshader.load_shader_source_from_path(shader.ShaderType.VERTEX, "shader/base.vert")
mshader.load_shader_source_from_path(shader.ShaderType.FRAGMENT, "shader/base.frag")
mshader.create_program()
mshader.use_program()
# -----

# ---- 建立 VAO、VBO、EBO，設定頂點屬性
data = RendererData()
desp = VertexAttribDesp()
desp.attr_id = 0
desp.comp_count = 3
desp.stride = 3 * 4
desp.offset = None
desp.need_nor = False
desp.comp_type = gl.GL_FLOAT

vert = [-0.5, 0.5, 0,
        0.5, 0.5, 0,
        0.5, -0.5, 0,
        -0.5, -0.5 ,0 ]
inde = [
    3,1,0,
    3,2,1
]

data.build_data([desp],vert,inde)
data.use()
# ---------


# ----- 渲染迴圈
while (
        glfw.get_key(window.native_window, glfw.KEY_ESCAPE) != glfw.PRESS and
        not glfw.window_should_close(window.native_window)
    ):
        gl.glClear(gl.GL_COLOR_BUFFER_BIT | gl.GL_DEPTH_BUFFER_BIT)
        data.draw()
        glfw.swap_buffers(window.native_window)
        glfw.poll_events()
# -----

最終可以渲染出一個紅色的矩形。

5. 總結

1. 利用 glfw 來管理視窗，glfw 做了兩件事情，一件事是管理視窗，第二件是管理 OpenGL context，注意要正確設定 window_hint；
2. 正確建立、編譯、連結 shader；
3. 正確建立和 bind VAO、VBO、EBO；
4. 在主函數中建立相應的物件，在迴圈中渲染；