OpenGL Shading Language getting started

我是在使用 Qt5.15 为客户开发 QtQuick3D 场景时接触的 glsl

通过以下网站快速入门

https://doc.qt.io/qt-5/custom-material-reference.html

https://github.com/wshxbqq/GLSL-Card

https://thebookofshaders.com/?lan=ch

https://openglbook.com/chapter-0-preface-what-is-opengl.html

https://learnopengl-cn.github.io/

https://www.khronos.org/registry/OpenGL-Refpages/es3/

https://docs.gl/el3/gl_Position

在给 Model 设置自定义材质时，可以编写 Shader

推荐使用 Qt Design Studio（以下简称 QDS） 来开发 3D 场景，下载链接（版本2.3.1）

这里我创建了一个简单的 3D demo，下载链接

​x
1
//example.vert 顶点着色器
2
in vec3 attr_pos;
3
uniform mat4 modelViewProjection;
4

5
out vec3 pos;
6

7
void main() {
8
    pos = attr_pos;
9
    pos.x += sin(time * 4.0 + pos.y) * amplitude;
10
    gl_Position = modelViewProjection * vec4(pos, 1.0);
11
}
12
//example.frag 片段着色器
13
out vec4 fragColor;
14

15
in vec3 pos;
16

17
void main() {
18
    fragColor = vec4(pos.x * 0.02, pos.y * 0.02, pos.z * 0.02, 1.0);
19
}

QDS 是基于原先的 Qt Creator 代码框架构建的，用法不必赘述

点开帮助文档页面，输入 custom material reference，可以找到着色器内置的一些变量

常用的也就 attr_pos attr_uv0 modelViewProjection

接下来，我们尝试自己编写一个自定义的 Material

首先，我们创建一个最简单的 View3D 下载链接，解压 untitled1.zip

打开 QDS，载入 ADAS.qmlproject

运行后，是一个绿色的矩形框

选择 main.qml，切换到设计模式，可以在 3D 视角预览场景

整个场景由一个 Camera 和 一个 Model 组成

Model 的 source 是 Qt 内置的 Plane，我们可以在 Components 标签下找到

只要拖动这个 Plane 到 3D 场景场景中，就可以创建一个矩形，代码会自动生成

xxxxxxxxxx
25
1
import QtQuick 2.15
2
import QtQuick3D 1.15
3

4
View3D {
5
    width: 800
6
    height: 600
7

8
    PerspectiveCamera {
9
        id: camera
10
        z: 50
11
        fieldOfView: 100
12

13
        Model {
14
            id: rect
15
            z: -50
16
            source: "#Rectangle"
17
            DefaultMaterial {
18
                id: rectMaterial
19
                diffuseColor: "#4aee45"
20
                lighting: DefaultMaterial.NoLighting
21
            }
22
            materials: rectMaterial
23
        }
24
    }
25
}

我们定义了一个 DefaultMaterial，diffuseColor 代表它的颜色，lighting 设置为 NoLighting 代表不计算光照（因为我们没有设置灯光，而默认值是 FragmentLighting，没有设置灯光的话，会显示成黑色），不计算光照的话就会显示 diffuseColor

接下来，我们用 Shader 来改变这个矩形的颜色，这里用到了 CustomMaterial 需要 import QtQuick3D.Materials

下载链接

xxxxxxxxxx
37
1
import QtQuick 2.15
2
import QtQuick3D 1.15
3
import QtQuick3D.Materials 1.15
4

5
View3D {
6
    width: 800
7
    height: 600
8

9
    PerspectiveCamera {
10
        id: camera
11
        z: 50
12
        fieldOfView: 100
13

14
        Model {
15
            id: rect
16
            z: -50
17
            source: "#Rectangle"
18
            materials: rectMaterial
19

20
            CustomMaterial {
21
                id: rectMaterial
22
                shaderInfo: ShaderInfo {
23
                    version: "330"
24
                    type: "GLSL"
25
                }
26
                passes: [
27
                    Pass {
28
                        shaders: Shader {
29
                            stage: Shader.Fragment
30
                            shader: "simple.frag"
31
                        }
32
                    }
33
                ]
34
            }
35
        }
36
    }
37
}

这是一个最简单的片段着色器代码，fragColor 代表返回的颜色，这里是红色

xxxxxxxxxx
7
1
//simple.frag
2
out vec4 fragColor;
3

4
void main()
5
{
6
    fragColor = vec4(1.0, 0.0, 0.0, 1.0);
7
}

既然我们已经学会了基本的 shader，那么参考 shadertoy 网站 我们就可以做出丰富多彩的 3D 模型