[CG從零開始] 4. pyopengl 繪製一個正方形
在做了 1～3 的基礎工作後，我們的開發環境基本 OK 了，我們可以開始嘗試利用 pyopengl 來進行繪製了。
本文主要有三個部分
- 利用 glfw 封裝窗口類，並打開窗口；
- 封裝 shader 類，進行編譯、鏈接、使用；
- 封裝 VAO、VBO、EBO
- 完成主函數進行繪製
完整的程式碼在倉庫 (tag: v0.1) //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 完成一次簡單的繪製有一些基本的操作，
- 需要編寫 shader，然後創建 shader 程式，進行編譯、鏈接、激活；
- 需要創建 VAO，VBO，EBO（可選），來管理數據，傳遞給 shader 進行計算；
- 在循環中調用繪製指令來進行繪製；
這一小節我們來封裝一個 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 的詳細說明，這裡就不過多的解釋了，網上有很多的資料，這裡只是想展示它們的基本用法。
基本的操作順序：
- 創建 VAO，bind VAO；
- 創建 VBO，bind VBO，傳送 VBO 數據，設置頂點屬性，啟用頂點屬性；
- 創建 EBO，bind EBO，傳送 EBO 數據；
- 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. 總結
- 利用 glfw 來管理窗口，glfw 做了兩件事情，一件事是管理窗口，第二件是管理 OpenGL context，注意要正確設置
window_hint； - 正確創建、編譯、鏈接 shader；
- 正確創建和 bind VAO、VBO、EBO；
- 在主函數中創建相應的對象，在循環中渲染；
