[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 = https://www.cnblogs.com/WAoyu/archive/2022/10/03/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 = https://www.cnblogs.com/WAoyu/archive/2022/10/03/[]
        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 = https://www.cnblogs.com/WAoyu/archive/2022/10/03/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. 在主函式中創建相應的物件，在回圈中渲染；

標籤：其他

上一篇：分布式存盤系統之Ceph集群部署

下一篇：學習筆記-SQL報錯注入