CN104809137B - A kind of the three-dimensional web page production method and system of the two dimension page - Google Patents
A kind of the three-dimensional web page production method and system of the two dimension page 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
Abstract
The invention discloses a kind of three-dimensional web page production methods of two-dimentional page and system, the method to include：The display content that all the elements that display area is shown are compressed to original half, and then are compressed along the horizontal or vertical direction；Display area is divided into identical first display area of area and the second display area, then the display content of obtained compression is shown on the first display area and the second display area simultaneously.It determines in the display content of compression and needs highlighted element, need several pixels of highlighted first primitive translation by described in the second display area；Wherein, the direction of translation is identical as compression direction, and the pixel number translated include with the first display area the highlighted element not shifted of needs where position be reference.Using the display content of the second display area after displacement and the display content of the first display area as the left-right format or top-down format in three-dimensional web page, then based on Web language making three-dimensional web page.
Description
Technical field
The present invention relates to 3D manufacture technology fields, more particularly to the three-dimensional web page production method of a kind of two-dimentional page and it is
System.
Background technology
Web 3D are also known as Network Three-dimensional, be one kind on the basis of virtual reality technology, by object tangible in real world
Product by internet carry out virtual 3 D stereo displaying and can interaction browse operation a kind of virtual reality technology.With current net
The exhibition method with picture, FLASH, animation of upper mainstream compares, and Web 3D technologies allow user to have the sense of autonomy browsed, can
It goes to observe with the angle with oneself, there are many more virtual special efficacy and interactive operations.
Cut-off till now, for how realizing although some relevant solutions occurs in Network Three-dimensional, but is directed to
The exploitation of Web 3D still has many difficult and obstacles.
First, the ununified standard of existing various implementation methods.Since each existing technical solution all uses not
Same format and method, therefore cause versatility very poor.But versatility is exactly why prevailing main of some technical solution
Reason.For example, Flash so can widely be applied in today, exactly because it is unique；JAVA is obtained in each platform
To with also because it is unique.So if not seeking unity of standard, realization processes of the 3D on Web will also continue to struggle.
It is troubled in addition, the problem of plug-in unit is also one.Almost the standard of each manufacturer's exploitation is required for the branch of oneself plug-in unit
It holds, the flow that these plug-in units occupy necessarily limits one from hundreds of K to several M etc. under conditions of bandwidth is undesirable
Divide the use enthusiasm of people.
From the point of view of video 3D development, the shootings of 3D videos, making, issue and televise it is ripe, with vast sight
Raising of the crowd to 3D TV programme demands, in following technology development, the explosive growth in the markets 3D is predictable, 3D
TV and set-top box technique must be seized of certain market space under the overall background of the integration of three networks.
The TV or set-top box of present support 3D video playings, 3D set-top box users interface and gate system are all 2D
, user will select 3D play mode, take 3D glasses when playing 3D；When user carries out other operations (as searched for electricity
Shadow checks details etc.) 2D patterns will be used, it take 3D glasses.The service experience of user is substantially reduced in this way.It is necessary to 3D electricity
Depending on or the portal of set-top box be designed to the 3D pages, promote user experience.The page of the portal of TV or set-top box is usually simpler
It is single, using existing solution often because of plug-in unit problem, it is unable to operate normally.So needing a kind of not only making letter
Resource consumption few 3D page realization methods when single and TV or set-top box are run, to support the development of 3D video operations.
Invention content
It is an object of the present invention in order to overcome drawbacks described above, the present invention to provide a kind of three-dimensional web page system of the two-dimentional page
Make method and system.
To achieve the goals above, the present invention provides a kind of three-dimensional web page production method of the two-dimentional page, the method packet
Contain：
Step 101, all the elements that display area is shown are compressed to original half along the horizontal or vertical direction,
And then the display content compressed；
Display area is divided into identical first display area of area and the second display area, then by obtained compression
Display content is shown on the first display area and the second display area simultaneously.
Step 102, it determines in the display content of compression and needs highlighted element, it will be described in the second display area
Need several pixels of highlighted first primitive translation；Wherein, the direction of translation is identical as compression direction, and translate pixel number with
Position where the highlighted element not shifted of needs that first display area includes is reference.
Step 103, using the display content of the second display area after displacement and the display content of the first display area as
Left-right format in three-dimensional web page or top-down format, then three-dimensional web page is made based on Web language.
Optionally, also include between above-mentioned steps 102 and step 103：
It is in the first display area and the second display area that the highlighted element of needs is inclined in same direction
Move identical pixel number；Wherein, the pixel number of offset is reference with the position before needing highlighted element not to be subjected to displacement,
And the translation direction of the step 102 is vertical with the offset direction of the step, step 103 is respectively by step 102 at this time
It translates the obtained display content of the second display area and the display content of the first display area and the step deviates the
The display content of two display areas and the display content of the first display area as in three-dimensional web page left-right format and upper and lower lattice
Formula, then three-dimensional web page is made based on Web language.
Further alternative, above-mentioned shift numbers are 10~18 pixels；It is one to need highlighted element number
It is a or multiple, and when it is multiple to need highlighted element number, by adjusting the offset of highlighted element is needed
Number of pixels, and then adjust the depth of field generated.
In addition, the present invention provides a kind of three-dimensional web page manufacturing system of the two-dimentional page, the system includes：
Content of pages compression module, for will show that all the elements that the page is shown are compressed to original along the horizontal or vertical direction
The half come, the display content compressed.
The page divides submodule, for that will show that the page is divided into the identical first display page of area and the second display page
Face, then obtained compression is shown that content shows that the page and the second display are shown in the first display simultaneously and shown on the page.
First translation module needs highlighted element for determining, by the need in the second display subpage frame
Want several pixels of highlighted first primitive translation；Wherein, the direction of translation is identical as compression direction, and the pixel number translated is with the
Position where the highlighted element not shifted of needs that one display subpage frame includes is reference.
Webpage making module based on web, for the display content of the second display area after shifting and the first display
The display content in region makes three-dimensional web page as the left-right format or top-down format in three-dimensional web page, then based on Web language.
Optionally, also include between above-mentioned first translation module and webpage making module based on web：
Second translation module, the highlighted element of needs for including by the first display area and the second display area
Identical pixel number is deviated in the same direction；Wherein, before the pixel number of offset is to need highlighted element not to be subjected to displacement
Position be reference, and the translation direction of the first translation module is vertical with the offset direction of the module.
Further alternative, above-mentioned shift numbers are 10~18 pixels, and it is one to need highlighted element number
It is a or multiple, and when it is multiple to need highlighted element number, by adjusting the offset of highlighted element is needed
Number of pixels, and then adjust the depth of field generated.
Compared with the prior art, the advantages of the present invention are as follows：
1) limitation of prior art 3D page animation platforms has been broken away from, developer can use Web technologies known to oneself
It is developed with tool, simplifies development process.
2) TV is occupied when running or the resource of set-top box is small.
3) the three-dimensional web page production method that the display content of two-dimentional page display area can be realized in any plug-in unit is not depended on,
With very strong universality.
Description of the drawings
Fig. 1 embodiment of the present invention illustrates the schematic diagram of implementation method by taking left-right format as an example；
The method flow diagram that the 3D pages are made based on Web technologies that Fig. 2 embodiment of the present invention is recorded.
Specific implementation mode
The method of the invention is described in detail with reference to the accompanying drawings and examples.
It is the different Deep Canvas of certain elements in three-dimensional web page to reach the content production for showing the two-dimentional page
Technical purpose, the present invention provide a kind of three-dimensional web page production method of the two-dimentional page, and the method includes：
Step 101, all the elements that display area is shown are compressed to original half along the horizontal or vertical direction,
And then the display content compressed；Display area is divided into identical first display area of area and the second display area,
The display content of obtained compression is shown on the first display area and the second display area simultaneously again.
Step 102, it determines in the display content of compression and needs highlighted element, it will be described in the second display area
Need several pixels of highlighted first primitive translation；Wherein, the direction of translation is identical as compression direction, and translate pixel number with
Position where the highlighted element not shifted of needs that first display area includes is reference.
Step 103, using the display content of the second display area after displacement and the display content of the first display area as
Left-right format in three-dimensional web page or top-down format, then three-dimensional web page is made based on Web language.
In order to further reach the level effect of prepared three-dimensional web page, between the step 102 and step 103 also
Including：The highlighted element of needs is deviated into phase in same direction in the first display area and the second display area
Same pixel number；Wherein, the pixel number of offset is reference with the position before needing highlighted element not to be subjected to displacement, and institute
The translation direction for stating step 102 is vertical with the offset direction of the step.
In order to make multiple highlighted elements of needs generate different Deep Canvas, highlighted member can will be needed
The different number of pixels of primitive translation.Shift numbers by pixel known to statistical way are 10~18 pixels, the depth of field of generation
Effect is best.When it is multiple to need highlighted element number, by adjusting the offset picture of highlighted element is needed
Prime number mesh, and then reach the depth of field that adjustment generates.
Embodiment：
Fig. 1 is to illustrate this method schematic diagram by taking left-right format as an example, and this method producing principle includes：
1) horizontal resolution of entire display page display content original half, has been compressed to from right to left, and will
The left side of the original page is received in compressed, in addition half region (the right) is filled with the same compressed page,
The page original in this way is replaced by the page of 2 equal compressions of size.
2), select the compressed page on the left side as the page is referred to, horizontal-shift needs page the inside on the right to the right
Highlighted element PIG-2, and by PIG-2 horizontal-shifts " S2-S1 " a pixel, form phase difference, the member being finally shifted by
Other elements not being shifted by will generate the different depth of field to element with the page.
3) multiple elements, can be deviated in the page on the right, it is different by generating when the number of pixels difference of offset
The depth of field, wherein the element that left hand page and right hand page include is：PIG-1, PIG-2 and PIG-3.
4), in the page compressed at two, while highlighted element PIG-2 is needed from vertical direction offset, and partially
The number of pixels of shifting is that " B2-B1 " is a, can generate the level of vertical direction in this way, but the depth of field cannot be made to change.
Fig. 2 is based on Web technology 3D page animation flow charts, and steps are as follows：
Step 201) is divided into parent page (being denoted as Page) identical two compressed pages in left and right
201-1) the occupied pixel of entire Page layouts is divided into the identical div compositions of two sizes in left and right.
All elements in Page 201-2) are separately included in two div in left and right, only all elements are all by horizontal compression one
Half pixel, by the page of horizontal compression, the left side is known as Page-L, and the right is known as Page-R.
201-3) in this way, forming new page layout, i.e., it is made of Page-L and Page-R.
The element that step 202), horizontal-shift Page-R are included
It 202-1) selects Page-L element layouts for reference, prominent three-dimensional effect is waited for included by Page-R offsets Page-R
The element (being denoted as Pig) of fruit.
202-2) different elements can deviate different pixel values, final result they will generate the different depth of field.
202-3) rule of thumb and test, the range of offset pixel values is generally between 10~18 pixels, the scape of generation
Deep effect is relatively good.
The element Pig that step 203), vertical shift step 202) are shifted by forms the new page and is known as Page-N,
203-1) select Page element layouts for reference, in Page-L and Page-R while bias step 202) be shifted by
Element Pig.
203-2) Page-L is consistent with the pixel that Page-R is deviated in vertical direction.
Step 204) realizes the Page-N pages with Web language, writes page code.
In addition, the present invention also provides a kind of three-dimensional web page manufacturing system of the two-dimentional page, the system includes：
Content of pages compression module, for will show that all the elements that the page is shown are compressed to original along the horizontal or vertical direction
The half come, the display content compressed.
The page divides submodule, for that will show that the page is divided into the identical first display page of area and the second display page
Face, then obtained compression is shown that content shows that the page and the second display are shown in the first display simultaneously and shown on the page.
First translation module needs highlighted element for determining, by the need in the second display subpage frame
Want several pixels of highlighted first primitive translation.Wherein, the direction of translation is identical as compression direction, and the pixel number translated is with the
Position where the highlighted element not shifted of needs that one display subpage frame includes is reference.
Webpage making module based on web, for the display content of the second display area after shifting and the first display
The display content in region makes three-dimensional web page as the left-right format or top-down format in three-dimensional web page, then based on Web language.
Optionally, also include between above-mentioned first translation module and webpage making module based on web：
Second translation module, the highlighted element of needs for including by the first display area and the second display area
Identical pixel number is deviated in the same direction；Wherein, before the pixel number of offset is to need highlighted element not to be subjected to displacement
Position be reference, and the translation direction of the first translation module is vertical with the offset direction of the module.
The shift numbers of first translation module and the second offset module are 10~18 pixels, need highlighted element
Number is one or more, and when it is multiple to need highlighted element number, by adjusting highlighted member is needed
The offset pixels number of element, and then reach the depth of field that adjustment generates.
In conclusion the basic principle of the present invention is：By full page, horizontally or vertically resolution compression has arrived originally
The other half region of half, the originally page is filled with the same compressed page, and the page original in this way is big by 2 sizes
The page of small equal compression is replaced；Inside two compressed pages, one is selected as the page is referred to, at another
Element inside the page forms phase difference into line displacement, the element and the page he will generate the different depth of field by element；In order to more prominent
Go out three-dimensional sense, to carry out pixel-shift in two compressed pages, while from another direction, the vertical of other direction can be generated
Body-sensing.
It should be noted last that the above examples are only used to illustrate the technical scheme of the present invention and are not limiting.Although ginseng
It is described the invention in detail according to embodiment, it will be understood by those of ordinary skill in the art that, to the technical side of the present invention
Case is modified or replaced equivalently, and without departure from the spirit and scope of technical solution of the present invention, should all be covered in the present invention
Right in.
Claims (8)
1. a kind of three-dimensional web page production method of the two dimension page, the method include：
Step 101, all the elements that display area is shown are compressed to original half along the horizontal or vertical direction, in turn
The display content compressed；
Display area is divided into identical first display area of area and the second display area, then by the display of obtained compression
Content is shown on the first display area and the second display area simultaneously；
Step 102, it determines in the display content of compression and needs highlighted element, by the needs in the second display area
Several pixels of highlighted member primitive translation；
Wherein, the direction of translation is identical as compression direction, and the pixel number translated needs to protrude with what the first display area included
Position where the element of display not shifted is reference；
Step 103, using the display content of the second display area after displacement and the display content of the first display area as three-dimensional
Left-right format in webpage or top-down format, then three-dimensional web page is made based on Web language；
Also include between the step 102 and step 103：
The highlighted element of needs is deviated into phase in same direction in the first display area and the second display area
Same pixel number；
Wherein, the pixel number of offset is reference with the position before needing highlighted element not to be subjected to displacement, and the step
102 translation direction is vertical with the offset direction of the step.
2. the three-dimensional web page production method of the two dimension page according to claim 1, which is characterized in that the shift numbers
For 10~18 pixels.
3. the three-dimensional web page production method of the two dimension page according to claim 1, which is characterized in that need highlighted
Element number is one or more.
4. the three-dimensional web page production method of the two dimension page according to claim 3, which is characterized in that when needs highlight
Element number when being multiple, by adjusting the offset pixels number of highlighted element is needed, and then adjust the scape generated
It is deep.
5. a kind of three-dimensional web page manufacturing system of the two dimension page, which is characterized in that the system includes：
Content of pages compression module, all the elements for showing the display page are compressed to original along the horizontal or vertical direction
Half, the display content compressed；
The page divides submodule, for that will show that the page is divided into the identical first display page of area and the second display page,
Obtained compression is shown that content shows that the page and the second display are shown in the first display simultaneously and shown on the page again；
First translation module needs highlighted element for determining, the needs are dashed forward in the second display subpage frame
Go out several pixels of first primitive translation of display；
Wherein, the direction of translation is identical as compression direction, and the needs that the pixel number translated includes with the first display subpage frame are prominent
Position where going out the element of display not shifted is reference；
Webpage making module based on web, the display content for the second display area after shifting and the first display area
Display content as the left-right format or top-down format in three-dimensional web page, then based on Web language make three-dimensional web page；
Also include between first translation module and webpage making module based on web：
Second translation module, the highlighted element of needs for including by the first display area and the second display area is along same
One direction deviates identical pixel number；Wherein, the pixel number of offset is with the position before needing highlighted element not to be subjected to displacement
It is set to reference, and the translation direction of the first translation module is vertical with the offset direction of the module.
6. the three-dimensional web page manufacturing system of the two dimension page according to claim 5, which is characterized in that the shift numbers
For 10~18 pixels.
7. the three-dimensional web page manufacturing system of the two dimension page according to claim 5, which is characterized in that need highlighted
Element number is one or more.
8. the three-dimensional web page manufacturing system of the two dimension page according to claim 7, which is characterized in that when needs highlight
Element number when being multiple, by adjusting the offset pixels number of highlighted element is needed, and then adjust the scape generated
It is deep.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201410041816.9A CN104809137B (en) | 2014-01-28 | 2014-01-28 | A kind of the three-dimensional web page production method and system of the two dimension page |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201410041816.9A CN104809137B (en) | 2014-01-28 | 2014-01-28 | A kind of the three-dimensional web page production method and system of the two dimension page |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN104809137A CN104809137A (en) | 2015-07-29 |
| CN104809137B true CN104809137B (en) | 2018-07-13 |
Family
ID=53693962
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201410041816.9A Expired - Fee Related CN104809137B (en) | 2014-01-28 | 2014-01-28 | A kind of the three-dimensional web page production method and system of the two dimension page |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN104809137B (en) |
Families Citing this family (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108197248B (en) * | 2017-12-29 | 2021-07-16 | 杭州联络互动信息科技股份有限公司 | Method, device and system for displaying 3D (three-dimensional) 2D webpage |
| CN114079764A (en) * | 2020-08-11 | 2022-02-22 | 北京芯海视界三维科技有限公司 | 3D display method, 3D display device and 3D display device |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102375673A (en) * | 2010-08-11 | 2012-03-14 | Lg电子株式会社 | Method for controlling depth of image and mobile terminal using the method |
| CN102685517A (en) * | 2011-03-09 | 2012-09-19 | 联想(北京)有限公司 | Device, method and system for converting 2D image to 3D image |
| CN102905143A (en) * | 2011-07-28 | 2013-01-30 | 瑞昱半导体股份有限公司 | 2D (two-dimensional)-3D (three-dimensional) image conversion device and method thereof |
| CN103310477A (en) * | 2013-06-27 | 2013-09-18 | 北京青青树动漫科技有限公司 | Generation method of three-dimensional image |
Family Cites Families (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| KR100728777B1 (en) * | 2004-04-07 | 2007-06-19 | 삼성에스디아이 주식회사 | Parallax barrier and three-dimensional display device using the same |
| JP6016061B2 (en) * | 2012-04-20 | 2016-10-26 | Ｎｌｔテクノロジー株式会社 | Image generation apparatus, image display apparatus, image generation method, and image generation program |
-
2014
- 2014-01-28 CN CN201410041816.9A patent/CN104809137B/en not_active Expired - Fee Related
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102375673A (en) * | 2010-08-11 | 2012-03-14 | Lg电子株式会社 | Method for controlling depth of image and mobile terminal using the method |
| CN102685517A (en) * | 2011-03-09 | 2012-09-19 | 联想(北京)有限公司 | Device, method and system for converting 2D image to 3D image |
| CN102905143A (en) * | 2011-07-28 | 2013-01-30 | 瑞昱半导体股份有限公司 | 2D (two-dimensional)-3D (three-dimensional) image conversion device and method thereof |
| CN103310477A (en) * | 2013-06-27 | 2013-09-18 | 北京青青树动漫科技有限公司 | Generation method of three-dimensional image |
Also Published As
| Publication number | Publication date |
|---|---|
| CN104809137A (en) | 2015-07-29 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US8471898B2 (en) | Medial axis decomposition of 2D objects to synthesize binocular depth | |
| US8228327B2 (en) | Non-linear depth rendering of stereoscopic animated images | |
| US9924153B2 (en) | Parallel scaling engine for multi-view 3DTV display and method thereof | |
| CN106296781B (en) | Special effect image generation method and electronic equipment | |
| KR102502794B1 (en) | Methods and systems for customizing virtual reality data | |
| US20100104219A1 (en) | Image processing method and apparatus | |
| US20120229595A1 (en) | Synthesized spatial panoramic multi-view imaging | |
| CN102184082B (en) | Method for realizing 3D (three dimensional) browser based on binocular parallax principle | |
| CN108693970B (en) | Method and apparatus for adapting video images of a wearable device | |
| KR20120049997A (en) | Image process device, display apparatus and methods thereof | |
| Po et al. | Automatic 2D-to-3D video conversion technique based on depth-from-motion and color segmentation | |
| CN102937968B (en) | A kind of binocular 3D webpage implementation method based on Canvas and system | |
| BR112015006412A2 (en) | multi-view imaging method, and multi-view image display apparatus | |
| CN104021585A (en) | Three-dimensional exhibition method based on real scene | |
| CN109587478A (en) | A kind of processing method and processing device of media information | |
| CN103177467A (en) | Method for creating naked eye 3D (three-dimensional) subtitles by using Direct 3D technology | |
| CN105578172B (en) | Bore hole 3D image display methods based on Unity3D engines | |
| CN104809137B (en) | A kind of the three-dimensional web page production method and system of the two dimension page | |
| CN103561255A (en) | Nakedness-yet stereoscopic display method | |
| JP2011166606A (en) | Image processing apparatus, method for processing image, and program | |
| CN112040141A (en) | Video production method based on three-dimensional reconstruction and virtual reality | |
| US20140307048A1 (en) | Signaling warp maps using a high efficiency video coding (hevc) extension for 3d video coding | |
| WO2014109321A1 (en) | Transmission device, transmission method, receiving device, and receiving method | |
| CN106303493A (en) | Image processing method and device | |
| JP2014072809A (en) | Image generation apparatus, image generation method, and program for the image generation apparatus |
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 |