CN109828818B - 一种基于浏览器端显示引擎的图元样式变换方法 - Google Patents

Abstract

本发明属于3D图形显示领域，具体涉及一种基于浏览器端显示引擎的图元样式变换方法。在web建模过程中，显示引擎提供的功能并不能完全满足需要。本发明对浏览器端显示引擎本身提供的基础功能进行扩展，该方法首先对所需显示的图元样式进行抽象，将实际所需的图元样式通过属性值进行标记，包括定义图元的坐标系显示效果、定义图元渲染到屏幕时是否可以缩放和定义图元的朝向显示效果；其次调用扩展节点的更新方法计算出扩展节点的状态参数值；最后渲染出所需效果，并循环处理。本发明对上层业务提供了可配置的增强的图形显示方法，便于集成到实际项目中，提升用户的设计效率，方便快速查找与分析问题，节省时间。

Description

一种基于浏览器端显示引擎的图元样式变换方法

技术领域

本发明属于3D图形显示领域，具体涉及一种基于浏览器端显示引擎的图元样式变换方法,用于在浏览器端应用的建模软件，在建模过程中根据显示需求定制不同的图元样式。

背景技术

ThreeJs等运行在浏览器中的3D显示引擎，可以用来创建并显示各种三维场景，包括了相机、光影、材质等各种对象。此类显示引擎提供了对放置在场景中三维模型的基本操作(平移，旋转，缩放)，将图元放置在场景后，再设置相机就能渲染整个场景，得到三维渲染结果。

但是在web建模过程中，期望显示的图元样式多种多样，显示引擎提供的功能并不能完全满足需要，需要对显示引擎的功能进行增强才能满足不同任务的需要。比如典型的包括以下两种情形：

情形1：建模软件在导航时需要放置一个导航图元在三维空间中，并显示在屏幕中的固定位置，但导航图元无法随着相机旋转而旋转，另外导航图元的显示大小固定，不能随场景缩放而变。

情形2：建模软件有约束的概念，约束需要显示出来便于管理，通常通过某种平面符号来代表约束，这个符号依附在具体的三维图元上，随着三维图元的空间位置变化而改变位置，平面符号的显示面向相机，不能在其他平面旋转。另外平面符号的显示大小固定，不能随场景缩放而变。

显示引擎提供了对图元进行平移、旋转和缩放的基本功能，但是对类似上述情形的扩展需求并没有提供可用的方法。

发明内容

本发明旨在解决上述问题，对浏览器端显示引擎本身提供的基础功能进行扩展，提供一种基于浏览器端显示引擎的图元样式变换方法。

“图元”在本发明中的解释为：场景中可被渲染引擎识别的用以显示的物体。

1、该方法首先对所需显示的图元样式进行抽象，将实际所需的图元样式通过属性值进行标记，包括：

1.1、定义图元的坐标系显示效果

包括：①将图元的坐标系定义在世界坐标系中，随着相机运动，图元在三维空间中的位置不变化，但是显示在屏幕中的位置是可以发生变化的；②将图元的坐标系定义在屏幕坐标系中，显示在屏幕中的位置不变化。

1.2、定义图元渲染到屏幕时是否可以缩放

即图元是否可以随着相机的属性变化在屏幕中有缩放效果。

1.3、定义图元的朝向显示效果

包括：①将图元的朝向定义在世界坐标系中，在世界坐标系中朝向不变化，渲染到屏幕中时，朝向随相机运动而变化；②将图元的朝向定义在屏幕坐标系中，渲染到屏幕中时，朝向投影到屏幕平面上的方向不变；③将朝向定义在相机坐标系中，图元始终朝向相机，并且朝向投影到屏幕上的方向随相机运动而变化。

2、其次在每一帧渲染前，调用扩展节点的更新方法计算出扩展节点的状态参数值，该更新方法包括以下三个步骤：

2.1、计算三维坐标

①如果图元的当下坐标系是世界坐标系，直接设置扩展节点的坐标为世界坐标；

②如果图元的当下坐标系是屏幕坐标系，先将屏幕坐标归一化得到图元的归一化坐标，然后对相机的视图投影矩阵(随相机参数确定，属于相机属性值)求逆，将归一化坐标与求逆后的视图投影矩阵相乘得到世界坐标，设置扩展节点的坐标为计算所得的世界坐标；

2.2、计算缩放比例

判断是否启用缩放，如果已启用，图元能够缩放,转到步骤2.3；如果图元无法缩放，则计算抵消相机位置变化所需要的缩放比例scale，具体分以下两种情况：

①如果相机类型为正交相机，根据相机的视口信息计算出缩放比例scale，具体包括以下步骤：

(1)根据相机视口的尺寸参数计算出相机的宽高比ratio₁,

(2)计算屏幕的宽高比ratio₂，

(3)如果ratio₂>ratio₁，设参数h等于屏幕高度；否则，设置参数h等于屏幕宽度除以ratio₁，

(4)设置缩放比例scale等于相机视口的高度除以参数h。

②如果相机类型为投影相机，根据相机到扩展节点的距离L和相机视口信息计算出缩放比例scale，具体包括以下步骤：

(1)获取投影相机的视口比率参数aspect(投影相机的视口长宽比)，

(2)计算屏幕的宽高比ratio₂，

(3)如果ratio₂≥aspect，设参数h等于屏幕高度；否则，设置参数h等于屏幕宽度除以ascpect，

(4)设置缩放比例scale＝L*2*tan(fov*π/360)/h，fov等于相机在高度方向的视角范围。

2.3、计算旋转分量

①如果图元朝向的类型为世界坐标系，首先计算在世界坐标系内由向量(1,0,0)到朝向空间信息的旋转四元数q，然后设置扩展节点的旋转四元数为计算所得的q；

②如果图元朝向的类型为屏幕坐标系，首先通过相机的世界矩阵计算出旋转四元数q₁，再计算由向量(1,0,0)到朝向空间信息的旋转四元数q₂，然后设置扩展节点的旋转四元数为q₁*q₂即可；

③如果图元朝向的类型为相机坐标系，首先计算出由节点向量(0,0,1)到相机z轴(将相机在世界坐标系中的方向取反作为相机Z轴进行计算)的旋转四元数q₁，再将向量(1,0,0)乘以旋转四元数q₁得到向量v，然后计算由向量v旋转到朝向空间信息的旋转四元数q₂，然后设置扩展节点的旋转四元数为q₂*q₁。

3、最后由显示引擎根据计算得到的扩展节点状态参数值来渲染出所需效果，并返回步骤2进行处理。

有益效果：通过本发明的变换方法对图元的样式进行变换，对上层业务提供了可配置的增强的图形显示方法，同时本发明的变换方法易于理解，便于集成到实际项目中。

在实际建模应用中，它可将场景的方位信息，几何约束，标注等元素以一种灵活可配置的方式展示出来，提升用户的设计效率，方便快速查找与分析问题，节省大量时间。

具体实施方式

利用本发明基于浏览器端显示引擎的图元样式变换方法进行样式变换时，首先在图形显示处理系统中定义相关的参数及类型，常量参数包括：世界坐标系ANCHOR_WORLD、屏幕坐标系ANCHOR_SCREEN和相机坐标系ANCHOR_CAMERA。

然后定义扩展节点类ZoomfreeGroup，通过以下三个属性参数来对图元的显示样式进行配置，包括：

将属性参数anchorPosition定义为图元坐标，其附带有图元的坐标类型type和图元的坐标位置position；

将属性参数enableScale定义为图元是否允许缩放，false不能缩放，true可以缩放；

将属性参数anchorCoord定义为图元朝向，并附有朝向类型type和朝向空间信息direction。

通过对这三种属性参数设置不同的值，组合得到场景所需的显示效果。在每一帧渲染前，调用扩展节点的更新方法计算出扩展节点的状态参数值，该更新方法包括以下三个步骤：

首先、计算三维坐标

如果图元坐标anchorPosition的坐标类型type被定义为世界坐标系，直接设置扩展节点的图元坐标的位置信息position＝anchorPosition.position；

如果图元坐标anchorPosition的坐标类型type被定义为屏幕坐标系，先将屏幕坐标归一化得到图元的归一化坐标Pos，然后获根据相机的视图投影矩阵M，求逆相乘得到世界坐标newPos＝Pos*M^-1，设置扩展节点图元坐标的位置信息position为计算所得的世界坐标newPos。

其次、计算缩放比例

判断是否启用缩放，如果enableScale为true,直接计算旋转分量；如果enableScale为false，则计算出抵抗相机变化所需要的缩放比例scale，具体步骤如下：

如果相机类型为正交相机，根据相机的视口信息计算出缩放比例scale，具体包括以下步骤：

(1)根据相机视口的尺寸参数计算出相机的宽高比上ratio₁,

(2)计算屏幕的宽高比ratio₂,

(3)如果ratio₂>ratio₁，设参数h等于屏幕高度,反之，设置h等于屏幕宽度除以ratio₁，

(4)设置缩放比例scale等于相机视口的高度除以h；

如果相机类型为投影相机，根据相机到扩展节点的距离L和相机视口信息计算出缩放比例scale，具体包括以下步骤：

(1)获取投影相机的视口比率参数aspect(投影相机的视口长宽比)，

(2)计算屏幕宽高比ratio₂，

(3)如果ratio₂≥aspect，设参数h等于屏幕高度；否则，设置参数h等于屏幕宽度除以ascpect，

(4)设置scale＝L*2*tan(fov*π/360)/h，fov等于相机在高度方向的视角范围。

之后，计算旋转分量

如果图元朝向anchorCoord的朝向类型type为世界坐标系ANCHOR_WORLD，，首先计算在世界坐标系内由向量(1,0,0)到anchorCoord.direction(即朝向空间信息direction)的旋转四元数q，然后设置扩展节点的旋转四元数为计算所得的q；

如果图元朝向anchorCoord的朝向类型type为屏幕坐标系ANCHOR_SCREEN，，首先通过出相机的世界矩阵计算出旋转四元数q₁，再计算由向量(1,0,0)到anchorCooord.direction(即朝向空间信息direction)的旋转四元数q₂，将q₁*q₂的值设置为扩展节点的旋转四元数；

如果图元朝向anchorCoord的朝向类型type为相机坐标系ANCHOR_CAMERA，首先计算出由节点向量(0,0,1)到相机z轴(将相机在世界坐标系中的方向取反作为相机Z轴进行计算)的旋转四元数q₁，再将向量(1,0,0)乘以旋转四元数q₁得到向量v，然后计算由向量v旋转到anchorCoord.direction(即朝向空间信息direction)的旋转四元数q₂，最后将q₂*q₁的值设置为扩展节点的旋转四元数；

由显示引擎根据计算得到的扩展节点状态参数值来渲染出所需效果，并对新的扩展节点进行渲染。

本发明的部分技术手段还具有类似的处理办法，均在本发明的保护范围之内。

本发明的核心点是根据不同配置实现的图形变换方法、通用的属性配置思路。

本发明重点在于解决图形显示问题，针对不同配置设计了合适的变换方法，可以设置不同的值来满足不同的样式显示需求。四元数可以用矩阵代替。

本发明图形变换的思路可以用在包括threejs在内的主要浏览器端显示引擎中。

Claims (10)

1.一种基于浏览器端显示引擎的图元样式变换方法，用于在浏览器端建模过程中根据显示需求定制不同的图元样式，其特征在于：

(1)该方法首先对所需显示的图元样式进行抽象，将实际所需的图元样式通过属性值进行标记，包括定义图元的坐标系显示效果、定义图元渲染到屏幕时是否可以缩放和定义图元的朝向显示效果；

(2)其次在每一帧渲染前，调用扩展节点的更新方法计算出扩展节点的状态参数值；

(3)最后根据计算得到的扩展节点状态参数渲染出所需效果，并返回步骤(2)进行处理。

2.根据权利要求1所述的基于浏览器端显示引擎的图元样式变换方法，其特征在于：在步骤(1)中定义图元的坐标系显示效果时，如果将图元的坐标系定义在世界坐标系中，随着相机运动，图元在三维空间中的位置不变化，但是显示在屏幕中的位置是可以发生变化的；如果将图元的坐标系定义在屏幕坐标系中，显示在屏幕中的位置不变化。

3.根据权利要求1所述的基于浏览器端显示引擎的图元样式变换方法，其特征在于：在步骤(1)中定义图元的朝向显示效果时，如果将图元的朝向定义在世界坐标系中，在世界坐标系中朝向不变化，渲染到屏幕中时，朝向随相机运动而变化；如果将图元的朝向定义在屏幕坐标系中，渲染到屏幕中时，朝向投影到屏幕平面上的方向不变；如果将朝向定义在相机坐标系中，图元始终朝向相机，并且朝向投影到屏幕上的方向随相机运动而变化。

4.根据权利要求1所述的基于浏览器端显示引擎的图元样式变换方法，其特征在于：在步骤(2)中计算三维坐标时，如果图元的当下坐标系是世界坐标系，直接设置扩展节点的坐标为世界坐标；如果图元的当下坐标系是屏幕坐标系，先将屏幕坐标归一化得到图元的归一化坐标，然后对相机的视图投影矩阵求逆，将归一化坐标与求逆后的视图投影矩阵相乘得到世界坐标，设置扩展节点的坐标为计算所得的世界坐标。

5.根据权利要求1所述的基于浏览器端显示引擎的图元样式变换方法，其特征在于：在步骤(2)中计算缩放比例时， 判断是否启用缩放，如果图元能够缩放， 直接计算旋转分量；如果图元不能够缩放， 则计算抵消相机位置变化所需要的缩放比例scale。

6.根据权利要求5所述的基于浏览器端显示引擎的图元样式变换方法，其特征在于：如果相机类型为正交相机，根据相机的视口信息计算出缩放比例scale，具体包括以下步骤：

(1)根据相机视口的尺寸参数计算出相机的宽高比ratio₁,

(2)计算屏幕的宽高比ratio₂，

(3)如果ratio₂>ratio₁，设参数h等于屏幕高度；否则，设置参数h等于屏幕宽度除以ratio₁，

设置缩放比例scale等于相机视口的高度除以参数h。

7.根据权利要求5所述的基于浏览器端显示引擎的图元样式变换方法，其特征在于：如果相机类型为投影相机，根据相机到扩展节点的距离L和相机视口信息计算出缩放比例scale，具体包括以下步骤：

(1)获取投影相机的视口比率参数aspect(投影相机的视口长宽比)，

(2)计算屏幕的宽高比ratio₂，

(3)如果ratio₂≥aspect，设参数h等于屏幕高度；否则，设置参数h等于屏幕宽度除以ascpect，

(4)设置缩放比例scale＝L*2*tan(fov*π/360)/h，fov等于相机在高度方向的视角范围。

8.根据权利要求1所述的基于浏览器端显示引擎的图元样式变换方法，其特征在于：在步骤(2)中计算旋转分量时，根据图元朝向的类型设置扩展节点的旋转四元数。

9.根据权利要求8所述的基于浏览器端显示引擎的图元样式变换方法，其特征在于：如果图元朝向的类型为世界坐标系，首先计算在世界坐标系内由向量(1,0,0)到朝向空间信息的旋转四元数q，然后设置扩展节点的旋转四元数为计算所得的q；

如果图元朝向的类型为屏幕坐标系，首先通过相机的世界矩阵计算出旋转四元数q₁，再计算由向量(1,0,0)到朝向空间信息的旋转四元数q₂，然后设置扩展节点的旋转四元数为q₁*q₂；

如果图元朝向的类型为相机坐标系，首先计算出由节点向量(0,0,1)到相机z轴(将相机在世界坐标系中的方向取反作为相机Z轴进行计算)的旋转四元数q₁，再将向量(1,0,0)乘以旋转四元数q₁得到向量v，然后计算由向量v旋转到朝向空间信息的旋转四元数q₂，然后设置扩展节点的旋转四元数为q₂*q₁。

10.根据权利要求1所述的基于浏览器端显示引擎的图元样式变换方法，其特征在于：所述浏览器端显示引擎为ThreeJs。