CN114549724A - 一种gpu着色器的图形化构建方法及系统 - Google Patents

Abstract

本发明提供的一种GPU着色器的图形化构建方法包括：将着色器编程中的基本概念进行抽象并形成多个模块；将多个所述模块对应到多个二维可视化的图形结构；将多个所述图形结构进行拼接，并构建着色器。能够实时准确地预览用户编写的着色器效果。

Description

一种GPU着色器的图形化构建方法及系统

技术领域

本发明涉及数据监管领域，尤其涉及一种GPU着色器的图形化构建方法及系统。

背景技术

随着虚拟现实，增强现实以及混合现实技术的发展，通过各种虚拟化终端设备，进入虚拟化的三维世界，进行学习，娱乐和工作。随着硬件技术提升和开发成本的降低，越来越多的普通人通过桌面虚拟设备，头戴虚拟设备甚至裸眼虚拟设备，运行三维可视化程序。以三维游戏，三维仿真培训程序为代表的三维应用程序，正逐步成为主流软件产品，应用于教育，娱乐和工作。

三维程序的主要功能之一，就是呈现给用户逼真和精细的视觉效果。三维程序的视觉效果，主要由三维模型制作的逼真程度，以及三维程序渲染流程和算法决定。

在目前虚拟化设备中，三维程序实现编写渲染流程和渲染算法的方式，是通过专业开发人员编写着色器，并通过设备操作系统上安装的图形格栅化API，将着色器程序传递给GPU进行运算实现的。着色器程序是实现各种三维视觉效果的关键程序。

着色器程序主要由顶点着色器和片元着色器组成。顶点着色器接收的是三维模型中的顶点信息，以及将三维模型顶点坐标转化为裁剪空间坐标的各种变换信息。同时，为了满足各种可视化需求，用户会将各种其他数据输入到顶点着色器中进行运算。根据视觉效果的需要，顶点着色程序会对输入信息做各种变换和映射，并将最终的信息输出给GPU。顶点着色器必须输出的是被渲染图元顶点在三维裁剪空间中的裁剪坐标。

片元着色器的任务是对被渲染图元覆盖的屏幕像素进行处理，以获得颜色和透明度信息。GPU首先根据顶点着色器输出的顶点信息，确定对应图元覆盖了屏幕上的哪些像素，然后对顶点着色器传递给片元着色器的属性信息进行线性差值，计算出每一个像素对应的这些属性信息，并且按照逐像素的顺序调用片元着色器，把像素的属性信息传入。片元着色器获取信息后，计算并输出像素对应的颜色和透明度信息。

着色器作为一种程序，需要编写人员具备程序开发知识和调试技能，同时熟悉各种数学运算和视觉效果计算方法，提高了着色器程序的编写难度，制约了三维程序的开发。

发明内容

鉴于上述问题，提出了本发明以便提供克服上述问题或者至少部分地解决上述问题的一种GPU着色器的图形化构建方法及系统。

根据本发明的一个方面，提供了一种GPU着色器的图形化构建方法包括：

将着色器编程中的基本概念进行抽象并形成多个模块；

将多个所述模块对应到多个二维可视化的图形结构；

将多个所述图形结构进行拼接，并构建着色器。

可选的，所述将着色器编程中的基本概念进行抽象并形成多个模块具体包括：

将着色器的运算功能抽象成函数模块，对应函数图元；

将所述函数图元拖拽到画布中；

将所述着色器的输入输出变量，主函数内部临时变量和系统内置变量抽象为变量模块，对应变量图元；

将所述变量模块图元拖拽到所述画布中。

可选的，所述构建方法还包括：

将所述变量图元与所述函数图元的输入和输出关系，获得图形运行模块；

根据所述输入、输出关系和所述调用关系建立连接关系，获得优化着色器。

可选的，所述根据所述输入、输出关系和所述调用关系建立连接关系，获得优化着色器具体包括：

对所述图形运行模块识别算法，获得属于顶点着色器的运行模块，和像素着色器；

对同属于一类着色器的模块，运行代码生成算法，生成并优化着色器代码；

根据所述着色器代码生成优化着色器。

可选的，所述函数模块具体包括：名称，变量列表、返回值、函数代码和简介；所述变量列表包含多个参数声明。

可选的，所述变量模块具体包括：名称、简介、类型、数据类型和变量值；

系统根据着色器的变量类型，将变量模块分为顶点属性类型模块，统一类型模块、可变类型类型模块和内部类型模块。

本发明提供的一种GPU着色器的图形化构建方法包括：将着色器编程中的基本概念进行抽象并形成多个模块；将多个所述模块对应到多个二维可视化的图形结构；将多个所述图形结构进行拼接，并构建着色器。能够实时准确地预览用户编写的着色器效果。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它的附图。

图1为本发明实施例提供的着色器模块识别算法的流程图；

图2为本发明实施例提供的着色器代码生成算法的流程图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

本发明的说明书实施例和权利要求书及附图中的术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元。

下面结合附图和实施例，对本发明的技术方案做进一步的详细描述。

本发明公开的着色器构建方法，采用图形化搭建模式进行实现。系统将着色器编程中的基本概念进行抽象并形成模块，然后将模块对应到若干二维可视化的图形结构。通过图形结构的拼接，完成着色器的构建。

系统将常用的着色器运算功能抽象成函数模块，对应函数模块图元为函数图元。用户通过拖拽，将函数图元拖拽到画布中。系统将着色器的输入输出变量，主函数内部临时变量和系统内置变量等抽象为变量模块，对应变量模块图元为变量图元。变量图元被拖拽到画布中。

用户通过连线的方式，指定变量图元与函数图元的输入和输出关系。函数模块之间的调用关系，通过变量图元的与模块图元的输入输出关系的传递，被间接体现出来。

当完成图元的摆放及其之间连线后，本专利所述方法会对所得图形运行模块识别算法，确定哪些模块属于顶点着色器，哪些属于像素着色器。对同属于一类着色器的模块，运行代码生成算法，生成并优化最终的着色器代码。

本发明，最后会直接将生成的着色器代码发送至GPU运行，实时准确地预览用户编写的着色器效果。系统采用B/S架构，前端通过HTML5和WebGL技术实现，随时随地能够接入使用。

二、函数模块及其图元

函数模块是系统提供给用户的功能性模块。系统将函数模块进行抽象，函数模块包括名称，变量列表、返回值、函数代码和简介四部分。变量列表包括多个参数声明。参数声明和返回值都包括参数数据类型和参数名两部分信息。函数模块对应的可视化图元，形状定义为矩形。除了显示该函数的名称和简介外，在矩形的外侧边缘会显示输入端口和输出端口。输入端口形状为圆形，对应函数的一个输入变量；输出端口形状为方形，对应于函数的返回值。

图元模块在最终生成的着色器代码中，生成一个函数定义。同时，根据模块在最终搭建的图形结构中的位置和连接关系，生成一个调用代码。

一个完成三维向量与矩阵相乘的模块，名称为“VecMat3Mul”，简介为“三维向量矩阵乘法”。第一个输入变量为三维向量v，第二个输入变量为矩阵m，模块返回值为一个三维变量，模块的代码为“return v*m”。模块对应的2D可视化图元具备两个输入端口，一个输出端口。

系统将函数模块分为通用函数模块，顶点着色器函数模块，片元着色器函数模块三类。通用函数模块被像素着色器和片元着色器使用，顶点着色器函数模块只能在顶点着色器使用，片元着色器函数模块只能在片元着色器使用。通用函数模块包括基本的运算模块，包括各种类型数据的算数运算、逻辑运算和位运算。

三、变量模块及其图元

系统根据着色器编写语言的特点，将变量模块进行了抽象。系统规定着色器变量模块的属性包括名称、简介、类型、数据类型和变量值。系统根据着色器的变量类型，将变量模块分为顶点属性AV类型模块，统一类型UV模块、可变类型VV类型模块和内部类型IV模块。AV类型表示的变量是作为三维数据的顶点信息，由CPU传递给GPU，从而输入到着色器中的对应变量。UV类型是指为了完成一次渲染，CPU传递给GPU的独立数据，不依赖于三维顶点数量和内容。IV类型表示着色器计算的主程序内的临时变量。VV类型变量是顶点着色器输出给GPU，最终按照片元覆盖的屏幕像素，逐像素输入到片元着色器的数据。VV类型变量是顶点着色器和片元着色器之间的数据传递纽带。

变量模块的数据类型，是对应变量在着色器语言的数据类型，如浮点类型，整数类型和向量类型等。变量模块的值是指变量在定义时的初始化值。

变量类型的图元，采用圆形表示，右上角表示对应变量的类型，右下角表示变量的数据类型。

假设一个AV类型的变量position，数据类型为三维向量(vec3),对应的图元为变量模块在最终生成的代码中，会对应一个变量的声明，形式如下AVvec3 position。

四、函数模块与变量模块的交互

当系统识别到一个模块的输入变量模块和输出变量模块后，会在着色器的main函数中，生成一个调用代码。

生成的调用语句为tPos＝Vec2MatMul(postion,mvp)。

连接线是指图元之间的连接线表示对应模块之间的数据输入输出关系，箭头指向的方向表示数据的输出目标，或者函数的返回值输出目标。一个变量图元只能被一个函数图元指向，但是指向到多个函数图元。一个函数图元能够被多个变量图元指向，但是只能指向到一个变量图元。

五、图元拓扑结构

搭建完毕的着色器，是一个图形结构。该结构，是一个典型的有向无环图。如果一个变量图元是一个函数图元的输出，那么这个变量图元是函数图元的父节点。如果一个变量图元是一个函数图元的输入，那么这个变量图元就是这个函数图元的子节点。也就是说，由一个图元出发，箭头指向的是这个图元的父级图元。

六、着色器模块识别算法

算法背景和意义

因为着色器分为顶点着色器和像素着色器两个部分，而本专利方法为了方便用户快速设计着色器，提供一个整体的画布，由用户直接进行图元拖拽和连线，完成两种着色器的一次性构建。因此本发明方法提供了判别一组相互连接的图元中，属于顶点着色器的部分，属于像素着色器的着色器模块识别算法。

算法描述

着色器模块识别算法，是在用户通过系统搭建完毕的着色器模块拓扑结构上，识别出模块图元是属于顶点着色器还是片元着色器的过程。

通过分析顶点着色器到像素着色器的关系，可以发现VV类型的变量图元是由顶点着色器输出到片元着色器的中间变量。因此，由VV类型变量模块出发，根据着色器拓扑图，遍历该图元的所有子图元，并标记他们为顶点着色器图元。持续这个过程，直到无法遍历为止。同理，由VV类型变量图元出发，根据着色器拓扑图，遍历该节点的父图元，将它标记为片元着色器的图元，并一直持续这个过程，直到无法遍历为止。

如图1所示，算法描述如下：

(1)算法输入：

包含所有VV类型图元的列表型变量vVVGUnit

枚举类型变量shaderType，表示需要识别的着色器类型；

算法输出：包含识别出的图元的列表型变量vGUnit

L1:初始化栈类型变量sSearchGUnit

L2:判断vVVGUnit是为空，不为空跳转至L3,否则跳转至L14

L3:取出vVVGUnit第一个图元GUnit，压入至sSearchGUnit

L4:判断sSearchGUnit是否为空，不为空跳转至L5，否则跳转至L2

L5:取出sSerchGUnit栈顶图元searchGUnit

L6:判断shaderType是否为顶点着色器类型，如果是跳转至L7,否则跳转到L11

L7:开始遍历searchGUnit的子图元

L8:如果可遍历，跳转至L9,否则跳转至L13

L9:取出searchGUnit的下一个子图元subGUnit

L10:将subGUnit压入sSearchGUnit，跳转至L8

L11:获取searchGUnit的父图元subGUnit

L12:将subGUnit压入sSearchGUnit

L13:将searchGUnit放入VGunit，跳转至L4

L14:算法结束。

当着色模块识别算法结束后，如果存在没有被标记的模块，认为这些模块无效，并且不参与后续的着色器代码生成算法。经过这个剔除变换后，着色器的拓扑结构被拆为了两部分，一部分用于生成顶点着色器，叫做顶点着色器模块子图，一部分用于生成片元着色器，叫做片元着色器子图。这两个子图分别传入着色器代码生成算法，分别生成最终的着色器代码。

七、着色器代码生成算法

算法的背景和意义

着色器代码生成算法，根据输入的着色器模块子图，生成对应着色器的代码。一个着色器程序，由若干全局变量声明，全局函数声明和一个主函数组成。顶点着色器的主函数返回值是对应顶点在三维空间的裁剪坐标。片元着色器主函数的返回值是对应像素的颜色和透明度信息。着色器代码生成模块的作用，就是根据输入的子图和要生成的着色器类型，生成最终的着色器代码。

如图2所示，算法步骤如下：

L1：算法输入：包含待转化的图元结构图的所有图元的列表类型变量vGUnit；

L2：算法输出：字符串代码；

L3：初始化列表类型的变量vOrderedGUnit；

L4：初始化栈型的变量sSearchGUnit；

L5：判断vGUnit是否为空，如果为空，跳转到L14，否则跳转到L6；

L6：从vGUnit中取出第一个图元GUnit；

L7：将GUnit压入sSearchGUnit；

L8：判断sSearchGUnit是否为空，如果不为空，跳转至L9,否则跳转至L5；

L9：获取sSearchGUnit的栈顶图元searchGUnit；

L10：设置变量F为TRUE，遍历searchGUnit的每一个子节点subGUnit，遍历完则跳转L12；

L11：如果vOrderedGUnit包含subGUnit，跳转至L10,否则，如果sSearchGUnit中不包含subGUnit，将subGUnit压入到sSearchGUnit，F设置为FALSE，跳转至L10，否则，提示图结构具有环形回路，算法退出；

L12：如果F为TRUE，将searchGUnit从sSearchGUnit中删除；

L13：将searchGUnit加入到vOrderedGUnit，跳转至L8；

L14：遍历vOrderedGUnitList中的每一个节点oderedGUnit，根据图元节点对应模块和代码的关系，在对应着色器中，生成声明语句和调用语句，输出最终代码字符串。

八、函数模块的代码，有的代码数量很少，且在主函数中调用频次高。如果把模块转化为函数定义代码，在主代码里调用，是的GPU会频繁进行函数入栈和出栈的操作，性能损失较大。系统会对这种模块的处理方式进行优化，以内联方式，直接把函数代码写入到调用处，减少了以为函数入栈和出栈造成的性能损失。

九、系统架构：系统采用B/S架构，用户数据保存在服务器，前端采用HTML5技术实现，且采用WebGL技术作为中间适配层，实现着色器程序的三维效果实时预览，实现了用户跨平台访问。搭建的图元直接转化为WebGL中可以运行的着色器程序，并运行在GPU中对可视化效果进行实时和准确的预览。

有益效果：

1、简单高效且可扩展的图形化操作方式；

2、实时准确预览最终效果；

3、跨平台随时随地使用系统；

4、运算效率高。

以上的具体实施方式，对本发明的目的、技术方案和有益效果进行了进一步详细说明，所应理解的是，以上仅为本发明的具体实施方式而已，并不用于限定本发明的保护范围，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (6)

1.一种GPU着色器的图形化构建方法，其特征在于，所述构建方法包括：

将着色器编程中的基本概念进行抽象并形成多个模块；

将多个所述模块对应到多个二维可视化的图形结构；

将多个所述图形结构进行拼接，并构建着色器。

2.根据权利要求1所述的一种GPU着色器的图形化构建方法，其特征在于，所述将着色器编程中的基本概念进行抽象并形成多个模块具体包括：

将着色器的运算功能抽象成函数模块，对应函数图元；

将所述函数图元拖拽到画布中；

将所述着色器的输入输出变量，主函数内部临时变量和系统内置变量抽象为变量模块，对应变量图元；

将所述变量模块图元拖拽到所述画布中。

3.根据权利要求2所述的一种GPU着色器的图形化构建方法，其特征在于，所述构建方法还包括：

将所述变量图元与所述函数图元的输入和输出关系，获得图形运行模块；

根据所述输入、输出关系和所述调用关系建立连接关系，获得优化着色器。

4.根据权利要求3所述的一种GPU着色器的图形化构建方法，其特征在于，所述根据所述输入、输出关系和所述调用关系建立连接关系，获得优化着色器具体包括：

对所述图形运行模块识别算法，获得属于顶点着色器的运行模块，和像素着色器；

对同属于一类着色器的模块，运行代码生成算法，生成并优化着色器代码；

根据所述着色器代码生成优化着色器。

5.根据权利要求2所述的一种GPU着色器的图形化构建方法，其特征在于，所述函数模块具体包括：名称，变量列表、返回值、函数代码和简介；

所述变量列表包含多个参数声明。

6.根据权利要求2所述的一种GPU着色器的图形化构建方法，其特征在于，所述变量模块具体包括：名称、简介、类型、数据类型和变量值；

系统根据着色器的变量类型，将变量模块分为顶点属性类型模块，统一类型模块、可变类型类型模块和内部类型模块。

Images