CN104809137B - 一种二维页面的三维网页制作方法及*** - Google Patents
一种二维页面的三维网页制作方法及*** Download PDFInfo
- Publication number
- CN104809137B CN104809137B CN201410041816.9A CN201410041816A CN104809137B CN 104809137 B CN104809137 B CN 104809137B CN 201410041816 A CN201410041816 A CN 201410041816A CN 104809137 B CN104809137 B CN 104809137B
- Authority
- CN
- China
- Prior art keywords
- page
- display
- display area
- web page
- needs
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Expired - Fee Related
Links
Landscapes
- Processing Or Creating Images (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明公开了一种二维页面的三维网页制作方法及***，所述方法包含：将显示区域显示的所有内容沿水平或垂直方向压缩至原来的二分之一，进而得到压缩的显示内容；将显示区域划分为面积相同的第一显示区域和第二显示区域，再将得到的压缩的显示内容同时在第一显示区域和第二显示区域上显示。确定压缩的显示内容中需要突出显示的元素，在第二显示区域中将所述需要突出显示的元素平移若干像素；其中，平移的方向与压缩方向相同，且平移的像素数以第一显示区域包含的需要突出显示的未移位的元素所在的位置为参考。将移位后的第二显示区域的显示内容和第一显示区域的显示内容作为三维网页中的左右格式或上下格式，再基于Web语言制作三维网页。
Description
技术领域
本发明涉及3D制作技术领域，特别涉及一种二维页面的三维网页制作方法及***。
背景技术
Web 3D又称网络三维，是一种在虚拟现实技术的基础上，将现实世界中有形的物品通过互联网进行虚拟的三维立体展示并可互动浏览操作的一种虚拟现实技术。与目前网上主流的以图片、FLASH、动画的展示方式相比较，Web 3D技术让用户有了浏览的自主感，可以以自己的角度去观察，还有许多虚拟特效和互动操作。
截止到现在，针对如何实现网络三维虽然出现了一些相关的解决方案，但是针对Web 3D的开发仍然存在很多困难和障碍。
首先，现存的各种实现方法没有统一的标准。由于每种现存的技术方案都使用不同的格式和方法，因此导致通用性很差。但是，通用性正是某个技术方案之所以盛行的主要原因。例如，Flash能够在今天如此广泛的得到应用正是因为它是唯一的；JAVA在各平台得到运用也因它是唯一的。因此如果没有统一标准，3D在Web上的实现过程还将继续挣扎。
另外，插件的问题也是一个困绕。几乎每个厂商开发的标准都需要自己插件的支持，这些插件占用的流量从几百K到几M不等，因此在带宽不理想的条件下必然限制了一部分人的使用热情。
从视频3D发展来看，3D视频的拍摄、制作、发行及电视播放已经成熟，随着广大观众对3D电视节目需求的提高，在未来的技术发展中，3D市场的爆发式增长是可以预见的，3D电视和机顶盒技术必定在三网融合的大背景下占有着一定的市场空间。
现在的支持3D视频播放的电视或机顶盒，3D机顶盒用户界面和门户***都是2D的，用户在播放3D时，将选择3D播放模式，带上3D眼镜；当用户进行其他操作时(如搜索电影、查看详情等)将采用2D模式，摘下3D眼镜。这样大大降低用户的服务体验。有必要把3D电视或机顶盒的门户设计成3D页面，提升用户体验。电视或机顶盒的门户的页面通常比较简单，采用现有的解决方案往往会因为插件问题，无法正常运行。所以需要一种不仅制作简单、且电视或机顶盒运行时资源消耗少的3D页面实现方式，以支撑3D视频运营的发展。
发明内容
本发明的目的在于，为了克服上述缺陷，本发明提供一种二维页面的三维网页制作方法及***。
为了实现上述目的，本发明提供一种二维页面的三维网页制作方法，所述方法包含：
步骤101，将显示区域显示的所有内容沿水平或垂直方向压缩至原来的二分之一，进而得到压缩的显示内容；
将显示区域划分为面积相同的第一显示区域和第二显示区域，再将得到的压缩的显示内容同时在第一显示区域和第二显示区域上显示。
步骤102，确定压缩的显示内容中需要突出显示的元素，在第二显示区域中将所述需要突出显示的元素平移若干像素；其中，平移的方向与压缩方向相同，且平移的像素数以第一显示区域包含的需要突出显示的未移位的元素所在的位置为参考。
步骤103，将移位后的第二显示区域的显示内容和第一显示区域的显示内容作为三维网页中的左右格式或上下格式，再基于Web语言制作三维网页。
可选的，上述步骤102和步骤103之间还包含：
在第一显示区域和第二显示区域中将所述的需要突出显示的元素沿相同方向偏移相同的像素数；其中，偏移的像素数以需要突出显示的元素未发生位移前的位置为参考，且所述步骤102的平移方向与该步骤的所述的偏移方向垂直，此时步骤103分别将步骤102平移得到的第二显示区域的显示内容和第一显示区域的显示内容及该步骤偏移得到的第二显示区域的显示内容和第一显示区域的显示内容作为三维网页中的左右格式和上下格式，再基于Web语言制作三维网页。
进一步可选的，上述的偏移数目为10～18个像素；需要突出显示的元素数目为一个或多个，且当需要突出显示的元素数目为多个时，通过调整需要突出显示的元素的偏移像素数目，进而调整产生的景深。
此外，本发明提供一种二维页面的三维网页制作***，所述***包含：
页面内容压缩模块，用于将显示页面显示的所有内容沿水平或垂直方向压缩至原来的二分之一，得到压缩的显示内容。
页面划分子模块，用于将显示页面划分为面积相同的第一显示页面和第二显示页面，再将得到的压缩显示内容同时在第一显示显示页面和第二显示显示页面上显示。
第一平移模块，用于确定需要突出显示的元素，在第二显示子页面中将所述的需要突出显示的元素平移若干像素；其中，平移的方向与压缩方向相同，且平移的像素数以第一显示子页面包含的需要突出显示的未移位的元素所在的位置为参考。
基于web的网页制作模块，用于将移位后的第二显示区域的显示内容和第一显示区域的显示内容作为三维网页中的左右格式或上下格式，再基于Web语言制作三维网页。
可选的，上述第一平移模块和基于web的网页制作模块之间还包含：
第二平移模块，用于将第一显示区域和第二显示区域包含的需要突出显示的元素沿同一方向偏移相同的像素数；其中，偏移的像素数以需要突出显示的元素未发生位移前的位置为参考，且第一平移模块的平移方向与该模块的所述的偏移方向垂直。
进一步可选的，上述的偏移数目为10～18个像素，需要突出显示的元素数目为一个或多个，且当需要突出显示的元素数目为多个时，通过调整需要突出显示的元素的偏移像素数目，进而调整产生的景深。
与现有技术相比，本发明的优点在于：
1)摆脱了现有技术3D页面制作平台的限制，开发者可以使用自己熟悉的Web技术和工具进行开发，简化了开发过程。
2)运行时占用电视或机顶盒的资源小。
3)不依赖任何插件即可实现二维页面显示区域的显示内容的三维网页制作方法，具有很强的普适性。
附图说明
图1本发明实施例以左右格式为例说明实现方法的原理图；
图2本发明实施例记载的基于Web技术制作3D页面的方法流程图。
具体实施方式
下面结合附图和实施例对本发明所述方法进行详细说明。
为了达到将二维页面显示的内容制作为三维网页中某些元素的不同景深效果的技术目的，本发明提供一种二维页面的三维网页制作方法，所述方法包含：
步骤101，将显示区域显示的所有内容沿水平或垂直方向压缩至原来的二分之一，进而得到压缩的显示内容；将显示区域划分为面积相同的第一显示区域和第二显示区域，再将得到的压缩的显示内容同时在第一显示区域和第二显示区域上显示。
步骤102，确定压缩的显示内容中需要突出显示的元素，在第二显示区域中将所述需要突出显示的元素平移若干像素；其中，平移的方向与压缩方向相同，且平移的像素数以第一显示区域包含的需要突出显示的未移位的元素所在的位置为参考。
步骤103，将移位后的第二显示区域的显示内容和第一显示区域的显示内容作为三维网页中的左右格式或上下格式，再基于Web语言制作三维网页。
为了进一步达到制作得到的三维网页的层次效果，所述步骤102和步骤103之间还包含：在第一显示区域和第二显示区域中将所述的需要突出显示的元素沿相同方向偏移相同的像素数；其中，偏移的像素数以需要突出显示的元素未发生位移前的位置为参考，且所述步骤102的平移方向与该步骤的所述的偏移方向垂直。
为了使多个需要突出显示的元素产生不同的景深效果，可以将需要突出显示的元素平移不同的像素数目。通过统计学方式可知像素的偏移数目为10～18像素，产生的景深效果最好。当需要突出显示的元素数目为多个时，通过调整需要突出显示的元素的偏移像素数目，进而达到调整产生的景深。
实施例：
图1是以左右格式为例说明该方法原理图，该方法制作原理包括：
1)、将整个显示页面显示内容的水平分辨率从右向左压缩到了原来的一半，并将压缩后的内容放在原来页面的左边，另外一半区域(右边)用同样压缩后的页面进行填充，这样原来的页面被2个尺寸大小相等的压缩的页面替换。
2)、选择左边的压缩后的页面作为参考页面，向右水平偏移在右边页面里面需要突出显示的元素PIG-2，且将PIG-2水平偏移“S2-S1”个像素，形成相位差，最终被偏移的元素和页面其他未被偏移的元素将产生不同的景深。
3)、在右边的页面中可以偏移多个元素，当偏移的像素数目不同时，将产生不同的景深，其中，左边页面和右边页面包含的元素均为：PIG-1，PIG-2和PIG-3。
4)、在两个压缩的页面中，同时从垂直方向偏移需要突出显示的元素PIG-2，且偏移的像素数目为“B2-B1”个，这样能产生垂直方向的层次，但不能使景深改变。
图2为基于Web技术3D页面制作流程图，步骤如下：
步骤201)、把原始页面(记为Page)分为左右相同的两个压缩页面
201-1)整个Page布局所占有的像素分成左右两个大小相同的div组成。
201-2)左右两个div中分别包含Page中所有元素，只是所有元素都被水平压缩一半的像素，被水平压缩的页面，左边称为Page-L，右边称为Page-R。
201-3)这样，形成新的页面布局，即由Page-L和Page-R组成。
步骤202)、水平偏移Page-R所包含的元素
202-1)选择Page-L元素布局为参考，在Page-R偏移Page-R所包括的待突出立体效果的元素(记为Pig)。
202-2)不同的元素可以偏移不同的像素值，最终结果它们将产生不同的景深。
202-3)根据经验和测试，偏移像素值的范围一般在10～18个像素之间，产生的景深效果比较好。
步骤203)、垂直偏移步骤202)被偏移的元素Pig，形成新的页面称为Page-N，
203-1)选择Page元素布局为参考，在Page-L和Page-R同时偏移步骤202)被偏移的元素Pig。
203-2)Page-L和Page-R在垂直方向上偏移的像素要一致。
步骤204)、用Web语言实现Page-N页面，编写页面代码。
此外，本发明还提供一种二维页面的三维网页制作***，所述***包含：
页面内容压缩模块，用于将显示页面显示的所有内容沿水平或垂直方向压缩至原来的二分之一，得到压缩的显示内容。
页面划分子模块，用于将显示页面划分为面积相同的第一显示页面和第二显示页面，再将得到的压缩显示内容同时在第一显示显示页面和第二显示显示页面上显示。
第一平移模块，用于确定需要突出显示的元素，在第二显示子页面中将所述的需要突出显示的元素平移若干像素。其中，平移的方向与压缩方向相同，且平移的像素数以第一显示子页面包含的需要突出显示的未移位的元素所在的位置为参考。
基于web的网页制作模块，用于将移位后的第二显示区域的显示内容和第一显示区域的显示内容作为三维网页中的左右格式或上下格式，再基于Web语言制作三维网页。
可选的，上述第一平移模块和基于web的网页制作模块之间还包含：
第二平移模块，用于将第一显示区域和第二显示区域包含的需要突出显示的元素沿同一方向偏移相同的像素数；其中，偏移的像素数以需要突出显示的元素未发生位移前的位置为参考，且第一平移模块的平移方向与该模块的所述的偏移方向垂直。
第一平移模块和第二偏移模块的偏移数目为10～18个像素，需要突出显示的元素数目为一个或多个，且当需要突出显示的元素数目为多个时，通过调整需要突出显示的元素的偏移像素数目，进而达到调整产生的景深。
综上所述，本发明的基本原理为：将整个页面水平或垂直分辨率压缩到了原来的一半，原来页面另外一半区域用同样压缩后的页面进行填充，这样原来的页面被2个尺寸大小相等的压缩的页面替换；在两个压缩后的页面里面，选择一个作为参考页面，在另外一个页面里面的元素进行偏移，形成相位差，该元素和页面他元素将产生不同的景深；为了更突出立体感，要在两个压缩页面中，同时从另外一个方向进行像素偏移，能产生另外方向的立体感。
最后所应说明的是，以上实施例仅用以说明本发明的技术方案而非限制。尽管参照实施例对本发明进行了详细说明，本领域的普通技术人员应当理解，对本发明的技术方案进行修改或者等同替换，都不脱离本发明技术方案的精神和范围，其均应涵盖在本发明的权利要求范围当中。
Claims (8)
1.一种二维页面的三维网页制作方法，所述方法包含：
步骤101，将显示区域显示的所有内容沿水平或垂直方向压缩至原来的二分之一，进而得到压缩的显示内容；
将显示区域划分为面积相同的第一显示区域和第二显示区域，再将得到的压缩的显示内容同时在第一显示区域和第二显示区域上显示；
步骤102，确定压缩的显示内容中需要突出显示的元素，在第二显示区域中将所述需要突出显示的元素平移若干像素；
其中，平移的方向与压缩方向相同，且平移的像素数以第一显示区域包含的需要突出显示的未移位的元素所在的位置为参考；
步骤103，将移位后的第二显示区域的显示内容和第一显示区域的显示内容作为三维网页中的左右格式或上下格式，再基于Web语言制作三维网页；
所述步骤102和步骤103之间还包含：
在第一显示区域和第二显示区域中将所述的需要突出显示的元素沿相同方向偏移相同的像素数；
其中，偏移的像素数以需要突出显示的元素未发生位移前的位置为参考，且所述步骤102的平移方向与该步骤的所述的偏移方向垂直。
2.根据权利要求1所述的二维页面的三维网页制作方法，其特征在于，所述的偏移数目为10～18个像素。
3.根据权利要求1所述的二维页面的三维网页制作方法，其特征在于，需要突出显示的元素数目为一个或多个。
4.根据权利要求3所述的二维页面的三维网页制作方法，其特征在于，当需要突出显示的元素数目为多个时，通过调整需要突出显示的元素的偏移像素数目，进而调整产生的景深。
5.一种二维页面的三维网页制作***，其特征在于，所述***包含：
页面内容压缩模块，用于将显示页面显示的所有内容沿水平或垂直方向压缩至原来的二分之一，得到压缩的显示内容；
页面划分子模块，用于将显示页面划分为面积相同的第一显示页面和第二显示页面，再将得到的压缩显示内容同时在第一显示显示页面和第二显示显示页面上显示；
第一平移模块，用于确定需要突出显示的元素，在第二显示子页面中将所述的需要突出显示的元素平移若干像素；
其中，平移的方向与压缩方向相同，且平移的像素数以第一显示子页面包含的需要突出显示的未移位的元素所在的位置为参考；
基于web的网页制作模块，用于将移位后的第二显示区域的显示内容和第一显示区域的显示内容作为三维网页中的左右格式或上下格式，再基于Web语言制作三维网页；
所述第一平移模块和基于web的网页制作模块之间还包含：
第二平移模块，用于将第一显示区域和第二显示区域包含的需要突出显示的元素沿同一方向偏移相同的像素数；其中，偏移的像素数以需要突出显示的元素未发生位移前的位置为参考，且第一平移模块的平移方向与该模块的所述的偏移方向垂直。
6.根据权利要求5所述的二维页面的三维网页制作***，其特征在于，所述的偏移数目为10～18个像素。
7.根据权利要求5所述的二维页面的三维网页制作***，其特征在于，需要突出显示的元素数目为一个或多个。
8.根据权利要求7所述的二维页面的三维网页制作***，其特征在于，当需要突出显示的元素数目为多个时，通过调整需要突出显示的元素的偏移像素数目，进而调整产生的景深。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201410041816.9A CN104809137B (zh) | 2014-01-28 | 2014-01-28 | 一种二维页面的三维网页制作方法及*** |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201410041816.9A CN104809137B (zh) | 2014-01-28 | 2014-01-28 | 一种二维页面的三维网页制作方法及*** |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN104809137A CN104809137A (zh) | 2015-07-29 |
| CN104809137B true CN104809137B (zh) | 2018-07-13 |
Family
ID=53693962
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201410041816.9A Expired - Fee Related CN104809137B (zh) | 2014-01-28 | 2014-01-28 | 一种二维页面的三维网页制作方法及*** |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN104809137B (zh) |
Families Citing this family (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108197248B (zh) * | 2017-12-29 | 2021-07-16 | 杭州联络互动信息科技股份有限公司 | 一种3d化2d网页显示的方法、装置及*** |
| CN114079764A (zh) * | 2020-08-11 | 2022-02-22 | 北京芯海视界三维科技有限公司 | 3d显示方法、3d显示装置及3d显示器件 |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102375673A (zh) * | 2010-08-11 | 2012-03-14 | Lg电子株式会社 | 用于控制图像深度的方法以及利用该方法的移动终端 |
| CN102685517A (zh) * | 2011-03-09 | 2012-09-19 | 联想(北京)有限公司 | 一种实现2d图像转3d图像的装置、方法和*** |
| CN102905143A (zh) * | 2011-07-28 | 2013-01-30 | 瑞昱半导体股份有限公司 | 2d转3d图像转换装置及其方法 |
| CN103310477A (zh) * | 2013-06-27 | 2013-09-18 | 北京青青树动漫科技有限公司 | 一种三维影像生成方法 |
Family Cites Families (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| KR100728777B1 (ko) * | 2004-04-07 | 2007-06-19 | 삼성에스디아이 주식회사 | 패럴랙스 베리어 및 이를 구비한 입체 영상 표시장치 |
| JP6016061B2 (ja) * | 2012-04-20 | 2016-10-26 | Ｎｌｔテクノロジー株式会社 | 画像生成装置、画像表示装置及び画像生成方法並びに画像生成プログラム |
-
2014
- 2014-01-28 CN CN201410041816.9A patent/CN104809137B/zh not_active Expired - Fee Related
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102375673A (zh) * | 2010-08-11 | 2012-03-14 | Lg电子株式会社 | 用于控制图像深度的方法以及利用该方法的移动终端 |
| CN102685517A (zh) * | 2011-03-09 | 2012-09-19 | 联想(北京)有限公司 | 一种实现2d图像转3d图像的装置、方法和*** |
| CN102905143A (zh) * | 2011-07-28 | 2013-01-30 | 瑞昱半导体股份有限公司 | 2d转3d图像转换装置及其方法 |
| CN103310477A (zh) * | 2013-06-27 | 2013-09-18 | 北京青青树动漫科技有限公司 | 一种三维影像生成方法 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN104809137A (zh) | 2015-07-29 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US8488869B2 (en) | Image processing method and apparatus | |
| US8471898B2 (en) | Medial axis decomposition of 2D objects to synthesize binocular depth | |
| US8228327B2 (en) | Non-linear depth rendering of stereoscopic animated images | |
| CN106296781B (zh) | 特效图像生成方法及电子设备 | |
| KR102502794B1 (ko) | 가상 현실 데이터를 맞춤화하기 위한 방법들 및 시스템들 | |
| US20120229595A1 (en) | Synthesized spatial panoramic multi-view imaging | |
| CN102184082B (zh) | 一种基于双目视差原理的3d浏览器实现方法 | |
| CN108693970B (zh) | 用于调适可穿戴装置的视频图像的方法和设备 | |
| Po et al. | Automatic 2D-to-3D video conversion technique based on depth-from-motion and color segmentation | |
| KR20120049997A (ko) | 영상 변환 장치 및 이를 이용하는 디스플레이 장치와 그 방법들 | |
| CN102937968B (zh) | 一种基于Canvas的双目3D网页实现方法及*** | |
| BR112015006412A2 (pt) | método de geração de imagem de múltiplas vistas , e aparelho de exibição de imagem de múltiplas vistas | |
| CN104021585A (zh) | 基于真实场景的三维展示方法 | |
| CN106303491A (zh) | 图像处理方法及装置 | |
| CN105578172B (zh) | 基于Unity3D引擎的裸眼3D视频显示方法 | |
| CN104809137B (zh) | 一种二维页面的三维网页制作方法及*** | |
| CN103561255A (zh) | 一种裸眼立体显示方法 | |
| JP2011166606A (ja) | 画像処理装置、および画像処理方法、並びにプログラム | |
| US20140307048A1 (en) | Signaling warp maps using a high efficiency video coding (hevc) extension for 3d video coding | |
| US20130050183A1 (en) | System and Method of Rendering Stereoscopic Images | |
| WO2014109321A1 (ja) | 送信装置、送信方法、受信装置および受信方法 | |
| CN106303493A (zh) | 图像处理方法及装置 | |
| WO2011006104A1 (en) | Modifying images for a 3-dimensional display mode | |
| JP2014072809A (ja) | 画像生成装置、画像生成方法、画像生成装置用プログラム | |
| TWI531213B (zh) | 應用於裸視３ｄ顯示之影像轉換方法與模組 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| EXSB | Decision made by sipo to initiate substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| CF01 | Termination of patent right due to non-payment of annual fee |
Granted publication date: 20180713 Termination date: 20190128 |
|
| CF01 | Termination of patent right due to non-payment of annual fee |