一种基于浏览器的2.5D网页开发方法
技术领域
本发明涉及一般的图像数据处理或产生技术领域，尤其涉及一种基于浏览器的2.5D网页开发方法。
背景技术
网页大屏是利用网页技术(html,css,js,webgl等)制作的以浏览器为载体的大屏，可以根据需要做成不同的分辨率。网页大屏常用于数据的可视化展示，包括各类图表、地图，大屏需要生动的表现力，因此对动画效果(3D元素)要求较高。
2.5D(也称伪3D)是一种用于二维画面的技术，使得图像或场景有着三维的视觉效果，常出现在海报、网页以及UI设计当中，如微信小游戏跳一跳的画面等，相较于繁复的3D建模流程，2.5D能够更快地取得较好的视觉效果。2.5D一般采用平行投影，平行投影是相对于透视投影的一种投影方式，它的投影中心与投影平面的距离是无限的，投影线相互平行，舍弃近大远小的关系，适合于地图、城市、拓扑等的图形展现。
设计师一般会用二维设计软件(如Photoshop)做出平面设计图，但前端实现的时候可以不只使用二维的技术，还可以借助3D技术(webgl)。
传统网页开发一般使用css对html元素布局，并实现各种动画效果，设计上通常表现为平面2D的形式。WebGL诞生后，在网页中利用浏览器原生接口开发3D画面成为可能。3D开发效果更佳、画面更逼真，但时间成本较大，性能消耗较大，且对前端人员和设计人员要求的技术门槛较高。如果可以利用传统2D与WebGL混合开发，充分发挥两种技术手段的优点，则可以用更低的成本实现更好的效果。
公开号为CN104835192A的中国发明“一种三维网页图形绘制方法及装置”提供了一种三维网页图形绘制方法及装置，读取图形元素属性及坐标值及尺寸，判断图形元素属性中是否有三维渲染属性参数，若是，则根据预设的坐标值及尺寸计算所述图形元素在左视帧渲染位及右视帧渲染位，在左视帧渲染位和右视帧渲染位分别对所述图形元素进行渲染，得到三维网页图形。若判断出所述图形元素的属性中不携带三维渲染属性参数，则根据所述预设的坐标值及尺寸在屏幕上绘制所述图形元素。通过该申请方法，可以对网页中的图形元素进行三维绘制。更重要的是，不仅可以对矩形等常用图形进行三维绘制，对于同时带有三维效果的元素和二维效果的元素这些更复杂的网页图案也可进行绘制，适用范围广，满足多种终端设备的显示需求。
然而，该申请门槛较高，成本大，不适宜2.5D网页的开发。
公告号为CN106582015B的中国发明“一种在2D游戏中实现3D效果展示的方法及系统”提供了一种在2D游戏中实现3D效果展示的方法，其中，该方法包括：在游戏角色及其所在的游戏场景的斜上方设置一架虚拟摄像机，虚拟摄像机、游戏角色及游戏场景表现地面的水平高度为可变的，虚拟摄像机对游戏角色及其所在游戏场景取景，并据此确定游戏角色、游戏场景需要绘制的部分和绘制部分在游戏设备显示单元的绘制区域以及其对应的图片资源；加载上述图片资源并依次在对应的绘制区域绘制游戏场景、游戏角色；当各水平高度发生改变时，重新确定上述内容。此发明还提供一种在2D游戏中实现3D效果展示的系统。该方法及系统克服了2D游戏中难以展示3D效果的缺陷，大大提升了游戏动画效果展示的逼真程度，增强了玩家的代入感和游戏体验。
该方法通过设立虚拟摄像机的形式，在2D游戏中实现3D效果，取得了良好的效果。但游戏开发与网页设计领域不同，要解决的问题也不相同。
发明内容
本发明要解决的技术问题是提供一种使用传统2D与WebGL混合开发2.5D设计图的基于浏览器的2.5D网页开发方法。
为解决上述问题，本发明的技术方案为：
一种基于浏览器的2.5D网页开发方法，包括以下步骤：
在html文档中设置二维元素标签和三维元素标签；
在二维元素标签中开发设计图的二维元素；
在三维元素标签中开发设计图的三维元素。
进一步地，所述在二维元素标签中开发设计图的二维元素的开发方法使用以下方法中的至少之一：使用html和css开发设计图的二维元素、使用html和js开发设计图的二维元素、使用svg和css开发设计图的二维元素、使用svg和js开发设计图的二维元素或使用canvas的2D上下文开发设计图的二维元素。
进一步地，所述在三维元素标签中开发设计图的三维元素的开发方法为在三维元素标签中使用WebGL开发设计图的三维元素。
进一步地，二维元素标签和三维元素标签设置相同的left、top、width和height值。
进一步地，在三维元素标签中使用WebGL开发设计图的三维元素包括以下步骤：
以设计图的几何中心为原点建立三维世界坐标系；
获取三维元素的关键点的三维世界坐标；
在三维元素标签中依据三维元素的关键点的三维世界坐标开发设计图的三维元素。
进一步地，获取三维元素的关键点的三维世界坐标包括以下步骤：
设置摄像机的参数，所述摄像机为正交投影摄像机，所述摄像机的上方向同三维世界坐标系的y轴方向(0,1,0)，所述摄像机对准三维世界坐标系的坐标原点，所述摄像机的视椎体左、右、上、下侧面分别为width/-2,width/2,height/2,height/-2，其中，width和height值为三维元素标签的width和height值；
以设计图的几何中心为原点建立摄像机本地坐标系，得到三维世界坐标系和摄像机本地坐标系的转换矩阵C；
设定摄像机在三维世界坐标系中的坐标，求解转换矩阵C；
获取三维元素的关键点在摄像机本地坐标系的坐标；
根据求解后的转换矩阵C求取三维元素的三维世界坐标。
进一步地，所述转换矩阵C为：
进一步地，获取三维元素的关键点在摄像机本地坐标系的坐标为通过测量三维元素的关键点的像素值获取三维元素在摄像机本地坐标系的x值和y值，任取一个负数的z值。
进一步地，设定摄像机在三维世界坐标系中的的坐标时，摄像机的坐标满足
进一步地，所述二维元素包括设计图的背景，所述三维元素包括动画。
与现有技术相比，本发明具有如下有益效果：
本发明使用传统2D开发技术开发2.5D设计图中的二维元素，使用WebGL开发2.5D设计图中的三维元素，开发难度低，实现效果好。
附图说明
下面结合附图对本发明的具体实施方式作进一步详细的说明。
图1为一种2.5D设计图示意图；
图2为三维世界坐标系示意图；
图3为摄像机本地坐标系示意图；
图4为A点示意图；
图5为矩阵运算示意图；
图6为对称设置的三维世界坐标系示意图；
图7为图6在视锥体中的侧视图。
具体实施方式
为了对本发明的技术手段、创作特征、达成目的与功效易于明白了解，下面结合具体图示，进一步阐述本发明。
实施例：
如图1-7所示为一种基于浏览器的2.5D网页开发方法，包括以下步骤：
在html文档中设置二维元素标签和三维元素标签；
在二维元素标签中开发设计图的二维元素；
在三维元素标签中开发设计图的三维元素。
进一步地，所述在二维元素标签中开发设计图的二维元素的开发方法使用以下方法中的至少之一：使用html和css开发设计图的二维元素、使用html和js开发设计图的二维元素、使用svg和css开发设计图的二维元素、使用svg和js开发设计图的二维元素或使用canvas的2D上下文开发设计图的二维元素。
进一步地，所述在三维元素标签中开发设计图的三维元素的开发方法为在三维元素标签中使用WebGL开发设计图的三维元素。
进一步地，二维元素标签和三维元素标签设置相同的left、top、width和height值。
进一步地，在三维元素标签中使用WebGL开发设计图的三维元素包括以下步骤：
以设计图的几何中心为原点建立三维世界坐标系；
获取三维元素的关键点的三维世界坐标；
在三维元素标签中依据三维元素的关键点的三维世界坐标开发设计图的三维元素。
进一步地，获取三维元素的关键点的三维世界坐标包括以下步骤：
设置摄像机的参数，所述摄像机为正交投影摄像机，所述摄像机的上方向同三维世界坐标系的y轴方向(0,1,0)，所述摄像机对准三维世界坐标系的坐标原点，所述摄像机的视椎体左、右、上、下侧面分别为width/-2,width/2,height/2,height/-2，其中，width和height值为三维元素标签的width和height值；
以设计图的几何中心为原点建立摄像机本地坐标系，得到三维世界坐标系和摄像机本地坐标系的转换矩阵C；
设定摄像机在三维世界坐标系中的坐标，求解转换矩阵C；
获取三维元素的关键点在摄像机本地坐标系的坐标；
根据求解后的转换矩阵C求取三维元素的三维世界坐标。
进一步地，所述转换矩阵C为：
进一步地，获取三维元素的关键点在摄像机本地坐标系的坐标为通过测量三维元素的关键点的像素值获取三维元素在摄像机本地坐标系的x值和y值，任取一个负数的z值。
进一步地，设定摄像机在三维世界坐标系中的的坐标时，摄像机的坐标满足
进一步地，所述二维元素包括设计图的背景，所述三维元素包括动画。
如图1所示为一种2.5D设计图，根据2.5D设计图(设计师提供的大屏设计稿)，将设计元素分为二维元素和三维元素。二维元素和三维元素将分别开发，因此首先需要根据设计图将其进行区分。
一般来讲，所有静态的元素均可视作二维元素，如大屏的背景画面。
其余具有动画效果的元素中，动画明显具有空间感的，动画涉及空间坐标变化的，或已经由设计人员进行3D建模的元素，如立方体等，则适宜作为三维元素开发。
二维元素和三维元素的区分并非绝对，应由技术人员和设计人员视具体情况协商决定。
准备图层：
在html文档中放置二维元素标签和三维元素标签，分别作为二维元素和三维元素的容器。
将两个标签用css设为绝对定位(posotion:absolute；)，并设置相同的left、top、width、height值，使得二维元素标签和三维元素标签完全重合，视作2D图层和3D图层。
3D图层是用webgl技术绘制的网页元素的集合，一般可以将一个canvas标签作为3D图层，绘制3D图形的时候通过canvas获取3D上下文，开始webgl绘图。
2D图层是用其他网页技术(html,css,canvas的2D上下文)制作的元素的集合。
在二维元素标签中使用二维元素开发方法(传统前端技术手段html,css和canvas)开发设计图的二维元素。
二维元素可以是普通html标签，或以html标签作为载体的png、jpg格式的图片。
二维元素可以是canvas标签，canvas的2D上下文提供了各种2D绘图接口。
二维元素可以是svg可缩放矢量图形，可以实现许多普通html标签无法实现的图形。
二维元素可充分利用例如css开发方法提供的属性，灵活搭配，开发特效。
常用的关键css属性如：
css的transition属性可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。
css的transform属性允许旋转，缩放，倾斜或平移给定元素。
css的filter属性将模糊或颜色偏移等图形效果应用于元素，通常用于调整图像，背景和边框的渲染。
css的animation属性用来指定一组或多组动画。
在设计图中选取几何中心点作为三维世界坐标系的原点(0,0,0)，建立三维世界坐标系。
2.5D设计图不涉及全场景的3D渲染，无法提供3D场景的摄像机位置，因此需要先设定摄像机在3D世界坐标系中的位置。
2.5D设计图一般采用平行透视，对应地，3D场景的摄像机采用正交投影摄像机。
设正交投影摄像机在三维世界坐标系中的坐标为：(x，y，z)，正交投影摄像机的上方向同三维世界坐标系y轴方向(0,1,0)，正交投影摄像机对准三维世界坐标系坐标原点(0,0,0)，所述摄像机的视椎体左、右、上、下侧面分别为width/-2,width/2,height/2,height/-2，其中，width和height值为三维元素标签的width和height值。
摄像机对准的方向和摄像机的上方向共同决定了摄像机镜头的方位。三维坐标系中，摄像机，有一个up方向(默认0,1,0)。up向量是为了辅助lookAt函数(lookAt函数用来使一个物体“看向”某个点)来确定结果的方向。
摄像机的视椎体设置决定了正交投影摄像机在2.5D设计图中的位置为几何中心处，以水平为x轴，竖直为y轴，z轴的反方向垂直设计图向内，建立摄像机本地坐标系。
建立摄像机本地坐标系后可以建立摄像机本地坐标系和三维世界坐标系的转换矩阵C，建立过程如下：
摄像机z轴方向向量：
Vz＝(x,y,z)-(0,0,0)＝(x,y,z)
摄像机z轴单位方向向量：
摄像机x轴方向向量：
摄像机x轴单位方向向量：
摄像机y轴单位方向向量：
由此可得转换矩阵C：
三维世界坐标与正交投影摄像机本地坐标的关系为：
P三维世界＝CP正交投影摄像机。
有了转换矩阵C，又有之前设定的摄像机在三维世界坐标系中的坐标(x,y,z)，就可以根据摄像机本地坐标算出三维世界坐标了。
因为摄像机在三维世界坐标系中的坐标未知，所以需要设定一个摄像机三维坐标，来确定转换矩阵C的值。摄像机在三维世界坐标系的坐标可以任意设定，但是x和z不能同时为0，否则矩阵C某些项将无意义(分母为0)。
因为设计图只有两个维度，摄像机本地坐标的z值是无法确定的。但对于正交投影，z轴的值只是作为深度检测用，并不影响成像，所以在选择z值时，只需要保证摄像机本地坐标系下的z轴坐标都为负数即可。正因为z值不确定，某点在三维世界坐标系中的坐标值也是可能有多重取值的，但由于正交投影的原理，任何一种取值在三维空间投影后的成像都是和设计图重合的。
设定正交投影摄像机在三维世界坐标系中的坐标，求解转换矩阵C之后，需要获取三维元素的关键点在摄像机本地坐标系的坐标，根据求解后的转换矩阵C求取三维元素的三维世界坐标。
获取三维元素的关键点在摄像机本地坐标系的坐标为通过测量(例如通过ps测量)三维元素的关键点的像素值获取三维元素在摄像机本地坐标系的x值和y值，任取一个负数的z值。
对于设计图的宽高像素值和canvas的width和height值保持一致的，直接测量即可。对于对于设计图的宽高像素值和canvas的width和height值成比例的，对于测量后的设计图的宽高像素值要乘以一定的比例。
例如，设计图为100*50，canvas设置为300x150，对于设计图测量得到的x，y值，需要各自乘以3。
三维元素的关键点包括立方体图形的顶点等。
以下举例说明如何根据一个点的摄像机本地坐标确定三维世界坐标。
设定相机在三位世界坐标系中的位置为(300,300,300)。场景中放置的那个长方体大小为150,100,50，且放置在坐标原点。因此如果想要完全看到它，相机的位置不能位于长方体内，所以设置为(300,300,300)，在这个位置，相机在长方体之外，且相机的视野能够覆盖到那个长方体。
如图4所示的A点，它的摄像机本地坐标的x,y值很好确定，用测量工具测量像素为(36，0)，z轴可以设定为一个负数-100。
如图5所示通过矩阵运算，得出A点的世界坐标值：(267.72,242.26,216.8)。用这个坐标值在三维世界坐标系中画出的点将正好位于A点。由于摄像机本地z坐标是任意确定的，因此算出的三维世界坐标可能并不在真正的A点上，只是他刚好可以把A点“挡住”，视觉上是在A点。
其他点均可以用同样的方法确定。
设定完摄像机坐标，求得转换矩阵C后，选取三维元素的关键点，求取关键点在三维设计坐标中的坐标，依据坐标使用WebGL在三维元素标签中进行开发。
进一步地，2.5D设计图常包含大量的视觉上是长方体的元素。如果随意设定摄像机在三维世界坐标系中的坐标值，那么将无法保证上述长方体元素在三维世界坐标系中的确是长方体。
当这些长方体元素同时满足以下条件：
长方体有一组(四条)棱与摄像机坐标系的y轴平行；
长方体上平面或下平面(在设计图中为平行四边形)各个内角的角平分线与摄像机坐标系的x轴或y轴平行；
长方体上平面或下平面(在设计图中为平行四边形)上下内角为钝角，左右内角为锐角。
为了简化元素的关键点在三维世界坐标系中的坐标值的确定，使三维元素的坐标值符合观看设计图时的直观感受，应该让这些元素在三维世界坐标中确实有一组棱与y轴平行，且上下平面与y轴垂直。
为实现上述效果，可按以下方法设置摄像机在三维世界坐标系中的坐标值。
假设在三维世界坐标系中，摄像机像xz平面的投影点为B，过B点分别向z轴和x轴作垂线，垂足分别为A，C。
图6为正方形OABC向摄像机视椎体近平面的投影。按照之前假设，图6中的投影OABC为菱形。摄像机的x坐标为m，则OA、OC的实际长度为m，AC的实际长度为
图7为三维世界坐标系中摄像机与y轴所在的平面。图7中OB长
综上，摄像机的坐标应满足
本行业的技术人员应该了解，本发明不受上述实施例的限制，在不脱离本发明精神和范围的前提下，本发明还会有各种变化和改进，这些变化和改进都落入要求保护的本发明范围内。本发明要求保护范围由所附的权利要求书及其等效物界定。
