一种页面着色器代码调试方法、装置与流程

本申请属于页面数据处理技术领域，尤其涉及一种页面着色器代码调试方法、装置。

背景技术：

随着计算机技术的迅速发展和用户需求的不断提高，现在web端页面3d显示技术也越来越受到开发人员的关注。

所述的web端通常是指包括pc、手机、平板等终端设备上的各种页面浏览器，可以通过web端浏览网页中的页面。目前可以在web端实现各种3d页面效果，可以丰富页面展示内容，提高展示效果。目前现有技术中在web端上进行3d图形的开发需要使用webgl技术。webgl是一种3d绘图标准，webgl可以为html5canvas提供硬件3d加速渲染，这样web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3d场景和模型了，还能创建复杂的导航和数据视觉化。在webgl技术中，提供了着色器，可以运行webgl着色器支持的代码(在此可以称为webgl着色器代码)，用于实现各种3d效果。如使用webgl的开发3d图形时，需要编写着色器的代码示例如下：

而webgl着色器代码需要用字符串编写，开发过程中这些代码会装载到gpu中执行，所以无法对着色器代码进行调试。

显然，由于web端页面开发过程中，无法对作业中的webgl着色器代码进行调试，降低了web端页面开发效率。

技术实现要素：

本申请目的在于提供一种页面着色器代码调试方法、装置，提供了web端调试着色器的解决方案，可以大大提高着色器调试效率和3d页面开发效果，为3d开发、vr/ar开发提供有力的技术支持。

本申请提供的一种页面着色器代码调试方法、装置是这样实现的：

一种页面着色器代码调试方法，所述方法包括：

触发页面的着色器代码调试时，加载原着色器的模拟着色器，所述模拟着色器被设置成采用预设编程设计语言并模拟原着色器的运行环境编译生成；

在所述模拟着色器中，对页面的着色器代码进行调试；

将在所述模拟着色器中调试后的着色器代码按照预设的转换规则翻译成所述原着色器对应的字符串，并将所述字符串嵌入到所述原着色器中相应的代码位置。

一种页面着色器调试装置，所述装置包括：

调试加载模块，用于在触发页面的着色器代码调试时，加载原着色器的模拟着色器，所述模拟着色器被设置成采用预设编程设计语言并模拟原着色器的运行环境编译生成；

调试处理模块，用于在所述模拟着色器中，对页面的着色器代码进行调试；

代码转换模块，用于将在所述模拟着色器中调试后的着色器代码按照预设的转换规则翻译成所述原着色器对应的字符串，并将所述字符串嵌入到所述原着色器中相应的代码位置。

本申请提供的一种页面着色器代码调试方法、装置，提供一种模拟着色器，编写模拟着色器的代码可以使用例如可调试编程的js代码，调试运行时可以跟原着色器一起工作，然后在模拟着色器中进行原着色器代码的调试。在不进行调试时可以将普通js代码翻译成原着色器的字符串，然后嵌入到原着色器对应的代码中。本申请在页面着色器在web端调试时可以提供模拟着色器，作业人员可以在模拟着色器中行着色器代码调试，然后可以将调试的内容转换成真正的webgl着色器字符串，嵌入到真正的webgl着色器代码中运行，实现原webgl着色器的调试。本申请解决了web端无法调试着色器的问题，并且以性能换效果，可以显著提高着色器调试效率，对未来web端进行3d开发、vr/ar开发提供强有力的技术支持。

附图说明

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

图1是本申请提供的一种页面着色器代码调试方法一种实施例的方法流程图；

图2是本申请采用js代码编写模拟着色器时着色器之间的数据流向示意图；

图3是本申请提供的一种页面着色器代码调试方法的另一种实施的方法流程示意图；

图4是本申请提供的一种页面着色器代码调试方法另一种实施例的方法流程示意图；

图5是本申请提供的一种页面着色器调试装置一种实施例的模块结构示意图；

图6是本申请提供的一种页面着色器调试装置另一种实施例的模块结构示意图；

图7是本申请提供的一种页面着色器调试装置另一种实施例的模块结构示意图；

图8是利用本申请提供的方法或装置方案进行页面3d图形绘制的一种实施框架示意图。

具体实施方式

为了使本技术领域的人员更好地理解本申请中的技术方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都应当属于本申请保护的范围。

图1是本申请所述一种页面着色器代码调试方法一种实施例的方法流程图。虽然本申请提供了如下述实施例或附图所示的方法操作步骤或装置结构，但基于常规或者无需创造性的劳动在所述方法或装置中可以包括更多或者部分合并后更少的操作步骤或模块单元。在逻辑性上不存在必要因果关系的步骤或结构中，这些步骤的执行顺序或装置的模块结构不限于本申请实施例或附图所示的执行顺序或模块结构。所述的方法或模块结构的在实际中的装置或终端产品应用时，可以按照实施例或者附图所示的方法或模块结构进行顺序执行或者并行执行(例如并行处理器或者多线程处理的环境、甚至包括分布式处理的实施环境)。

本申请为解决现有技术web端无法调试着色器的问题提供的一种实施方案中，可以预先采用某种编程设计语言编写模拟着色器，该模拟着色器是按照页面绘制3d图像使用的原着色器的运行环境模拟生成。所述的模拟着色器可以在web端着色器调试的过程中生成项目的时候编译生成，在需要进行页面着色器代码调试时可以加载运行模拟着色器。本申请实施例的模拟着色器可以采用作业人员使用的可调试的页面设计语言编写生成，因此可以在调试时运行模拟的着色器，并可以在模拟着色器中对在原着色器中运行的代码进行调试。具体的一种实施应用场景如图1所述，本申请提供的一种页面着色器代码调试方法的一种实施例可以包括：

s1：触发页面的着色器代码调试时，加载原着色器的模拟着色器，所述模拟着色器被设置成采用预设编程设计语言并模拟原着色器的运行环境编译生成；

s2：在所述模拟着色器中，对页面的着色器代码进行调试；

s3：将在所述模拟着色器中调试后的着色器代码按照预设的转换规则翻译成所述原着色器对应的字符串，并将所述字符串嵌入到所述原着色器中相应的代码位置。

所述的着色器，是一种在gpu(graphicsprocessingunit，gpu，图像处理器)上运行的程序，可以理解为运行在显卡中的指令和数据。一般页面3d图形开发使用的着色器通常包括顶点着色器和片元着色器。顶点着色器主要的任务是接收三维空间中点的坐标，将其处理为页面二维空间中的坐标并输出；片元着色器的主要任务是对需要处理的屏幕上的每个像素输出一个颜色值。顶点着色器主要是接收attribute变量和uniform变量。attribute变量存储着关于点本身的数据，其主要是点的位置。uniform变量存储的数据可以用于帮助着色器完成任务，换言之，着色器是需要uniform变量而通常并不处理他们。顶点着色器需要输出varying变量给片元着色器。一般的，在在webgl着色器中，所述的attribute、uniform、varying主要是描述该变量在着色器中的作用。

本申请具体的采用webgl着色器进行3d图像开发设计的实施例应用场景中，所述的原着色器即为webgl着色器。所述的模拟着色器可以采用多种编程设计语言编写生成。由于webgl主要用于为html5canvas提供硬件3d加速渲染，这样web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3d场景和模型，并能创建复杂的导航和数据视觉化。因此，一种实施方式中所述模拟着色器可以采用js(javascript，js，一种脚本语言)代码编写而成，主要用于页面3d图像调试处理。因此，本申请提供的一种实施例中，

s101：所述原着色器为webgl着色器，所述模拟着色器为采用js代码编写生成。

图2是本申请采用js代码编写模拟着色器时着色器之间的数据流向示意图。如图2所示，本实施例应用场景中，webgl绘制图形时，采用两种着色器：顶点着色器和片元着色器。如图中所示，顶点着色器可以从缓存中读取顶点信息，javascript代码设置uniform变量和attribute变量。顶点着色器读取attribute变量和uniform变量，输出varying变量，输出的varying变量可以自动根据顶点进行差值计算；片元着色器可以根据uniform变量和varying变量计算得到当前点的颜色。

本申请实施例编写着色器使用javascript代码时，可以预先制定一系列的转换规则实现javascript代码向原着色器字符串的转换，可以兼容原先webgl和着色器的变量通信，实现varying变量的差值计算。具体的一个示例如下：

原着色器的代码：

在本实施例中利用js编写的模拟着色器中的javascript代码：

在模拟着色器中调试处理的着色器代码可以按照之前预设的转换规则翻译生成页面3d开始时使用的原着色器对应的字符串。具体的模拟着色器和原着色器之间代码的转换规则以及通信方式、函数加载调用等可以根据采用的预设编程设计语言和具体的应用环境设计需要设置。本申请提供的一种页面着色器代码调试方法的一种实施例中，可以所述预设的转换规则被设置成，可以包括：

s301：根据变量的前缀信息将调试后的着色器代码翻译成原着色器的字符串，变量之间的通信执行和调用函数与原着色器相同。

本实施例应用场景中，将在模拟着色器中调试的javascript代码翻译成webgl着色器代码时，可以只需要根据变量的前缀进行翻译即可。例如：

varvec4_a_position翻译成：attributevect4a_position

varvec4_v_color翻译成varyingvec4v_color；

然后，在开启调试时，切换到本申请实施例编写的模拟的webgl环境(即模拟的着色器)，处理attribute变量和uniform变量的通信，如：

webgl环境：

vargl＝initcontext('webgl')；

debug环境：

vargl＝initcontext(‘debug’)；

attribute变量和uniform变量的通信方式和调用/加载函数不变：

varu_xformmatrix＝gl.getuniformlocation(gl.program,'u_xformmatrix')；

gl.uniformmatrix4fv(u_matrix,false,projmatrix.elements)；

在实际作业中，可以通过用户的调用参数实现切换不同的代码运行环境，如对于作业人员编写完成的着色器代码，可以将着色器代码直接在本地编译成webgl的代码，在调试时根据传递调用的参数确定加载的是模拟着色器还是原webgl着色器来运行着色器代码。而上述所述环境切换的问题，在一些计算机设计语言中可以一开始在代码中添加相应的声明描述。如本实施例应用场景中，采用js代码编写模拟着色器，在此可以定义为“debug环境”(调试环境)，如下代码所示：

//webgl环境：

vargl＝initcontext('webgl')；

//debug环境：

vargl＝initcontext(‘debug’)；

在生成页面调试业务项目的时候可以编译生成2个文件，一个是js版本，一个是webgl版本。可以根据用户切换的不同模式加载对应的文件。因此，本申请提供的一种页面着色器代码调试方法的另一种实施中，在在触发着色器代码调试之前所述方法还可以包括：

s0：编译生成原着色器的代码文件和模拟着色器的代码文件，所述原着色器的代码文件和模拟着色器的代码文件设置有对应的启动调用参数；

相应的，所述触发页面的着色器代码调试时加载原着色器的模拟着色器包括根据传入的启动调试参数确定加载原着色器的模拟着色器。

图3是本申请提供的一种页面着色器代码调试方法的另一种实施的方法流程示意图。具体的实施处理过程中，例如上述定义了“debug环境”(调试环境)的应用场景中，当用户往initcontext函数内部传递‘webgl’时调用的是浏览器生成wbgl对象。当传入的是‘debug’参数时，返回的是本申请编写的模拟着色器中的webgl对象。后面的图像渲染处理过程则可以交给模拟着色器中的js代码来处理。用户可以根据模拟着色器的图像结果调整参数，对页面的着色器代码进行调试。当然，利用本申请编写的模拟着色器中进行webgl对象调试时的js代码可以由cpu(centralprocessingunit，中央处理器)来处理。cpu调试后的着色器代码再按照之前预设的转换规则翻译成gpu执行所需的原着色器的字符串，并可以将这些调试后的着色器嵌入到所述原着色器相应的代码位置。具体的代码位置也可以根据传入的参数或者设置的调试节点等进行确定。

进一步的，通过在模拟着色器中进行页面的着色器代码调试并转换翻译成原着色器需要的字符串后，可以将包括所述转换后的原着色器对应的字符串的着色器代码加载到gpu中运行。如通过参数调用在debug环境中进行着色器代码的调试，调试完成后，在webgl环境下可以自动将这段js代码翻译成原着色器需要的字符串，然后将包括这些调试后字符串的原着色器代码加载到gpu进行运行，查看调试后的页面3d运行效果。图4是本申请提供的一种页面着色器代码调试方法另一种实施例的方法流程示意图，如图4所示，所述方法还可以包括：

s4：将所述原着色器中页面的着色器代码加载到图形处理器中。

这样，本申请实施例可以通过不同的传入参数确定是启动编写的模拟的webgl环境还是原webgl运行环境。当需要调试时，可以在提供的模拟着色器中使用js代码正常的对着色器代码进行调试。不进行调试时将这些调试的js代码翻译成员着色器需要的字符串，并可以嵌入到真正的webgl代码中，供gpu运行。利用本申请实施例方案可以有效解决web端无法调试3d页面处理时的着色器调试问题，有效提高着色器调试效率和页面开发效果。

本申请在页面着色器在web端调试时可以提供模拟着色器，作业人员可以在模拟着色器中进行着色器代码调试，然后可以将调试的内容转换成真正的webgl着色器字符串，嵌入到真正的webgl着色器代码中运行，实现原webgl着色器的调试。本申请解决了web端无法调试着色器的问题，并且以性能换效果，可以显著提高着色器调试效率，对未来web端进行3d开发、vr/ar开发提供强有力的技术支持。

基于本申请所述的一种页面着色器调试方法，本申请还提供一种页面着色器调试装置。所述的装置可以包括采用在cpu一端可以进行编辑调试的模拟着色器，以实现web上进行3d图形开发时进行webgl着色器代码的调试。图5是本申请提供的一种页面着色器调试装置一种实施例的模块结构示意图，如图5所示，所述装置可以包括：

调试加载模块101，可以用于在触发页面的着色器代码调试时，加载原着色器的模拟着色器，所述模拟着色器被设置成采用预设编程设计语言并模拟原着色器的运行环境编译生成；

调试处理模块102，可以用于在所述模拟着色器中，对页面的着色器代码进行调试；

代码转换模块103，可以用于将在所述模拟着色器中调试后的着色器代码按照预设的转换规则翻译成所述原着色器对应的字符串，并将所述字符串嵌入到所述原着色器中相应的代码位置。

本申请实施例提供一种页面着色器代码调试装置，可以使用例如可调试编程的js代码编写模拟着色器，调试运行时可以跟原着色器一起工作，然后在模拟着色器中进行原着色器代码的调试。然后可可以将普通js代码翻译成原着色器的字符串，嵌入到原着色器对应的代码中，实现原webgl着色器的调试。本申请解决了web端无法调试着色器的问题，并且以性能换效果，可以显著提高着色器调试效果和调试效率，对未来web端进行3d开发、vr/ar开发提供强有力的技术支持。

本申请中所述的原着色器主要是指在页面开发运行过程中无法进行代码调试的着色器，而所述的模拟着色器则可以采用本地cpu可以直接编译调试的编程设计语言编写而成。针对目标主流的3d绘图标识webgl使用的着色器，本申请提供的一种实施例中，所述原着色器为webgl着色器，所述模拟着色器为采用js代码编写生成。当然，如前述方法实施例描述所述，本申请所述幢的另一种实施例中，所述预设的转换规则可以包括：根据变量的前缀信息将调试后的着色器代码翻译成原着色器的字符串，变量之间的通信执行和调用函数与原着色器相同。

在实际作业中，可以通过用户的调用参数实现切换不同的代码运行环境，如对于作业人员编写完成的着色器代码，可以将着色器代码直接在本地编译成webgl的代码，在调试时根据传递调用的参数确定加载的是模拟着色器还是原webgl着色器来运行着色器代码。而上述所述环境切换的问题，在一些计算机设计语言中可以一开始在代码中添加相应的声明描述。具体实施过程中，可以编译生成2个文件，一个是js版本，一个是webgl版本。可以根据用户切换的不同模式加载对应的文件。图6是本申请提供的一种页面着色器调试装置一种实施例的模块结构示意图，如图6所示，所述装置还可以包括：

编译模块100，可以用于编译生成原着色器的代码文件和模拟着色器的代码文件，所述原着色器的代码文件和模拟着色器的代码文件设置有对应的启动调用参数；

相应的，所述调试加载模块101在触发页面的着色器代码调试时加载原着色器的模拟着色器包括根据传入的启动调试参数确定加载原着色器的模拟着色器。

进一步的，通过在模拟着色器中进行页面的着色器代码调试并转换翻译成原着色器需要的字符串后，可以将包括所述转换后的原着色器对应的字符串的着色器代码加载到gpu中运行。如通过参数调用在debug环境中进行着色器代码的调试，调试完成后，在webgl环境下可以自动将这段js代码翻译成原着色器需要的字符串，然后将包括这些调试后字符串的原着色器代码加载到gpu进行运行，查看调试后的页面3d运行效果。图7是本申请提供的一种页面着色器调试装置一种实施例的模块结构示意图，如图7所示，所述装置还可以包括：

代码加载模块104，可以用于将所述原着色器中页面的着色器代码加载到图像处理器中运行。

图8是利用本申请提供的方法或装置方案进行页面3d图形绘制的一种实施框架示意图。如图8所示，本申请实施例提供的页面着色器代码调试方法、装置，可以提供使用例如可调试编程的js代码的模拟着色器，调试运行时可以跟原着色器一起工作，然后在模拟着色器中进行原着色器代码的调试。在不进行调试时可以将普通js代码翻译成原着色器的字符串，然后嵌入到原着色器对应的代码中。本申请在页面着色器在web端调试时可以提供模拟着色器，作业人员可以在模拟着色器中行着色器代码调试，然后可以将调试的内容转换成真正的webgl着色器字符串，嵌入到真正的webgl着色器代码中运行，实现原webgl着色器的调试。本申请解决了web端无法调试着色器的问题，并且以性能换效果，可以显著提高着色器调试效率，对未来web端进行3d开发、vr/ar开发提供强有力的技术支持。

尽管本申请内容中提到采用js代码编写模拟着色器、着色器各个变量之间的通信及数值计算、模拟着色器和原着色器之间代码的转换规则、参数调用方式等之类的页面设计语言、规则定义、消息交互等的描述，但是，本申请并不局限于必须是符合业内标准页面设计语言、消息传递、参数调用或实施例所描述的情况。某些行业标准或者使用自定义方式或实施例描述的实施基础上略加修改后的实施方案也可以实现上述实施例相同、等同或相近、或变形后可预料的实施效果。应用这些修改或变形后的判断、处理方式等获取的实施例，仍然可以属于本申请的可选实施方案范围之内。

虽然本申请提供了如实施例或流程图所述的方法操作步骤，但基于常规或者无创造性的手段可以包括更多或者更少的操作步骤。实施例中列举的步骤顺序仅仅为众多步骤执行顺序中的一种方式，不代表唯一的执行顺序。在实际中的装置或终端产品执行时，可以按照实施例或者附图所示的方法顺序执行或者并行执行(例如并行处理器或者多线程处理的环境，甚至为分布式数据处理环境)。术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、产品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、产品或者设备所固有的要素。在没有更多限制的情况下，并不排除在包括所述要素的过程、方法、产品或者设备中还存在另外的相同或等同要素。

上述实施例阐明的单元、装置或模块等，具体可以由计算机芯片或实体实现，或者由具有某种功能的产品来实现。为了描述的方便，描述以上装置时以功能分为各种模块分别描述。当然，在实施本申请时可以把各模块的功能在同一个或多个软件和/或硬件中实现，也可以将实现同一功能的模块由多个子模块或子单元的组合实现等。以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

本领域技术人员也知道，除了以纯计算机可读程序代码方式实现控制器以外，完全可以通过将方法步骤进行逻辑编程来使得控制器以逻辑门、开关、专用集成电路、可编程逻辑控制器和嵌入微控制器等的形式来实现相同功能。因此这种控制器可以被认为是一种硬件部件，而对其内部包括的用于实现各种功能的装置也可以视为硬件部件内的结构。或者甚至，可以将用于实现各种功能的装置视为既可以是实现方法的软件模块又可以是硬件部件内的结构。

本申请可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构、类等等。也可以在分布式计算环境中实践本申请，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

通过以上的实施方式的描述可知，本领域的技术人员可以清楚地了解到本申请可借助软件加必需的通用硬件平台的方式来实现。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在存储介质中，如rom/ram、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，移动终端，服务器，或者网络设备等)执行本申请各个实施例或者实施例的某些部分所述的方法。

本说明书中的各个实施例采用递进的方式描述，各个实施例之间相同或相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。本申请可用于众多通用或专用的计算机系统环境或配置中。例如：个人计算机、服务器计算机、手持设备或便携式设备、平板型设备、多处理器系统、基于微处理器的系统、置顶盒、可编程的电子设备、网络pc、小型计算机、大型计算机、包括以上任何系统或设备的分布式计算环境等等。

虽然通过实施例描绘了本申请，本领域普通技术人员知道，本申请有许多变形和变化而不脱离本申请的精神，希望所附的权利要求包括这些变形和变化而不脱离本申请的精神。