[發明專利]用于實現三維頁面的方法及系統

在審

• 申請號: 201310290469.9
• 申請日: 2013-07-11
• 公開（公告）號: CN103412874A
• 公開（公告）日: 2013-11-27
• 發明（設計）人: 王文敏;王榮剛;董勝富;王振宇;李英;高文
• 申請（專利權）人: 北京大學深圳研究生院
• 主分類號: G06F17/30
• 分類號: G06F17/30
• 代理公司: 深圳鼎合誠知識產權代理有限公司 44281
• 代理人: 郭燕;彭家恩

技術領域

本申請涉及計算機應用領域，尤其涉及一種用于實現三維頁面的方法及系統。

背景技術

人類的眼睛在觀察一個三維物體時，由于雙眼水平分開在兩個不同的位置上，所看到的物體圖像是不同的。左眼和右眼看到的圖像分別為左眼圖像和右眼圖像，它們之間存在著一個視差（Parallax）。由于視差的存在，通過人類的大腦，可以感受到一個具有景深和層次感的三維（3D）世界，這就是雙目視差原理。視差又分為正視差、負視差及零視差。在3D顯示平面上，物體的左眼圖像在左側、右眼圖像在右側時被定義為正視差，觀看正視差的物體時，感覺該物體位于3D顯示平面的后方；在3D顯示平面上，物體的左眼圖像在右側、右眼圖像在左側時被定義為負視差，觀看負視差的物體時，感覺該物體位于3D顯示平面的前方；而零視差是指在3D顯示平面上，物體的左眼圖像與右眼圖像完全重合。面向裸眼立體3D顯示的多視點3D則是由至少三個相鄰的視點構成的，定義為多視點立體3D（Multi-view?Stereoscopic3D），相鄰的兩個視點構成雙視點3D。由此可見，多視點3D是雙視點3D的擴展，雙視點3D是多視點3D的特例。

目前的雙視點或多視點3D技術主要應用于3D電視上，而目前如何將多視點3D技術應用于網頁，成為現有技術的一大問題。

發明內容

本申請提供一種用于實現三維頁面的方法及系統，以實現雙視點及多視點3D網頁。

根據本申請的第一方面，本申請提供一種用于實現三維網頁的方法，包括：

獲得三維頁面文件，所述三維頁面文件包括如下內容：HTML語言中的至少兩個視幀標簽，每一視幀標簽包括每一視幀的標識及內容，視幀的內容包括頁面布局及頁面元素，所述頁面元素包括三維頁面元素；CSS語言中的三維定位信息屬性組，三維定位信息屬性組包括視幀的標識、視幀中三維頁面元素的標識，以及三維頁面元素的三維定位信息；JavasScript語言中的顯示格式對象，顯示格式對象包括視幀的標識以及視幀的顯示格式信息；

對三維頁面文件進行解析，得到視幀標簽、三維定位信息屬性組以及顯示格式對象中的信息；

根據解析得到的視幀標簽及三維定位信息屬性組中的信息，建立每一視幀對應的文檔對象模型樹；

根據解析得到的顯示格式對象中的信息，對需要顯示的各視幀對應的文檔對象模型樹進行三維渲染，得到三維頁面以進行顯示。

根據本申請的第二方面，本申請提供一種用于實現三維網頁的系統，包括：

解析模塊，用于獲得三維頁面文件，所述三維頁面文件包括如下內容：HTML語言中的至少兩個視幀標簽，每一視幀標簽包括每一視幀的標識及內容，視幀的內容包括頁面布局及頁面元素，所述頁面元素包括三維頁面元素；CSS語言中的三維定位信息屬性組，三維定位信息屬性組包括視幀的標識、視幀中三維頁面元素的標識，以及三維頁面元素的三維定位信息；JavasScript語言中的顯示格式對象，顯示格式對象包括視幀的標識以及視幀的顯示格式信息；并對三維頁面文件進行解析，得到視幀標簽、三維定位信息屬性組以及顯示格式對象中的信息；

視幀構建模塊，用于根據解析得到的視幀標簽及三維定位信息屬性組中的信息，建立每一視幀對應的文檔對象模型樹；

渲染模塊，用于根據解析得到的顯示格式對象中的信息，對需要顯示的各視幀對應的文檔對象模型樹進行三維渲染，得到三維頁面以進行顯示。

本申請的有益效果是：

通過提供一種用于實現三維網頁的方法及系統，利用在HTML語言中定義的視幀標簽、在CSS語言中定義的三維定位信息屬性組以及在JavaScript語言中定義的顯示格式對象創建三維頁面文件，并且對三維頁面文件進行解析并相應建立視幀對應的文檔對象模型樹，最后對文檔對象模型樹進行三維渲染，依據顯示格式顯示渲染所得三維頁面。這樣，采用上述處理方式就能實現雙視點或多視點三維網頁，在雙視點或多視點3D顯示器上呈現具有深度感的立體三維網頁世界，革新了網絡體驗。

附圖說明

圖1為本申請實施例的用于實現3D網頁的方法的流程圖；

圖2為本申請實施例的用于實現三維網頁的系統的結構圖。

具體實施方式

本申請是對網頁語言HTML、CSS、Javascript進行全面的擴展，而實現雙視點或多視點立體3D網頁的技術。

下面通過一個具體實施例結合附圖對本申請作進一步詳細說明。

請參考圖1，本實施例的用于實現3D網頁的方法主要包括如下流程：