CN116186240B - 基于WebGL的动态高性能批量文本渲染方法、系统及程序产品 - Google Patents

Abstract

本发明涉及一种基于WebGL的动态高性能批量文本渲染方法、系统以及程序产品，该方法包括：响应于用户的操作从关联图数据可视化场景中获取到至少一个目标节点，且目标节点关联有至少一个文本信息，文本信息中包括至少一个语句；基于至少一个目标节点对应地获取语句信息集，其中，语句信息集包括从相对应的文本信息中获取到的至少一个语句的绘制信息；基于语句信息集对应地获取到至少一个语句集合图像信息数组，语句集合图像信息数组包括对应于语句的有符号距离场信息；基于语句集合图像信息数组实现文本渲染与显示。本发明方法可以应用于交互式三维数据可视化中批量文本的快速显示，大大提高用户的操作流畅度。

Description

基于WebGL的动态高性能批量文本渲染方法、系统及程序产品

技术领域

本发明涉及关联图数据可视化领域，具体涉及一种基于WebGL的动态高性能批量文本渲染方法、系统及程序产品。

背景技术

关联图数据可视化场景指的是对多个相关联的节点的数据或节点之间的关系进行可视化显示的场景，在关联图中，节点表示实体或概念，边则表示实体之间的关联关系。关联图数据可视化技术(也被称为关联图技术)应用广泛，如关联图的布局可用于搜索引擎，将关于某节点的属性或与其它节点的关系等信息展示出来，方便人们更便捷的获取信息。例如，专利申请号为CN202110671288.5的中国专利申请，其公开了一种网络实体行为关联构建方法，其通过构建网络实体行为关联图数据，提供检索服务，能够充分利用威胁情报和漏洞知识数据，全方位地感知网络空间威胁。

其中，当利用关联图数据可视化技术进行数据处理时，及时地将关于某节点的属性或与其它节点的关系等信息展示出来是该技术的核心特点之一，也是实际应用过程中的一大技术难点。在数据的可视化过程中，常常需要对节点属性中所包含的各类文本信息进行显示。而由于节点数据量巨大，且对文本信息显示的及时性要求也相对较高，传统的文本渲染显示方法(例如，利用SDF技术预先生成字符库)往往难以满足关联图数据可视化场景中的实时性要求，一旦节点数据量较多或者用户的操作(比如旋转、平移、缩放等)导致节点位置发生快速变化时，运行过程中卡顿现象也就会愈加严重，由此严重影响用户的操作体验。

发明内容

本发明的目的在于提供一种基于WebGL的动态文本渲染方法，部分地解决或缓解现有技术中的上述不足，能够提高关联图数据可视化场景中批量文本的显示速度。

本发明第一方面在于，提供了一种基于WebGL的动态高性能批量文本渲染方法，包括步骤：

S10响应于用户的操作从关联图数据可视化场景中获取到至少一个目标节点，且至少一个所述目标节点关联有至少一个文本信息，所述文本信息中包括至少一个语句；

S20基于至少一个所述目标节点对应地获取到语句信息集，其中，所述语句信息集包括：对应于所述语句的语句对象；

S30基于所述语句信息集对应地获取到语句集图像信息集，其中，所述语句集图像信息集包括：语句集合图像信息数组，以及所述语句对象的节点位置，且所述语句集合图像信息数组包括所述语句对象的有符号距离场信息；

S40将所述语句集图像信息集发送到图形处理器，并基于所述图形处理器对所述语句集图像信息集进行渲染，从而实现对所述目标节点的文本渲染显示；

其中，步骤S30包括：

S31基于至少一个所述语句对象在画布层上对至少一个所述语句进行绘制，从而绘制得到至少一个第一语句图片；

S32基于有符号距离场算法对所述第一语句图片进行生成阴影处理，并对应地获取到至少一个第二语句图片；

S33基于至少一个第二语句图片生成所述语句集合图像信息数组。

在一些实施例中，在S31之前还包括步骤：

提供预存的缓存内容，其中，所述缓存内容中包括至少一个缓存图片，所述缓存图片包括：所述语句对象的有符号距离场信息；

基于所述语句对象和所述缓存内容判断至少一个所述语句对象是否存在相应的缓存图片，其中，

当至少一个所述语句对象不存在相应的缓存图片时，则基于相对应的所述语句对象从所述语句信息集中获取到语句信息子集，并基于所述语句信息子集执行步骤S31；

当至少一个所述语句对象存在所述缓存图片时，则基于所述语句对象从所述缓存内容中获取到对应的所述缓存图片，基于所述缓存图片生成语句集合图像信息数组，或者，基于所述缓存图片和所述第二语句图片共同生成语句集合图像信息数组。

在一些实施例中，S31包括：

提供所述画布层，并对应地提供用于访问所述画布层的有限访问点；

通过所述有限访问点发送绘制请求至所述画布层中，所述画布层基于所述绘制请求绘制得到至少一个所述第一语句图片，其中，所述绘制请求包括：对应的所述语句对象。

在一些实施例中，在步骤S31之前，还包括：

检测所述语句对象的绘制状态，所述绘制状态包括：待绘制，和/或绘制中，和/或绘制完成；

当检测到所述语句对象的绘制状态为待绘制时，则执行S31；

当检测到所述语句对象的绘制状态为绘制中和/或绘制完成时，则跳转并处理下一个所述语句对象。

在一些实施例中S10包括：

响应于用户的操作获取至少一个所述节点的显示参数，且当所述显示参数符合预设的显示条件时，将所述节点识别为目标节点；其中，所述显示参数包括：所述节点的显示坐标，和/或所述节点的放大值。

在一些实施例中S10还包括步骤：

基于所述显示参数确定所述目标节点的显示优先级；

相应的所述语句信息集中还包括：所述语句对象的显示优先级。

在一些实施例中，所述第一语句图片还关联有所述语句对象在所述第一语句图片中的行位置；S32包括：

基于有符号距离场算法对所述第一语句图片进行生成阴影处理，对应得到阴影图片；

基于所述行位置对所述阴影图片进行分割，从而得到分别对应于各个所述语句对象的所述第二语句图片，其中，所述第二语句图片还关联有所述节点位置。

本发明第二方面在于，还提供了一种基于WebGL的动态高性能批量文本渲染系统，包括：

目标节点获取模块，被配置为用于响应于用户的操作从关联图数据可视化场景中获取到至少一个目标节点，且至少一个所述目标节点关联有至少一个文本信息，所述文本信息中包括至少一个语句；

语句信息获取模块，被配置为用于基于至少一个所述目标节点对应地获取到语句信息集，其中，所述语句信息集包括：对应于所述语句的语句对象；

语句图片获取模块，被配置为用于基于所述语句信息集对应地获取到语句集图像信息集，其中，所述语句集图像信息集包括：语句集合图像信息数组，以及所述语句对象的节点位置，且所述语句集合图像信息数组包括所述语句对象的有符号距离场信息；

渲染模块，被配置为用于将所述语句集图像信息集发送到图形处理器，并基于所述图形处理器对所述语句集图像信息集进行渲染，从而实现对所述目标节点的文本渲染显示；

其中，语句图片获取模块包括：

绘制单元，被配置为用于基于所述语句对象在画布层上对至少一个所述语句进行绘制，从而绘制得到至少一个第一语句图片；

语句图片获取单元，被配置为用于基于有符号距离场算法对所述第一语句图片进行生成阴影处理，并对应地获取到至少一个第二语句图片；

数组生成单元，被配置为用于基于至少一个第二语句图片生成所述语句集合图像信息数组。

在一些实施例中，所述绘制单元被进一步地配置为用于提供所述画布层，并对应地提供用于访问所述画布层的有限访问点；通过所述有限访问点发送绘制请求至所述画布层中，所述画布层基于所述绘制请求绘制得到至少一个所述第一语句图片，其中，所述绘制请求包括：对应的所述语句对象。

本发明第三方面在于，还提供了一种计算机程序产品，包括计算机指令，所述计算机指令被处理器执行时实现如上述实施例中任一所述方法的步骤。

有益技术效果：本发明针对局部性的动态批量文字显示场景，提供了一种高性能的文本渲染方法。首先，本发明将一段文本中的语句视作为最小转换操作单元，并将拆分所得的语句对象视作为图片对象。随后，再采用画布层通过绘制、生成阴影等处理得到相应的语句图片，并基于所有语句图片生成语句集图像信息数组(即SDF信息)，且图像信息数组还关联有节点位置。最后，当渲染显示时可以通过节点位置快速检索到对应的图像信息，从而组合成完整的文本。

在此过程中，本发明采用了语句作为最小转换单元的模式，有效减少了网络请求、渲染等线程调用的次数；同时，采用了图像信息数组与节点位置二者相配合的方式，高效地解决了文本排版的问题。因此，本发明可以在一定程度上摆脱对预先生成字符库的依赖，实时地批量渲染文字内容。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍。在所有附图中，类似的元件或部分一般由类似的附图标记标识。附图中，各元件或部分并不一定按照实际的比例绘制。显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以在这些附图的基础上作出各种替换或改造，这些替换或改造都属于本发明的保护范围。

图1为本发明一示例性实施例中的方法流程示意图；

图2为本发明一示例性实施例中生成图像信息数组的流程示意图；

图3a为Graph XR的第一操作状态示意图；

图3b为Graph XR的第二操作状态示意图；

图4a为本发明一示例性实施例中的交互式三维数据可视化平台的显示界面示意图；

图4b示出了阿拉伯文字的部分字母信息；

图5为本发明一具体实施例中的方法流程示意图；

图6为本发明一示例性实施例中文本渲染系统的模块结构示意图。

具体实施方式

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

本文中，使用用于表示元件的诸如“模块”、“部件”或“单元”的后缀仅为了有利于本发明的说明，其本身没有特定的意义。因此，“模块”、“部件”或“单元”可以混合地使用。

本文中，术语“上”、“下”、“内”、“外”“前”、“后”、“一端”、“另一端”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本发明的限制。此外，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性。

本文中，除非另有明确的规定和限定，术语“安装”、“设置有”、“连接”等，应做广义理解，例如“连接”，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本发明中的具体含义。

本文中“和/或”包括任何和所有一个或多个列出的相关项的组合。

本文中“多个”意指两个或两个以上，即其包含两个、三个、四个、五个等。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。

如在本说明书中使用的，术语“大约”，典型地表示为所述值的+/-5％，更典型的是所述值的+/-4％，更典型的是所述值的+/-3％，更典型的是所述值的+/-2％，甚至更典型的是所述值的+/-1％，甚至更典型的是所述值的+/-0.5％。

在本说明书中，某些实施方式可能以一种处于某个范围的格式公开。应该理解，这种“处于某个范围”的描述仅仅是为了方便和简洁，且不应该被解释为对所公开范围的僵化限制。因此，范围的描述应该被认为是已经具体地公开了所有可能的子范围以及在此范围内的独立数字值。例如，范围的描述应该被看作已经具体地公开了子范围如从1到3，从1到4，从1到5，从2到4，从2到6，从3到6等，以及此范围内的单独数字，例如1，2，3，4，5和6。无论该范围的广度如何，均适用以上规则。

名词释义：

本文中，有符号距离场(SDF：Signed Distance Field)在3d和2d中都有对应的应用。在3d中光线追踪对于性能的消耗过大，所以SDF常常被用来作为物体的隐式表达，配合光线行进(ray marching)达到接近光线追踪的效果，也有比如deepSDF这种对于模型的隐式表达方面的应用。在2d中，SDF常常被用来表示字体。SDF可以存储每个点到图形的最近距离，即将模型划出一个表面，在模型表面外侧的点数值大于0，在模型表面内侧的点数值小于0。

在计算机图形的上下文中，距离场通常是有符号的，以表示像素点(或者网格)位置是否在物体内，对应到本发明中的语句图片来说，主要可用于生成阴影。

本文中，“WebGL”是一项用来在网页上绘制和渲染复杂二维、三维图形(3D图形)，并允许用户与之进行交互的技术。

实施例一

如图1-图5所示，本发明第一方面在于，提供了一种基于WebGL的动态文本渲染方法，参见图1和图2，所述方法包括步骤：S10响应于用户的操作从关联图数据可视化场景中获取到至少一个目标节点，且至少一个所述目标节点关联有至少一个文本信息，所述文本信息中包括至少一个语句；

S20基于至少一个所述目标节点对应地获取到语句信息集，其中，所述语句信息集包括：对应于所述语句的语句对象；

S30基于所述语句信息集对应地获取到语句集图像信息集，其中，所述语句集图像信息集包括：语句集合图像信息数组，以及所述语句对象的节点位置，且所述语句集合图像信息数组包括所述语句对象的有符号距离场信息；

S40将所述语句集图像信息集发送到图形处理器，并基于所述图形处理器对所述语句集图像信息集进行渲染，从而实现对所述目标节点的文本渲染显示；

其中，步骤S30包括：

S31基于至少一个所述语句对象在画布层上对至少一个所述语句进行绘制，从而绘制得到至少一个第一语句图片；

S32基于有符号距离场算法对所述第一语句图片进行生成阴影处理，并对应地获取到至少一个第二语句图片；

S33基于至少一个第二语句图片生成所述语句集合图像信息数组。

在一些实施例中，在S31之前还包括步骤：

提供预存的缓存内容，其中，所述缓存内容中包括至少一个缓存图片，所述缓存图片包括：所述语句对象的有符号距离场信息；

基于所述语句对象和所述缓存内容判断至少一个所述语句对象是否存在相应的缓存图片，其中，

当至少一个所述语句对象不存在相应的缓存图片时，则基于相对应的所述语句对象从所述语句信息集中获取到语句信息子集，并基于所述语句信息子集执行步骤S31；

当至少一个所述语句对象存在所述缓存图片时，则基于相应地所述语句对象从所述缓存内容中获取到对应的所述缓存图片，基于所述缓存图片生成语句集合图像信息数组，或者，基于所述缓存图片和所述第二语句图片共同生成语句集合图像信息数组。

在一些实施例中，缓存内容中的缓存图片为历史生成的第二语句图片。

在一些实施例中，语句集合图像信息数组为二进制图片数据数组。

可以理解的是，在一些实施例中，一段文本可以拆分成多个语句，每个语句可以生成一个语句图片。其中，一段文本可以对应于一个语句图像信息数组。而语句集中的所有语句对象对应的总的语句图像信息数组，其包括：缓存的语句图像信息数组，和实时生成的新的语句图像信息数组。其中，缓存的语句图片是按语句集合位置(也即语句在关联数据图可视化场景中的显示位置或显示顺序)，将缓存的语句图片的信息加到总的语句集合图片数组中。例如，statesImagesBuffer[statementIndex]＝cacheBuffer[md5(statementText)]。

在一些实施例中，关联图数据可视化场景可以为交互式三维数据可视化平台，其中，关联图数据的可视化效果(即显示内容或显示状态)与用户的操作动态关联。基于此类平台可以利用三维空间展示与分析数据。在阅览与分析过程中，用户可以通过旋转、放缩、平移等操作对可视化效果进行调整；或者，用户还可以通过改变/调整数据的分析逻辑(例如，更改节点数据的提取、合并等计算条件)对可视化效果进行调整；又或者，用户还可以通过改变/调整显示类型(例如，将显示节点的属性信息修改为仅显示节点的关系信息)等操作对可视化效果进行调整，从而以可视化的方式实现数据在三维空间上的阅览与分析。

在一些实施例中，在S40的渲染显示过程中，还可以获取语句对象或文本信息的修改配置信息。其中，修改配置信息包括：所述语句或所述文本信息在场景中的空间显示位置，如显示方向，显示位置(具体为相对于节点的显示位置，如节点周边位置等)。本实施例中，在文本渲染显示的过程中，需要综合地结合所述修改配置信息以及所述语句集图像信息集进行文本渲染与显示。

进一步地，在一些实施例中，修改配置信息可以由用户进行自行设置。

本实施例中所涉及的关联图数据可视化技术(在本文中，也被简称为关联图技术)可以广泛应用于各个领域的数据分析处理，例如，生命科学、公共安全、商业智能、知识图谱、智能制造、风险评估等。

为了更清楚地说明本发明所采用技术方案，下面将主要以社交媒体网络数据分析为例对本发明实施例中的示例性方法进行示说明：

本实施例中所选用的社交媒体网络数据可以为任意一个或多个社交媒体平台的账号信息，且每一个账号信息可以与一个或多个节点相关联(例如，一个节点可以是发布的一条发文信息，也可以是一个关注账号，也可以是转发评论的信息等等)。其中，账号信息可以包括用于反应该账号在社交媒体平台上的部分或所有活动数据，如账号ID、头像信息、账号简介信息以及账号的发文信息、关注账号、评论等等。

当用户(即数据分析技术人员)希望就某一热点话题筛选查看各个账号中的相关联的发文信息时，则可以获取到这些发文信息(相当于S10中的所述文本信息)，并通过渲染显示在屏幕中。

具体地，在本实施例中，首先确定出需要显示的目标节点，如果目标节点是发文信息(或评论)，随后则显示发文信息(或评论)。在显示过程中，则将对这些发文信息进行分析，并将发文信息拆分为一个个语句。

在一些实施例中，可以以语法规则来实现语句的拆分。例如，文本信息的拆分规则可以为以标点符号(优选为被设置在完整句子末尾的句号、感叹号、问号)进行断句。如一个发文信息的文本内容包括：“Nice meet you.Nice meet you too.”。对应提取到的语句对象分别为：“Nice meet you.”、“Nice meet you too.”。同时，还可以记录下各个语句对象的节点位置，节点位置包括：第一位置信息，且第一位置信息用于表示节点在空间中的显示位置，以及第二位置信息(如对应语句在发文信息中行坐标)。

当然，在另一些实施例中，也可以基于语句的行坐标进行断句。如分别将一行或多行文字划分为一个语句。

进一步地，当完成语句的拆分、获取之后，则对应地获取到语句信息集(也即可见语句集)，语句信息集中包括了所有语句对象。其中，一个目标节点可以仅有一个语句，也可以被拆分为两个或多个语句。

参见图4，基于语句信息集，首先在缓存内容中进行检索，如果在语句信息集中已经缓存了缓存图片(也被称为SDF信息)，则直接调用获取这些SDF信息。如果存在部分语句没有缓存的SDF信息可调用，则可以提取未缓存的语句集合。随后，可以采用画布(优选为Canvas)对这些语句依次进行绘制得到第一语句图片；然后基于SDF算法对绘制图片进行生成阴影处理以生成第二语句图片；再读取第二语句图片的buffer数据；最后以语句为单位切割buffer数据，所切割的buffer数据也就是对应于每个语句的SDF信息。在获取到所有语句的SDF信息之后，可以将所有的SDF信息生成一个总的语句集合图像信息数组，其中，语句集合图像信息数组包括：所有需要显示的语句对象的SDF信息，以及各个SDF信息所对应的节点位置。数据组随后配合ShaderMaterial(着色器材质)传送到GPU(图形处理器)中。

GPU根据语句集合图像信息数组、以及节点位置对应地读取SDF信息，并优选地按透明值0.5的方式截取，从而对文本信息进行渲染显示。其中，SDF信息中透明值小于0.5的不显示，从而使得SDF信息可以达到可缩放的类似矢量图的效果。SDF信息中的边沿采用的是计算值，以避免文本显示时出现锯齿。

在一些实施例中，节点位置包括：节点在关联图数据可视化场景中的显示坐标。

在一些实施例中，节点位置包括：节点在关联图数据可视化场景中的显示坐标，以及语句对象在节点位置所对应的文本信息中的位置，如行坐标等。

对于上述过程中生成的新的buffer数据，可以将其存入到缓存内容中。具体地，可以将语句对象的散列函数(md5)作为缓存key，来缓存buffer信息。当获取到相应的语句的md5值时，则可以基于md5值读取buffer信息。

需要注意的是，在现有的基于SDF技术实现的文本渲染过程中，通常是预先建立SDF字符库，因而实际的文本渲染过程中可以在一定程度上减小实时生成字符量。但是，当面临关联图数据可视化场景中的大量数据的快速动态变化时(如用户进行旋转，平移等操作导致节点空间变化频繁的时候)，这种字符库的优势作用则非常局限。而本申请为优化SDF信息的生成逻辑，以语句为单位进行数据的读取与绘制(也即将一个个语句视作为最小转换操作单位)，相应地还简化后续的SDF信息调用逻辑。因此，在关联图数据可视化场景中的动态变化过程中，本方法可以实时响应用户的操作动态地生成SDF信息并完成文字显示。

进一步地，本实施例中还结合了缓存内容进一步地提高文字显示速度。其中，缓存内容中的信息可以为关联图数据可视化场景背后数据库中出现频次较高的语句的SDF信息，也可以为历史一段时间内生成的SDF信息。

在一些实施例中，S31包括：

提供所述画布层(canvas)，并对应地提供用于访问所述画布层的有限访问点；

通过所述有限访问点发送绘制请求至所述画布层中，所述画布层基于所述绘制请求绘制得到至少一个所述第一语句图片，其中，所述绘制请求包括：对应的所述语句对象。

在一些实施例中，针对关联图数据可视化场景的动态变化/显示过程，优选地仅设置有单个访问点(相当于提供了单例模式)，每次需要进行语句内容绘制时，用户仅能通过单个访问点来调用画布功能。其中，单个访问点的设置使得画布层成为了一个共享画布层，所有的绘制都在该共享画布层中进行绘制，这也更加便于用户对画布层资源的协调管理。

本实施例中，一方面可以在共享画布层上对批量的语句对象进行集中式的绘制，并且在绘制完成后可以方便快捷地对绘制信息进行拆分组合以获取到总的图像信息数组；另一方面，集中式的语句绘制可以避免由于动态文本渲染过程中过多地启用、销毁画布层，而造成资源的低效占用的问题。

当然，在另一些实施例中，当有限访问点的个数也可以设置为两个或多个。如当前场景中的单位时间内需要绘制的语句内容超过预设的绘制量时，则也可以对应提供两个访问点以启用两个画布层。对应地，针对两个画布层采用双线程的方式进行语句图片绘制以及画布层的管理。

在一些实施例中，语句在画布层中的绘制行高是固定的(相应的，绘制位的大小也是固定的)，或者说，各个语句的绘制行高是统一的，从而便于后续对绘制图片的快速切割与切割后所生成的语句集合图像信息数组进行便捷管理。

例如，在一些实施例中，可以按照语句对象的显示顺序依次地将语句对象绘制在画布层上，最终可以按照固定的行高快速截取每个语句对应的语句图像buffer数据。并且，由于语句对象是基于显示顺序进行绘制的，且绘制行高固定，后续也可以方便地将截取到的语句图像buffer数据与节点位置相关联。

当然，在另一些实施例中，尤其在单位时间内，所需批量显示的文本数量过多时，也可以提供一个用于管理所述绘制位的工作状态的画布管理器；

其中，当所述画布管理器检测到当前获取到新的绘制请求时；

检索所述工作状态为空闲的所述绘制位，其中绘制位优选地设定有固定行高；

并将相应的绘制请求发送至对应的所述绘制位，其中所述绘制请求包括：待绘制的语句对象，并将所述绘制位的所述工作状态更新为占用；

当所述画布管理器检测到所述绘制数据已被读取时，则清除所述绘制位中的绘制信息，并将所述工作状态更新为空闲。

例如，在一些实施例中，当语句没有预先缓存的信息时，则需要实时生成SDF信息。本实施例中生成SDF信息的步骤包括：

提供一个画布层，其中画布层中预先规划有多个绘制位，且绘制位关联有用于表示绘制位是否被占用的标签，即空闲、占用标签。

当检测到存在一个语句没有缓存的SDF信息时，且没有处于绘制过程中，则检索画布层中是否存在标记为空闲的绘制位。随后，在空闲的绘制位上绘制语句图片，并在相应的语句图片上标记节点位置。然后对绘制图片进行生成阴影处理，最终得到语句的SDF信息，并将该SDF信息与其他已经获取的SDF信息共同生成一个语句集合图像信息数组。最后将绘制位进行清空处理。本实施例中可以对绘制位进行动态管理，从而保证SDF信息的有序生成与传输。

可以理解的是，在一些实施例中，当当前显示时刻下(或单位时间内)待显示的语句数量相对较少时，可以一次性地生成当前显示时刻下所有未缓存的语句的SDF信息，然后整体配合ShaderMaterial传输到GPU。

或者，在另一些实施例中，当当前时刻下显示的语句数据量相对较多时，也可以采用动态管理绘制位的方式，将当前时刻下的所有未缓存的语句基于显示优先级(显示优先级的确定将在下文中进行说明)分为一个、两个或多个语句子集，并以一个、两个或多个语句子集为单位实现SDF信息的生成与传输过程。

在一些实施例中，S10包括：

响应于用户的操作获取至少一个所述节点的显示参数，且当所述显示参数符合预设的显示条件时，将所述节点识别为目标节点；其中，所述显示参数包括：所述节点的显示坐标，和/或所述节点的放大值。

在一些实施例中，S10还包括步骤：

基于所述显示参数确定所述目标节点的显示优先级；相应的所述语句信息集中还包括：所述语句对象的显示优先级。

在一些实施例中，用户的操作包括：旋转、缩放、平移等一个或多个使得关联图数据可视化场景发生动态变化的操作模式。在用户的操作过程中，关联图数据中的各个节点的显示状态也将发生变化，本实施例中将基于显示坐标与节点的放大值确定哪些为目标节点(也即是需要详细显示文本内容的节点)。其中，目标节点的判断/选取方式以及显示优先级的判断方式可以基于用户结合实际操作环境进行显示。

例如，在一些实施例中，当应用于超宽屏关联图数据显示场景(尤其是大屏幕投影时)时，将位于屏幕中央位置区域的节点的显示优先级设置为第I优先级，两侧区域的节点设置为第II优先级。同时，还可以在同一显示区域中基于节点的单位时间放大值对显示优先级进行设定，如将放大值大于或等于预设放大值(可以工作人员自行设定)的节点设置为第I1优先级，将放大值小于预设放大值的节点设置为第I2优先级。

又例如，当应用于普通的个人计算机界面时，优选地基于节点的单位时间放大值确定显示优先级，如放大值越大，则显示优先级越靠前。

进一步地，在一些实施例中，语句信息集还可以基于上述显示优先级被对应地划分为多个子集，子集关联有对应的显示优先级。由此在相应的步骤中可以基于子集的显示优先级依次实现文本渲染与显示。

在一些实施例中，所述第一语句图片还关联有所述语句对象在所述第一语句图片中的行位置(也即行坐标)；S32包括：

基于有符号距离场算法对所述第一语句图片进行生成阴影处理，对应得到阴影图片；

基于所述行位置对所述阴影图片进行分割，从而得到多个分别对应于各个所述语句对象的所述第二语句图片，其中，所述第二语句图片还关联有所述节点位置。

例如，在绘制图片时记录下语句A在画布层进行绘制时所占用的行位置为Y1-Y2，随后则可以直接将Y1-Y2处的数据进行分割，并读取相应的buffer数据。

其中，SDF中的阴影用的是光线追踪的原理，相当于文本(或文本笔迹)是发光体，距离文本(笔迹)越远则越暗，由此可以对应生成阴影图片。其中，所生成的阴影图片为黑白图像，黑白图像上的每一个像素都是由黑到白的渐变过程，当某一像素的取值属于预设的阈值范围时(例如，当取值小于0.5时)，则可认为所述像素点处于可以舍弃阴影区域，即文本笔迹边沿采用的是计算值(类似于矢量图)，从而可以消除由于文本图形缩放所导致的锯齿。

具体地，这种交互式三维数据可视化平台可以为GraphXR，GraphXR的实际操作场景如图3a、图3b所示，当用户对图3a进行旋转时，GraphXR的可视化效果可以从图3a转变为图3b。

值得注意得是，本发明实施例中将语句对象视为文本信息中的最小组成单元,并在将语句对象视为图形进行操作处理，由此实现了SDF的生成、传输以及渲染过程中的优化设计。其中，由于将语句视作为了图片对象(记录下语句的节点位置)，并还可以在语句绘制时记录下语句的绘制位置(即在画布层中的行坐标)，这为后续的逻辑设计带来了极大的便利。具体地，后续可以基于语句的行坐标对语句进行快速地检索，并结合语句的节点位置信息对其进行快速重装，从而对文本内容进行完整地显示。

同时，将语句视作为图片对象还可以带来了另一有益效果：大大地降低了排版的难度。

如图4a、4b所示，对于一些特殊的语言文字如阿拉伯文字，同样一个字母在上下文不同位置之处的写法可能并不相同，由此导致其在不同位置显示时其宽度、间隔等排版数据也不相同。另一方面每个不同字母的显示宽度也有区别，因此在实际显示过程中需要对字符的排版数据进行多次计算，严重影响文本显示效率。可以理解的是，尤其是当涉及到多国语言显示时，不同文字的宽度间距不同将导致排版难度进一步增加。而本实施例中没有采用常规的思路——将文本信息视为一个个碎片化的字符，而是将一段文本信息中的语句作为最小单位(即最小操作转换对象)。因此，在本发明中这些排版数据(如宽度、高度、间距等等)均被视作为了图形元素，在图形处理过程中与文字内容实现了同步处理，无需单独排版。

现有SDF方案(例如，采用SDF字符库进行字符显示的方式)，由于使用WebGL渲染，通常意味着每秒需要至少24次遍历拼接字符成语句，对CPU性能来说是严峻挑战。本发明中使用语句为最小操作转化单位，并结合行坐标实现文本的排版，替换了现有的字符排版的模式，由此省去了大量的图片字体库查询遍历计算，大大提高了CPU渲染性能。

因此，本发明可以轻松支持多国语言的动态高清渲染显示。对大数据可视化分析意义重大，特别是涉及社交类型的关系数据，往往同时涉及到全世界各种语言信息。另外也是对中文和日文这类有超大字符集的语言提供了动态高清显示方案。

实施例二

本发明第二方面在于，还对应地提供了一种基于WebGL的动态高性能批量文本渲染系统，如图6所示，包括：

目标节点获取模块10，被配置为用于响应于用户的操作从关联图数据可视化场景中获取到至少一个目标节点，且至少一个所述目标节点关联有至少一个文本信息，所述文本信息中包括至少一个语句；

语句信息获取模块20，被配置为用于基于至少一个所述目标节点对应地获取到语句信息集，其中，所述语句信息集包括：对应于所述语句的语句对象；

语句图片获取模块30，被配置为用于基于所述语句信息集对应地获取到语句集图像信息集，其中，所述语句集图像信息集包括：语句集合图像信息数组，以及所述语句对象的节点位置，且所述语句集合图像信息数组包括所述语句对象的有符号距离场信息；

渲染模块40，被配置为用于将所述语句集图像信息集发送到图形处理器，并基于所述图形处理器对所述语句集图像信息集进行渲染，从而实现对所述目标节点的文本渲染显示；

其中，语句图片获取模块30包括：

绘制单元，被配置为用于基于至少一个所述语句对象在画布层上对至少一个所述语句进行绘制，从而绘制得到至少一个第一语句图片；

语句图片获取单元，被配置为用于基于有符号距离场算法对所述第一语句图片进行生成阴影处理，并对应地获取到至少一个第二语句图片；

数组生成单元，被配置为用于基于至少一个第二语句图片生成所述语句集合图像信息数组。

在一些实施例中，所述绘制单元被进一步地配置为用于提供所述画布层，并对应地提供用于访问所述画布层的有限访问点；通过所述有限访问点发送绘制请求至所述画布层中，所述画布层基于所述绘制请求绘制得到至少一个所述第一语句图片，其中，所述绘制请求包括：对应的所述语句对象。

在一些实施例中，所述系统还包括：

缓存模块，被配置为用于提供预存的缓存内容，其中，所述缓存内容中包括至少一个缓存图片，所述缓存图片包括：所述语句对象的有符号距离场信息；

判断模块，被配置为用于基于所述语句对象和所述缓存内容判断至少一个所述语句对象是否存在相应的缓存图片，其中，当至少一个所述语句对象不存在相应的缓存图片时，则基于相对应的所述语句对象从所述语句信息集中获取到语句信息子集，并将所述语句信息子集发送至所述绘制单元；当至少一个所述语句对象存在所述缓存图片时，则基于所述语句对象从所述缓存内容中获取到对应的所述缓存图片，基于所述缓存图片生成语句集合图像信息数组，或者，基于所述缓存图片和所述第二语句图片共同生成语句集合图像信息数组。

在一些实施例中，还包括：

检测模块，被配置为用于检测所述语句对象的绘制状态，所述绘制状态包括：待绘制，和/或绘制中，和/或绘制完成；当检测到所述语句对象的绘制状态为待绘制时，则将所述语句对象发送至所述绘制单元；当检测到所述语句对象的绘制状态为绘制中和/或绘制完成时，则跳转并处理下一个所述语句对象。

在一些实施例中，目标节点获取模块10还被进一步地配置为用于响应于用户的操作获取至少一个所述节点的显示参数，且当所述显示参数符合预设的显示条件时，将所述节点识别为目标节点；其中，所述显示参数包括：所述节点的显示坐标，和/或所述节点的放大值。

在一些实施例中，目标节点获取模块10还被进一步地配置为用于基于所述显示参数确定所述目标节点的显示优先级；

相应的所述语句信息集中还包括：所述语句对象的显示优先级。

在一些实施例中，所述第一语句图片包括：所述语句对象在所述第一语句图片中的行位置(也即行坐标)；语句图片获取单元被进一步地配置为用于基于有符号距离场算法对所述第一语句图片进行生成阴影处理，对应得到阴影图片；基于所述行位置对所述阴影图片进行分割，从而得到分别对应于各个所述语句对象的所述第二语句图片，其中，所述第二语句图片还关联有所述节点位置。

可以理解的是，本实施例中的系统可以实现上述实施例一种任意方法步骤，此处不再赘述。

实施例三

本发明第三方面还提供了一种计算机程序产品，包括计算机指令，所述计算机指令被处理器执行时实现如上述实施例中任一所述方法的步骤。例如，可以执行以下步骤：

S10响应于用户的操作从关联图数据可视化场景中获取到至少一个目标节点，且至少一个所述目标节点关联有至少一个文本信息，所述文本信息中包括至少一个语句；

S20基于至少一个所述目标节点对应地获取到语句信息集，其中，所述语句信息集包括：对应于所述语句的语句对象；

S30基于所述语句信息集对应地获取到语句集图像信息集，其中，所述语句集图像信息集包括：语句集合图像信息数组，以及所述语句对象的节点位置，且所述语句集合图像信息数组包括所述语句对象的有符号距离场信息；

S40将所述语句集图像信息集发送到图形处理器，并基于所述图形处理器对所述语句集图像信息集进行渲染，从而实现对所述目标节点的文本渲染显示；

其中，步骤S30包括：

S31基于至少一个所述语句对象在画布层上对至少一个所述语句进行绘制，从而绘制得到至少一个第一语句图片；

S32基于有符号距离场算法对所述第一语句图片进行生成阴影处理，并对应地获取到至少一个第二语句图片；

S33基于至少一个第二语句图片生成所述语句集合图像信息数组。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台计算机终端(可以是计算机，服务器，手机，平板电脑，VR设备，AR设备，MR设备，或者网络设备等)执行本发明各个实施例所述的方法。

上面结合附图对本发明的实施例进行了描述，但是本发明并不局限于上述的具体实施方式，上述的具体实施方式仅仅是示意性的，而不是限制性的，本领域的普通技术人员在本发明的启示下，在不脱离本发明宗旨和权利要求所保护的范围情况下，还可做出很多形式，这些均属于本发明的保护之内。

Claims (10)

1.一种基于WebGL的动态高性能批量文本渲染方法，其特征在于，包括步骤：S10响应于用户的操作从关联图数据可视化场景中获取到至少一个目标节点，且至少一个所述目标节点关联有至少一个文本信息，所述文本信息中包括至少一个语句；

S20基于至少一个所述目标节点对应地获取到语句信息集，其中，所述语句信息集包括：对应于所述语句的语句对象；

S30基于所述语句信息集对应地获取到语句集图像信息集，其中，所述语句集图像信息集包括：语句集合图像信息数组，以及所述语句对象的节点位置，且所述语句集合图像信息数组包括所述语句对象的有符号距离场信息；

S40将所述语句集图像信息集发送到图形处理器，并基于所述图形处理器对所述语句集图像信息集进行渲染，从而实现对所述目标节点的文本渲染显示；

其中，步骤S30包括：

S31基于至少一个所述语句对象在画布层上对至少一个所述语句进行绘制，从而绘制得到至少一个第一语句图片；

S32基于有符号距离场算法对所述第一语句图片进行生成阴影处理，并对应地获取到至少一个第二语句图片；

S33基于至少一个第二语句图片生成所述语句集合图像信息数组。

2.根据权利要求1所述的方法，其特征在于，在S31之前还包括步骤：

提供预存的缓存内容，其中，所述缓存内容中包括至少一个缓存图片，所述缓存图片包括：所述语句对象的有符号距离场信息；

基于所述语句对象和所述缓存内容判断至少一个所述语句对象是否存在相应的缓存图片，其中，

当至少一个所述语句对象不存在相应的缓存图片时，则基于相对应的所述语句对象从所述语句信息集中获取到语句信息子集，并基于所述语句信息子集执行步骤S31；

当至少一个所述语句对象存在所述缓存图片时，则基于所述语句对象从所述缓存内容中获取到对应的所述缓存图片，基于所述缓存图片生成语句集合图像信息数组，或者，基于所述缓存图片和所述第二语句图片共同生成语句集合图像信息数组。

3.根据权利要求1所述的方法，其特征在于，S31包括：

提供所述画布层，并对应地提供用于访问所述画布层的有限访问点；

通过所述有限访问点发送绘制请求至所述画布层中，所述画布层基于所述绘制请求绘制得到至少一个所述第一语句图片，其中，所述绘制请求包括：对应的所述语句对象。

4.根据权利要求1所述的方法，其特征在于，在步骤S31之前，还包括：

检测所述语句对象的绘制状态，所述绘制状态包括：待绘制，和/或绘制中，和/或绘制完成；

当检测到所述语句对象的绘制状态为待绘制时，则执行S31；

当检测到所述语句对象的绘制状态为绘制中和/或绘制完成时，则跳转并处理下一个所述语句对象。

5.根据权利要求1所述的方法，其特征在于，S10包括：

响应于用户的操作获取至少一个所述节点的显示参数，且当所述显示参数符合预设的显示条件时，将所述节点识别为目标节点；其中，所述显示参数包括：所述节点的显示坐标，和/或所述节点的放大值。

6.根据权利要求5所述的方法，其特征在于，S10还包括步骤：

基于所述显示参数确定所述目标节点的显示优先级；

相应的所述语句信息集中还包括：所述语句对象的显示优先级。

7.根据权利要求1所述的方法，其特征在于，所述第一语句图片还关联有所述语句对象在所述第一语句图片中的行位置；S32包括：

基于有符号距离场算法对所述第一语句图片进行生成阴影处理，对应得到阴影图片；

基于所述行位置对所述阴影图片进行分割，从而得到分别对应于各个所述语句对象的所述第二语句图片，其中，所述第二语句图片还关联有所述节点位置。

8.一种基于WebGL的动态高性能批量文本渲染系统，其特征在于，包括：

目标节点获取模块，被配置为用于响应于用户的操作从关联图数据可视化场景中获取到至少一个目标节点，且至少一个所述目标节点关联有至少一个文本信息，所述文本信息中包括至少一个语句；

语句信息获取模块，被配置为用于基于至少一个所述目标节点对应地获取到语句信息集，其中，所述语句信息集包括：对应于所述语句的语句对象；

语句图片获取模块，被配置为用于基于所述语句信息集对应地获取到语句集图像信息集，其中，所述语句集图像信息集包括：语句集合图像信息数组，以及所述语句对象的节点位置，且所述语句集合图像信息数组包括所述语句对象的有符号距离场信息；

渲染模块，被配置为用于将所述语句集图像信息集发送到图形处理器，并基于所述图形处理器对所述语句集图像信息集进行渲染，从而实现对所述目标节点的文本渲染显示；

其中，语句图片获取模块包括：

绘制单元，被配置为用于基于至少一个所述语句对象在画布层上对至少一个所述语句进行绘制，从而绘制得到至少一个第一语句图片；

语句图片获取单元，被配置为用于基于有符号距离场算法对所述第一语句图片进行生成阴影处理，并对应地获取到至少一个第二语句图片；

数组生成单元，被配置为用于基于至少一个第二语句图片生成所述语句集合图像信息数组。

9.根据权利要求8所述的系统，其特征在于，所述绘制单元被进一步地配置为用于提供所述画布层，并对应地提供用于访问所述画布层的有限访问点；通过所述有限访问点发送绘制请求至所述画布层中，所述画布层基于所述绘制请求绘制得到至少一个所述第一语句图片，其中，所述绘制请求包括：对应的所述语句对象。

10.一种计算机程序产品，包括计算机指令，其特征在于，所述计算机指令被处理器执行时实现如权利要求1-7中任一所述方法的步骤。