CN108197248B - Method, device and system for displaying 3D (three-dimensional) 2D webpage - Google Patents
Method, device and system for displaying 3D (three-dimensional) 2D webpage Download PDFInfo
- Publication number
- CN108197248B CN108197248B CN201711483107.6A CN201711483107A CN108197248B CN 108197248 B CN108197248 B CN 108197248B CN 201711483107 A CN201711483107 A CN 201711483107A CN 108197248 B CN108197248 B CN 108197248B
- Authority
- CN
- China
- Prior art keywords
- webpage
- eye view
- display
- screen
- rendering
- 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.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T15/00—3D [Three Dimensional] image rendering
- G06T15/005—General purpose rendering architectures
Abstract
The invention provides a method for displaying a 3D (three-dimensional) 2D webpage, which comprises the following steps: s1, acquiring request information of webpage 3D; s2, analyzing the 2D webpage, and separating a plurality of elements forming the 2D webpage; s3, different depth of field level set values corresponding to the elements are determined, one of a left eye view and a right eye view required by 3D display is rendered according to the depth of field level set values, and the other of the left eye view and the right eye view required by the 3D display is rendered according to an original webpage; and S4, sending the left eye view and the right eye view to a display unit for 3D display. The invention also discloses a device and a system for displaying the 3D 2D webpage. By implementing the method, the device and the system for displaying the 3D 2D webpage, the existing 2D webpage is converted into the left view and the right view based on binocular parallax in real time to be displayed, and 3D stereoscopic vision processing on all common webpages can be realized.
Description
Technical Field
The invention relates to the field of 2D webpage display, in particular to a method, a device and a system for displaying a 3D 2D webpage.
Background
With the rise of VR technology, users can watch 3D stereoscopically more conveniently, and the 'D' in the '3D' is the first letter of English word Dimension. 3D refers to three-dimensional space. Compared with the common 2D picture display, the 3D technology can make the picture become three-dimensional and vivid, the image is not limited to the screen plane any more, and the image seems to be capable of going out of the screen, so that the audience has a feeling of being personally on the scene.
Although the 3D display technology is classified in many ways, the most basic principle is similar, namely that the human eyes are used to receive different pictures respectively from left to right, and then the brain superimposes and reproduces image information to form an image with three-dimensional effects of front-back, up-down, left-right, far-near, and the like.
In the prior art, in a 3D state, a user needs all pictures to have 3D stereoscopic depth, especially 2D web pages, and hopes that the pictures can be automatically converted into 3D display, while in the prior art, only specially made videos and games have 3D effects.
Disclosure of Invention
In order to solve the above problems, the present invention provides a method, an apparatus, and a system for displaying a 3D 2D webpage.
The invention discloses a method for displaying a 3D (three-dimensional) 2D webpage, which comprises the following steps:
s1, acquiring request information of webpage 3D;
s2, analyzing the 2D webpage, and separating a plurality of elements forming the 2D webpage;
s3, determining different depth of field level setting values corresponding to the elements, rendering one of a left eye view and a right eye view required by 3D display according to the elements and the determined different depth of field level setting values, and rendering the other of the left eye view and the right eye view required by 3D display according to the original webpage;
and S4, sending the left eye view and the right eye view to a display unit for 3D display.
Further, the step S2 specifically includes:
analyzing the 2D webpage, and separating a plurality of elements forming the webpage, wherein the plurality of elements comprise: background pictures, tables, words, forms, pictures, videos, buttons, selection boxes.
Further, the step S3 specifically includes:
s31, setting the background image as a far field depth end, and performing screen entry processing;
s32, reserving the original default values of the 2D webpage for the forms, the characters and the forms, and not processing;
s33, setting the pictures and the videos as near field depth ends, and performing micro-screen-out processing;
and S34, setting the button and the selection frame as near field depth ends, and performing larger screen-out processing to float in front of a user.
Further, the step S3 is specifically: rendering a left eye view required by 3D display according to the plurality of elements and the determined corresponding different depth of field level setting values, and rendering a right eye view required by 3D display according to the original webpage, wherein,
the screen entry processing specifically comprises the following steps:
obtaining the width of a window needing to be rendered, and recording the width value as: w;
acquiring a coordinate in the X direction of the background image area, and recording the numerical value as X1;
moving the background image area to the left in a left eye view by a moving amount of K to obtain a new coordinate R1 value in the X direction, wherein R1 is X1-WxK, and performing 3D rendering by using the new background area to form an in-screen display, wherein K is the percentage of the moving displacement amount to the width, and the value range of K is 1% -15%;
the micro screen-out processing specifically comprises the following steps:
obtaining the width of a window needing to be rendered, and recording the width value as: w;
acquiring coordinates of the picture and the video area in the X direction, and recording the numerical value as X2;
moving the picture and video area to the right direction in a left eye view by a moving amount of J to obtain a new coordinate R2 numerical value in the X direction, wherein R2 is X2+ WxJ, and performing 3D rendering by using the new picture and video area to form micro-display screen display, wherein J is the percentage of the moving displacement amount to the width, and the value range of J is 0.5-10%;
the larger screen-out processing specifically comprises the following steps:
obtaining the width of a window needing to be rendered, and recording the width value as: w;
acquiring coordinates of the button and the selection frame in the X direction, and recording the numerical value as X3;
moving the button and the selection frame area to the right direction in the left eye view by a moving amount of G to obtain a new coordinate R3 numerical value in the X direction, wherein R3 is X3+ W multiplied by G, and performing 3D rendering by using the new button and the selection frame area to form a larger display screen, wherein G is the percentage of the moving displacement amount to the width, the value range of G is 5-20%,
the origin of the coordinates is the upper left corner of the window, the X axis is established in the horizontal direction of the window, and the Y axis is established in the vertical direction of the window;
the unit of each numerical value is the number of pixels.
Furthermore, the depth of field level setting value is customized by a user and is controlled in real time.
The invention discloses a device for displaying a 3D (three-dimensional) 2D webpage, which comprises:
the request information acquisition unit is used for acquiring the request information of webpage 3D;
the analysis unit is used for analyzing the 2D webpage and separating a plurality of elements forming the 2D webpage;
the rendering unit is used for determining different depth of field level setting values corresponding to the plurality of elements, rendering one of a left eye view and a right eye view required by 3D display according to the plurality of elements and the determined corresponding different depth of field level setting values, and rendering the other of the left eye view and the right eye view required by 3D display according to the original webpage;
and the drawing arranging unit is used for sending the left eye view and the right eye view to the display unit for 3D display.
Further, the parsing unit is specifically configured to:
analyzing the 2D webpage, and separating a plurality of elements forming the webpage, wherein the plurality of elements comprise: background pictures, tables, words, forms, pictures, videos, buttons, selection boxes.
Further, the rendering unit is specifically configured to: rendering a left eye view required by 3D display according to the plurality of elements and the determined corresponding different depth of field level setting values, and rendering a right eye view required by 3D display according to the original webpage, wherein,
the screen entry processing specifically comprises the following steps:
obtaining the width of a window needing to be rendered, and recording the width value as: w;
acquiring a coordinate in the X direction of the background image area, and recording the numerical value as X1;
moving the background image area to the left in a left eye view by a moving amount of K to obtain a new coordinate R1 value in the X direction, wherein R1 is X1-WxK, and performing 3D rendering by using the new background area to form an in-screen display, wherein K is the percentage of the moving displacement amount to the width, and the value range of K is 1% -15%;
the micro screen-out processing specifically comprises the following steps:
obtaining the width of a window needing to be rendered, and recording the width value as: w;
acquiring coordinates of the picture and the video area in the X direction, and recording the numerical value as X2;
moving the picture and video area to the right direction in a left eye view by a moving amount of J to obtain a new coordinate R2 numerical value in the X direction, wherein R2 is X2+ WxJ, and performing 3D rendering by using the new picture and video area to form micro-display screen display, wherein J is the percentage of the moving displacement amount to the width, and the value range of J is 0.5-10%;
the larger screen-out processing specifically comprises the following steps:
obtaining the width of a window needing to be rendered, and recording the width value as: w;
acquiring coordinates of the button and the selection frame in the X direction, and recording the numerical value as X3;
moving the button and the selection frame area to the right direction in the left eye view by a moving amount of G to obtain a new coordinate R3 numerical value in the X direction, wherein R3 is X3+ W multiplied by G, and performing 3D rendering by using the new button and the selection frame area to form larger display screen, wherein G is the percentage of the moving displacement amount to the window width, the value range of G is 5-20%,
the origin of the coordinates is the upper left corner of the window, the X axis is established in the horizontal direction of the window, and the Y axis is established in the vertical direction of the window;
the unit of each numerical value is the number of pixels.
Furthermore, the device for displaying the 3D 2D webpage also comprises a control unit, which is used for self-defining by a user and controlling the setting of the depth of field level in real time.
The invention discloses a 3D (three-dimensional) 2D webpage display system which comprises a webpage server, a display client and a controller with the device, wherein the controller is connected with the webpage server and the display client.
The implementation of the method, the device and the system for displaying the 3D 2D webpage has the following beneficial technical effects:
according to the method and the device, the current website development state does not need to be changed, only the 3D watching end is provided with the corresponding playing piece, the existing 2D webpage is converted and processed into the left eye view and the right eye view based on binocular parallax in real time to be presented, the 3D stereoscopic vision processing of all common webpages can be realized, and therefore the 3D webpage can be watched by naked eyes or the 3D webpage can be watched by devices such as VR glasses.
Drawings
In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly described below, and it is obvious that the drawings in the following description are only some embodiments of the present invention, and for those skilled in the art, other drawings can be obtained according to these drawings without creative efforts.
FIG. 1 is a flowchart illustrating a method for displaying a 3D 2D webpage according to a first embodiment of the present invention;
FIG. 2 is a flowchart illustrating a method for displaying a 3D 2D webpage according to a second embodiment of the present invention;
FIG. 3 is a flowchart illustrating a method for displaying a 3D 2D webpage according to a third embodiment of the present invention;
FIG. 4 is a block diagram of an apparatus for 3D 2D web page display according to a first embodiment of the present invention;
FIG. 5 is a block diagram of an apparatus for 3D 2D web page display according to a second embodiment of the present invention;
FIG. 6 is a block diagram of an apparatus for 3D 2D web page display according to a third embodiment of the present invention;
fig. 7 is a system block diagram of a 3D 2D web page display according to an embodiment of the present invention.
Detailed Description
The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
Referring to fig. 1, a method for displaying a 3D 2D webpage according to a first embodiment of the present invention includes:
s1, acquiring request information of webpage 3D;
a user accesses a server network address through a browser at a client to open a 2D webpage, a dialog box can pop up on the 2D webpage, whether the user needs a 3D 2D webpage or not is inquired, if the user needs, the request is sent in a mode of clicking a confirmation dialog box through a button, and therefore the request for sending the 3D 2D webpage is sent to a controller of a webpage display end.
S2, analyzing the 2D webpage, and separating a plurality of elements forming the 2D webpage;
parsing is performed by 2 sub-modules, i.e. HTML Parser (HTML Parser) and CSS Parser (CSS Parser).
At this time, the 2D webpage is parsed to separate a plurality of elements constituting the webpage, the plurality of elements including, for example and without limitation: background pictures, tables, words, forms, pictures, videos, buttons, selection boxes.
And adding a 3D processing engine for carrying out analysis processing on the existing webpage and then carrying out classification processing on the plurality of analyzed and separated elements.
Various fields as follows:
background graph >
< table. > Table >
< font
< img. > Picture </img >
Video
< button. > button >
< select. > selection box >
And S3, determining different depth of field level setting values corresponding to the elements, rendering a left eye view required by 3D display according to the elements and the determined different depth of field level setting values, and rendering a right eye view required by 3D display according to the original webpage.
And processing the existing webpage rendering, namely rendering the original webpage according to the original mode, and using the rendered webpage for the 3D right-eye view.
And adding a 3D rendering engine, performing 3D rendering processing in the webpage rendering process, and using the rendered webpage for the 3D left eye view.
More specifically, the left-eye view and the right-eye view required for 3D display are saved as corresponding left-and right-view files by the 3D rendering engine.
And S4, sending the left eye view and the right eye view to a display unit for 3D display.
When all the elements are processed, a rendering interface of the whole webpage is generated, a left view and a right view which need to display 3D are generated, the left view is displayed on the left eye of the VR, the right view is displayed on the right eye of the VR, parallax is achieved, and a user can experience a 3D effect.
Referring to fig. 2, a second embodiment of the method of the present invention, a method for displaying a 3D 2D webpage, includes most of the steps similar to those of the first embodiment, except that the step S3 specifically includes:
s31, setting the background image as a far field depth end, and performing screen entry processing;
entering a screen for processing, specifically: obtaining the width of a window needing to be rendered, and recording the width value as: w;
acquiring a coordinate in the X direction of the background image area, and recording the numerical value as X1;
moving the background image area to the left in the left eye view by a moving amount of K to obtain a new coordinate R1 value in the X direction, wherein R1 is X1-WxK, and performing 3D rendering by using the new background area to form an in-screen display, wherein K is the percentage of the moving displacement amount to the width, and the value range of K is 1% -15%;
and (3) micro screen-out processing, specifically:
obtaining the width of a window needing to be rendered, and recording the width value as: w;
acquiring coordinates of the picture and the video area in the X direction, and recording the numerical value as X2;
moving the picture and video area to the right direction in a left eye view by a moving amount of J to obtain a new coordinate R2 numerical value in the X direction, wherein R2 is X2+ WxJ, and performing 3D rendering by using the new picture and video area to form micro-display screen display, wherein J is the percentage of the moving displacement amount to the width, and the value range of J is 0.5-10%;
the larger screen-out processing specifically comprises:
obtaining the width of a window needing to be rendered, and recording the width value as: w;
acquiring coordinates of the button and the selection frame in the X direction, and recording the numerical value as X3;
moving the button and the selection frame area to the right direction in the left eye view by a moving amount of G to obtain a new coordinate R3 numerical value in the X direction, wherein R3 is X3+ W multiplied by G, and performing 3D rendering by using the new button and the selection frame area to form larger display screen, wherein G is the percentage of the moving displacement amount to the window width, the value range of G is 5-20%,
the origin of the coordinates is the upper left corner of the window, the X axis is established in the horizontal direction of the window, and the Y axis is established in the vertical direction of the window.
The numerical units are the number of pixels.
Wherein, go out the screen processing a little: taking the same picture and video region as an example, the picture and video region emerge outside the screen, and the area of the slightly-displayed picture and video region exceeds 15-25% of the area of the original picture and video region;
wherein, the larger screen-out processing: taking the same button and the selection frame area as an example, the button and the selection frame area appear outside the slightly-displayed picture and video area, and the area of the larger button and the larger selection frame area exceeds the area of the original button and the selection frame area by 50-200%.
In summary, the second embodiment only shifts the left-eye view and does not shift the right-eye view, thereby further embodying the 3D effect, wherein the 3D processing engine performs depth of field study and judgment on each field, performs screen entry processing on the background image, ensures that the background information is at the farthest end of the depth of field, does not process the contents of tables, characters, forms, and the like, and thus feels that the screen and the left-eye view are in the same plane. And finally, performing small screen-out processing on the contents such as videos and pictures, wherein the feeling of the contents can float on the screen, and finally performing large screen-out processing on operation fields such as buttons and selection frames, wherein the feeling of the contents completely float in front of human eyes.
Referring to fig. 3, a third embodiment of the method of the present invention, a method for displaying a 3D 2D webpage, has most of the steps similar to those of the first embodiment, except that there is a step S21 between the steps S2 and S3, where the depth level setting value is customized and controlled in real time by a user.
At this time, the 3D control module is added, the default processing of entering and exiting the screen in the above step is that K is 5%, J is 2.5%, and G is 10%, when the user needs to turn off the depth of field, the values are all set to 0, when the user feels that the parallax is too large, the values can be reduced appropriately, and when the user feels that the parallax is too small, the values can be increased appropriately, so that the user experience is improved effectively.
The third embodiment further improves the user's free choice and is more adaptive.
Although the third embodiment described above illustrates that the depth level setting value is customized by the user and controlled in real time between steps S2 and S3, it should be understood that the customization of the depth level is not limited to between steps S2 and S3, and for example, the user may customize and control the depth level setting value in real time according to the user experience after step S4, so as to re-output the 3D display image suitable for the user according to the user-customized depth level setting value.
The following describes an apparatus for implementing the above method, and the non-recorded parts of the apparatus refer to the description of the above method.
Referring to fig. 4, a device 1 for displaying a 3D 2D webpage according to a first embodiment includes:
a request information obtaining unit 10, configured to obtain request information for web page 3D;
the analysis unit 20 is configured to analyze the 2D webpage and separate a plurality of elements forming the webpage;
and the rendering unit 30 is configured to determine different depth-of-field level setting values corresponding to the multiple elements, render a left-eye view required for 3D display according to the multiple elements and the determined different depth-of-field level setting values, and render a right-eye view required for 3D display according to the original webpage.
And processing the existing webpage rendering, namely rendering the original webpage according to the original mode, and using the rendered webpage for the 3D right-eye view.
And adding a 3D rendering engine, performing 3D rendering processing in the webpage rendering process, and storing the left view and the right view as corresponding left view and right view files after the left view and the right view are manufactured.
And a drawing arranging unit 40 for sending the left eye view and the right eye view to the display unit for 3D display.
The parsing unit 20 is specifically configured to:
analyzing the 2D webpage, and separating a plurality of elements forming the webpage, wherein the plurality of elements comprise: background pictures, tables, text, forms, pictures, videos, buttons, selection boxes, and the like.
When all the elements are processed, a rendering interface of the whole webpage is generated, a left view and a right view which need to display 3D are generated, the left view is displayed on the left eye of the VR, the right view is displayed on the right eye of the VR, parallax is achieved, and a user can experience a 3D effect.
Referring to fig. 5, in a second embodiment, a device 1 for displaying a 3D 2D webpage includes most of the functional modules the same as those of the first embodiment, except that:
the rendering unit 30 specifically includes:
the screen entry processing unit 301 is configured to set the background image as a far-end of depth of field, and perform screen entry processing;
a retaining unit 302, configured to retain the original default values of the tables, the characters, and the forms in the 2D webpage without processing;
a micro-screen-out processing unit 303, configured to set the picture and the video as a depth-of-field sub-near end, and perform micro-screen-out processing;
and the larger screen-out processing unit 304 is used for setting the buttons and the selection frame as the near field of view, performing larger screen-out display and floating in front of the user.
And (3) screen entry processing, wherein the following numerical units are pixel numbers, specifically:
obtaining the width of a window needing to be rendered, and recording the width value as: w;
acquiring a coordinate in the X direction of the background image area, and recording the numerical value as X1;
moving the background image area to the left in a left eye view by a moving amount of K to obtain a new coordinate R1 value in the X direction, wherein R1 is X1-WxK, and performing 3D rendering by using the new background area to form an in-screen display, wherein K is the percentage of the moving displacement amount to the width, and the value range of K is 1% -15%;
and (3) micro screen-out processing, specifically:
obtaining the width of a window needing to be rendered, and recording the width value as: w;
acquiring coordinates of the picture and the video area in the X direction, and recording the numerical value as X2;
moving the picture and video area to the right direction in a left eye view by a moving amount of J to obtain a new coordinate R2 numerical value in the X direction, wherein R2 is X2+ WxJ, and performing 3D rendering by using the new picture and video area to form micro-display screen display, wherein J is the percentage of the moving displacement amount to the width, and the value range of J is 0.5-10%;
for larger screen-out processing, the following numerical units are all the pixel numbers, specifically:
obtaining the width of a window needing to be rendered, and recording the width value as: w;
acquiring coordinates of the button and the selection frame in the X direction, and recording the numerical value as X3;
moving the button and the selection frame area to the right direction in the left eye view by a moving amount of G to obtain a new coordinate R3 numerical value in the X direction, wherein R3 is X3+ W multiplied by G, and performing 3D rendering by using the new button and the selection frame area to form larger display screen, wherein G is the percentage of the moving displacement amount to the window width, the value range of G is 5-20%,
the origin of the coordinates is the upper left corner of the window, the X axis is established in the horizontal direction of the window, and the Y axis is established in the vertical direction of the window.
Wherein, go out the screen processing a little: taking the same picture and video region as an example, the picture and video region emerge outside the screen, and the area of the slightly-displayed picture and video region exceeds 15-25% of the area of the original picture and video region;
wherein, the larger screen-out processing: taking the same button and selection frame area as an example, the button and selection frame area appears outside the picture and video area of the micro-screen-out processing, and the area of the larger button and selection frame area exceeds that of the original button and selection frame area by 50% -200%.
In summary, the second embodiment further embodies the 3D effect, in which the 3D processing engine performs depth of field determination on each field, performs screen entry processing on the background image, ensures that the background information is at the farthest end of the depth of field, and does not process the contents of tables, characters, forms, and the like, so that the feeling and the screen are on the same level. And finally, performing small screen-out processing on the contents such as videos and pictures, wherein the feeling of the contents can float on the screen, and finally performing large screen-out processing on operation fields such as buttons and selection frames, wherein the feeling of the contents completely float in front of human eyes.
Referring to fig. 6, in a third embodiment, a device 1 for displaying a 3D 2D webpage, most of the functional modules are the same as those in the first embodiment of the device, except that,
a control unit 25 is further provided between the parsing unit 20 and the rendering unit 30, for user-defined and real-time control of the depth level setting.
At this time, the 3D control module is added, the default processing of entering and exiting the screen in the above step is that K is 5%, J is 2.5%, and G is 10%, when the user needs to turn off the depth of field, the values are all set to 0, when the user feels that the parallax is too large, the values can be reduced appropriately, and when the user feels that the parallax is too small, the values can be increased appropriately, so that the user experience is improved effectively.
The third embodiment further improves the user's free choice and is more adaptive.
Referring to fig. 7, a system 100 for 3D 2D web page display includes a web page server 200, a display client 300, and a controller 350, wherein the controller 350 is connected to the web page server 200 and the display client 300, and the controller 350 has the device 1.
The controller 350 allocates corresponding left and right off-screen buffers in the memory, and the left and right off-screen buffers are used for storing the analyzed and rendered left eye view and right eye view;
the implementation of the method, the device and the system for displaying the 3D 2D webpage has the following beneficial technical effects:
according to the method and the device, the current website development state does not need to be changed, only the 3D watching end is provided with the corresponding playing piece, the existing 2D webpage is converted and processed into the left view and the right view based on binocular parallax in real time to be presented, and the 3D stereoscopic vision processing of all common webpages can be realized, so that the 3D webpages can be watched by naked eyes or the 3D webpages can be watched by devices such as VR glasses.
It should be noted that, in the above embodiments, a right-eye view for 3D display may be rendered according to an original webpage, and a left-eye view may be rendered according to a plurality of elements separated by analysis and different depth-of-field level setting values corresponding to the elements, but for those skilled in the art, it is easy to think of another embodiment for forming a left-eye view for 3D display according to an original webpage and a right-eye view according to a plurality of elements separated by analysis and different depth-of-field level setting values corresponding to the elements, and details thereof are not described herein again.
As will be appreciated by one skilled in the art, embodiments of the present invention may be provided as a method, system, or computer program product. Accordingly, the present invention may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present invention may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.
The present invention is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the invention. It will be understood that each flow and/or block of the flow diagrams and/or block diagrams, and combinations of flows and/or blocks in the flow diagrams and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.
These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.
While preferred embodiments of the present invention have been described, additional variations and modifications in those embodiments may occur to those skilled in the art once they learn of the basic inventive concepts. Therefore, it is intended that the appended claims be interpreted as including preferred embodiments and all such alterations and modifications as fall within the scope of the invention.
It will be apparent to those skilled in the art that various modifications and variations can be made in the embodiments of the present invention without departing from the spirit or scope of the embodiments of the invention. Thus, if such modifications and variations of the embodiments of the present invention fall within the scope of the claims of the present invention and their equivalents, the present invention is also intended to encompass such modifications and variations.
Claims (7)
1. A method for displaying a 3D 2D webpage is characterized by comprising the following steps:
s1, acquiring request information of webpage 3D;
s2, analyzing the 2D webpage, and separating a plurality of elements forming the 2D webpage;
s3, determining different depth of field level setting values corresponding to the elements, rendering one of a left eye view and a right eye view required by 3D display according to the elements and the determined different depth of field level setting values, and rendering the other of the left eye view and the right eye view required by the 3D display according to an original webpage;
s4, sending the left eye view and the right eye view to a display unit for 3D display,
the step S2 specifically includes: analyzing the 2D webpage, and separating a plurality of elements forming the webpage, wherein the plurality of elements comprise: background pictures, tables, words, forms, pictures, videos, buttons, selection boxes,
the step S3 specifically includes:
s31, setting the background image as a far field depth end, and performing screen entry processing;
s32, reserving the original default values of the 2D webpage for the forms, the characters and the forms, and not processing;
s33, setting the pictures and the videos as near field depth ends, and performing micro-screen-out processing;
and S34, setting the button and the selection frame as near field depth ends, and performing larger screen-out processing to float in front of a user.
2. The method according to claim 1, wherein the step S3 specifically includes: rendering a left eye view required by 3D display according to the plurality of elements and the determined corresponding different depth of field level setting values, and rendering a right eye view required by 3D display according to the original webpage, wherein,
the screen entry processing specifically comprises the following steps: obtaining the width of a window needing to be rendered, and recording the width value as: w;
obtaining the coordinates in the X direction of the background image area, and recording the numerical values as: x1;
moving the background image area to the left in a left eye view by a moving amount of K to obtain a new coordinate R1 value in the X direction, wherein R1 is X1-WxK, and performing 3D rendering by using the new background area to form an in-screen display, wherein K is the percentage of the moving displacement amount to the width, and the value range of K is 1% -15%;
the micro screen-out processing specifically comprises the following steps:
obtaining the width of a window needing to be rendered, and recording the width value as: w;
acquiring coordinates of the picture and the video area in the X direction, and recording numerical values as: x2;
moving the picture and video area to the right direction in a left eye view by a moving amount of J to obtain a new coordinate R2 numerical value in the X direction, wherein R2 is X2+ WxJ, and performing 3D rendering by using the new picture and video area to form micro-display screen display, wherein J is the percentage of the moving displacement amount to the width, and the value range of J is 0.5-10%;
the larger screen-out processing specifically comprises the following steps:
obtaining the width of a window needing to be rendered, and recording the width value as: w;
coordinates in the X direction of the button and the selection frame are obtained, and numerical values are recorded as: x3;
moving the button and the selection frame area to the right direction in the left eye view by a moving amount of G to obtain a new coordinate R3 numerical value in the X direction, wherein R3 is X3+ W multiplied by G, and performing 3D rendering by using the new button and the selection frame area to form a larger display screen, wherein G is the percentage of the moving displacement amount to the width, the value range of G is 5-20%,
the origin of the coordinates is the upper left corner of the window, the X axis is established in the horizontal direction of the window, and the Y axis is established in the vertical direction of the window; the unit of each numerical value is the number of pixels.
3. The method according to any one of claims 1 to 2, wherein the depth level setting is customized and controlled in real time by a user.
4. An apparatus for 3D 2D web page display, comprising:
the request information acquisition unit is used for acquiring the request information of webpage 3D;
the analysis unit is used for analyzing the 2D webpage and separating a plurality of elements forming the 2D webpage;
the rendering unit is used for determining different depth of field level setting values corresponding to the plurality of elements, rendering one of a left eye view and a right eye view required by 3D display according to the plurality of elements and the determined corresponding different depth of field level setting values, and rendering the other of the left eye view and the right eye view required by the 3D display according to an original webpage;
the drawing arranging unit is used for sending the left eye view and the right eye view to the display unit for 3D display,
the parsing unit is specifically configured to: analyzing the 2D webpage, and separating a plurality of elements forming the webpage, wherein the plurality of elements comprise: background pictures, tables, words, forms, pictures, videos, buttons, selection boxes,
the rendering unit specifically includes: the screen entry processing unit is used for setting the background image as a far-end of field depth and performing screen entry processing;
the reservation unit is used for reserving the original default values of the 2D webpage for the forms, the characters and the forms without processing;
the micro-screen-out processing unit is used for setting the pictures and the videos as near-end depth of field and carrying out micro-screen-out processing;
and the larger screen-out processing unit is used for setting the buttons and the selection frame as near field depth ends to perform larger screen-out processing and float in front of a user.
5. The apparatus according to claim 4, wherein the rendering unit is specifically configured to: rendering a left eye view required by 3D display according to the plurality of elements and the determined corresponding different depth of field level setting values, and rendering a right eye view required by 3D display according to the original webpage, wherein,
the screen entry processing specifically comprises the following steps:
obtaining the width of a window needing to be rendered, and recording the width value as: w;
obtaining the coordinates in the X direction of the background image area, and recording the numerical values as: x1;
moving the background image area to the left in a left eye view by a moving amount of K to obtain a new coordinate R1 value in the X direction, wherein R1 is X1-WxK, and performing 3D rendering by using the new background area to form an in-screen display, wherein K is the percentage of the moving displacement amount to the width, and the value range of K is 1% -15%;
the micro screen-out processing specifically comprises the following steps:
obtaining the width of a window needing to be rendered, and recording the width value as: w;
acquiring coordinates of the picture and the video area in the X direction, and recording the numerical value as X2;
moving the picture and video area to the right direction in a left eye view by a moving amount of J to obtain a new coordinate R2 numerical value in the X direction, wherein R2 is X2+ WxJ, and performing 3D rendering by using the new picture and video area to form micro-display screen display, wherein J is the percentage of the moving displacement amount to the width, and the value range of J is 0.5-10%;
the larger screen-out processing specifically comprises the following steps:
obtaining the width of a window needing to be rendered, and recording the width value as: w;
acquiring coordinates of the button and the selection frame in the X direction, and recording the numerical value as X3;
moving the button and the selection frame area to the right in the left eye view by a moving amount of G to obtain a new coordinate R3 numerical value in the X direction, wherein R3 is X3+ W × G, and performing 3D rendering by using the new button and the selection frame area to form larger display on the screen, wherein G is the percentage of the moving displacement amount to the width of the window, and the value range of G is 5% -20%, wherein the origin of the coordinate is the upper left corner of the window, the X axis is established in the horizontal direction of the window, and the Y axis is established in the vertical direction of the window; the unit of each numerical value is the number of pixels.
6. The apparatus according to any one of claims 4 to 5, further comprising a control unit for user-defined and real-time control of the setting of the depth level.
7. A system for 3D 2D web page display, comprising a web page server, a display client, and a controller having the apparatus of any one of claims 4 to 6, wherein the controller is connected to both the web page server and the display client.
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 CN108197248A (en) | 2018-06-22 |
| CN108197248B true 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) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108959595B (en) * | 2018-07-12 | 2023-05-23 | 腾讯科技（深圳）有限公司 | Website construction and experience method and device based on virtual and reality |
Citations (3)
| 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 |
| CN104809137A (en) * | 2014-01-28 | 2015-07-29 | 上海尚恩华科网络科技股份有限公司 | Method and system for manufacturing three-dimensional webpage of two-dimensional webpage |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| 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 |
-
2017
- 2017-12-29 CN CN201711483107.6A patent/CN108197248B/en active Active
Patent Citations (3)
| 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 |
| CN104809137A (en) * | 2014-01-28 | 2015-07-29 | 上海尚恩华科网络科技股份有限公司 | Method and system for manufacturing three-dimensional webpage of two-dimensional webpage |
Also Published As
| Publication number | Publication date |
|---|---|
| CN108197248A (en) | 2018-06-22 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US11086396B2 (en) | Depth-keying of web content | |
| US8930838B2 (en) | Display apparatus and display method thereof | |
| EP2332340B1 (en) | A method of processing parallax information comprised in a signal | |
| KR102121389B1 (en) | Glassless 3d display apparatus and contorl method thereof | |
| KR20130138177A (en) | Displaying graphics in multi-view scenes | |
| Jung et al. | Visual comfort improvement in stereoscopic 3D displays using perceptually plausible assessment metric of visual comfort | |
| JP5476910B2 (en) | Image generating apparatus, image generating method, and program | |
| US20140354633A1 (en) | Image processing method and image processing device | |
| US9972139B2 (en) | Image processing apparatus, image processing method and program | |
| JP5396877B2 (en) | Image processing apparatus, program, image processing method, and recording method | |
| US20120308115A1 (en) | Method for Adjusting 3-D Images by Using Human Visual Model | |
| JP2010259017A (en) | Display device, display method and display program | |
| CN108197248B (en) | Method, device and system for displaying 3D (three-dimensional) 2D webpage | |
| US9479766B2 (en) | Modifying images for a 3-dimensional display mode | |
| KR20140004393A (en) | Display apparatus and control method thereof | |
| CN102281423B (en) | 3D (Dimension) video field frequency conversion system and field frequency conversion method thereof | |
| US8817081B2 (en) | Image processing apparatus, image processing method, and program | |
| CN105432081B (en) | Three-dimensional image generation device, three-dimensional image generation method, program, and information storage medium | |
| US9547933B2 (en) | Display apparatus and display method thereof | |
| JP2010259022A (en) | Display device, display method, and display program | |
| JP2011082698A (en) | Image generation device, image generation method, and program | |
| Chen et al. | An approach to support stereoscopic 3D web | |
| CN116610213A (en) | Interactive display method and device in virtual reality, electronic equipment and storage medium | |
| Li et al. | Just noticeable disparity difference model for 3D displays | |
| US20180124373A1 (en) | Method for providing continuous motion parallax effect using an auto-stereoscopic display, corresponding device, computer program product and computer-readable carrier medium |
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 |