基于Python的OpenGL 02 之着色器

1. 概述

本文基于Python语言，描述OpenGL的着色器

环境搭建以及绘制流程可参考：

基于Python的OpenGL 01 之Hello Triangle - 当时明月在曾照彩云归 - 博客园 (cnblogs.com)

笔者这里不过多描述每个名词、函数和细节，更详细的文档可以参考：

着色器 - LearnOpenGL CN (learnopengl-cn.github.io)

2. 着色器

着色器(Shader)是运行在GPU上的小程序，这些小程序为图形渲染管线的某个特定部分而运行

从基本意义上来说，着色器只是一种把输入转化为输出的程序

着色器也是一种非常独立的程序，因为它们之间不能相互通信，它们之间唯一的沟通只有通过输入和输出

着色器语言（英语：Shader Language）也叫着色语言（英语：Shading Language），是一类专门用来为着色器编程的编程语言

Shader Language目前主要有3种语言：

基于 OpenGL 的 OpenGL Shading Language，简称 GLSL
基于 DirectX 的 High Level Shading Language,简称 HLSL
还有 NVIDIA 公司的 C for Graphic，简称 Cg 语言

3. GLSL

OpenGL着色器是使用一种叫GLSL的类C语言写成的，为图形计算量身定制的，包含一些针对向量和矩阵操作的有用特性

着色器的开头总是要声明版本，接着是输入和输出变量、uniform和main函数

每个着色器的入口点都是main函数，在这个函数中我们处理所有的输入变量，并将结果输出到输出变量中

uniform可以理解为globe，即全局变量

一个典型的OpenGL着色器的GLSL结构如下：

#version version_number
in type in_variable_name;
in type in_variable_name;

out type out_variable_name;

uniform type uniform_name;

int main()
{
  // 处理输入并进行一些图形操作
  ...
  // 输出处理过的结果到输出变量
  out_variable_name = result_we_processed;
}

4. 数据类型

GLSL包含的基础变量类型：

int
uint
float
double
bool

GLSL包含的容器类型：

Vector（向量）
Matrix（矩阵）

4.1 向量

GLSL中的向量可以是包含2-4个分量的容器，分量的类型可以是任意基础类型

向量的类型大致可以表示为：<基础类型首字母>+vec+<分量个数>

如包含3个double分量的向量：dvec3

例外的是float类型，float向量是GLSL中最常用的变量，其类型为：vec+<分量个数>

向量的分量支持.x、.y、.z的方式获取，向量支持重组，例如：

vec2 someVec;
vec4 differentVec = someVec.xyxx;
vec3 anotherVec = differentVec.zyw;
vec4 otherVec = someVec.xxxx + anotherVec.yxzy;

5. 输入与输出

OpenGL中着色器是独立的小程序，每个着色器具有输入与输出，从而进行数据传递

GLSL定义了in和out两个关键字实现这种流程

前面的着色器使用out定义的变量会传递到后面的着色器中用in声明且类型与变量名相同的变量

例外的是：

顶点着色器使用layout (location = <n>)指定输入变量（也可以用glGetAttribLocation()查询属性位置）
片段着色器需要vec4类型的颜色输出

综述就是，一般而言：

in和out两个关键字主要用于顶点着色器与片段着色器的数据传递
顶点着色器需要使用location进行输入，输出中要指定gl_Position
片段着色器需要指定输出颜色

一个简单的示例代码如下：

顶点着色器：

#version 330 core
layout (location = 0) in vec3 aPos; // 位置变量的属性位置值为0

out vec4 vertexColor; // 为片段着色器指定一个颜色输出

void main()
{
    gl_Position = vec4(aPos, 1.0); // 注意我们如何把一个vec3作为vec4的构造器的参数
    vertexColor = vec4(1.0, 0.0, 0.0, 1.0); // 把输出变量设置为红色
}

片段着色器：

#version 330 core
out vec4 FragColor;

in vec4 vertexColor; // 从顶点着色器传来的输入变量（名称相同、类型相同）

void main()
{
    FragColor = vertexColor;
}

这里只是修改GLSL，环境代码在这片文章的结尾：

基于Python的OpenGL 01 之Hello Triangle - 当时明月在曾照彩云归 - 博客园 (cnblogs.com)

实现的效果：

6. Uniform

in和out两个关键字主要用于着色器的数据传递，Uniform则主要用于CPU与GPU的数据传递

Uniform是全局变量，变量名不可重复，可以被任何着色器随时读取

以下是在片段着色器中声明一个Uniform的颜色变量：

#version 330 core
out vec4 FragColor;

uniform vec4 ourColor; // 在OpenGL程序代码中设定这个变量

void main()
{
    FragColor = ourColor;
}

接下来是在渲染中动态设置这个Uniform变量的代码：

timeValue = glfw.get_time()
greenValue = (np.sin(timeValue) / 2.0) + 0.5
vertexColorLocation = glGetUniformLocation(shaderProgram, "ourColor")
glUseProgram(shaderProgram)
glUniform4fv(vertexColorLocation, 1, np.array([0.0, greenValue, 0.0, 1.0], dtype='float32'))

一切正常的话，将会出现一个三角形逐渐由绿变黑再变回绿色：

一些想法：

既然说Uniform是全局变量，那是否可以在没有声明Uniform的着色器中访问呢？经过笔者的实验，似乎不可以

7. 绑定更多属性

利用Uniform可以实现颜色从CPU到GPU的传递，但是变量多时声明很多Uniform就不那么合适，另一个方案是将颜色属性绑定到顶点数据中，从顶点着色器传递到片段着色器中，代码如下

设置顶点与对应的颜色：

vertices = np.array([   # 位置               颜色
                     0.5, -0.5, 0.0,  1.0, 0.0, 0.0,   # 右下
                    -0.5, -0.5, 0.0,  0.0, 1.0, 0.0,   # 左下
                     0.0,  0.5, 0.0,  0.0, 0.0, 1.0    # 顶部
                    ])

在顶点着色器中配置颜色属性：

#version 330 core
layout (location = 0) in vec3 aPos;   // 位置变量的属性位置值为 0 
layout (location = 1) in vec3 aColor; // 颜色变量的属性位置值为 1

out vec3 ourColor; // 向片段着色器输出一个颜色

void main()
{
    gl_Position = vec4(aPos, 1.0);
    ourColor = aColor; // 将ourColor设置为我们从顶点数据那里得到的输入颜色
}

在片段着色器中接收颜色属性：

#version 330 core
out vec4 FragColor;  
in vec3 ourColor;

void main()
{
    FragColor = vec4(ourColor, 1.0);
}

绑定属性：

现在的VBO内存布局如下：

绑定VBO的顶点格式：

# 位置属性
glVertexAttribPointer(0, 3, GL_DOUBLE, GL_FALSE, int(8 * 6), None)
glEnableVertexArrayAttrib(VAO, 0)
# 颜色属性
glVertexAttribPointer(1, 3, GL_DOUBLE, GL_FALSE, int(8 * 6), ctypes.c_void_p(8*3))
glEnableVertexArrayAttrib(VAO, 1)

注意：

glVertexAttribPointer()函数最后一个参数为偏移步长的指针，在C中原型为void*，在PyOpenGL中，这里需要传入 ctypes.c_void_p()类型，具体函数解释参考：ctypes --- Python 的外部函数库 — Python 3.7.13 文档

运行程序结果：

8. 封装着色器

着色器程序的生成步骤大致都是：

编写GLSL
创建Shader
加载GLSL
编译Shader
创建着色器程序
附加Shader到着色器程序
链接着色器程序

封装一个着色器类，可以有效简化创建一个着色器程序的步骤

这是封装的shader.py：

from OpenGL.GL import *


class Shader:
    def __init__(self, vertex_path, fragment_path):
        with open(vertex_path, mode='r', encoding='utf-8') as vertex_stream:
            vertex_code = vertex_stream.readlines()
        with open (fragment_path, mode='r', encoding='utf-8') as fragment_stream:
            fragment_code = fragment_stream.readlines()

        vertex_shader = glCreateShader(GL_VERTEX_SHADER)
        glShaderSource(vertex_shader, vertex_code)
        glCompileShader(vertex_shader)
        status = glGetShaderiv(vertex_shader, GL_COMPILE_STATUS)
        if not status:
            print("[ERROR]: " + bytes.decode(glGetShaderInfoLog(vertex_shader)))

        fragment_shader = glCreateShader(GL_FRAGMENT_SHADER)
        glShaderSource(fragment_shader, fragment_code)
        glCompileShader(fragment_shader)
        status = glGetShaderiv(fragment_shader, GL_COMPILE_STATUS)
        if not status:
            print("[ERROR]: " + bytes.decode(glGetShaderInfoLog(fragment_shader)))

        shader_program = glCreateProgram()
        glAttachShader(shader_program, vertex_shader)
        glAttachShader(shader_program, fragment_shader)
        glLinkProgram(shader_program)
        status = glGetProgramiv(shader_program, GL_LINK_STATUS )
        if not status:
            print("[ERROR]: " + bytes.decode(glGetProgramInfoLog(shader_program)))

        glDeleteShader(vertex_shader)
        glDeleteShader(fragment_shader)
        self.shaderProgram = shader_program

    def use(self):
        glUseProgram(self.shaderProgram)

    def delete(self):
        glDeleteProgram(self.shaderProgram)

以下是一个简单的调用程序test.py：

import glfw
from OpenGL.GL import *
import numpy as np

import shader as shader

glfw.init()
window = glfw.create_window(800, 600, "shader", None, None)
glfw.make_context_current(window)

VAO = glGenVertexArrays(1)
glBindVertexArray(VAO)

vertices = np.array([   # 位置               颜色
                     0.5, -0.5, 0.0,  1.0, 0.0, 0.0,   # 右下
                    -0.5, -0.5, 0.0,  0.0, 1.0, 0.0,   # 左下
                     0.0,  0.5, 0.0,  0.0, 0.0, 1.0    # 顶部
                    ])
VBO = glGenBuffers(1)
glBindBuffer(GL_ARRAY_BUFFER, VBO)
glBufferData(GL_ARRAY_BUFFER, 8 * vertices.size, vertices, GL_STATIC_DRAW)
glVertexAttribPointer(0, 3, GL_DOUBLE, GL_FALSE, int(8 * 6), None)
glEnableVertexArrayAttrib(VAO, 0)
glVertexAttribPointer(1, 3, GL_DOUBLE, GL_FALSE, int(8 * 6), ctypes.c_void_p(8 * 3))
glEnableVertexArrayAttrib(VAO, 1)

shaderProgram = shader.Shader("./glsl/test.vs.glsl", "./glsl/test.fs.glsl")

while not glfw.window_should_close(window):
    glClearColor(0.2, 0.3, 0.3, 1.0)
    glClear(GL_COLOR_BUFFER_BIT)

    shaderProgram.use()
    glBindVertexArray(VAO)
    glDrawArrays(GL_TRIANGLES, 0, 3)

    glfw.swap_buffers(window)
    glfw.poll_events()

shaderProgram.delete()

test.vs.glsl如下：

#version 330 core
layout (location = 0) in vec3 aPos;   // 位置变量的属性位置值为 0
layout (location = 1) in vec3 aColor; // 颜色变量的属性位置值为 1

out vec3 ourColor; // 向片段着色器输出一个颜色

void main()
{
    gl_Position = vec4(aPos, 1.0);
    ourColor = aColor; // 将ourColor设置为我们从顶点数据那里得到的输入颜色
}

test.fs.glsl如下：

#version 330 core
out vec4 FragColor;
in vec3 ourColor;

void main()
{
    FragColor = vec4(ourColor, 1.0);
}

9. 参考资料

[1]着色器 - LearnOpenGL CN (learnopengl-cn.github.io)

[2]着色器语言_百度百科 (baidu.com)

[3]三大 Shader 编程语言（CG/HLSL/GLSL） - 知乎 (zhihu.com)

[4]OpenGL学习笔记（四）着色器 - 知乎 (zhihu.com)

[5]着色器语言 GLSL (opengl-shader-language)入门大全 - 善未易明 - 博客园 (cnblogs.com)

[6]ctypes --- Python 的外部函数库 — Python 3.7.13 文档

[7]PyOpenGL 3.1.0 Function Reference (sourceforge.net)

[8]基于C++的OpenGL 02 之着色器 - 当时明月在曾照彩云归 - 博客园 (cnblogs.com)

posted @ 2022-08-05 23:51 当时明月在曾照彩云归阅读(663) 评论(0) 编辑收藏举报

刷新页面返回顶部

当时明月在曾照彩云归

个人的日常随笔