一种3d网页的同步显示方法及系统的制作方法_2

文档序号:9597912阅读:来源:国知局
41]所述的系统于该3D网页的代码中,该左视图与右视图分别包括文字和/或图片。
[0042]该左视图的代码与右视图的代码中,就同一图片的位置关系为:
[0043]rtop = Itop ;
[0044]rbottom = Ibottom
[0045]rleft = lleft+wide/2
[0046]rright = 2*wide~rleft-1Ieft-1right
[0047]其中,rtop为右视图中的图片距离该3D网页的顶边的边距,Itop左视图中的图片距离该3D网页的顶边的边距,rbottom为右视图中的图片距离该3D网页的底边的边距,Ibottom为左视图中的图片距离该3D网页的底边的边距,rleft为右视图中的图片距离该3D网页的左边界的边距,Ileft为左视图中的图片距离该3D网页的左边界的边距,rright为右视图中的图片距离该3D网页的右边界的边距,Iright为左视图中的图片距离该3D网页的右边界的边距,wide为该3D网页的宽度。
[0048]该左视图的代码与右视图的代码中,就同一文字的位置关系为:
[0049]rtop = Itop ;
[0050]rbottom = !bottom
[0051]rleft = lleft+wide/2+n
[0052]rright = lright-wide/2+n
[0053]其中,rtop为右视图中的文字距离该3D网页的顶边的边距,ltop左视图中的文字距离该3D网页的顶边的边距,rbottom为右视图中的文字距离该3D网页的底边的边距,lbottom为左视图中的文字距离该3D网页的底边的边距,rleft为右视图中的文字距离该3D网页的左边界的边距,lleft为左视图中的文字距离该3D网页的左边界的边距,rright为右视图中的文字距离该3D网页的右边界的边距,lright为左视图中的文字距离该3D网页的右边界的边距,wide为该3D网页的宽度,η为用于视差模拟的像素个数,η为整数。
[0054]通过本发明的上述技术方案,可以使得3D网页在显示过程中进行左右视图同步渲染,提升3D观影的用户体验。
【附图说明】
[0055]图1所示为该示例网页代码所对应的网页示意图。
[0056]图2Α、2Β所示为本发明的一种3D网页的同步显示方法的流程示意图。
【具体实施方式】
[0057]以下结合具体实施例,详细描述本发明的实现过程,以便于本领域的技术人员充分了解本发明的技术细节,但不作为对本发明的限制。
[0058]目前3D呈现的方式基本是以游戏、视频、图片的形式存在,而3D网页的显示方式目前仍然没有比较好的呈现方法。3D网页的格式分为双色(红蓝、红绿等),左右,上下,行交错,列交错,这其中左右(Side-by-Side)的3D网页格式目前被普遍接受,3D显示设备都可以基于该种格式进行3D画面的展现。本发明中所用到的3D网页设计也基于该种格式进行。
[0059]本发明的3D网页的编码采用html标记语言配合css样式定义的方式,或者,WebGL配合CssShader的方式。于该3D网页的代码中,该左视图与右视图分别包括但不限于文字和/或图片。
[0060]以html配合Css为例。3D网页的网页代码通常包括:
[0061]Css布图代码
[0062][img]左图片地址[/img]
[0063][title]左文字[title]
[0064][img]右图片地址[/img]
[0065][title]右文字[title]
[0066]html部分主要管控网页的文本内容。S卩,通过html标记语言的管控,加载上预先处理好的图片和文字。Css布图代码主要管控该图片和文字所采用的布局。该3D网页的代码所对应的网页示意图如图1所示,通过Css布图代码对左右图片和左右文字的布局设置,控制其具体的显示位置。
[0067]在本发明中,为了使得3D网页的左右视图同步渲染,在进行3D网页的网页设计时,专门在代码中设置进度标志位。具体来说,如图2A、2B所示为本发明的一种3D网页的同步显示方法的流程示意图。
[0068]步骤1,于3D网页的代码中,为隶属于同一 3D网页的左视图设置多个左视图进度标志位,为隶属于同一 3D网页的右视图设置多个右视图进度标志位。
[0069]本发明的3D网页的网页代码包括:
[0070][img]左图片 I 地址[/img]
[0071][title]左文字 I [/title]
[0072][3dprogress]L50[/3dprogress]
[0073][img]左图片 2 地址[/img]
[0074][title]左文字 2 [title]
[0075][3dprogress]L75[/3dprogress]
[0076][img]左图片 3 地址[/img]
[0077][title]左文字 3 [title]
[0078][3dprogress]LlOO[/3dprogress]
[0079][img]右图片 I 地址[/img]
[0080][title]右文字 I [/title]
[0081 ] [3dprogress]R50[/3dprogress]
[0082][img]右图片 2 地址[/img]
[0083][title]右文字 2 [title]
[0084][3dprogress]R75[/3dprogress]
[0085][img]右图片 3 地址[/img]
[0086][title]右文字 3 [title]
[0087][3dprogress]RlOO[/3dprogress]
[0088]其中,[3dprogress]为进度标志位,且本发明在3D网页的html代码中,分段设置有多个进度标志位。该进度标志位中记载的内容表示了当前加载的进度。
[0089]例如,[3dprogress]L50[/3dprogress]为左视图进度标志位,L50代表左视图加载到50%,[3dprogress]L100[/3dprogress]为左视图进度标志位,L75代表左视图加载到75%,[3dprogress]L100[/3dprogress]为左视图进度标志位,LlOO代表左视图加载到100%。
[0090][3dprogress]R50[/3dprogress]为右视图进度标志位,R50代表右视图加载到50%, [3dprogress]R75[/3dprogress]为右视图进度标志位,R75代表右视图加载到75%,[3dprogress]R100[/3dprogress]为右视图进度标志位,RlOO代表右视图加载到100%。
[0091]该进度标志位设置的间隔可以根据需要自行设定,但是,针对左右视图的间隔需一致,例如针对左视图分别在30 %、45 %、80 %、100 %处设置有进度标志位,则针对由右视图也需分别在30 %、45 %、80 %、100 %处设置有进度标志位。即,同一视图内,各个进度标志位之间的间隔可能不同,但是,每个进度标志位在另一视图内,都应存在相同进度的进度标志位。进度标志位设置的越多越密集,后续同步渲染的精度越高,同步渲染效果越好。
[0092]步骤2,设置有该进度标志位的该3D网页的代码被传输至该立体影视播放装置。
[0093]步骤3,该立体影视播放装置的浏览器实时判断当前所收取到的代码中,是否存在具有相同进度的左视图进度标志位以及右视图进度标志位,如果是,执行步骤4,如果否,重复执行步骤3。
[0094]步骤4,将该具有相同进度的左视图进度标志位以及右视图进度标志位作为目标标志位,将左视图中截止到该目标标志位的代码内容以及右视图中截止到该目标标志位的代码内容进行渲染,并进行
当前第2页1 2 3 4 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1