CN108197248A - A kind of method, apparatus and system of 3Dization 2D web displayings - Google Patents

A kind of method, apparatus and system of 3Dization 2D web displayings Download PDF

Info

Publication number
CN108197248A
CN108197248A CN201711483107.6A CN201711483107A CN108197248A CN 108197248 A CN108197248 A CN 108197248A CN 201711483107 A CN201711483107 A CN 201711483107A CN 108197248 A CN108197248 A CN 108197248A
Authority
CN
China
Prior art keywords
eye view
numerical value
display
width
window
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.)
Granted
Application number
CN201711483107.6A
Other languages
Chinese (zh)
Other versions
CN108197248B (en
Inventor
陈理
杨亚军
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Hangzhou Lianluo Interactive Information Technology Co Ltd
Original Assignee
Hangzhou Lianluo Interactive Information Technology Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Hangzhou Lianluo Interactive Information Technology Co Ltd filed Critical Hangzhou Lianluo Interactive Information Technology Co Ltd
Priority to CN201711483107.6A priority Critical patent/CN108197248B/en
Publication of CN108197248A publication Critical patent/CN108197248A/en
Application granted granted Critical
Publication of CN108197248B publication Critical patent/CN108197248B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/958Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06TIMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T15/003D [Three Dimensional] image rendering
    • G06T15/005General purpose rendering architectures

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Computer Graphics (AREA)
  • Data Mining & Analysis (AREA)
  • General Engineering & Computer Science (AREA)
  • Processing Or Creating Images (AREA)

Abstract

The present invention proposes a kind of method of 3Dization 2D web displayings, including:S1. the solicited message of webpage 3Dization is obtained;S2. 2D webpages are parsed, isolates multiple elements of composition 2D webpages;S3. the corresponding different depth queuing setting value of multiple elements is determined, one of the required left-eye view of 3D display and right-eye view are rendered, and render the other of the required left-eye view of 3D display and right-eye view according to former webpage according to depth queuing setting value;S4. left-eye view and right-eye view are sent to display unit and carry out 3D display.Invention also discloses a kind of apparatus and system of 3Dization 2D web displayings.Implement the method, apparatus and system of the 3Dization 2D web displayings of the present invention, the 3D stereopsis, it can be achieved that all generic web pages is presented by the way that existing 2D webpages to be converted to left view based on binocular parallax and right view in real time.

Description

A kind of method, apparatus and system of 3Dization 2D web displayings
Technical field
The present invention relates to 2D web displayings field, the more particularly to a kind of method, apparatus and system of 3Dization 2D web displayings.
Background technology
With the rise of VR technologies, user is more convenient to the viewing of 3D solids, and " 3D " inner " D ", is English word The initial of Dimension (dimension, dimension).What 3D referred to is exactly three dimensions.Compared with common 2D pictures are shown, 3D technology can be with Picture is made to become three-dimensional true to nature, image is no longer limited to screen plane, can seemingly walk out outside screen, spectators is allowed to have body to face it The feeling in border.
Although 3D display technique classification is various, but most basic principle is similar, is exactly to utilize human eye or so difference Receive different pictures, then brain is lived again by being overlapped to image information, form one have before-it is rear, upper-under, Left-right, remote-near image for waiting stereo directionals effect.
In the prior art, under 3D states, user needs all pictures that can have 3D stereoscopic depths, particularly 2D webpages, It is desirable to can also change into 3D display automatically, and the video that the prior art only specially makes and game just have 3D effect.
Invention content
More than solving the problems, such as, the present invention provides a kind of method, apparatus and system of 3Dization 2D web displayings.
The invention discloses a kind of method of 3Dization 2D web displayings, including:
S1. the solicited message of webpage 3Dization is obtained;
S2. 2D webpages are parsed, isolates multiple elements of the composition 2D webpages;
S3. determine the corresponding different depth queuing setting value of multiple elements, according to multiple elements with The corresponding different depth queuing setting value determined is rendered in the required left-eye view of 3D display and right-eye view One of, and the other of the required left-eye view of 3D display and right-eye view are rendered according to the former webpage;
S4. the left-eye view and right-eye view are sent to display unit and carry out 3D display.
Further, the step S2, specifically includes:
The 2D webpages are parsed, isolate multiple elements of composition webpage, multiple elements include:The back of the body Jing Tu, table, word, list, picture, video, button, choice box.
Further, the step S3, specifically includes:
S31. the Background is set as depth of field distal end, carried out into screen processing;
S32., the table, word, list are retained to the original default value of 2D webpages, do not dealt with;
S33. the picture, video are set as the depth of field time proximal end, carry out it is micro- go out screen processing;
S34. it is depth of field proximal end by the button, selcetion.removelistener, carries out the larger screen that goes out and handle, float on user plane Before.
Further, the step S3 is specially:It is corresponding different from what is determined according to multiple elements Depth queuing setting value renders the required left-eye view of 3D display, and according to needed for the former webpage renders 3D display The right-eye view wanted, wherein,
Described enters screen processing, specially:
The width of window for needing to render is obtained, the numerical value of width is denoted as:W;
The coordinate in the X-direction of background graph region is obtained, numerical value is denoted as:X1;
By the background graph region, left direction moves in left-eye view, and amount of movement K is obtained in new X-direction Coordinate R1 numerical value, R1=X1-W × K carries out 3D renderings using new background area, formed and show into screen, wherein, K is moves The percentage of displacement and the width, K value ranges are 1%~15%;
It is described it is micro- go out screen processing, specially:
The width of window for needing to render is obtained, the numerical value of width is denoted as:W;
Obtain picture, video area X-direction on coordinate, numerical value is denoted as:X2;
By the picture, video area, right direction moves in left-eye view, and amount of movement J obtains new X-direction On coordinate R2 numerical value, R2=X2+W × J, using new picture, video area carry out 3D renderings, formed it is micro- goes out screen display, In, J is the percentage of mobile displacement and the width, and J value ranges are 0.5%~10%;
The larger screen that goes out is handled, specially:
The width of window for needing to render is obtained, the numerical value of width is denoted as:W;
The coordinate in the X-direction of button, choice box is obtained, numerical value is denoted as:X3;
The button, choice box region are moved in left-eye view right direction, amount of movement G obtains new X-direction On coordinate R3 numerical value, R3=X3+W × G carries out 3D renderings using new button, choice box region, formed it is larger go out screen It has been shown that, wherein, G is the percentage of mobile displacement and the width, and G value ranges are 5%~20%,
Wherein, origin is the upper left corner of window, X-axis is established with the horizontal direction of window, with the Vertical Square of window To establishing Y-axis;
The unit of each numerical value is pixel number.
Further, the depth queuing setting value is by User Defined and control in real time.
The invention discloses a kind of device of 3Dization 2D web displayings, including:
Solicited message acquiring unit, for obtaining the solicited message of webpage 3Dization;
Resolution unit parses 2D webpages, isolates multiple elements of the composition 2D webpages;
Rendering unit, for determining the corresponding different depth queuing setting value of multiple elements, according to described Multiple elements different depth queuing setting value corresponding from what is determined render the required left-eye view of 3D display and One of right-eye view, and rendered in the required left-eye view of 3D display and right-eye view according to the former webpage Another one;
Figure unit is arranged, 3D display is carried out for the left-eye view and right-eye view to be sent to display unit.
Further, the resolution unit, is specifically used for:
The 2D webpages are parsed, isolate multiple elements of composition webpage, multiple elements include:The back of the body Jing Tu, table, word, list, picture, video, button, choice box.
Further, the rendering unit is specifically used for:It is corresponding with what is determined not according to multiple elements Same depth queuing setting value renders the required left-eye view of 3D display, and render 3D display according to the former webpage Required right-eye view, wherein,
Described enters screen processing, specially:
The width of window for needing to render is obtained, the numerical value of width is denoted as:W;
The coordinate in the X-direction of background graph region is obtained, numerical value is denoted as:X1;
By the background graph region, left direction moves in left-eye view, and amount of movement K is obtained in new X-direction Coordinate R1 numerical value, R1=X1-W × K carries out 3D renderings using new background area, formed and show into screen, wherein, K is moves The percentage of displacement and the width, K value ranges are 1%~15%;
It is described it is micro- go out screen processing, specially:
The width of window for needing to render is obtained, the numerical value of width is denoted as:W;
Obtain picture, video area X-direction on coordinate, numerical value is denoted as:X2;
By the picture, video area, right direction moves in left-eye view, and amount of movement J obtains new X-direction On coordinate R2 numerical value, R2=X2+W × J, using new picture, video area carry out 3D renderings, formed it is micro- goes out screen display, In, J is the percentage of mobile displacement and the width, and J value ranges are 0.5%~10%;
The larger screen that goes out is handled, specially:
The width of window for needing to render is obtained, the numerical value of width is denoted as:W;
The coordinate in the X-direction of button, choice box is obtained, numerical value is denoted as:X3;
The button, choice box region are moved in left-eye view right direction, amount of movement G obtains new X-direction On coordinate R3 numerical value, R3=X3+W × G carries out 3D renderings using new button, choice box region, formed it is larger go out screen It has been shown that, wherein, G is the percentage of mobile displacement and window width, and G value ranges are 5%~20%,
Wherein, origin is the upper left corner of window, X-axis is established with the horizontal direction of window, with the Vertical Square of window To establishing Y-axis;
The unit of each numerical value is pixel number.
Further, the device of the 3Dization 2D web displayings further includes control unit, for by User Defined and reality When the control depth queuing setting.
The invention discloses a kind of systems of 3Dization 2D web displayings, including web page server, display client and have The controller of above-mentioned device, the controller are connected with the web page server, display client.
Implement the method, apparatus and system of a kind of 3Dization 2D web displayings of the present invention, there is technology effect beneficial below Fruit:
The application need not change website exploitation industry situation, and only 3D viewings end installation broadcasts part accordingly, by will be existing 2D webpages be converted to left-eye view based on binocular parallax and right-eye view in real time to present, you can realize to all general The 3D stereopsis of logical webpage watches 3D webpages so as to fulfill bore hole or watches 3D webpages by equipment such as VR glasses.
Description of the drawings
In order to illustrate more clearly about the embodiment of the present invention or technical scheme of the prior art, to embodiment or will show below There is attached drawing needed in technology description to be briefly described, it should be apparent that, the accompanying drawings in the following description is only this Some embodiments of invention, for those of ordinary skill in the art, without having to pay creative labor, may be used also To obtain other attached drawings according to these attached drawings.
Fig. 1 is the method flow diagram of first embodiment of the present invention 3Dization 2D web displayings;
Fig. 2 is the method flow diagram of second embodiment of the present invention 3Dization 2D web displayings;
Fig. 3 is the method flow diagram of third embodiment of the present invention 3Dization 2D web displayings;
Fig. 4 is the device block diagram of first embodiment of the present invention 3Dization 2D web displayings;
Fig. 5 is the device block diagram of second embodiment of the present invention 3Dization 2D web displayings;
Fig. 6 is the device block diagram of third embodiment of the present invention 3Dization 2D web displayings;
Fig. 7 is the system module figure of the embodiment of the present invention 3Dization 2D web displayings.
Specific embodiment
Below in conjunction with the attached drawing in the embodiment of the present invention, the technical solution in the embodiment of the present invention is carried out clear, complete Site preparation describes, it is clear that described embodiment is only part of the embodiment of the present invention, instead of all the embodiments.It is based on Embodiment in the present invention, those of ordinary skill in the art are obtained every other without creative efforts Embodiment shall fall within the protection scope of the present invention.
Referring to Fig. 1, the first embodiment of the method for the present invention, a kind of method of 3Dization 2D web displayings, including:
S1. the solicited message of webpage 3Dization is obtained;
User opens 2D webpages in client by browser access server network address, and dialogue can be popped up on 2D webpages Frame inquires whether the user needs to 3Dization 2D webpages, if user needs, to be clicked by button and confirm that the form transmission of dialog box please It asks, so as to which the request of 3Dization 2D webpages will be sent to the controller at web displaying end.
S2. 2D webpages are parsed, isolates multiple elements of the composition 2D webpages;
Parsing is carried out by 2 submodule, that is, html parsers (HTMLParser) and CSS resolvers (CSS Parser).
At this point, being parsed to the 2D webpages, multiple elements of composition webpage, multiple element examples are isolated Such as but it is not limited to include:Background, table, word, list, picture, video, button, choice box.
One 3D processing engine of addition, for after dissection process is carried out to existing webpage, being separated by decantation to solution more A element carries out classification processing.
Following various fields:
<backgroup...>Background</backgroup>
<table...>Table</table>
<font...>Word</font>
<img...>Picture</img>
<video...>Video</video>
<button...>Button</button>
<select...>Choice box</select>
S3. it determines the corresponding different depth queuing setting value of multiple elements, according to multiple elements and determines The corresponding different depth queuing setting value gone out renders the required left-eye view of 3D display, and according to the former webpage Render the required right-eye view of 3D display.
The rendering of existing webpage is handled, first renders former webpage by original mode, and will render and Webpage be used for 3D right-eye view.
A 3D rendering engine is added, the processing of webpage render process is handled by 3D renderings, and will render the webpage come The page is used for the left-eye view of 3D.
More specifically, the required left-eye view of 3D display and right-eye view, by the 3D rendering engines, save as Corresponding left and right view file.
S4. left-eye view and right-eye view are sent to display unit and carry out 3D display.
The rendering interface of whole webpage is regenerated after the completion of all elements are all handled, and generates the left and right for needing to show 3D and regards Figure, left-eye view are shown in the left eye of VR, and right-eye view is shown in the right eye of VR, just has parallax, user is with regard to that can experience 3D Effect.
Referring to Fig. 2, the second embodiment of the method for the present invention, a kind of method of 3Dization 2D web displayings are most Step in embodiment one of the step with more than is identical, and the difference lies in the step S3 is specifically included:
S31. the Background is set as depth of field distal end, carried out into screen processing;
Enter screen processing, specially:The width of window for needing to render is obtained, the numerical value of width is denoted as:W;
The coordinate in the X-direction of background graph region is obtained, numerical value is denoted as:X1;
By background graph region, left direction moves in left-eye view, and amount of movement K obtains the coordinate in new X-direction R1 numerical value, R1=X1-W × K carry out 3D renderings using new background area, are formed and shown into screen, wherein, K is mobile displacement With the percentage of the width, K value ranges are 1%~15%;
It is micro- go out screen processing, specially:
The width of window for needing to render is obtained, the numerical value of width is denoted as:W;
Obtain picture, video area X-direction on coordinate, numerical value is denoted as:X2;
By the picture, video area, right direction moves in left-eye view, and amount of movement J obtains new X-direction On coordinate R2 numerical value, R2=X2+W × J, using new picture, video area carry out 3D renderings, formed it is micro- goes out screen display, In, J is the percentage of mobile displacement and the width, and J value ranges are 0.5%~10%;
Larger goes out screen processing, specially:
The width of window for needing to render is obtained, the numerical value of width is denoted as:W;
The coordinate in the X-direction of button, choice box is obtained, numerical value is denoted as:X3;
The button, choice box region are moved in left-eye view right direction, amount of movement G obtains new X-direction On coordinate R3 numerical value, R3=X3+W × G carries out 3D renderings using new button, choice box region, formed it is larger go out screen It has been shown that, wherein, G is the percentage of mobile displacement and window width, and G value ranges are 5%~20%,
Wherein, origin is the upper left corner of window, X-axis is established with the horizontal direction of window, with the Vertical Square of window To establishing Y-axis.
Above each numerical value unit is pixel number.
Wherein, it is micro- go out screen processing:By taking same picture, video area as an example, the picture, video area emerge in outside screen Side, and, it is micro- go out the picture of screen, video area area be more than original picture, video area area 15%~25%;
Wherein, the larger screen that goes out is handled:By taking same button, choice box region as an example, the button, choice box region emerge Go out to shield the picture of processing, the outside of video area in micro-, the larger button for going out screen processing, choice box region are more than original Button, the area 50%~200% in choice box region.
To sum up, second embodiment only shifts left-eye view, and right-eye view is further embodied without displacement 3D effect, wherein, 3D, which handles engine, to carry out the depth of field to each field and studies and judges, and Background is carried out into screen processing, it is ensured that the back of the body Scape information does not process the contents such as table, word, list in the distalmost end of the depth of field, feels in this way and screen is in same Plane.By the contents such as video, picture do it is micro- go out screen processing, feeling can float on screen some of the above, finally by button, choice box etc. Operation field is made the larger screen that goes out and is handled, before feeling floats on human eye completely.
Referring to Fig. 3, the 3rd embodiment of the method for the present invention, a kind of method of 3Dization 2D web displayings are most Step in embodiment one of the step with more than is identical, and the difference lies in also have S21 between step S2 and S3:It is described Depth queuing setting value by User Defined and in real time control.
At this point, addition 3D control modules, in upper step be 5% to the K that the processing for the screen that comes in and goes out all is acquiescence, J is Value is so all set as 0 by the 2.5%th, G 10% when user needs and closes the depth of field, when user thinks that parallax too greatly can be with Appropriate reduction is carried out by being worth, value can be carried out to appropriate increase when user thinks that parallax is too small, so as to effectively improve use It experiences at family.
The 3rd embodiment further improves the unrestricted choice of user, and adaptability is stronger.
Although above-mentioned 3rd embodiment illustrates that depth queuing setting value is carried out between step S2 and S3 to be made by oneself by user Justice and in real time control, it should be understood that, the self-defined of depth queuing is not limited between step S2 and S3, such as Or after step s4, user carries out depth queuing setting value self-defined and real-time control according to user experience, from And export the 3D display image suitable for user again according to user-defined depth queuing setting value.
The device for realizing above method is described below, the part that device is not recorded please refers to the record in above method.
Referring to Fig. 4, embodiment one, a kind of device 1 of 3Dization 2D web displayings, including:
Solicited message acquiring unit 10, for obtaining the solicited message of webpage 3Dization;
Resolution unit 20 for being parsed to 2D webpages, isolates multiple elements of composition webpage;
Rendering unit 30, for determining the corresponding different depth queuing setting value of multiple elements, according to multiple Element different depth queuing setting value corresponding from what is determined renders the required left-eye view of 3D display, and according to The former webpage renders the required right-eye view of 3D display.
The rendering of existing webpage is handled, first renders former webpage by original mode, and will render and Webpage be used for 3D right-eye view.
A 3D rendering engine is added, the processing of webpage render process is handled by 3D renderings, after left and right view makes, Save as corresponding left and right view file.
Figure unit 40 is arranged, 3D display is carried out for left-eye view and right-eye view to be sent to display unit.
Wherein, resolution unit 20 are specifically used for:
2D webpages are parsed, isolate multiple elements of composition webpage, multiple elements include:Background, Table, word, list, picture, video, button, choice box etc..
The rendering interface of whole webpage is regenerated after the completion of all elements are all handled, and generates the left and right for needing to show 3D and regards Figure, left-eye view are shown in the left eye of VR, and right-eye view is shown in the right eye of VR, just has parallax, user is with regard to that can experience 3D Effect.
Referring to Fig. 5, embodiment two, a kind of device 1 of 3Dization 2D web displayings, most function module and device Embodiment one is identical, the difference lies in, including:
Rendering unit 30, specifically includes:
Enter to shield processing unit 301, for the Background to be set as depth of field distal end, carry out into screen processing;
Stick unit 302 for the table, word, list to be retained to the original default value of 2D webpages, is not made to locate Reason;
It is micro- to go out to shield processing unit 303, for the picture, video to be set as the depth of field time proximal end, carry out it is micro- go out Ping Chu Reason;
Larger goes out to shield processing unit 304, for being depth of field proximal end by the button, selcetion.removelistener, carries out big Some go out screen display, float in front of the user.
Enter screen processing, following numerical value unit is pixel number, specially:
The width of window for needing to render is obtained, the numerical value of width is denoted as:W;
The coordinate in the X-direction of background graph region is obtained, numerical value is denoted as:X1;
By the background graph region, left direction moves in left-eye view, and amount of movement K is obtained in new X-direction Coordinate R1 numerical value, R1=X1-W × K carries out 3D renderings using new background area, formed and show into screen, wherein, K is moves The percentage of displacement and the width, K value ranges are 1%~15%;
It is micro- go out screen processing, specially:
The width of window for needing to render is obtained, the numerical value of width is denoted as:W;
Obtain picture, video area X-direction on coordinate, numerical value is denoted as:X2;
By the picture, video area, right direction moves in left-eye view, and amount of movement J obtains new X-direction On coordinate R2 numerical value, R2=X2+W × J, using new picture, video area carry out 3D renderings, formed it is micro- goes out screen display, In, J is the percentage of mobile displacement and the width, and J value ranges are 0.5%~10%;
Larger goes out screen processing, and following numerical value unit is pixel number, specially:
The width of window for needing to render is obtained, the numerical value of width is denoted as:W;
The coordinate in the X-direction of button, choice box is obtained, numerical value is denoted as:X3;
The button, choice box region are moved in left-eye view right direction, amount of movement G obtains new X-direction On coordinate R3 numerical value, R3=X3+W × G carries out 3D renderings using new button, choice box region, formed it is larger go out screen It has been shown that, wherein, G is the percentage of mobile displacement and window width, and G value ranges are 5%~20%,
Wherein, origin is the upper left corner of window, X-axis is established with the horizontal direction of window, with the Vertical Square of window To establishing Y-axis.
Wherein, it is micro- go out screen processing:By taking same picture, video area as an example, the picture, video area emerge in outside screen Side, and, it is micro- go out the picture of screen, video area area be more than original picture, video area area 15%~25%;
Wherein, the larger screen that goes out is handled:By taking same button, choice box region as an example, the button, choice box region emerge Go out to shield picture, the video area outside of processing in micro-, and, the larger button for going out screen processing, choice box region are more than original Button, choice box region area 50%~200%.
To sum up, second embodiment further embodies 3D effect, wherein, 3D handles engine and carries out scape to each field Deep studies and judges, and Background is carried out into screen processing, it is ensured that background information, will be in table, word, list etc. in the distalmost end of the depth of field Appearance does not process, and feels in this way and screen is in a level.By the contents such as video, picture do it is micro- go out screen processing, feeling can float On the screen face some, finally by the operation fields such as button, choice box do it is larger go out screen processing, feeling floats on human eye completely Before.
Referring to Fig. 6, embodiment three, a kind of device 1 of 3Dization 2D web displayings, most function module and device Embodiment one is identical, the difference lies in,
Also there is control unit 25, for by User Defined and control in real time between resolution unit 20 and rendering unit 30 The setting of depth queuing.
At this point, addition 3D control modules, in upper step be 5% to the K that the processing for the screen that comes in and goes out all is acquiescence, J is Value is so all set as 0 by the 2.5%th, G 10% when user needs and closes the depth of field, when user thinks that parallax too greatly can be with Appropriate reduction is carried out by being worth, value can be carried out to appropriate increase when user thinks that parallax is too small, so as to effectively improve use It experiences at family.
The 3rd embodiment further improves the unrestricted choice of user, and adaptability is stronger.
Fig. 7, a kind of system 100 of 3Dization 2D web displayings are please referred to, including web page server 200, display client 300 And controller 350, controller 350 are connected with web page server 200, display client 300, controller 350 has above-mentioned Device 1.
Controller 350 distributes corresponding left and right off screen buffering area in memory, and left and right off screen buffering area parses for storing And left-eye view and right-eye view after rendering;
Implement the method, apparatus and system of a kind of 3Dization 2D web displayings of the present invention, there is technology effect beneficial below Fruit:
The application need not change website exploitation industry situation, and only 3D viewings end installation broadcasts part accordingly, by will be existing 2D webpages be converted to left view based on binocular parallax and right view in real time to present, you can realize to all common nets The 3D stereopsis of page watches 3D webpages so as to fulfill bore hole or watches 3D webpages by equipment such as VR glasses.
It should be noted that in the above-described embodiment, right-eye view, the root of 3D display can be rendered according to former webpage The multiple elements and its corresponding different depth queuing setting values that are separated by decantation to according to solution render the formation example of left-eye view, but It is to those skilled in the art, to be readily apparent that and the left-eye view of 3D display is rendered, according to parsing point according to former webpage The multiple elements and its corresponding different depth queuing setting values that separate out render the formation other embodiment of right-eye view, This is repeated no more.
It should be understood by those skilled in the art that, the embodiment of the present invention can be provided as method, system or computer program Product.Therefore, the reality in terms of complete hardware embodiment, complete software embodiment or combination software and hardware can be used in the present invention Apply the form of example.Moreover, the computer for wherein including computer usable program code in one or more can be used in the present invention The computer program production that usable storage medium is implemented on (including but not limited to magnetic disk storage, CD-ROM, optical memory etc.) The form of product.
The present invention be with reference to according to the method for the embodiment of the present invention, the flow of equipment (system) and computer program product Figure and/or block diagram describe.It should be understood that it can be realized by computer program instructions every first-class in flowchart and/or the block diagram The combination of flow and/or box in journey and/or box and flowchart and/or the block diagram.These computer programs can be provided The processor of all-purpose computer, special purpose computer, Embedded Processor or other programmable data processing devices is instructed to produce A raw machine so that the instruction performed by computer or the processor of other programmable data processing devices is generated for real The device of function specified in present one flow of flow chart or one box of multiple flows and/or block diagram or multiple boxes.
These computer program instructions, which may also be stored in, can guide computer or other programmable data processing devices with spy Determine in the computer-readable memory that mode works so that the instruction generation being stored in the computer-readable memory includes referring to Enable the manufacture of device, the command device realize in one flow of flow chart or multiple flows and/or one box of block diagram or The function of being specified in multiple boxes.
These computer program instructions can be also loaded into computer or other programmable data processing devices so that counted Series of operation steps are performed on calculation machine or other programmable devices to generate computer implemented processing, so as in computer or The instruction offer performed on other programmable devices is used to implement in one flow of flow chart or multiple flows and/or block diagram one The step of function of being specified in a box or multiple boxes.
Although preferred embodiments of the present invention have been described, but those skilled in the art once know basic creation Property concept, then additional changes and modifications may be made to these embodiments.So appended claims be intended to be construed to include it is excellent It selects embodiment and falls into all change and modification of the scope of the invention.
Obviously, those skilled in the art can carry out the embodiment of the present invention various modification and variations without departing from this hair The spirit and scope of bright embodiment.In this way, if these modifications and variations of the embodiment of the present invention belong to the claims in the present invention And its within the scope of equivalent technologies, then the present invention is also intended to include these modifications and variations.

Claims (11)

  1. A kind of 1. method of 3Dization 2D web displayings, which is characterized in that including:
    S1. the solicited message of webpage 3Dization is obtained;
    S2. 2D webpages are parsed, isolates multiple elements of the composition 2D webpages;
    S3. the corresponding different depth queuing setting value of multiple elements is determined, it is true with institute according to multiple elements The corresponding different depth queuing setting value made renders one in the required left-eye view of 3D display and right-eye view Person, and the other of the required left-eye view of 3D display and right-eye view are rendered according to the former webpage;
    S4. the left-eye view and right-eye view are sent to display unit and carry out 3D display.
  2. 2. according to the method described in claim 1, it is characterized in that, the step S2, specifically includes:
    The 2D webpages are parsed, isolate multiple elements of composition webpage, multiple elements include:Background Figure, table, word, list, picture, video, button, choice box.
  3. 3. according to the method described in claim 2, it is characterized in that, the step S3, specifically includes:
    S31. the Background is set as depth of field distal end, carried out into screen processing;
    S32., the table, word, list are retained to the original default value of 2D webpages, do not dealt with;
    S33. the picture, video are set as the depth of field time proximal end, carry out it is micro- go out screen processing;
    S34. it is depth of field proximal end by the button, selcetion.removelistener, carries out the larger screen that goes out and handle, float in front of the user.
  4. 4. according to the method described in claim 3, it is characterized in that, the step S3 is specially:According to multiple elements Different depth queuing setting value corresponding from what is determined renders the required left-eye view of 3D display, and according to described Former webpage render the required right-eye view of 3D display, wherein,
    Described enters screen processing, specially:
    The width of window for needing to render is obtained, the numerical value of width is denoted as:W;
    The coordinate in the X-direction of background graph region is obtained, numerical value is denoted as:X1;
    By the background graph region, left direction moves in left-eye view, and amount of movement K obtains the seat in new X-direction R1 numerical value is marked, R1=X1-W × K carries out 3D renderings using new background area, is formed and shown into screen, wherein, K is moving displacement Amount and the percentage of the width, K value ranges are 1%~15%;
    It is described it is micro- go out screen processing, specially:
    The width of window for needing to render is obtained, the numerical value of width is denoted as:W;
    Obtain picture, video area X-direction on coordinate, numerical value is denoted as:X2;
    By the picture, video area, right direction moves in left-eye view, and amount of movement J is obtained in new X-direction Coordinate R2 numerical value, R2=X2+W × J carry out 3D renderings using new picture, video area, and formation is micro- to go out to shield display, wherein, J For mobile displacement and the percentage of the width, J value ranges are 0.5%~10%;
    The larger screen that goes out is handled, specially:
    The width of window for needing to render is obtained, the numerical value of width is denoted as:W;
    The coordinate in the X-direction of button, choice box is obtained, numerical value is denoted as:X3;
    The button, choice box region are moved in left-eye view right direction, amount of movement G is obtained in new X-direction Coordinate R3 numerical value, R3=X3+W × G carry out 3D renderings using new button, choice box region, are formed and larger go out screen display Show, wherein, G is the percentage of mobile displacement and the width, and G value ranges are 5%~20%,
    Wherein, origin is the upper left corner of window, establishes X-axis with the horizontal direction of window, is built with the vertical direction of window Vertical Y-axis;
    The unit of each numerical value is pixel number.
  5. 5. method according to any one of claims 1 to 4, which is characterized in that the depth queuing setting value is by user Self-defined and real-time control.
  6. 6. a kind of device of 3Dization 2D web displayings, which is characterized in that including:
    Solicited message acquiring unit, for obtaining the solicited message of webpage 3Dization;
    Resolution unit parses 2D webpages, isolates multiple elements of the composition 2D webpages;
    Rendering unit, for determining the corresponding different depth queuing setting value of multiple elements, according to described multiple Element different depth queuing setting value corresponding from what is determined renders the required left-eye view of 3D display and right eye One of view, and rendered according to the former webpage another in the required left-eye view of 3D display and right-eye view Person;
    Figure unit is arranged, 3D display is carried out for the left-eye view and right-eye view to be sent to display unit.
  7. 7. device according to claim 6, which is characterized in that the resolution unit is specifically used for:
    The 2D webpages are parsed, isolate multiple elements of composition webpage, multiple elements include:Background Figure, table, word, list, picture, video, button, choice box.
  8. 8. device according to claim 7, which is characterized in that the rendering unit specifically includes:
    Enter to shield processing unit, for the Background to be set as depth of field distal end, carry out into screen processing;
    Stick unit for the table, word, list to be retained to the original default value of 2D webpages, is not dealt with;
    It is micro- to go out to shield processing unit, for the picture, video to be set as the depth of field time proximal end, carry out it is micro- go out screen processing;
    Larger goes out to shield processing unit, for being depth of field proximal end by the button, selcetion.removelistener, larger go out Screen processing, is floated in front of the user.
  9. 9. device according to claim 7, which is characterized in that the rendering unit is specifically used for:According to described multiple Element different depth queuing setting value corresponding from what is determined renders the required left-eye view of 3D display, and according to The former webpage renders the required right-eye view of 3D display, wherein,
    Described enters screen processing, specially:
    The width of window for needing to render is obtained, the numerical value of width is denoted as:W;
    The coordinate in the X-direction of background graph region is obtained, numerical value is denoted as:X1;
    By the background graph region, left direction moves in left-eye view, and amount of movement K obtains the seat in new X-direction R1 numerical value is marked, R1=X1-W × K carries out 3D renderings using new background area, is formed and shown into screen, wherein, K is moving displacement Amount and the percentage of the width, K value ranges are 1%~15%;
    It is described it is micro- go out screen processing, specially:
    The width of window for needing to render is obtained, the numerical value of width is denoted as:W;
    Obtain picture, video area X-direction on coordinate, numerical value is denoted as:X2;
    By the picture, video area, right direction moves in left-eye view, and amount of movement J is obtained in new X-direction Coordinate R2 numerical value, R2=X2+W × J carry out 3D renderings using new picture, video area, and formation is micro- to go out to shield display, wherein, J For mobile displacement and the percentage of the width, J value ranges are 0.5%~10%;
    The larger screen that goes out is handled, specially:
    The width of window for needing to render is obtained, the numerical value of width is denoted as:W;
    The coordinate in the X-direction of button, choice box is obtained, numerical value is denoted as:X3;
    The button, choice box region are moved in left-eye view right direction, amount of movement G is obtained in new X-direction Coordinate R3 numerical value, R3=X3+W × G carry out 3D renderings using new button, choice box region, are formed and larger go out screen display Show, wherein, G is the percentage of mobile displacement and width described in window, and G value ranges are 5%~20%,
    Wherein, origin is the upper left corner of window, establishes X-axis with the horizontal direction of window, is built with the vertical direction of window Vertical Y-axis;
    The unit of each numerical value is pixel number.
  10. 10. according to claim 6 to 9 any one of them device, which is characterized in that control unit is further included, for by user The setting of depth queuing described in self-defined and real-time control.
  11. 11. a kind of system of 3Dization 2D web displayings, which is characterized in that including web page server, display client and have The controller of claim 6 to 10 any one of them device, it is the controller and the web page server, described aobvious Show that client is connected.
CN201711483107.6A 2017-12-29 2017-12-29 Method, device and system for displaying 3D (three-dimensional) 2D webpage Active CN108197248B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201711483107.6A CN108197248B (en) 2017-12-29 2017-12-29 Method, device and system for displaying 3D (three-dimensional) 2D webpage

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201711483107.6A CN108197248B (en) 2017-12-29 2017-12-29 Method, device and system for displaying 3D (three-dimensional) 2D webpage

Publications (2)

Publication Number Publication Date
CN108197248A true CN108197248A (en) 2018-06-22
CN108197248B CN108197248B (en) 2021-07-16

Family

ID=62587010

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201711483107.6A Active CN108197248B (en) 2017-12-29 2017-12-29 Method, device and system for displaying 3D (three-dimensional) 2D webpage

Country Status (1)

Country Link
CN (1) CN108197248B (en)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108959595A (en) * 2018-07-12 2018-12-07 腾讯科技(深圳)有限公司 Based on virtual and real Website construction and experiential method and its device

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102184082A (en) * 2011-05-20 2011-09-14 广州市数字视频编解码技术国家工程实验室研究开发与产业化中心 Method for realizing 3D (three dimensional) browser based on binocular parallax principle
CN102937968A (en) * 2012-10-11 2013-02-20 上海交通大学 Double-eye 3D (three-dimensional) realizing method and system based on Canvas
US20130088569A1 (en) * 2011-10-10 2013-04-11 Global Development Holding Ltd. Apparatuses, methods and systems for provision of 3d content over a communication network
CN104809137A (en) * 2014-01-28 2015-07-29 上海尚恩华科网络科技股份有限公司 Method and system for manufacturing three-dimensional webpage of two-dimensional webpage

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102184082A (en) * 2011-05-20 2011-09-14 广州市数字视频编解码技术国家工程实验室研究开发与产业化中心 Method for realizing 3D (three dimensional) browser based on binocular parallax principle
US20130088569A1 (en) * 2011-10-10 2013-04-11 Global Development Holding Ltd. Apparatuses, methods and systems for provision of 3d content over a communication network
CN102937968A (en) * 2012-10-11 2013-02-20 上海交通大学 Double-eye 3D (three-dimensional) realizing method and system based on Canvas
CN104809137A (en) * 2014-01-28 2015-07-29 上海尚恩华科网络科技股份有限公司 Method and system for manufacturing three-dimensional webpage of two-dimensional webpage

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108959595A (en) * 2018-07-12 2018-12-07 腾讯科技(深圳)有限公司 Based on virtual and real Website construction and experiential method and its device

Also Published As

Publication number Publication date
CN108197248B (en) 2021-07-16

Similar Documents

Publication Publication Date Title
EP3289761B1 (en) Stereoscopic display of objects
CN108282648B (en) VR rendering method and device, wearable device and readable storage medium
US11086396B2 (en) Depth-keying of web content
US10935788B2 (en) Hybrid virtual 3D rendering approach to stereovision
CN102184082B (en) Method for realizing 3D (three dimensional) browser based on binocular parallax principle
KR20130138177A (en) Displaying graphics in multi-view scenes
CN103412874B (en) Method and system for realizing three-dimensional page
CN102937968B (en) A kind of binocular 3D webpage implementation method based on Canvas and system
JP2017016577A (en) Information processor, and control method, and program, for the same
WO2014193418A1 (en) Three dimensional data visualization
US20140354633A1 (en) Image processing method and image processing device
CN108076208A (en) A kind of display processing method and device, terminal
CN104915373B (en) A kind of three-dimensional web page design method and device
JP2010259017A (en) Display device, display method and display program
US20120308115A1 (en) Method for Adjusting 3-D Images by Using Human Visual Model
CN108197248A (en) A kind of method, apparatus and system of 3Dization 2D web displayings
CN102984483B (en) A kind of three-dimensional user interface display system and method
CN116610213A (en) Interactive display method and device in virtual reality, electronic equipment and storage medium
US8817081B2 (en) Image processing apparatus, image processing method, and program
CN102780900B (en) Image display method of multi-person multi-view stereoscopic display
US20140198098A1 (en) Experience Enhancement Environment
KR20150016324A (en) Terminal for increasing visual comfort sensation of 3d object and control method thereof
Nocent et al. 3d displays and tracking devices for your browser: A plugin-free approach relying on web standards
US10484661B2 (en) Three-dimensional image generating device, three-dimensional image generating method, program, and information storage medium
Chen et al. An approach to support stereoscopic 3D web

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant