[发明专利]基于ThreeJS的图形分层显示方法、装置和存储介质

权利要求书

1.一种基于ThreeJS的图形分层显示方法，其特征在于，该方法包括以下步骤：

S1、规定场景业务要求，其中，所述场景业务要求包括：(1)二维网格对象的显示优先级高于三维网格对象；(2)在三维网格对象中，显示优先级排序依次为：选中模型而产生的高亮网格对象鼠标悬停而产生的高亮网格对象普通三维网格对象；

S2、根据场景业务要求对场景中的各网格对象按类型进行层级划分，并将层级作为属性与各类型的网格对象进行绑定；

S3、根据层级关系的不同，规定每层的渲染顺序以及各层内网格对象的渲染方式，其中显示优先级高的层级在后进行渲染；每层内的二维网格对象中，显示优先级高的网格对象在后进行渲染；每层内的三维网格对象中，通过深度检测在像素点对深度值小的物体进行渲染实现遮挡效果。

2.根据权利要求1所述的基于ThreeJS的图形分层显示方法，其特征在于：对于三维网格对象，深度值通过多边形偏移polygon offset来计算。

3.根据权利要求2所述的基于ThreeJS的图形分层显示方法，其特征在于：

polygonOffset＝(m×polygonOffsetFactor)+(r×polygonOffsetUnits)

其中m是多边形的深度的斜率，为定值，r是渲染引擎中的固定值，

polygonOffsetFactor为多边形偏移因子，polygonOffsetUnits为多边形偏移单位。

4.根据权利要求3所述的基于ThreeJS的图形分层显示方法，其特征在于：

polygonOffsetFactor取值范围为0.2-0.8，polygonOffsetUnits取值范围为4-8。

5.根据权利要求4所述的基于ThreeJS的图形分层显示方法，其特征在于：当三维网格对象为透明对象时，在渲染引擎中将选中模型而产生的高亮网格对象和鼠标悬停而产生的高亮网格对象的透明选项设为true，并将其不透明度设为1。

6.根据权利要求5所述的基于ThreeJS的图形分层显示方法，其特征在于：若场景下需要非透明网格对象遮挡透明网格对象时，通过设定深度值来实现。

7.根据权利要求4所述的基于ThreeJS的图形分层显示方法，其特征在于：对于选中模型而产生的高亮网格对象，polygonOffsetFactor取值为0.3，polygonOffsetUnits取值为5；对于鼠标悬停而产生的高亮网格对象，polygonOffsetFactor取值为0.5，polygonOffsetUnits取值为7。

8.一种基于ThreeJS的图形分层显示装置，其特征在于：该装置包括场景业务要求规定模块、层级划分模块、渲染顺序规定模块以及渲染方式规定模块，

其中所述层级划分模块根据场景业务要求对场景中的各网格对象按类型进行层级划分，并将层级作为属性与各类型的网格对象进行绑定，所述场景业务要求包括：(1)二维网格对象的显示优先级高于三维网格对象；(2)在三维网格对象中，显示优先级排序依次为：选中模型而产生的高亮网格对象鼠标悬停而产生的高亮网格对象普通三维网格对象；

所述渲染顺序规定模块根据层级关系的不同，规定每层的渲染顺序以及各层内网格对象的渲染方式；

所述渲染方式规定模块规定显示优先级高的层级在后进行渲染；每层内的二维网格对象中，显示优先级高的网格对象在后进行渲染；每层内的三维网格对象中，通过深度检测在像素点对深度值小的物体进行渲染实现遮挡效果。

9.根据权利要求8所述的图形分层显示装置，其特征在于：对于三维网格对象，深度值通过多边形偏移polygon offset来计算。