[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. 在主函数中创建相应的对象，在循环中渲染；