技术领域
[0001] 本
发明涉及2D网页显示领域，特别涉及一种3D化2D网页显示的方法、装置及系统。
背景技术
[0002] 随着VR技术的兴起，用户对3D立体的观看更加方便，“3D”里的“D”，是英文单词Dimension(线度、维)的首字母。3D指的就是三维空间。与普通2D画面显示相比，3D技术可以使画面变得立体逼真，图像不再局限于屏幕平面，仿佛能够走出屏幕外面，让观众有身临其境的感觉。
[0003] 尽管3D显示技术分类繁多，不过最基本的原理是相似的，就是利用人眼左右分别接收不同画面，然后大脑经过对图像信息进行
叠加重生，构成一个具有前—后、上—下、左—右、远—近等立体方向效果的影像。
[0004]
现有技术中，在3D状态下，用户需要所有的画面能有3D立体景深，特别是2D网页，人们希望也能自动转成3D显示，而现有技术只有专
门制作的视频和游戏才有3D效果。
发明内容
[0005] 为了解决以上的问题，本发明提供一种3D化2D网页显示的方法、装置及系统。
[0006] 本发明公开了一种3D化2D网页显示的方法，包括：
[0008] S2.对2D网页进行解析，分离出组成所述的2D网页的多个元素；
[0009] S3.确定所述的多个元素对应的不同的景深层次设定值，根据所述的多个元素与所确定出的对应的不同的景深层次设定值
渲染出3D显示所需要的左眼视图和右眼视图中的一者，并根据所述的原网页渲染出3D显示所需要的左眼视图和右眼视图中的另一者；
[0010] S4.将所述的左眼视图及右眼视图发往显示单元进行3D显示。
[0011] 进一步地，所述的步骤S2，具体包括：
[0012] 对所述的2D网页进行解析，分离出组成网页的多个元素，所述的多个元素包括：背景图、表格、文字、表单、图片、视频、按钮、选择框。
[0013] 进一步地，所述的步骤S3，具体包括：
[0014] S31.将所述的背景图设置为景深远端，进行入屏处理；
[0015] S32.将所述的表格、文字、表单保留2D网页的原始默认值，不作处理；
[0016] S33.将所述的图片、视频设置为景深次近端，进行微出屏处理；
[0017] S34.将所述的按钮、选择框设置为景深近端，进行大一些的出屏处理，浮在用户面前。
[0018] 进一步地，所述步骤S3具体为：根据所述的多个元素与所确定出的对应的不同的景深层次设定值渲染出3D显示所需要的左眼视图，并根据所述的原网页渲染出3D显示所需要的右眼视图，其中，
[0019] 所述的入屏处理，具体为：
[0020] 获取需要渲染的窗口的宽度，宽度的数值记为：W；
[0021] 获取背景图区域的X方向上的坐标，数值记为:X1；
[0022] 将所述的背景图区域在左眼视图中向左方向移动，移动量为K，获取新的X方向上的坐标R1数值，R1＝X1-W×K，利用新的背景区域进行3D渲染，形成入屏显示，其中，K为移动位移量与所述宽度的百分比，K取值范围为1％～15％；
[0023] 所述的微出屏处理，具体为：
[0024] 获取需要渲染的窗口的宽度，宽度的数值记为：W；
[0025] 获取图片、视频区域的X方向上的坐标，数值记为:X2；
[0026] 将所述的图片、视频区域在左眼视图中向右方向移动，移动量为J，获取新的X方向上的坐标R2数值，R2＝X2+W×J，利用新的图片、视频区域进行3D渲染，形成微出屏显示，其中，J为移动位移量与所述宽度的百分比，J取值范围为0.5％～10％；
[0027] 所述的大一些的出屏处理，具体为：
[0028] 获取需要渲染的窗口的宽度，宽度的数值记为：W；
[0029] 获取按钮、选择框的X方向上的坐标，数值记为:X3；
[0030] 将所述的按钮、选择框区域在左眼视图向右方向移动，移动量为G，获取新的X方向上的坐标R3数值，R3＝X3+W×G，利用新的按钮、选择框区域进行3D渲染，形成大一些的出屏显示，其中，G为移动位移量与所述宽度的百分比，G取值范围为5％～20％，[0031] 其中，坐标的原点为窗口的左上
角，以窗口的
水平方向建立X轴，以窗口的垂直方向建立Y轴；
[0033] 进一步地，所述的景深层次设定值由用户自定义及实时控制。
[0034] 本发明公开了一种3D化2D网页显示的装置，包括：
[0035] 请求信息获取单元，用于获取网页3D化的请求信息；
[0036] 解析单元，对2D网页进行解析，分离出组成所述的2D网页的多个元素；
[0037] 渲染单元，用于确定所述的多个元素对应的不同的景深层次设定值，根据所述的多个元素与所确定出的对应的不同的景深层次设定值渲染出3D显示所需要的左眼视图和右眼视图中的一者，并根据所述的原网页渲染出3D显示所需要的左眼视图和右眼视图中的另一者；
[0038] 排图单元，用于将所述的左眼视图及右眼视图发往显示单元进行3D显示。
[0039] 进一步地，所述的解析单元，具体用于：
[0040] 对所述的2D网页进行解析，分离出组成网页的多个元素，所述的多个元素包括：背景图、表格、文字、表单、图片、视频、按钮、选择框。
[0041] 进一步地，所述渲染单元具体用于：根据所述的多个元素与所确定出的对应的不同的景深层次设定值渲染出3D显示所需要的左眼视图，并根据所述的原网页渲染出3D显示所需要的右眼视图，其中，
[0042] 所述的入屏处理，具体为：
[0043] 获取需要渲染的窗口的宽度，宽度的数值记为：W；
[0044] 获取背景图区域的X方向上的坐标，数值记为:X1；
[0045] 将所述的背景图区域在左眼视图中向左方向移动，移动量为K，获取新的X方向上的坐标R1数值，R1＝X1-W×K，利用新的背景区域进行3D渲染，形成入屏显示,其中，K为移动位移量与所述宽度的百分比，K取值范围为1％～15％；
[0046] 所述的微出屏处理，具体为：
[0047] 获取需要渲染的窗口的宽度，宽度的数值记为：W；
[0048] 获取图片、视频区域的X方向上的坐标，数值记为:X2；
[0049] 将所述的图片、视频区域在左眼视图中向右方向移动，移动量为J，获取新的X方向上的坐标R2数值，R2＝X2+W×J，利用新的图片、视频区域进行3D渲染，形成微出屏显示，其中，J为移动位移量与所述宽度的百分比，J取值范围为0.5％～10％；
[0050] 所述的大一些的出屏处理，具体为：
[0051] 获取需要渲染的窗口的宽度，宽度的数值记为：W；
[0052] 获取按钮、选择框的X方向上的坐标，数值记为:X3；
[0053] 将所述的按钮、选择框区域在左眼视图向右方向移动，移动量为G，获取新的X方向上的坐标R3数值，R3＝X3+W×G，利用新的按钮、选择框区域进行3D渲染，形成大一些的出屏显示，其中，G为移动位移量与窗口宽度的百分比，G取值范围为5％～20％，[0054] 其中，坐标的原点为窗口的左上角，以窗口的水平方向建立X轴，以窗口的垂直方向建立Y轴；
[0055] 各数值的单位均为像素数。
[0056] 进一步地，所述3D化2D网页显示的装置还包括控制单元，用于由用户自定义及实时控制所述的景深层次的设定。
[0057] 本发明公开了一种3D化2D网页显示的系统，包括网页
服务器、显示客户端及具有上述的装置的
控制器，所述的控制器与所述的网页服务器、显示客户端均相连接。
[0058] 实施本发明的一种3D化2D网页显示的方法、装置及系统，具有以下有益的技术效果：
[0059] 本
申请无需改变现有
网站开发业态，只有3D观看端安装相应的播件，通过将现有的2D网页实时转换处理为基于双目
视差的左眼视图和右眼视图来呈现，即可实现对所有普通网页的3D
立体视觉处理，从而实现裸眼观看3D网页或通过VR眼镜等设备观看3D网页。
附图说明
[0060] 为了更清楚地说明本发明
实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
[0061] 图1为本发明的第一实施例3D化2D网页显示的方法
流程图；
[0062] 图2为本发明的第二实施例3D化2D网页显示的方法流程图；
[0063] 图3为本发明的第三实施例3D化2D网页显示的方法流程图；
[0064] 图4是本发明的第一实施例3D化2D网页显示的装置方
框图；
[0065] 图5是本发明的第二实施例3D化2D网页显示的装置方框图；
[0066] 图6是本发明的第三实施例3D化2D网页显示的装置方框图；
[0067] 图7是本发明的实施例3D化2D网页显示的系统模
块图。
具体实施方式
[0068] 下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
[0069] 请参阅图1，本发明的方法的第一实施例，一种3D化2D网页显示的方法，包括：
[0070] S1.获取网页3D化的请求信息；
[0071] 用户在客户端通过浏览器
访问服务器网络地址打开2D网页，2D网页上可弹出对话框，询问用户是否需要3D化2D网页，若用户需要，要通过按钮点击确认对话框的形式发送请求，从而将发送3D化2D网页的请求至网页显示端的控制器。
[0072] S2.对2D网页进行解析，分离出组成所述的2D网页的多个元素；
[0073] 解析由2个子模块即HTML解析器(HTMLParser)和CSS解析器(CSS Parser)进行。
[0074] 此时，对所述的2D网页进行解析，分离出组成网页的多个元素，所述的多个元素例如但不限于包括：背景图、表格、文字、表单、图片、视频、按钮、选择框。
[0075] 添加一个3D处理引擎，用于在对现有网页进行解析处理之后，对解析分离出的多个元素进行分类处理。
[0076] 如下各种字段：
[0077] 背景图
[0079] 文字
[0081] 视频
[0082] 按钮
[0083] 选择框
[0084] S3.确定所述的多个元素对应的不同的景深层次设定值，根据多个元素与所确定出的对应的不同的景深层次设定值渲染出3D显示所需要的左眼视图，并根据所述的原网页渲染出3D显示所需要的右眼视图。
[0085] 对现有网页渲染进行处理，首先将原网页按原有的方式进行渲染，并将渲染出来的网页页面用于3D的右眼视图。
[0086] 添加一个3D渲染引擎，网页渲染过程处理经过3D渲染处理，并将渲染出来的网页页面用于3D的左眼视图。
[0087] 更具体地，3D显示所需要的左眼视图及右眼视图，通过所述的3D渲染引擎，保存为相应的左右视图文件。
[0088] S4.将左眼视图及右眼视图发往显示单元进行3D显示。
[0089] 当所有元素都处理完成后再生成整网页的渲染界面，并产生需要显示3D的左右视图，左眼视图显示在VR的左眼，右眼视图显示在VR的右眼,就有了视差，用户就能体验到3D效果。
[0090] 请参阅图2，本发明的方法的第二实施例，一种3D化2D网页显示的方法，大部分的步骤与以上的实施例一中的步骤相同，不同之处在于，所述的步骤S3，具体包括：
[0091] S31.将所述的背景图设置为景深远端，进行入屏处理；
[0092] 入屏处理，具体为：获取需要渲染的窗口的宽度，宽度的数值记为：W；
[0093] 获取背景图区域的X方向上的坐标，数值记为:X1；
[0094] 将背景图区域在左眼视图中向左方向移动，移动量为K，获取新的X方向上的坐标R1数值，R1＝X1-W×K，利用新的背景区域进行3D渲染，形成入屏显示,其中，K为移动位移量与所述宽度的百分比，K取值范围为1％～15％；
[0095] 微出屏处理，具体为：
[0096] 获取需要渲染的窗口的宽度，宽度的数值记为：W；
[0097] 获取图片、视频区域的X方向上的坐标，数值记为:X2；
[0098] 将所述的图片、视频区域在左眼视图中向右方向移动，移动量为J，获取新的X方向上的坐标R2数值，R2＝X2+W×J，利用新的图片、视频区域进行3D渲染，形成微出屏显示，其中，J为移动位移量与所述宽度的百分比，J取值范围为0.5％～10％；
[0099] 大一些的出屏处理，具体为：
[0100] 获取需要渲染的窗口的宽度，宽度的数值记为：W；
[0101] 获取按钮、选择框的X方向上的坐标，数值记为:X3；
[0102] 将所述的按钮、选择框区域在左眼视图向右方向移动，移动量为G，获取新的X方向上的坐标R3数值，R3＝X3+W×G，利用新的按钮、选择框区域进行3D渲染，形成大一些的出屏显示，其中，G为移动位移量与窗口宽度的百分比，G取值范围为5％～20％，[0103] 其中，坐标的原点为窗口的左上角，以窗口的水平方向建立X轴，以窗口的垂直方向建立Y轴。
[0104] 以上各数值单位均为像素数。
[0105] 其中，微出屏处理：以同一图片、视频区域为例，该图片、视频区域浮现于屏幕外侧，且，微出屏的图片、视频区域的面积超过原始的图片、视频区域的面积的15％～25％；
[0106] 其中，大一些的出屏处理：以同一按钮、选择框区域为例，该按钮、选择框区域浮现于微出屏处理的图片、视频区域的外侧，大一些的出屏处理的按钮、选择框区域超过原始的按钮、选择框区域的面积50％～200％。
[0107] 综上，第二实施例只将左眼视图进行移位，右眼视图不进行移位，更进一步具体化了3D效果，其中，3D处理引擎对各个字段进行景深的研判，将背景图进行入屏处理，确保背景信息在景深的最远端，将表格、文字、表单等内容不做处理，这样感觉和屏幕处于同一个平面。将视频、图片等内容做微出屏处理，感觉会浮在屏幕上面一些，最后将按钮、选择框等操作字段做大一些的出屏处理，感觉完全浮在人眼前。
[0108] 请参阅图3，本发明的方法的第三实施例，一种3D化2D网页显示的方法，大部分的步骤与以上的实施例一中的步骤相同，不同之处在于，在步骤S2及S3之间还具有S21:所述的景深层次设定值由用户自定义及实时控制。
[0109] 此时，添加3D控
制模块，在上步骤中对出入屏的处理都是默认的K为5％、J为2.5％、G为10％，当用户需要关闭景深时那么将值都设为0即可，当用户觉得视差太大可以将值进行适当的减少，当用户觉得视差太小可以将值进行适当的增加，从而有效地改善用户体验。
[0110] 该第三实施例更进一步地提高用户的自由选择，适应性更强。
[0111] 尽管上述第三实施例说明了在步骤S2及S3之间进行景深层次设定值由用户自定义及实时控制，但是应该理解的是，对景深层次的自定义并不限于在步骤S2及S3之间，例如也可以为在步骤S4之后，用户根据用户体验对景深层次设定值进行自定义及实时控制，从而根据用户自定义的景深层次设定值重新输出适于用户的3D显示图像。
[0112] 下面介绍实现以上方法的装置，装置未记载的部分，请参考以上方法中的记载。
[0113] 请参阅图4，实施例一、一种3D化2D网页显示的装置1，包括：
[0114] 请求信息获取单元10，用于获取网页3D化的请求信息；
[0115] 解析单元20，用于对2D网页进行解析，分离出组成网页的多个元素；
[0116] 渲染单元30，用于确定所述的多个元素对应的不同的景深层次设定值，根据多个元素与所确定出的对应的不同的景深层次设定值渲染出3D显示所需要的左眼视图，并根据所述的原网页渲染出3D显示所需要的右眼视图。
[0117] 对现有网页渲染进行处理，首先将原网页按原有的方式进行渲染，并将渲染出来的网页页面用于3D的右眼视图。
[0118] 添加一个3D渲染引擎，网页渲染过程处理经过3D渲染处理，左右视图制作完毕后，保存为相应的左右视图文件。
[0119] 排图单元40，用于将左眼视图及右眼视图发往显示单元进行3D显示。
[0120] 其中，解析单元20，具体用于：
[0121] 对2D网页进行解析，分离出组成网页的多个元素，所述的多个元素包括：背景图、表格、文字、表单、图片、视频、按钮、选择框等等。
[0122] 当所有元素都处理完成后再生成整网页的渲染界面，并产生需要显示3D的左右视图，左眼视图显示在VR的左眼，右眼视图显示在VR的右眼,就有了视差，用户就能体验到3D效果。
[0123] 请参阅图5，实施例二、一种3D化2D网页显示的装置1，大部分的功能模块与装置的实施例一相同，不同之处在于，包括：
[0124] 渲染单元30，具体包括：
[0125] 入屏处理单元301，用于将所述的背景图设置为景深远端，进行入屏处理；
[0126] 保留单元302，用于将所述的表格、文字、表单保留2D网页的原始默认值，不作处理；
[0127] 微出屏处理单元303，用于将所述的图片、视频设置为景深次近端，进行微出屏处理；
[0128] 大一些的出屏处理单元304，用于将所述的按钮、选择框设置为景深近端，进行大一些的出屏显示，浮在用户面前。
[0129] 入屏处理，以下的数值单位均为像素数，具体为：
[0130] 获取需要渲染的窗口的宽度，宽度的数值记为：W；
[0131] 获取背景图区域的X方向上的坐标，数值记为:X1；
[0132] 将所述的背景图区域在左眼视图中向左方向移动，移动量为K，获取新的X方向上的坐标R1数值，R1＝X1-W×K，利用新的背景区域进行3D渲染，形成入屏显示,其中，K为移动位移量与所述宽度的百分比，K取值范围为1％～15％；
[0133] 微出屏处理，具体为：
[0134] 获取需要渲染的窗口的宽度，宽度的数值记为：W；
[0135] 获取图片、视频区域的X方向上的坐标，数值记为:X2；
[0136] 将所述的图片、视频区域在左眼视图中向右方向移动，移动量为J，获取新的X方向上的坐标R2数值，R2＝X2+W×J，利用新的图片、视频区域进行3D渲染，形成微出屏显示，其中，J为移动位移量与所述宽度的百分比，J取值范围为0.5％～10％；
[0137] 大一些的出屏处理，以下的数值单位均为像素数，具体为：
[0138] 获取需要渲染的窗口的宽度，宽度的数值记为：W；
[0139] 获取按钮、选择框的X方向上的坐标，数值记为:X3；
[0140] 将所述的按钮、选择框区域在左眼视图向右方向移动，移动量为G，获取新的X方向上的坐标R3数值，R3＝X3+W×G，利用新的按钮、选择框区域进行3D渲染，形成大一些的出屏显示，其中，G为移动位移量与窗口宽度的百分比，G取值范围为5％～20％，[0141] 其中，坐标的原点为窗口的左上角，以窗口的水平方向建立X轴，以窗口的垂直方向建立Y轴。
[0142] 其中，微出屏处理：以同一图片、视频区域为例，该图片、视频区域浮现于屏幕外侧，且，微出屏的图片、视频区域的面积超过原始的图片、视频区域的面积的15％～25％；
[0143] 其中，大一些的出屏处理：以同一按钮、选择框区域为例，该按钮、选择框区域浮现于微出屏处理的图片、视频区域外侧，且，大一些的出屏处理的按钮、选择框区域超过原始的按钮、选择框区域的面积50％～200％。
[0144] 综上，第二实施例更进一步具体化了3D效果，其中，3D处理引擎对各个字段进行景深的研判，将背景图进行入屏处理，确保背景信息在景深的最远端，将表格、文字、表单等内容不做处理，这样感觉和屏幕在一个水平上。将视频、图片等内容做微出屏处理，感觉会浮在屏幕上面一些，最后将按钮、选择框等操作字段做大一些的出屏处理，感觉完全浮在人眼前。
[0145] 请参阅图6，实施例三、一种3D化2D网页显示的装置1，大部分的功能模块与装置的实施例一相同，不同之处在于，
[0146] 解析单元20及渲染单元30之间还具有控制单元25，用于由用户自定义及实时控制景深层次的设定。
[0147] 此时，添加3D
控制模块，在上步骤中对出入屏的处理都是默认的K为5％、J为2.5％、G为10％，当用户需要关闭景深时那么将值都设为0即可，当用户觉得视差太大可以将值进行适当的减少，当用户觉得视差太小可以将值进行适当的增加，从而有效地改善用户体验。
[0148] 该第三实施例更进一步地提高用户的自由选择，适应性更强。
[0149] 请参阅图7、一种3D化2D网页显示的系统100，包括网页服务器200、显示客户端300及控制器350，控制器350与网页服务器200、显示客户端300均相连接，控制器350具有上述的装置1。
[0150] 控制器350在内存中分配相应的左右离屏缓冲区，左右离屏缓冲区用于存放解析并渲染后的左眼视图及右眼视图；
[0151] 实施本发明的一种3D化2D网页显示的方法、装置及系统，具有以下有益的技术效果：
[0152] 本申请无需改变现有网站开发业态，只有3D观看端安装相应的播件，通过将现有的2D网页实时转换处理为基于双目视差的左视图和右视图来呈现，即可实现对所有普通网页的3D立体视觉处理，从而实现裸眼观看3D网页或通过VR眼镜等设备观看3D网页。
[0153] 需要说明的是，在上述的实施例中，可以根据原网页渲染出3D显示的右眼视图、根据解析分离出的多个元素及其对应的不同景深层次设定值渲染出左眼视图的形成示例，但是对于本领域技术人员而言，容易想到根据原网页渲染出3D显示的左眼视图、根据解析分离出的多个元素及其对应的不同景深层次设定值渲染出右眼视图的形成另外的实施例，在此不再赘述。
[0154] 本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或
计算机程序产品。因此，本发明可采用完全
硬件实施例、完全
软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘
存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
[0155] 本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程
数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中
指定的功能的装置。
[0156] 这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
[0157] 这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
[0158] 尽管已描述了本发明的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例作出另外的变更和
修改。所以，所附
权利要求意欲解释为包括优选实施例以及落入本发明范围的所有变更和修改。
[0159] 显然，本领域的技术人员可以对本发明实施例进行各种改动和变型而不脱离本发明实施例的精神和范围。这样，倘若本发明实施例的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。
